/*!
 * Pagayo Design System - Webshop (fresh)
 * E-commerce Webshop
 * Theme: Light + Blue Accent
 * Generated: 2026-03-27T14:52:48.286Z
 * (c) 2026 Pagayo
 *
 * CSS @layer order: reset → tokens → base → components → contexts → utilities → tenant
 *
 * Tenant overrides (inject in tenant layer):
 * :root {
 *   --tenant-accent: #your-brand-color;
 *   --tenant-font-main: 'Your Font', sans-serif;
 * }
 */

@layer reset, tokens, base, components, contexts, utilities, tenant;

@layer reset {
/**
 * CSS RESET
 * Modern browser reset gebaseerd op Josh Comeau's CSS Reset
 * + aangepaste Pagayo defaults
 * 
 * AI-NOTE: Dit bestand wordt ALTIJD als eerste geladen.
 * Niet aanpassen tenzij je een browser bug fixt.
 * 
 * @see https://www.joshwcomeau.com/css/custom-css-reset/
 */

/* ===== BOX SIZING ===== */
*, *::before, *::after {
  box-sizing: border-box;
}

/* ===== MARGIN RESET ===== */
* {
  margin: 0;
}

/* ===== HTML DEFAULTS ===== */
html {
  font-family: var(--font-sans, 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
  font-size: 100%;
  scroll-behavior: smooth;
}

/* ===== BODY DEFAULTS ===== */
body {
  font-family: var(--font-sans, 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
  font-size: var(--font-size-base, 1rem);
  line-height: var(--line-height-normal, 1.5);
  color: var(--text-primary);
  background-color: var(--background);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
  min-height: 100dvh;
}

/* ===== MEDIA DEFAULTS ===== */
img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}

/* ===== FORM RESET ===== */
input, button, textarea, select {
  font: inherit;
  color: inherit;
}

/* ===== BUTTON RESET ===== */
button {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

/* ===== TEXT OVERFLOW ===== */
p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}

/* ===== HEADING RESET ===== */
h1, h2, h3, h4, h5, h6 {
  font-size: inherit;
  font-weight: inherit;
}

/* ===== LIST RESET ===== */
ul, ol {
  list-style: none;
  padding: 0;
}

/* ===== LINK RESET ===== */
a {
  color: inherit;
  text-decoration: none;
}

/* ===== TABLE RESET ===== */
table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* ===== ROOT STACKING CONTEXT ===== */
#root, #__next, #app {
  isolation: isolate;
}

/* ===== REDUCED MOTION ===== */
@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;
  }
}

/* ===== FOCUS VISIBLE ===== */
:focus:not(:focus-visible) {
  outline: none;
}

:focus-visible {
  outline: 2px solid var(--accent, #f5a623);
  outline-offset: 2px;
}

/* ===== SELECTION ===== */
::selection {
  background: var(--accent, #f5a623);
  color: var(--bg-deep, #0a0a0f);
}

}

@layer tokens {
/**
 * BASE TOKENS
 * Gedeelde design tokens die NIET per theme variëren
 * 
 * AI-NOTE: Deze tokens zijn theme-onafhankelijk en worden
 * altijd geladen vóór de theme-specifieke tokens.
 * 
 * Bevat:
 * - Spacing scale
 * - Border radius
 * - Shadows
 * - Typography scale
 * - Transitions
 * - Z-index scale
 */

:root {
  /* ===== SPACING SCALE (4px base) ===== */
  --space-0: 0;
  --space-0-5: 0.125rem;  /* 2px - micro borders, fine-tuning */
  --space-1: 0.25rem;   /* 4px */
  --space-1-5: 0.375rem;  /* 6px - pill padding, tight gaps */
  --space-2: 0.5rem;    /* 8px */
  --space-3: 0.75rem;   /* 12px */
  --space-4: 1rem;      /* 16px */
  --space-5: 1.25rem;   /* 20px */
  --space-6: 1.5rem;    /* 24px */
  --space-8: 2rem;      /* 32px */
  --space-10: 2.5rem;   /* 40px */
  --space-12: 3rem;     /* 48px */
  --space-16: 4rem;     /* 64px */
  --space-20: 5rem;     /* 80px */
  --space-24: 6rem;     /* 96px */

  /* ===== BORDER RADIUS ===== */
  --radius-none: 0;
  --radius-sm: 0.25rem;   /* 4px - subtle rounding */
  --radius-md: 0.5rem;    /* 8px - buttons, inputs */
  --radius-lg: 0.75rem;   /* 12px - cards */
  --radius-xl: 1rem;      /* 16px - modals */
  --radius-2xl: 1.5rem;   /* 24px - large containers */
  --radius-full: 9999px;  /* Pills, avatars */

  /* ===== SHADOWS (dark-mode optimized) ===== */
  /* Shadows zijn subtiel in dark mode, meer prominent in light mode */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.15);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.2), 
               0 2px 4px -2px rgba(0, 0, 0, 0.15);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.25), 
               0 4px 6px -4px rgba(0, 0, 0, 0.2);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.3), 
               0 8px 10px -6px rgba(0, 0, 0, 0.25);
  
  /* Glow shadows (voor accent elementen) */
  --shadow-glow-sm: 0 0 10px var(--accent-glow, rgba(245, 166, 35, 0.15));
  --shadow-glow-md: 0 0 20px var(--accent-glow, rgba(245, 166, 35, 0.2));
  --shadow-glow-lg: 0 0 30px var(--accent-glow, rgba(245, 166, 35, 0.25));

  /* ===== TYPOGRAPHY SCALE ===== */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', Consolas, monospace;
  
  /* Font sizes met line-height */
  --text-micro: 0.5625rem;  /* 9px - ultra-compact labels */
  --text-2xs: 0.625rem;   /* 10px - badges, timestamps */
  --text-2xs-plus: 0.6875rem; /* 11px - compact UI, meta text */
  --text-xs: 0.75rem;     /* 12px */
  --text-xs-plus: 0.8125rem; /* 13px - compact table data */
  --text-sm: 0.875rem;    /* 14px */
  --text-sm-plus: 0.9375rem; /* 15px - slightly larger body */
  --text-base: 1rem;      /* 16px */
  --text-lg: 1.125rem;    /* 18px */
  --text-xl: 1.25rem;     /* 20px */
  --text-2xl: 1.5rem;     /* 24px */
  --text-2xl-plus: 1.75rem; /* 28px - stat display values */
  --text-3xl: 1.875rem;   /* 30px */
  --text-4xl: 2.25rem;    /* 36px */
  --text-5xl: 3rem;       /* 48px */
  --text-6xl: 4.5rem;     /* 72px - hero/display numbers */
  
  /* Line heights */
  --leading-none: 1;
  --leading-tight: 1.25;
  --leading-snug: 1.375;
  --leading-normal: 1.5;
  --leading-relaxed: 1.625;
  --leading-loose: 2;
  
  /* Font weights */
  --font-normal: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;

  /* ===== TRANSITIONS ===== */
  --duration-fast: 100ms;
  --duration-normal: 200ms;
  --duration-slow: 300ms;
  --duration-slower: 500ms;
  
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  
  /* Shorthand transitions */
  --transition-fast: var(--duration-fast) var(--ease-out);
  --transition-normal: var(--duration-normal) var(--ease-out);
  --transition-slow: var(--duration-slow) var(--ease-out);

  /* ===== Z-INDEX SCALE ===== */
  --z-below: -1;
  --z-base: 0;
  --z-dropdown: 10;
  --z-sticky: 20;
  --z-fixed: 30;
  --z-modal-backdrop: 40;
  --z-modal: 50;
  --z-popover: 60;
  --z-tooltip: 70;
  --z-toast: 80;
  --z-max: 9999;

  /* ===== BREAKPOINTS (for reference) ===== */
  /* Use in media queries, not as CSS variables */
  /* --bp-sm: 640px;   */
  /* --bp-md: 768px;   */
  /* --bp-lg: 1024px;  */
  /* --bp-xl: 1280px;  */
  /* --bp-2xl: 1536px; */

  /* ===== CONTROL SIZING ===== */
  /* Universeel sizing systeem voor ALLE interactieve elementen.
     Buttons, inputs, selects, en andere controls gebruiken DEZELFDE
     hoogte zodat ze altijd netjes op één lijn staan. */
  
  /* Heights */
  --control-height-sm: 2rem;      /* 32px — compact/inline */
  --control-height-md: 2.5rem;    /* 40px — standaard */
  --control-height-lg: 3rem;      /* 48px — prominent/hero */
  
  /* Padding horizontal (per size) */
  --control-padding-sm: var(--space-2);    /* 8px */
  --control-padding-md: var(--space-3);    /* 12px */
  --control-padding-lg: var(--space-4);    /* 16px */
  
  /* Font sizes (per control size) */
  --control-font-sm: var(--text-xs);       /* 12px */
  --control-font-md: var(--text-sm);       /* 14px */
  --control-font-lg: var(--text-base);     /* 16px */
  
  /* Icon sizes (per control size) */
  --control-icon-sm: 16px;
  --control-icon-md: 20px;
  --control-icon-lg: 24px;

  /* ===== PAGE TITLE SIZING ===== */
  /* Universele titels voor admin pagina's */
  --page-title-size: var(--text-2xl);         /* 24px — h1 op elke pagina */
  --page-title-weight: var(--font-semibold);  /* 600 */
  --section-title-size: var(--text-lg);       /* 18px — sectie headers */
  --section-title-weight: var(--font-semibold);
  --card-title-size: var(--text-base);        /* 16px — card/form section headers */
  --card-title-weight: var(--font-medium);    /* 500 */

  /* ===== CONTENT WIDTHS ===== */
  --content-xs: 20rem;    /* 320px */
  --content-sm: 24rem;    /* 384px */
  --content-md: 28rem;    /* 448px */
  --content-lg: 32rem;    /* 512px */
  --content-xl: 36rem;    /* 576px */
  --content-2xl: 42rem;   /* 672px */
  --content-3xl: 48rem;   /* 768px */
  --content-4xl: 56rem;   /* 896px */
  --content-5xl: 64rem;   /* 1024px */
  --content-6xl: 72rem;   /* 1152px */
  --content-7xl: 80rem;   /* 1280px */
  --content-full: 100%;

  /* ===== BRAND COLORS (third-party) ===== */
  /* Officiële merkenkleuren — theme-onafhankelijk */
  --brand-whatsapp: #25D366;
  --brand-facebook: #1877F2;
  --brand-tiktok: #000000;      /* of #EE1D52 voor de rode accent */
  --brand-instagram: #E4405F;
}

/**
 * THEME: fresh
 * Light-first design met blue accent - modern en helder Pagayo theme
 * 
 * Mode: light
 * Generated: 2026-03-27T14:52:48.205Z
 * 
 * AI-NOTE: Dit bestand is GEGENEREERD. Wijzig niet handmatig.
 * Wijzig src/themes/fresh.json en run `npm run build`.
 */

:root {
  /* ===== BACKGROUND LAYERS ===== */
  --bg-deep: #ffffff;
  --bg-surface: #f6f8fa;
  --bg-elevated: #edf1f5;
  --bg-hover: #e8ecf2;
  --bg-active: #e8eaf1;
  --background: #ffffff;

  /* ===== ACCENT ===== */
  --accent: #2563eb;
  --accent-light: #4f79ff;
  --accent-dim: #004ed1;
  --accent-glow: rgb(37 99 235 / 0.12);

  /* ===== TEXT ===== */
  --text-primary: #0f172a;
  --text-secondary: rgb(15 23 42 / 0.75);
  --text-muted: rgb(15 23 42 / 0.5);
  --text-disabled: rgb(15 23 42 / 0.35);

  /* ===== SEMANTIC - SUCCESS ===== */
  --success: #22c55e;
  --success-light: #3bd46c;
  --success-dim: rgb(34 197 94 / 0.1);

  /* ===== SEMANTIC - WARNING ===== */
  --warning: #f59e0b;
  --warning-light: #ffac24;
  --warning-dim: rgb(245 158 11 / 0.1);

  /* ===== SEMANTIC - ERROR ===== */
  --error: #ef4444;
  --error-light: #ff5451;
  --error-dim: rgb(239 68 68 / 0.1);

  /* ===== SEMANTIC - INFO ===== */
  --info: #3b82f6;
  --info-light: #5190ff;
  --info-dim: rgb(59 130 246 / 0.1);

  /* ===== SEMANTIC - MEMBER ===== */
  --member: #6366f1;
  --member-light: #7473ff;
  --member-dark: #2f44c8;
  --member-dim: rgb(99 102 241 / 0.1);

  /* ===== BORDERS ===== */
  --border: rgb(15 23 42 / 0.15);
  --border-light: rgb(15 23 42 / 0.22499999999999998);
  --border-strong: rgb(15 23 42 / 0.375);

}


}

@layer components {
/* ===== Component: buttons ===== */
/* buttons/_base.css */
/**
 * COMPONENT: Buttons - Base
 * Gedeelde button styling voor alle varianten
 * 
 * AI-NOTE: Buttons zijn het meest gebruikte interactieve element.
 * Alle variants erven van deze base. Gebruik semantic tokens.
 * 
 * VARIANTS: primary, secondary, ghost, destructive
 * SIZES: sm, md (default), lg
 * STATES: default, hover, active, disabled, loading
 */

/* ===== BASE BUTTON ===== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  
  /* Sizing */
  height: 40px;
  padding: 0 var(--space-4);
  min-width: 80px;
  
  /* Typography */
  font-family: var(--tenant-font-main, var(--font-sans));
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  line-height: 1;
  white-space: nowrap;
  
  /* Shape */
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  
  /* Interaction */
  cursor: pointer;
  user-select: none;
  
  /* Performance */
  transition: 
    background-color var(--transition-fast),
    border-color var(--transition-fast),
    color var(--transition-fast),
    box-shadow var(--transition-fast),
    transform var(--transition-fast);
}

/* ===== SIZE VARIANTS ===== */
.btn--sm {
  height: 32px;
  padding: 0 var(--space-3);
  font-size: var(--text-xs);
  min-width: 64px;
}

.btn--lg {
  height: 48px;
  padding: 0 var(--space-6);
  font-size: var(--text-base);
  min-width: 100px;
}

/* ===== ICON BUTTONS ===== */
.btn--icon {
  width: 40px;
  min-width: 40px;
  padding: 0;
}

.btn--icon.btn--sm {
  width: 32px;
  min-width: 32px;
}

.btn--icon.btn--lg {
  width: 48px;
  min-width: 48px;
}

/* ===== FULL WIDTH ===== */
.btn--full {
  width: 100%;
}

/* ===== DISABLED STATE ===== */
.btn:disabled,
.btn[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* ===== LOADING STATE ===== */
.btn--loading {
  position: relative;
  color: transparent !important;
  pointer-events: none;
}

.btn--loading::after {
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
}

/* ===== FOCUS VISIBLE ===== */
.btn:focus-visible {
  outline: 2px solid var(--tenant-accent, var(--accent));
  outline-offset: 2px;
}

/* ===== BUTTON GROUP ===== */
.btn-group {
  display: inline-flex;
}

.btn-group .btn {
  border-radius: 0;
}

.btn-group .btn:first-child {
  border-radius: var(--radius-md) 0 0 var(--radius-md);
}

.btn-group .btn:last-child {
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

.btn-group .btn:not(:last-child) {
  border-right-width: 0;
}

/* ===== BUTTON WITH ICON ===== */
.btn__icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.btn--sm .btn__icon {
  width: 14px;
  height: 14px;
}

.btn--lg .btn__icon {
  width: 20px;
  height: 20px;
}

/* buttons/destructive.css */
/**
 * COMPONENT: Button - Destructive
 * Button voor destructieve acties (delete, remove, etc.)
 * 
 * AI-NOTE: Destructive buttons zijn voor acties die niet ongedaan kunnen worden.
 * Gebruik rood/error kleur. Vaak met confirm dialog.
 */

.btn--destructive {
  background: var(--error);
  color: #fff;
  border-color: var(--error);
}

.btn--destructive:hover:not(:disabled) {
  background: var(--error-light);
  border-color: var(--error-light);
  box-shadow: 0 0 10px rgba(248, 113, 113, 0.25);
}

.btn--destructive:active:not(:disabled) {
  background: #dc2626;
  border-color: #dc2626;
  transform: scale(0.98);
}

/* Outline variant */
.btn--destructive-outline {
  background: transparent;
  color: var(--error);
  border-color: var(--error);
}

.btn--destructive-outline:hover:not(:disabled) {
  background: var(--error-dim);
}

.btn--destructive-outline:active:not(:disabled) {
  background: rgba(248, 113, 113, 0.2);
  transform: scale(0.98);
}

/* buttons/ghost.css */
/**
 * COMPONENT: Button - Ghost
 * Subtiele button zonder border of achtergrond
 * 
 * AI-NOTE: Ghost buttons zijn voor tertiaire acties of icon-only buttons.
 * Minimale visuele impact, maar wel interactief.
 */

.btn--ghost {
  background: transparent;
  color: var(--text-secondary);
  border-color: transparent;
}

.btn--ghost:hover:not(:disabled) {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.btn--ghost:active:not(:disabled) {
  background: var(--bg-active);
  transform: scale(0.98);
}

/* buttons/primary.css */
/**
 * COMPONENT: Button - Primary
 * De hoofd call-to-action button
 * 
 * AI-NOTE: Primary buttons zijn voor de belangrijkste actie op een pagina.
 * Gebruik spaarzaam - max 1-2 per view. Heeft glow effect op hover.
 */

.btn--primary {
  background: var(--tenant-accent, var(--accent));
  color: var(--bg-deep);
  border-color: var(--tenant-accent, var(--accent));
}

.btn--primary:hover:not(:disabled) {
  background: var(--tenant-accent-light, var(--accent-light));
  border-color: var(--tenant-accent-light, var(--accent-light));
  box-shadow: var(--shadow-glow-sm);
}

.btn--primary:active:not(:disabled) {
  background: var(--tenant-accent-dim, var(--accent-dim));
  border-color: var(--tenant-accent-dim, var(--accent-dim));
  transform: scale(0.98);
}

/* buttons/secondary.css */
/**
 * COMPONENT: Button - Secondary
 * Secundaire actie button met outline stijl
 * 
 * AI-NOTE: Secondary buttons zijn voor minder belangrijke acties.
 * Vaak naast een primary button gebruikt (Cancel, Back, etc.)
 */

.btn--secondary {
  background: transparent;
  color: var(--text-primary);
  border-color: var(--border-light);
}

.btn--secondary:hover:not(:disabled) {
  background: var(--bg-hover);
  border-color: var(--border-strong);
}

.btn--secondary:active:not(:disabled) {
  background: var(--bg-active);
  transform: scale(0.98);
}

/* buttons/success.css */
/**
 * COMPONENT: Button - Success
 * Groene CTA button voor checkout/betaling flows
 * 
 * AI-NOTE: Success buttons voor afrondende acties (checkout, betalen, bevestigen).
 * Gebruikt --success tokens uit het actieve theme.
 */

.btn--success {
  background: var(--success);
  color: var(--bg-deep);
  border-color: var(--success);
}

.btn--success:hover:not(:disabled) {
  background: var(--success-light);
  border-color: var(--success-light);
  box-shadow: 0 0 16px rgb(52 211 153 / 0.25);
}

.btn--success:active:not(:disabled) {
  background: var(--success);
  border-color: var(--success);
  filter: brightness(0.9);
  transform: scale(0.98);
}

/* buttons/warning.css */
/**
 * COMPONENT: Button - Warning
 * Button voor waarschuwingsacties (refund, archive, etc.)
 * 
 * AI-NOTE: Warning buttons zijn voor acties die aandacht vereisen
 * maar niet destructief zijn. Gebruik warning/amber kleur.
 */

.btn--warning {
  background: var(--warning);
  color: #000;
  border-color: var(--warning);
}

.btn--warning:hover:not(:disabled) {
  background: var(--warning-light, #fcd34d);
  border-color: var(--warning-light, #fcd34d);
  box-shadow: 0 0 10px rgba(245, 158, 11, 0.25);
}

.btn--warning:active:not(:disabled) {
  background: #d97706;
  border-color: #d97706;
  transform: scale(0.98);
}

/* Disabled state */
.btn--warning:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}


/* ===== Component: cards ===== */
/* cards/_base.css */
/**
 * COMPONENT: Cards - Base
 * Gedeelde card styling voor alle varianten
 * 
 * AI-NOTE: Cards zijn containers voor gerelateerde content.
 * Ze groeperen informatie visueel. Gebruik semantic tokens.
 * 
 * VARIANTS: elevated, bordered, glass
 * STATES: default, hover (interactive), selected
 */

/* ===== BASE CARD ===== */
.card {
  background: var(--bg-surface);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  
  /* Default border (subtle) */
  border: 1px solid var(--border);
  
  /* Transition voor interactieve cards */
  transition:
    background-color var(--transition-normal),
    border-color var(--transition-normal),
    box-shadow var(--transition-normal),
    transform var(--transition-normal);
}

/* ===== CARD SECTIONS ===== */
.card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.card__title {
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
}

.card__subtitle {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  margin-top: var(--space-1);
}

.card__body {
  color: var(--text-secondary);
}

.card__footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-2);
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border);
}

/* ===== CARD PADDING VARIANTS ===== */
.card--compact {
  padding: var(--space-3);
}

.card--spacious {
  padding: var(--space-6);
}

.card--flush {
  padding: 0;
}

/* ===== INTERACTIVE CARD ===== */
.card--interactive {
  cursor: pointer;
}

.card--interactive:hover {
  border-color: var(--border-light);
}

.card--interactive:active {
  transform: scale(0.995);
}

/* ===== SELECTED STATE ===== */
.card--selected {
  border-color: var(--tenant-accent, var(--accent));
  box-shadow: 0 0 0 1px var(--tenant-accent, var(--accent));
}

/* ===== CARD LIST ===== */
.card-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* ===== CARD GRID ===== */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-4);
}

/* cards/bordered.css */
/**
 * COMPONENT: Card - Bordered
 * Card met duidelijke border (geen shadow)
 * 
 * AI-NOTE: Bordered cards zijn subtiel maar afgebakend.
 * Gebruik in lijsten of als je veel cards hebt.
 */

.card--bordered {
  background: var(--bg-surface);
  border: 1px solid var(--border-light);
  box-shadow: none;
}

.card--bordered.card--interactive:hover {
  border-color: var(--border-strong);
  background: var(--bg-hover);
}

/* cards/elevated.css */
/**
 * COMPONENT: Card - Elevated
 * Card met shadow (zweeft boven de pagina)
 * 
 * AI-NOTE: Elevated cards zijn prominent en trekken aandacht.
 * Gebruik voor belangrijke content of feature highlights.
 */

.card--elevated {
  background: var(--bg-elevated);
  box-shadow: var(--shadow-md);
}

.card--elevated.card--interactive:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-2px);
}

.card--elevated.card--selected {
  box-shadow: 
    var(--shadow-lg),
    0 0 0 1px var(--tenant-accent, var(--accent));
}

/* cards/glass.css */
/**
 * COMPONENT: Card - Glass
 * Glassmorphism card met blur effect
 * 
 * AI-NOTE: Glass cards zijn modern en premium.
 * Werkt best op dark themes met subtiele achtergrond.
 * Let op: backdrop-filter kan performance kosten.
 */

.card--glass {
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.card--glass.card--interactive:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.12);
}

.card--glass.card--selected {
  border-color: var(--tenant-accent, var(--accent));
  box-shadow: 0 0 20px var(--accent-glow);
}

/* Light mode adjustments */
@media (prefers-color-scheme: light) {
  .card--glass {
    background: rgba(255, 255, 255, 0.8);
    border-color: rgba(0, 0, 0, 0.08);
  }
  
  .card--glass.card--interactive:hover {
    background: rgba(255, 255, 255, 0.9);
    border-color: rgba(0, 0, 0, 0.12);
  }
}


/* ===== Component: badges ===== */
/* badges/_base.css */
/**
 * COMPONENT: Badges - Base
 * Status indicators en labels
 * 
 * AI-NOTE: Badges tonen status of categorieën.
 * Compact, kleurgecodeerd, vaak in tabellen of kaarten.
 * 
 * COLORS: default, success, warning, error, info, accent
 */

/* ===== BASE BADGE ===== */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  
  padding: var(--space-1) var(--space-2);
  
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  line-height: 1;
  white-space: nowrap;
  
  border-radius: var(--radius-full);
  
  /* Default: neutral */
  background: var(--bg-hover);
  color: var(--text-secondary);
}

/* ===== COLOR VARIANTS ===== */
.badge--success {
  background: var(--success-dim);
  color: var(--success);
}

.badge--warning {
  background: var(--warning-dim);
  color: var(--warning);
}

.badge--error {
  background: var(--error-dim);
  color: var(--error);
}

.badge--info {
  background: var(--info-dim);
  color: var(--info);
}

.badge--accent {
  background: var(--accent-glow);
  color: var(--tenant-accent, var(--accent));
}

/* ===== SOLID VARIANTS ===== */
.badge--solid {
  color: var(--bg-deep);
}

.badge--solid.badge--success {
  background: var(--success);
}

.badge--solid.badge--warning {
  background: var(--warning);
}

.badge--solid.badge--error {
  background: var(--error);
}

.badge--solid.badge--info {
  background: var(--info);
}

.badge--solid.badge--accent {
  background: var(--tenant-accent, var(--accent));
}

/* ===== OUTLINE VARIANTS ===== */
.badge--outline {
  background: transparent;
  border: 1px solid currentColor;
}

/* ===== SIZE VARIANTS ===== */
.badge--sm {
  padding: 2px var(--space-1);
  font-size: 10px;
}

.badge--lg {
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm);
}

/* ===== DOT BADGE ===== */
.badge--dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border-radius: var(--radius-full);
}

.badge--dot.badge--success { background: var(--success); }
.badge--dot.badge--warning { background: var(--warning); }
.badge--dot.badge--error { background: var(--error); }
.badge--dot.badge--info { background: var(--info); }
.badge--dot.badge--accent { background: var(--tenant-accent, var(--accent)); }

/* ===== WITH ICON ===== */
.badge__icon {
  width: 12px;
  height: 12px;
}

/* ===== ORDER STATUS BADGES (semantic) ===== */
.badge--pending {
  background: var(--warning-dim);
  color: var(--warning);
}

.badge--processing {
  background: var(--info-dim);
  color: var(--info);
}

.badge--completed {
  background: var(--success-dim);
  color: var(--success);
}

.badge--cancelled {
  background: var(--error-dim);
  color: var(--error);
}

.badge--refunded {
  background: var(--bg-hover);
  color: var(--text-muted);
}


/* ===== Component: alerts ===== */
/* alerts/_base.css */
/**
 * COMPONENT: Alerts - Base
 * Notification messages en feedback
 * 
 * AI-NOTE: Alerts communiceren status, fouten, of bevestigingen.
 * Kan inline, banner, of toast zijn.
 * 
 * VARIANTS: inline, banner, toast
 * TYPES: success, warning, error, info
 */

/* ===== BASE ALERT ===== */
.alert {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  
  padding: var(--space-3) var(--space-4);
  
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
}

.alert__icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  margin-top: 1px;
}

.alert__content {
  flex: 1;
  min-width: 0;
}

.alert__title {
  font-weight: var(--font-semibold);
  margin-bottom: var(--space-1);
}

.alert__message {
  color: inherit;
  opacity: 0.9;
}

.alert__dismiss {
  flex-shrink: 0;
  padding: var(--space-1);
  margin: calc(-1 * var(--space-1));
  opacity: 0.6;
  transition: opacity var(--transition-fast);
}

.alert__dismiss:hover {
  opacity: 1;
}

/* ===== TYPE VARIANTS ===== */
.alert--success {
  background: var(--success-dim);
  border-color: var(--success);
  color: var(--success);
}

.alert--warning {
  background: var(--warning-dim);
  border-color: var(--warning);
  color: var(--warning);
}

.alert--error {
  background: var(--error-dim);
  border-color: var(--error);
  color: var(--error);
}

.alert--info {
  background: var(--info-dim);
  border-color: var(--info);
  color: var(--info);
}

/* ===== BANNER VARIANT ===== */
.alert--banner {
  border-radius: 0;
  border-left: none;
  border-right: none;
  border-top: none;
  border-bottom-width: 2px;
}

/* ===== TOAST VARIANT ===== */
.alert--toast {
  box-shadow: var(--shadow-lg);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  min-width: 300px;
  max-width: 400px;
}

.alert--toast.alert--success {
  border-left: 3px solid var(--success);
  background: var(--bg-elevated);
  color: var(--text-primary);
}

.alert--toast.alert--error {
  border-left: 3px solid var(--error);
  background: var(--bg-elevated);
  color: var(--text-primary);
}

.alert--toast.alert--warning {
  border-left: 3px solid var(--warning);
  background: var(--bg-elevated);
  color: var(--text-primary);
}

.alert--toast.alert--info {
  border-left: 3px solid var(--info);
  background: var(--bg-elevated);
  color: var(--text-primary);
}

/* ===== TOAST CONTAINER ===== */
.toast-container {
  position: fixed;
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  pointer-events: none;
}

.toast-container--top-right {
  top: var(--space-4);
  right: var(--space-4);
}

.toast-container--bottom-right {
  bottom: var(--space-4);
  right: var(--space-4);
}

.toast-container--top-center {
  top: var(--space-4);
  left: 50%;
  transform: translateX(-50%);
}

.toast-container .alert--toast {
  pointer-events: auto;
  animation: slide-in-up var(--duration-normal) var(--ease-out);
}

/* ===== INLINE (in forms) ===== */
.alert--inline {
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-xs);
}

/* alerts/banner.css */
/**
 * ALERTS: Banner
 * 
 * Full-width banners voor belangrijke aankondigingen.
 * Gebruik bovenaan de pagina voor site-wide berichten.
 * 
 * AI-NOTE: Banners zijn persistent en vereisen expliciete interactie
 * om te sluiten. Gebruik voor belangrijke mededelingen, onderhoud, etc.
 * 
 * STRUCTURE:
 * <div class="banner banner--info">
 *   <div class="banner__content">
 *     <span class="banner__icon">ℹ</span>
 *     <p class="banner__message">Scheduled maintenance tonight at 22:00</p>
 *     <a href="#" class="banner__link">Learn more</a>
 *   </div>
 *   <button class="banner__close">×</button>
 * </div>
 */

/* =================================================================
   BANNER BASE
   ================================================================= */

.banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-4);
  background: var(--info-subtle);
  color: var(--info);
  width: 100%;
}

/* =================================================================
   BANNER VARIANTS
   ================================================================= */

.banner--info {
  background: var(--info-subtle);
  color: var(--info);
}

.banner--success {
  background: var(--success-subtle);
  color: var(--success);
}

.banner--warning {
  background: var(--warning-subtle);
  color: var(--warning);
}

.banner--error {
  background: var(--error-subtle);
  color: var(--error);
}

.banner--promo {
  background: linear-gradient(135deg, var(--accent-subtle) 0%, var(--surface-secondary) 100%);
  color: var(--text-primary);
}

/* =================================================================
   BANNER CONTENT
   ================================================================= */

.banner__content {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex: 1;
  justify-content: center;
  flex-wrap: wrap;
}

.banner__icon {
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
}

.banner__message {
  margin: 0;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
}

.banner__link {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
  font-weight: var(--font-weight-semibold);
  white-space: nowrap;
}

.banner__link:hover {
  opacity: 0.8;
}

/* =================================================================
   BANNER CLOSE
   ================================================================= */

.banner__close {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  color: currentColor;
  font-size: 1rem;
  cursor: pointer;
  opacity: 0.7;
  transition: opacity var(--transition-fast);
}

.banner__close:hover {
  opacity: 1;
}

/* =================================================================
   BANNER ACTIONS
   ================================================================= */

.banner__actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.banner__action {
  padding: var(--space-1) var(--space-3);
  background: currentColor;
  border: none;
  border-radius: var(--radius-full);
  color: white;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.banner__action:hover {
  transform: scale(1.02);
}

/* =================================================================
   BANNER POSITIONED (fixed)
   ================================================================= */

.banner--fixed-top {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--z-banner);
}

.banner--fixed-bottom {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: var(--z-banner);
}

/* =================================================================
   BANNER COMPACT
   ================================================================= */

.banner--compact {
  padding: var(--space-2) var(--space-4);
}

.banner--compact .banner__message {
  font-size: var(--font-size-xs);
}

/* =================================================================
   BANNER DISMISSING ANIMATION
   ================================================================= */

.banner--dismissing {
  animation: banner-dismiss 0.3s ease-out forwards;
}

@keyframes banner-dismiss {
  to {
    transform: translateY(-100%);
    opacity: 0;
  }
}

/* alerts/inline.css */
/**
 * ALERTS: Inline
 * 
 * Context-specifieke alerts die inline in content verschijnen.
 * Gebruik voor form validation, sectie-specifieke berichten, etc.
 * 
 * AI-NOTE: Inline alerts zijn deel van de content flow.
 * Gebruik voor berichten die direct gerelateerd zijn aan nabije content.
 * 
 * STRUCTURE:
 * <div class="alert-inline alert-inline--warning">
 *   <span class="alert-inline__icon">⚠</span>
 *   <div class="alert-inline__content">
 *     <p class="alert-inline__title">Low stock warning</p>
 *     <p class="alert-inline__message">Only 3 items left in inventory</p>
 *   </div>
 *   <button class="alert-inline__action">Restock</button>
 * </div>
 */

/* =================================================================
   INLINE ALERT BASE
   ================================================================= */

.alert-inline {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--surface-secondary);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
}

/* =================================================================
   INLINE ALERT VARIANTS
   ================================================================= */

.alert-inline--info {
  background: var(--info-subtle);
  border-color: var(--info);
}

.alert-inline--info .alert-inline__icon,
.alert-inline--info .alert-inline__title {
  color: var(--info);
}

.alert-inline--success {
  background: var(--success-subtle);
  border-color: var(--success);
}

.alert-inline--success .alert-inline__icon,
.alert-inline--success .alert-inline__title {
  color: var(--success);
}

.alert-inline--warning {
  background: var(--warning-subtle);
  border-color: var(--warning);
}

.alert-inline--warning .alert-inline__icon,
.alert-inline--warning .alert-inline__title {
  color: var(--warning);
}

.alert-inline--error {
  background: var(--error-subtle);
  border-color: var(--error);
}

.alert-inline--error .alert-inline__icon,
.alert-inline--error .alert-inline__title {
  color: var(--error);
}

/* =================================================================
   INLINE ALERT ELEMENTS
   ================================================================= */

.alert-inline__icon {
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
  margin-top: var(--space-1);
}

.alert-inline__content {
  flex: 1;
  min-width: 0;
}

.alert-inline__title {
  margin: 0 0 var(--space-1);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
}

.alert-inline__message {
  margin: 0;
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  line-height: 1.5;
}

.alert-inline__action {
  flex-shrink: 0;
  padding: var(--space-1) var(--space-3);
  background: transparent;
  border: 1px solid currentColor;
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.alert-inline__action:hover {
  background: var(--surface-hover);
}

.alert-inline__close {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  color: var(--text-tertiary);
  font-size: 1rem;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.alert-inline__close:hover {
  background: var(--surface-hover);
  color: var(--text-secondary);
}

/* =================================================================
   INLINE ALERT SIZES
   ================================================================= */

.alert-inline--sm {
  padding: var(--space-2) var(--space-3);
  gap: var(--space-2);
}

.alert-inline--sm .alert-inline__icon {
  width: 1rem;
  height: 1rem;
}

.alert-inline--sm .alert-inline__title,
.alert-inline--sm .alert-inline__message {
  font-size: var(--font-size-xs);
}

.alert-inline--lg {
  padding: var(--space-4) var(--space-5);
  gap: var(--space-4);
}

.alert-inline--lg .alert-inline__icon {
  width: 1.5rem;
  height: 1.5rem;
}

.alert-inline--lg .alert-inline__title {
  font-size: var(--font-size-base);
}

.alert-inline--lg .alert-inline__message {
  font-size: var(--font-size-sm);
}

/* =================================================================
   INLINE ALERT WITH LIST
   ================================================================= */

.alert-inline__list {
  margin: var(--space-2) 0 0;
  padding-left: var(--space-4);
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
}

.alert-inline__list li {
  margin-bottom: var(--space-1);
}

.alert-inline__list li:last-child {
  margin-bottom: 0;
}

/* =================================================================
   INLINE ALERT BORDERED (left border only)
   ================================================================= */

.alert-inline--bordered {
  border: none;
  border-left: 3px solid var(--border-default);
  border-radius: 0;
  background: var(--surface-primary);
}

.alert-inline--bordered.alert-inline--info {
  border-left-color: var(--info);
}

.alert-inline--bordered.alert-inline--success {
  border-left-color: var(--success);
}

.alert-inline--bordered.alert-inline--warning {
  border-left-color: var(--warning);
}

.alert-inline--bordered.alert-inline--error {
  border-left-color: var(--error);
}

/* alerts/toast.css */
/**
 * ALERTS: Toast
 * 
 * Notifications die tijdelijk verschijnen en automatisch verdwijnen.
 * Gebruikt voor succesmeldingen, errors, of informatieve berichten.
 * 
 * AI-NOTE: Toasts worden gepositioneerd in een toast container.
 * Gebruik voor korte, niet-kritieke berichten die geen interactie vereisen.
 * 
 * STRUCTURE:
 * <div class="toast-container">
 *   <div class="toast toast--success">
 *     <span class="toast__icon">✓</span>
 *     <div class="toast__content">
 *       <p class="toast__message">Order saved successfully</p>
 *     </div>
 *     <button class="toast__close">×</button>
 *   </div>
 * </div>
 */

/* =================================================================
   TOAST CONTAINER
   ================================================================= */

.toast-container {
  position: fixed;
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  pointer-events: none;
  max-width: min(400px, calc(100vw - var(--space-4)));
}

/* Position variants */
.toast-container--top-right {
  top: var(--space-4);
  right: var(--space-4);
}

.toast-container--top-left {
  top: var(--space-4);
  left: var(--space-4);
}

.toast-container--top-center {
  top: var(--space-4);
  left: 50%;
  transform: translateX(-50%);
}

.toast-container--bottom-right {
  bottom: var(--space-4);
  right: var(--space-4);
}

.toast-container--bottom-left {
  bottom: var(--space-4);
  left: var(--space-4);
}

.toast-container--bottom-center {
  bottom: var(--space-4);
  left: 50%;
  transform: translateX(-50%);
}

/* =================================================================
   TOAST
   ================================================================= */

.toast {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--surface-primary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  pointer-events: auto;
  animation: toast-slide-in 0.3s ease-out;
}

@keyframes toast-slide-in {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

.toast--exiting {
  animation: toast-slide-out 0.2s ease-in forwards;
}

@keyframes toast-slide-out {
  to {
    transform: translateX(100%);
    opacity: 0;
  }
}

/* =================================================================
   TOAST VARIANTS
   ================================================================= */

.toast--success {
  border-left: 3px solid var(--success);
}

.toast--success .toast__icon {
  color: var(--success);
}

.toast--error {
  border-left: 3px solid var(--error);
}

.toast--error .toast__icon {
  color: var(--error);
}

.toast--warning {
  border-left: 3px solid var(--warning);
}

.toast--warning .toast__icon {
  color: var(--warning);
}

.toast--info {
  border-left: 3px solid var(--info);
}

.toast--info .toast__icon {
  color: var(--info);
}

/* =================================================================
   TOAST ELEMENTS
   ================================================================= */

.toast__icon {
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
  margin-top: var(--space-1);
}

.toast__content {
  flex: 1;
  min-width: 0;
}

.toast__title {
  margin: 0 0 var(--space-1);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
}

.toast__message {
  margin: 0;
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  line-height: 1.4;
}

.toast__close {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  color: var(--text-tertiary);
  font-size: 1rem;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.toast__close:hover {
  background: var(--surface-hover);
  color: var(--text-secondary);
}

/* =================================================================
   TOAST WITH ACTIONS
   ================================================================= */

.toast__actions {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

.toast__action {
  padding: var(--space-1) var(--space-2);
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  color: var(--accent);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.toast__action:hover {
  background: var(--accent-subtle);
}

/* =================================================================
   TOAST WITH PROGRESS
   ================================================================= */

.toast__progress {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--surface-tertiary);
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  overflow: hidden;
}

.toast__progress-bar {
  height: 100%;
  background: var(--accent);
  animation: toast-progress 5s linear forwards;
}

@keyframes toast-progress {
  from { width: 100%; }
  to { width: 0%; }
}


/* ===== Component: forms ===== */
/* forms/_base.css */
/**
 * COMPONENT: Forms - Base
 * Gedeelde form styling voor alle form elementen
 * 
 * AI-NOTE: Forms zijn kritiek voor data input.
 * Consistente styling, duidelijke states, goede accessibility.
 * 
 * ELEMENTS: input, textarea, select, checkbox, radio, switch
 * STATES: default, focus, error, disabled, readonly
 */

/* ===== FORM LAYOUT ===== */
.form {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.form--inline {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-end;
}

/* ===== FORM GROUP ===== */
.form-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.form-group--horizontal {
  flex-direction: row;
  align-items: center;
}

/* ===== LABEL ===== */
.form-label {
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--text-primary);
}

.form-label--required::after {
  content: " *";
  color: var(--error);
}

/* ===== INPUT BASE (SSoT — alle form inputs) ===== */
.form-input {
  width: 100%;
  height: auto;
  padding: 0.9rem var(--space-4);
  
  font-family: var(--tenant-font-main, var(--font-sans));
  font-size: var(--text-sm-plus);
  color: var(--text-primary);
  
  background: var(--bg-hover);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  outline: none;
  box-sizing: border-box;
  
  transition:
    border-color var(--transition-fast),
    box-shadow var(--transition-fast);
}

.form-input::placeholder {
  color: var(--text-disabled);
}

.form-input:hover:not(:disabled):not(:focus) {
  border-color: var(--border-strong);
}

.form-input:focus {
  border-color: var(--tenant-accent, var(--accent));
  box-shadow: 0 0 0 3px var(--accent-glow);
}

/* Autofill override — voorkom browser-default witte achtergrond */
.form-input:-webkit-autofill,
.form-input:-webkit-autofill:hover,
.form-input:-webkit-autofill:focus,
.form-input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 1000px var(--bg-hover) inset !important;
  -webkit-text-fill-color: var(--text-primary) !important;
  transition: background-color 5000s ease-in-out 0s;
}

.form-input:-moz-autofill,
.form-input:-moz-autofill-preview {
  background: var(--bg-hover) !important;
  color: var(--text-primary) !important;
}

/* ===== INPUT SIZES ===== */
.form-input--sm {
  padding: 0.5rem var(--space-3);
  font-size: var(--control-font-sm);
  border-radius: var(--radius-md);
}

.form-input--lg {
  padding: 1.1rem var(--space-5);
  font-size: var(--control-font-lg);
}

/* ===== TEXTAREA ===== */
.form-textarea {
  min-height: 100px;
  padding: var(--space-3);
  resize: vertical;
}

/* ===== SELECT ===== */
.form-select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%239090a0' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-3) center;
  padding-left: var(--control-padding-md);
  padding-right: var(--space-10);
  cursor: pointer;
}

/* Golden form overrides geabsorbeerd in .form-input base (SSoT) */

.form-select {
  background-color: rgb(245 166 35 / 0.08);
  border-color: rgb(245 166 35 / 0.15);
}

.form-select:hover:not(:disabled):not(:focus) {
  border-color: rgb(245 166 35 / 0.3);
}

.form-select:focus {
  background-color: rgb(245 166 35 / 0.12);
}

/* ===== STATES ===== */
.form-input:disabled,
.form-input[readonly] {
  opacity: 0.6;
  cursor: not-allowed;
  background: var(--bg-surface);
}

.form-input--error {
  border-color: var(--error);
}

.form-input--error:focus {
  border-color: var(--error);
  box-shadow: 0 0 0 3px var(--error-dim);
}

.form-input--success {
  border-color: var(--success);
}

/* ===== HELPER TEXT ===== */
.form-helper {
  font-size: var(--text-xs);
  color: var(--text-muted);
}

.form-helper--error {
  color: var(--error);
}

.form-helper--success {
  color: var(--success);
}

/* ===== INPUT GROUP (with addon) ===== */
.input-group {
  display: flex;
}

.input-group .form-input {
  border-radius: 0;
}

.input-group .form-input:first-child {
  border-radius: var(--radius-md) 0 0 var(--radius-md);
}

.input-group .form-input:last-child {
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

.input-addon {
  display: flex;
  align-items: center;
  padding: 0 var(--space-3);
  background: var(--bg-surface);
  border: 1px solid var(--border-light);
  color: var(--text-muted);
  font-size: var(--text-sm);
}

.input-addon:first-child {
  border-right: none;
  border-radius: var(--radius-md) 0 0 var(--radius-md);
}

.input-addon:last-child {
  border-left: none;
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

/* ===== SMART IDENTIFIER INPUT (Email/Phone detection) ===== */
.smart-identifier-wrapper {
  position: relative;
  width: 100%;
}

.form-control-with-icon {
  padding-right: var(--space-10);
}

.form-control-icon {
  position: absolute;
  right: var(--control-padding-md);
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
  pointer-events: none;
  transition: color var(--transition-fast);
}

.form-control:focus + .form-control-icon {
  color: var(--tenant-accent, var(--accent));
}

.form-error {
  font-size: var(--text-xs);
  color: var(--error);
  margin-top: var(--space-1);
}

.form-hint {
  font-size: var(--text-xs);
  color: var(--text-muted);
  margin-top: var(--space-1);
}

.form-label-required {
  color: var(--error);
}

.form-control {
  width: 100%;
  height: var(--control-height-md);
  padding: 0 var(--control-padding-md);
  
  font-family: var(--tenant-font-main, var(--font-sans));
  font-size: var(--control-font-md);
  color: var(--text-primary);
  
  background: var(--bg-elevated);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  
  transition:
    border-color var(--transition-fast),
    box-shadow var(--transition-fast);
}

.form-control::placeholder {
  color: var(--text-muted);
}

.form-control:hover:not(:disabled):not(:focus) {
  border-color: var(--border-strong);
}

.form-control:focus {
  outline: none;
  border-color: var(--tenant-accent, var(--accent));
  box-shadow: 0 0 0 3px var(--accent-glow);
}

.form-control:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  background: var(--bg-surface);
}

.form-control-error {
  border-color: var(--error);
}

.form-control-error:focus {
  border-color: var(--error);
  box-shadow: 0 0 0 3px var(--error-dim);
}

/* forms/checkboxes.css */
/**
 * COMPONENT: Forms - Checkboxes & Radio
 * Custom checkbox en radio button styling
 * 
 * AI-NOTE: Custom checkboxes en radios voor consistente look.
 * Native inputs zijn hidden maar blijven accessible.
 */

/* ===== CHECKBOX ===== */
.form-checkbox {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  cursor: pointer;
}

.form-checkbox__input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.form-checkbox__box {
  width: 18px;
  min-width: 18px;
  height: 18px;
  border: 2px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 2px;
  transition: 
    background-color var(--transition-fast),
    border-color var(--transition-fast);
}

.form-checkbox__box::after {
  content: "";
  width: 10px;
  height: 10px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230a0a0f' stroke-width='3'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
  background-size: contain;
  opacity: 0;
  transform: scale(0.5);
  transition: 
    opacity var(--transition-fast),
    transform var(--transition-fast);
}

/* Checked state */
.form-checkbox__input:checked + .form-checkbox__box {
  background: var(--tenant-accent, var(--accent));
  border-color: var(--tenant-accent, var(--accent));
}

.form-checkbox__input:checked + .form-checkbox__box::after {
  opacity: 1;
  transform: scale(1);
}

/* Focus state */
.form-checkbox__input:focus-visible + .form-checkbox__box {
  outline: 2px solid var(--tenant-accent, var(--accent));
  outline-offset: 2px;
}

/* Disabled */
.form-checkbox__input:disabled + .form-checkbox__box {
  opacity: 0.5;
  cursor: not-allowed;
}

.form-checkbox__label {
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--text-primary);
  user-select: none;
}

/* ===== RADIO ===== */
.form-radio {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  cursor: pointer;
}

.form-radio__input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.form-radio__circle {
  width: 18px;
  height: 18px;
  border: 2px solid var(--border-strong);
  border-radius: var(--radius-full);
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: 
    border-color var(--transition-fast);
}

.form-radio__circle::after {
  content: "";
  width: 8px;
  height: 8px;
  background: var(--tenant-accent, var(--accent));
  border-radius: var(--radius-full);
  opacity: 0;
  transform: scale(0);
  transition: 
    opacity var(--transition-fast),
    transform var(--transition-fast);
}

/* Checked state */
.form-radio__input:checked + .form-radio__circle {
  border-color: var(--tenant-accent, var(--accent));
}

.form-radio__input:checked + .form-radio__circle::after {
  opacity: 1;
  transform: scale(1);
}

/* Focus state */
.form-radio__input:focus-visible + .form-radio__circle {
  outline: 2px solid var(--tenant-accent, var(--accent));
  outline-offset: 2px;
}

/* Disabled */
.form-radio__input:disabled + .form-radio__circle {
  opacity: 0.5;
  cursor: not-allowed;
}

.form-radio__label {
  font-size: var(--text-sm);
  color: var(--text-primary);
  user-select: none;
}

/* ===== RADIO GROUP ===== */
.form-radio-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.form-radio-group--horizontal {
  flex-direction: row;
  gap: var(--space-4);
}

/* forms/switch.css */
/**
 * COMPONENT: Forms - Toggle Switch
 * iOS-style toggle switch
 * 
 * AI-NOTE: Toggle switches voor on/off states.
 * Beter dan checkbox voor settings die direct effect hebben.
 */

/* ===== SWITCH ===== */
.form-switch {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  cursor: pointer;
}

.form-switch__input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.form-switch__track {
  position: relative;
  width: 44px;
  height: 24px;
  background: var(--bg-active);
  border-radius: var(--radius-full);
  transition: background-color var(--transition-normal);
}

.form-switch__thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  background: var(--text-muted);
  border-radius: var(--radius-full);
  transition: 
    transform var(--transition-normal),
    background-color var(--transition-normal);
}

/* Checked state */
.form-switch__input:checked + .form-switch__track {
  background: var(--tenant-accent, var(--accent));
}

.form-switch__input:checked + .form-switch__track .form-switch__thumb {
  transform: translateX(20px);
  background: var(--bg-deep);
}

/* Focus state */
.form-switch__input:focus-visible + .form-switch__track {
  outline: 2px solid var(--tenant-accent, var(--accent));
  outline-offset: 2px;
}

/* Disabled */
.form-switch__input:disabled + .form-switch__track {
  opacity: 0.5;
  cursor: not-allowed;
}

.form-switch__label {
  font-size: var(--text-sm);
  color: var(--text-primary);
  user-select: none;
}

/* ===== SMALL SWITCH ===== */
.form-switch--sm .form-switch__track {
  width: 36px;
  height: 20px;
}

.form-switch--sm .form-switch__thumb {
  width: 16px;
  height: 16px;
}

.form-switch--sm .form-switch__input:checked + .form-switch__track .form-switch__thumb {
  transform: translateX(16px);
}


/* ===== Component: spinners ===== */
/* spinners/spinner.css */
/**
 * COMPONENT: Spinner
 * Loading spinner voor alle contexten (webshop, admin, pos, etc.)
 *
 * AI-NOTE: De Preact Spinner component rendert:
 *   <div class="spinner spinner-{size}" role="status" />
 * Sizes: sm, md, lg, xl
 *
 * STRUCTURE:
 * <div class="spinner spinner-md"></div>
 * <div class="loading-container"><div class="spinner spinner-lg"></div></div>
 */

/* ===== BASE SPINNER ===== */
.spinner {
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  display: inline-block;
  flex-shrink: 0;
}

/* ===== SIZES ===== */
.spinner-sm {
  width: 18px;
  height: 18px;
  border: 2px solid var(--border, rgba(255 255 255 / 0.1));
  border-top-color: var(--accent, #f5a623);
}

.spinner-md {
  width: 32px;
  height: 32px;
  border: 3px solid var(--border, rgba(255 255 255 / 0.1));
  border-top-color: var(--accent, #f5a623);
}

.spinner-lg {
  width: 48px;
  height: 48px;
  border: 3px solid var(--border, rgba(255 255 255 / 0.1));
  border-top-color: var(--accent, #f5a623);
}

.spinner-xl {
  width: 64px;
  height: 64px;
  border: 4px solid var(--border, rgba(255 255 255 / 0.1));
  border-top-color: var(--accent, #f5a623);
}

/* ===== LOADING CONTAINER (centered wrapper) ===== */
.loading-container {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-8, 2rem) var(--space-4, 1rem);
  min-height: 120px;
}


/* ===== Component: headers ===== */
/* headers/_base.css */
/**
 * HEADERS - Base Styles
 * 
 * Composable header component voor tenants.
 * Tenants kiezen een header-variant in hun config.
 * 
 * VARIANTEN:
 * - minimal: Logo + hamburger
 * - full: Logo + nav + search + user
 * - centered: Centered logo met nav links/rechts
 * - split: Logo links, nav rechts, strikte scheiding
 * 
 * DATA ATTRIBUTES:
 * - data-header-variant="minimal|full|centered|split"
 * - data-header-sticky="true|false"
 * - data-header-transparent="true|false"
 */

/* =================================================================
   BASE HEADER
   ================================================================= */

.header {
  --header-height: var(--space-16);
  --header-padding-x: var(--space-6);
  --header-padding-y: var(--space-4);
  --header-bg: var(--surface-primary);
  --header-border: var(--border-subtle);
  --header-shadow: var(--shadow-sm);
  
  display: flex;
  align-items: center;
  width: 100%;
  min-height: var(--header-height);
  padding: var(--header-padding-y) var(--header-padding-x);
  background: var(--header-bg);
  border-bottom: 1px solid var(--header-border);
  box-shadow: var(--header-shadow);
  z-index: var(--z-sticky);
}

/* Sticky variant */
.header[data-header-sticky="true"] {
  position: sticky;
  top: 0;
}

/* Transparent variant (for hero sections) */
.header[data-header-transparent="true"] {
  --header-bg: transparent;
  --header-border: transparent;
  --header-shadow: none;
}

/* =================================================================
   HEADER LOGO
   ================================================================= */

.header__logo {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  text-decoration: none;
  color: var(--text-primary);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-lg);
}

.header__logo-image {
  height: 2rem;
  width: auto;
  object-fit: contain;
}

.header__logo-text {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  letter-spacing: -0.02em;
}

/* =================================================================
   HEADER NAVIGATION
   ================================================================= */

.header__nav {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.header__nav-link {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  color: var(--text-secondary);
  text-decoration: none;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  border-radius: var(--radius-md);
  transition: all var(--transition-fast);
}

.header__nav-link:hover {
  color: var(--text-primary);
  background: var(--surface-hover);
}

.header__nav-link[aria-current="page"],
.header__nav-link.active {
  color: var(--accent);
  background: var(--accent-subtle);
}

/* =================================================================
   HEADER SEARCH
   ================================================================= */

.header__search {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: var(--surface-inset);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-full);
  min-width: 200px;
}

.header__search-input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  color: var(--text-primary);
  font-size: var(--font-size-sm);
}

.header__search-input::placeholder {
  color: var(--text-tertiary);
}

.header__search-icon {
  color: var(--text-tertiary);
  width: 1rem;
  height: 1rem;
}

/* =================================================================
   HEADER ACTIONS
   ================================================================= */

.header__actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.header__action-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  background: transparent;
  border: none;
  border-radius: var(--radius-full);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.header__action-btn:hover {
  color: var(--text-primary);
  background: var(--surface-hover);
}

/* User avatar */
.header__avatar {
  width: 2rem;
  height: 2rem;
  border-radius: var(--radius-full);
  object-fit: cover;
  border: 2px solid var(--border-subtle);
}

/* =================================================================
   HEADER MOBILE TOGGLE
   ================================================================= */

.header__mobile-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  background: transparent;
  border: none;
  border-radius: var(--radius-md);
  color: var(--text-primary);
  cursor: pointer;
}

@media (max-width: 768px) {
  .header__mobile-toggle {
    display: flex;
  }
  
  .header__nav,
  .header__search {
    display: none;
  }
}

/* =================================================================
   HEADER SPACER (pushes items apart)
   ================================================================= */

.header__spacer {
  flex: 1;
}

/* headers/centered.css */
/**
 * HEADER VARIANT: Centered
 * 
 * Logo gecentreerd met navigatie links en rechts.
 * Ideaal voor: fashion brands, luxury shops, portfolios.
 * 
 * STRUCTURE:
 * <header class="header header--centered" data-header-variant="centered">
 *   <nav class="header__nav header__nav--left">
 *     <a class="header__nav-link">Shop</a>
 *     <a class="header__nav-link">Collecties</a>
 *   </nav>
 *   <a class="header__logo">BRAND</a>
 *   <nav class="header__nav header__nav--right">
 *     <a class="header__nav-link">Account</a>
 *     <a class="header__nav-link">Winkelwagen</a>
 *   </nav>
 *   <button class="header__mobile-toggle">☰</button>
 * </header>
 */

.header--centered {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--space-4);
}

/* Logo in het midden */
.header--centered .header__logo {
  justify-self: center;
  text-align: center;
}

.header--centered .header__logo-text {
  font-size: var(--font-size-2xl);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* Nav links uitlijnen */
.header--centered .header__nav--left {
  justify-self: start;
}

.header--centered .header__nav--right {
  justify-self: end;
}

/* Mobile: 2-koloms layout */
@media (max-width: 768px) {
  .header--centered {
    grid-template-columns: auto 1fr auto;
  }
  
  .header--centered .header__nav--left,
  .header--centered .header__nav--right {
    display: none;
  }
  
  .header--centered .header__logo {
    grid-column: 2;
  }
  
  .header--centered .header__mobile-toggle {
    display: flex;
    grid-column: 1;
    grid-row: 1;
  }
  
  /* Actions aan de rechterkant */
  .header--centered .header__actions {
    grid-column: 3;
  }
}

/* Desktop: alles zichtbaar */
@media (min-width: 769px) {
  .header--centered .header__mobile-toggle {
    display: none;
  }
}

/* headers/full.css */
/**
 * HEADER VARIANT: Full
 * 
 * Complete header met alle elementen.
 * Ideaal voor: webshops, dashboards, content-rijke sites.
 * 
 * STRUCTURE:
 * <header class="header header--full" data-header-variant="full">
 *   <a class="header__logo">Logo</a>
 *   <nav class="header__nav">
 *     <a class="header__nav-link">Link</a>
 *   </nav>
 *   <div class="header__spacer"></div>
 *   <div class="header__search">
 *     <input class="header__search-input">
 *   </div>
 *   <div class="header__actions">
 *     <button class="header__action-btn">🔔</button>
 *     <button class="header__action-btn">🛒</button>
 *     <img class="header__avatar">
 *   </div>
 *   <button class="header__mobile-toggle">☰</button>
 * </header>
 */

.header--full {
  gap: var(--space-4);
}

/* Logo krijgt vaste breedte */
.header--full .header__logo {
  flex: 0 0 auto;
  min-width: 120px;
}

/* Nav neemt beschikbare ruimte */
.header--full .header__nav {
  flex: 0 0 auto;
}

/* Search neemt flexibele ruimte */
.header--full .header__search {
  flex: 1;
  max-width: 400px;
}

/* Actions rechts */
.header--full .header__actions {
  flex: 0 0 auto;
}

/* Desktop: alles zichtbaar */
@media (min-width: 1024px) {
  .header--full .header__mobile-toggle {
    display: none;
  }
  
  .header--full .header__nav,
  .header--full .header__search {
    display: flex;
  }
}

/* Tablet: search verborgen */
@media (min-width: 768px) and (max-width: 1023px) {
  .header--full .header__search {
    display: none;
  }
  
  .header--full .header__nav {
    display: flex;
  }
}

/* Mobile: alleen logo, actions en toggle */
@media (max-width: 767px) {
  .header--full .header__nav,
  .header--full .header__search {
    display: none;
  }
  
  .header--full .header__mobile-toggle {
    display: flex;
  }
}

/* headers/minimal.css */
/**
 * HEADER VARIANT: Minimal
 * 
 * Eenvoudige header met alleen logo en hamburger menu.
 * Ideaal voor: landing pages, checkout flows, mobile-first.
 * 
 * STRUCTURE:
 * <header class="header header--minimal" data-header-variant="minimal">
 *   <a class="header__logo">Logo</a>
 *   <div class="header__spacer"></div>
 *   <button class="header__mobile-toggle">☰</button>
 * </header>
 */

.header--minimal {
  --header-height: var(--space-14);
  justify-content: space-between;
}

.header--minimal .header__logo {
  flex: 0 0 auto;
}

/* Mobile toggle altijd zichtbaar in minimal */
.header--minimal .header__mobile-toggle {
  display: flex;
}

/* Optionele CTA button rechts */
.header--minimal .header__cta {
  display: none;
}

@media (min-width: 768px) {
  .header--minimal .header__cta {
    display: flex;
    margin-left: var(--space-4);
  }
  
  /* Op desktop kan toggle verborgen als er geen nav is */
  .header--minimal[data-has-nav="false"] .header__mobile-toggle {
    display: none;
  }
}

/* headers/split.css */
/**
 * HEADER VARIANT: Split
 * 
 * Strikte scheiding tussen logo/nav links en actions rechts.
 * Ideaal voor: SaaS apps, admin panels, professional services.
 * 
 * STRUCTURE:
 * <header class="header header--split" data-header-variant="split">
 *   <div class="header__left">
 *     <a class="header__logo">Logo</a>
 *     <nav class="header__nav">
 *       <a class="header__nav-link">Dashboard</a>
 *       <a class="header__nav-link">Orders</a>
 *     </nav>
 *   </div>
 *   <div class="header__right">
 *     <div class="header__search">...</div>
 *     <div class="header__actions">...</div>
 *   </div>
 *   <button class="header__mobile-toggle">☰</button>
 * </header>
 */

.header--split {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Left section: logo + nav */
.header--split .header__left {
  display: flex;
  align-items: center;
  gap: var(--space-6);
}

/* Right section: search + actions */
.header--split .header__right {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

/* Divider tussen links en rechts */
.header--split .header__divider {
  width: 1px;
  height: 1.5rem;
  background: var(--border-subtle);
  margin: 0 var(--space-2);
}

/* Nav styling voor split */
.header--split .header__nav {
  border-left: 1px solid var(--border-subtle);
  padding-left: var(--space-4);
  margin-left: var(--space-2);
}

/* Compact search in split header */
.header--split .header__search {
  min-width: 180px;
  max-width: 280px;
}

/* Desktop */
@media (min-width: 1024px) {
  .header--split .header__mobile-toggle {
    display: none;
  }
}

/* Tablet */
@media (min-width: 768px) and (max-width: 1023px) {
  .header--split .header__search {
    display: none;
  }
}

/* Mobile */
@media (max-width: 767px) {
  .header--split .header__left,
  .header--split .header__right {
    display: none;
  }
  
  /* Simplified mobile layout */
  .header--split {
    justify-content: space-between;
  }
  
  .header--split .header__logo {
    display: flex;
  }
  
  .header--split .header__mobile-toggle {
    display: flex;
  }
  
  .header--split .header__actions {
    display: flex;
  }
}


/* ===== Component: footers ===== */
/* footers/_base.css */
/**
 * FOOTERS - Base Styles
 * 
 * Composable footer component voor tenants.
 * Tenants kiezen een footer-variant in hun config.
 * 
 * VARIANTEN:
 * - simple: Copyright + basic links
 * - detailed: Multi-kolom met links, social, newsletter
 * - links: Focus op linklijsten
 * - minimal: Alleen copyright regel
 * 
 * DATA ATTRIBUTES:
 * - data-footer-variant="simple|detailed|links|minimal"
 * - data-footer-dark="true|false"
 */

/* =================================================================
   BASE FOOTER
   ================================================================= */

.footer {
  --footer-padding-x: var(--space-6);
  --footer-padding-y: var(--space-12);
  --footer-bg: var(--surface-secondary);
  --footer-border: var(--border-subtle);
  
  width: 100%;
  padding: var(--footer-padding-y) var(--footer-padding-x);
  background: var(--footer-bg);
  border-top: 1px solid var(--footer-border);
}

/* Dark footer variant */
.footer[data-footer-dark="true"] {
  --footer-bg: var(--background);
  color: var(--text-secondary);
}

/* =================================================================
   FOOTER CONTAINER
   ================================================================= */

.footer__container {
  max-width: 1200px;
  margin: 0 auto;
}

/* =================================================================
   FOOTER LOGO
   ================================================================= */

.footer__logo {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  text-decoration: none;
  color: var(--text-primary);
  font-weight: var(--font-weight-bold);
  margin-bottom: var(--space-4);
}

.footer__logo-image {
  height: 2rem;
  width: auto;
}

.footer__logo-text {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
}

/* =================================================================
   FOOTER DESCRIPTION
   ================================================================= */

.footer__description {
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-relaxed);
  max-width: 300px;
  margin-bottom: var(--space-6);
}

/* =================================================================
   FOOTER COLUMNS
   ================================================================= */

.footer__columns {
  display: grid;
  gap: var(--space-8);
}

.footer__column {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.footer__column-title {
  color: var(--text-primary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--space-2);
}

/* =================================================================
   FOOTER LINKS
   ================================================================= */

.footer__links {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.footer__link {
  color: var(--text-secondary);
  text-decoration: none;
  font-size: var(--font-size-sm);
  transition: color var(--transition-fast);
}

.footer__link:hover {
  color: var(--text-primary);
}

/* =================================================================
   FOOTER SOCIAL
   ================================================================= */

.footer__social {
  display: flex;
  gap: var(--space-3);
}

.footer__social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  background: var(--surface-tertiary);
  border-radius: var(--radius-full);
  color: var(--text-secondary);
  text-decoration: none;
  transition: all var(--transition-fast);
}

.footer__social-link:hover {
  background: var(--accent);
  color: var(--text-on-accent);
}

.footer__social-icon {
  width: 1.25rem;
  height: 1.25rem;
}

/* =================================================================
   FOOTER NEWSLETTER
   ================================================================= */

.footer__newsletter {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.footer__newsletter-title {
  color: var(--text-primary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
}

.footer__newsletter-text {
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
}

.footer__newsletter-form {
  display: flex;
  gap: var(--space-2);
}

.footer__newsletter-input {
  flex: 1;
  padding: var(--space-2) var(--space-3);
  background: var(--surface-primary);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  font-size: var(--font-size-sm);
}

.footer__newsletter-input::placeholder {
  color: var(--text-tertiary);
}

.footer__newsletter-button {
  padding: var(--space-2) var(--space-4);
  background: var(--accent);
  border: none;
  border-radius: var(--radius-md);
  color: var(--text-on-accent);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  transition: background var(--transition-fast);
}

.footer__newsletter-button:hover {
  background: var(--accent-hover);
}

/* =================================================================
   FOOTER BOTTOM
   ================================================================= */

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4);
  padding-top: var(--space-8);
  margin-top: var(--space-8);
  border-top: 1px solid var(--border-subtle);
}

.footer__copyright {
  color: var(--text-tertiary);
  font-size: var(--font-size-sm);
}

.footer__legal-links {
  display: flex;
  gap: var(--space-4);
}

.footer__legal-link {
  color: var(--text-tertiary);
  text-decoration: none;
  font-size: var(--font-size-sm);
  transition: color var(--transition-fast);
}

.footer__legal-link:hover {
  color: var(--text-secondary);
}

/* =================================================================
   RESPONSIVE
   ================================================================= */

@media (max-width: 768px) {
  .footer {
    --footer-padding-y: var(--space-8);
  }
  
  .footer__bottom {
    flex-direction: column;
    text-align: center;
  }
  
  .footer__newsletter-form {
    flex-direction: column;
  }
}

/* footers/detailed.css */
/**
 * FOOTER VARIANT: Detailed
 * 
 * Uitgebreide footer met meerdere kolommen, newsletter en social.
 * Ideaal voor: grote webshops, enterprise sites, marketplaces.
 * 
 * STRUCTURE:
 * <footer class="footer footer--detailed" data-footer-variant="detailed">
 *   <div class="footer__container">
 *     <div class="footer__top">
 *       <div class="footer__brand">...</div>
 *       <div class="footer__columns">
 *         <div class="footer__column">
 *           <h4 class="footer__column-title">Products</h4>
 *           <div class="footer__links">...</div>
 *         </div>
 *         <!-- More columns -->
 *       </div>
 *       <div class="footer__newsletter">...</div>
 *     </div>
 *     <div class="footer__bottom">...</div>
 *   </div>
 * </footer>
 */

.footer--detailed {
  --footer-padding-y: var(--space-16);
}

.footer--detailed .footer__top {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  gap: var(--space-12);
}

.footer--detailed .footer__brand {
  grid-column: 1;
}

.footer--detailed .footer__columns {
  grid-column: 2;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-8);
}

.footer--detailed .footer__newsletter {
  grid-column: 3;
}

/* Tablet */
@media (min-width: 769px) and (max-width: 1024px) {
  .footer--detailed .footer__top {
    grid-template-columns: 1fr 1fr;
  }
  
  .footer--detailed .footer__brand {
    grid-column: 1;
  }
  
  .footer--detailed .footer__newsletter {
    grid-column: 2;
  }
  
  .footer--detailed .footer__columns {
    grid-column: 1 / -1;
    grid-row: 2;
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Mobile */
@media (max-width: 768px) {
  .footer--detailed .footer__top {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
  }
  
  .footer--detailed .footer__columns {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .footer--detailed .footer__brand {
    text-align: center;
  }
  
  .footer--detailed .footer__description {
    max-width: 100%;
  }
  
  .footer--detailed .footer__social {
    justify-content: center;
  }
}

/* Small mobile */
@media (max-width: 480px) {
  .footer--detailed .footer__columns {
    grid-template-columns: 1fr;
    text-align: center;
  }
  
  .footer--detailed .footer__links {
    align-items: center;
  }
}

/* footers/links.css */
/**
 * FOOTER VARIANT: Links
 * 
 * Focus op linklijsten in meerdere kolommen.
 * Ideaal voor: content sites, documentatie, corporate sites.
 * 
 * STRUCTURE:
 * <footer class="footer footer--links" data-footer-variant="links">
 *   <div class="footer__container">
 *     <div class="footer__columns">
 *       <div class="footer__column">
 *         <h4 class="footer__column-title">Category</h4>
 *         <div class="footer__links">...</div>
 *       </div>
 *       <!-- 4-6 columns -->
 *     </div>
 *     <div class="footer__bottom">...</div>
 *   </div>
 * </footer>
 */

.footer--links {
  --footer-padding-y: var(--space-12);
}

.footer--links .footer__columns {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--space-6);
}

.footer--links .footer__column-title {
  color: var(--text-primary);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: var(--space-4);
}

.footer--links .footer__link {
  padding: var(--space-1) 0;
}

/* Large desktop: 5 columns */
@media (min-width: 1200px) {
  .footer--links .footer__columns {
    grid-template-columns: repeat(5, 1fr);
  }
}

/* Desktop: 4 columns */
@media (min-width: 1025px) and (max-width: 1199px) {
  .footer--links .footer__columns {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* Tablet: 3 columns */
@media (min-width: 769px) and (max-width: 1024px) {
  .footer--links .footer__columns {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Mobile: 2 columns */
@media (min-width: 481px) and (max-width: 768px) {
  .footer--links .footer__columns {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Small mobile: 1 column */
@media (max-width: 480px) {
  .footer--links .footer__columns {
    grid-template-columns: 1fr;
    text-align: center;
  }
  
  .footer--links .footer__links {
    align-items: center;
  }
}

/* footers/minimal.css */
/**
 * FOOTER VARIANT: Minimal
 * 
 * Alleen copyright en essentiële legal links.
 * Ideaal voor: checkout flows, apps, landing pages.
 * 
 * STRUCTURE:
 * <footer class="footer footer--minimal" data-footer-variant="minimal">
 *   <div class="footer__container footer__bottom">
 *     <p class="footer__copyright">© 2026 Bedrijfsnaam</p>
 *     <div class="footer__legal-links">
 *       <a class="footer__legal-link">Privacy</a>
 *       <a class="footer__legal-link">Voorwaarden</a>
 *     </div>
 *   </div>
 * </footer>
 */

.footer--minimal {
  --footer-padding-y: var(--space-6);
  --footer-bg: transparent;
  border-top: 1px solid var(--border-subtle);
}

.footer--minimal .footer__container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--space-2) var(--space-6);
}

.footer--minimal .footer__bottom {
  padding-top: 0;
  margin-top: 0;
  border-top: none;
}

.footer--minimal .footer__copyright {
  font-size: var(--font-size-xs);
}

.footer--minimal .footer__legal-links {
  display: flex;
  gap: var(--space-4);
}

.footer--minimal .footer__legal-link {
  font-size: var(--font-size-xs);
}

/* Separator dot between links */
.footer--minimal .footer__legal-links .footer__legal-link:not(:last-child)::after {
  content: "·";
  margin-left: var(--space-4);
  color: var(--text-tertiary);
}

/* Mobile: stack vertical */
@media (max-width: 480px) {
  .footer--minimal .footer__container {
    flex-direction: column;
    gap: var(--space-2);
  }
  
  .footer--minimal .footer__legal-links {
    flex-wrap: wrap;
    justify-content: center;
  }
}

/* footers/simple.css */
/**
 * FOOTER VARIANT: Simple
 * 
 * Eenvoudige footer met logo, korte beschrijving en links.
 * Ideaal voor: kleine webshops, startups, service pages.
 * 
 * STRUCTURE:
 * <footer class="footer footer--simple" data-footer-variant="simple">
 *   <div class="footer__container">
 *     <div class="footer__main">
 *       <div class="footer__brand">
 *         <a class="footer__logo">Logo</a>
 *         <p class="footer__description">...</p>
 *         <div class="footer__social">...</div>
 *       </div>
 *       <nav class="footer__nav">
 *         <a class="footer__link">Link</a>
 *       </nav>
 *     </div>
 *     <div class="footer__bottom">
 *       <p class="footer__copyright">© 2026</p>
 *     </div>
 *   </div>
 * </footer>
 */

.footer--simple {
  --footer-padding-y: var(--space-10);
}

.footer--simple .footer__main {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-8);
}

.footer--simple .footer__brand {
  flex: 0 0 auto;
  max-width: 300px;
}

.footer--simple .footer__nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6);
}

.footer--simple .footer__bottom {
  margin-top: var(--space-6);
  padding-top: var(--space-6);
}

/* Mobile */
@media (max-width: 768px) {
  .footer--simple .footer__main {
    flex-direction: column;
    text-align: center;
  }
  
  .footer--simple .footer__brand {
    max-width: 100%;
  }
  
  .footer--simple .footer__description {
    max-width: 100%;
  }
  
  .footer--simple .footer__social {
    justify-content: center;
  }
  
  .footer--simple .footer__nav {
    justify-content: center;
  }
}


/* ===== Component: navigation ===== */
/* navigation/_base.css */
/**
 * COMPONENT: Navigation - Base
 * Navigation patterns voor alle contexten
 * 
 * AI-NOTE: Navigation is cruciaal voor UX.
 * Admin: sidebar. Webshop: topbar. POS: minimal. QR: none.
 * 
 * VARIANTS: sidebar, topbar, mobile-menu
 */

/* ===== SIDEBAR (Admin) ===== */
.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: var(--admin-sidebar-width, 260px);
  
  background: var(--bg-surface);
  border-right: 1px solid var(--border);
  
  display: flex;
  flex-direction: column;
  
  z-index: var(--z-fixed);
  
  transition: width var(--duration-normal) var(--ease-out);
}

.sidebar--collapsed {
  width: var(--admin-sidebar-collapsed, 64px);
}

/* Sidebar Header (logo) */
.sidebar__header {
  display: flex;
  align-items: center;
  height: var(--admin-header-height, 64px);
  padding: 0 var(--space-4);
  border-bottom: 1px solid var(--border);
}

.sidebar__logo {
  height: 32px;
  width: auto;
}

.sidebar--collapsed .sidebar__logo-text {
  display: none;
}

/* Sidebar Navigation */
.sidebar__nav {
  flex: 1;
  padding: var(--space-3);
  overflow-y: auto;
}

.sidebar__section {
  margin-bottom: var(--space-4);
}

.sidebar__section-title {
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.sidebar--collapsed .sidebar__section-title {
  display: none;
}

/* Nav Items */
.sidebar__link {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  
  color: var(--text-secondary);
  border-radius: var(--radius-md);
  
  transition: 
    background-color var(--transition-fast),
    color var(--transition-fast);
}

.sidebar__link:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.sidebar__link.is-active {
  background: var(--accent-glow);
  color: var(--tenant-accent, var(--accent));
}

.sidebar__link-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.sidebar__link-text {
  white-space: nowrap;
}

.sidebar--collapsed .sidebar__link-text {
  display: none;
}

/* Sidebar Footer */
.sidebar__footer {
  padding: var(--space-3);
  border-top: 1px solid var(--border);
}

/* ===== TOPBAR (Webshop) ===== */
.topbar {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  
  display: flex;
  align-items: center;
  justify-content: space-between;
  
  height: var(--webshop-header-height, 72px);
  padding: 0 var(--space-4);
  
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border);
}

.topbar__logo {
  height: 36px;
  width: auto;
}

.topbar__nav {
  display: flex;
  align-items: center;
  gap: var(--space-6);
}

.topbar__link {
  color: var(--text-secondary);
  font-weight: var(--font-medium);
  transition: color var(--transition-fast);
}

.topbar__link:hover {
  color: var(--text-primary);
}

.topbar__link.is-active {
  color: var(--tenant-accent, var(--accent));
}

.topbar__actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

/* ===== MOBILE MENU ===== */
.mobile-menu-toggle {
  display: none;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
}

@media (max-width: 768px) {
  .mobile-menu-toggle {
    display: flex;
  }
  
  .topbar__nav {
    display: none;
  }
}

.mobile-menu {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--z-modal);
  
  background: var(--bg-surface);
  padding: var(--space-4);
  
  transform: translateX(-100%);
  transition: transform var(--duration-normal) var(--ease-out);
}

.mobile-menu.is-open {
  transform: translateX(0);
}

.mobile-menu__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-6);
}

.mobile-menu__nav {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.mobile-menu__link {
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-lg);
  color: var(--text-secondary);
  border-radius: var(--radius-md);
}

.mobile-menu__link:hover,
.mobile-menu__link.is-active {
  background: var(--bg-hover);
  color: var(--text-primary);
}

/* ===== BREADCRUMBS ===== */
.breadcrumbs {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--text-muted);
}

.breadcrumbs__item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.breadcrumbs__link {
  color: var(--text-muted);
  transition: color var(--transition-fast);
}

.breadcrumbs__link:hover {
  color: var(--text-primary);
}

.breadcrumbs__separator {
  color: var(--border-strong);
}

.breadcrumbs__current {
  color: var(--text-primary);
}

/* navigation/main-nav.css */
/**
 * COMPONENT: Main Navigation Bar (SSoT)
 * Vaste navigatiebalk bovenaan elke pagina.
 * Dit is de ENIGE bron voor .main-nav base styling.
 *
 * Gebruikt door: admin, start, marketing (alle contexten).
 * Context-specifieke uitbreidingen (admin back button, autosave, dropdown)
 * staan in contexts/admin/navbar.css.
 *
 * STRUCTURE:
 * <nav class="main-nav">
 *   <a class="main-nav__logo">
 *     <span class="logo-p">P</span>agayo<span class="logo-dot">.</span>
 *     <span class="logo-country">Nederland</span>
 *   </a>
 *   <button class="main-nav__menu">☰</button>
 * </nav>
 */

/* =================================================================
   NAVBAR CONTAINER
   ================================================================= */

.main-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--space-6);
  height: 56px;
  background: var(--bg-deep);
  border-bottom: 1px solid var(--border);
  z-index: 100;
  overflow: visible;
  max-width: 100vw;
}

/* =================================================================
   LOGO
   ================================================================= */

.main-nav__logo {
  font-family: var(--font-sans);
  font-size: 1.25rem;
  font-weight: var(--font-bold, 700);
  color: var(--text-primary);
  text-decoration: none;
  letter-spacing: -0.02em;
}

.main-nav__logo .logo-p,
.main-nav__logo .logo-dot {
  color: var(--accent);
  font-weight: 800;
}

/* =================================================================
   COUNTRY INDICATOR
   ================================================================= */

.logo-country {
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--text-muted);
  margin-left: var(--space-2);
  letter-spacing: 0;
}

/* =================================================================
   MENU BUTTON (hamburger)
   ================================================================= */

.main-nav__menu {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: none;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  padding: var(--space-2);
  border-radius: var(--radius-md);
  transition: color 0.15s ease, background 0.15s ease;
}

.main-nav__menu:hover {
  color: var(--accent);
  background: var(--bg-hover);
}

/* navigation/mobile-menu.css */
/**
 * NAVIGATION: Mobile Menu
 * 
 * Full-screen mobile navigatiemenu.
 * Slide-in van links of overlay.
 * 
 * AI-NOTE: Gebruik voor mobile header navigatie.
 * Trigger via hamburger button in header.
 * 
 * STRUCTURE:
 * <div class="mobile-menu" data-open="false">
 *   <div class="mobile-menu__overlay"></div>
 *   <div class="mobile-menu__panel">
 *     <div class="mobile-menu__header">
 *       <a class="mobile-menu__logo">Logo</a>
 *       <button class="mobile-menu__close">×</button>
 *     </div>
 *     <nav class="mobile-menu__nav">
 *       <a class="mobile-menu__link">Home</a>
 *       <a class="mobile-menu__link active">Products</a>
 *       <div class="mobile-menu__accordion">
 *         <button class="mobile-menu__accordion-trigger">Categories</button>
 *         <div class="mobile-menu__accordion-content">
 *           <a class="mobile-menu__sublink">Category 1</a>
 *         </div>
 *       </div>
 *     </nav>
 *     <div class="mobile-menu__footer">
 *       <button class="btn btn--primary btn--full">Login</button>
 *     </div>
 *   </div>
 * </div>
 */

/* =================================================================
   MOBILE MENU CONTAINER
   ================================================================= */

.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  visibility: hidden;
  pointer-events: none;
}

.mobile-menu[data-open="true"] {
  visibility: visible;
  pointer-events: auto;
}

/* =================================================================
   OVERLAY
   ================================================================= */

.mobile-menu__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
  transition: opacity var(--transition-normal);
}

.mobile-menu[data-open="true"] .mobile-menu__overlay {
  opacity: 1;
}

/* =================================================================
   PANEL
   ================================================================= */

.mobile-menu__panel {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: min(320px, 85vw);
  display: flex;
  flex-direction: column;
  background: var(--surface-primary);
  transform: translateX(-100%);
  transition: transform var(--transition-normal);
  overflow: hidden;
}

.mobile-menu[data-open="true"] .mobile-menu__panel {
  transform: translateX(0);
}

/* Right slide variant */
.mobile-menu--right .mobile-menu__panel {
  left: auto;
  right: 0;
  transform: translateX(100%);
}

.mobile-menu--right[data-open="true"] .mobile-menu__panel {
  transform: translateX(0);
}

/* =================================================================
   HEADER
   ================================================================= */

.mobile-menu__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4);
  border-bottom: 1px solid var(--border-subtle);
}

.mobile-menu__logo {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  text-decoration: none;
  color: var(--text-primary);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-lg);
}

.mobile-menu__close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  background: transparent;
  border: none;
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  font-size: 1.5rem;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.mobile-menu__close:hover {
  background: var(--surface-hover);
  color: var(--text-primary);
}

/* =================================================================
   NAVIGATION
   ================================================================= */

.mobile-menu__nav {
  flex: 1;
  padding: var(--space-4);
  overflow-y: auto;
}

.mobile-menu__link {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-2);
  color: var(--text-primary);
  text-decoration: none;
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  border-radius: var(--radius-md);
  transition: all var(--transition-fast);
}

.mobile-menu__link:hover {
  background: var(--surface-hover);
}

.mobile-menu__link.active {
  color: var(--accent);
  background: var(--accent-subtle);
}

.mobile-menu__link-icon {
  width: 1.25rem;
  height: 1.25rem;
  color: var(--text-secondary);
}

/* =================================================================
   ACCORDION (Nested menu)
   ================================================================= */

.mobile-menu__accordion {
  margin: var(--space-1) 0;
}

.mobile-menu__accordion-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: var(--space-3) var(--space-2);
  background: transparent;
  border: none;
  color: var(--text-primary);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  text-align: left;
  cursor: pointer;
  border-radius: var(--radius-md);
  transition: all var(--transition-fast);
}

.mobile-menu__accordion-trigger:hover {
  background: var(--surface-hover);
}

.mobile-menu__accordion-trigger::after {
  content: "›";
  font-size: 1.25rem;
  color: var(--text-tertiary);
  transition: transform var(--transition-fast);
}

.mobile-menu__accordion[data-open="true"] .mobile-menu__accordion-trigger::after {
  transform: rotate(90deg);
}

.mobile-menu__accordion-content {
  display: none;
  padding-left: var(--space-4);
}

.mobile-menu__accordion[data-open="true"] .mobile-menu__accordion-content {
  display: block;
}

.mobile-menu__sublink {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2);
  color: var(--text-secondary);
  text-decoration: none;
  font-size: var(--font-size-sm);
  border-radius: var(--radius-md);
  transition: all var(--transition-fast);
}

.mobile-menu__sublink:hover {
  color: var(--text-primary);
  background: var(--surface-hover);
}

/* =================================================================
   FOOTER
   ================================================================= */

.mobile-menu__footer {
  padding: var(--space-4);
  border-top: 1px solid var(--border-subtle);
}

.mobile-menu__footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}

.mobile-menu__footer-link {
  color: var(--text-secondary);
  text-decoration: none;
  font-size: var(--font-size-sm);
}

.mobile-menu__footer-link:hover {
  color: var(--text-primary);
}

/* navigation/sidebar.css */
/**
 * NAVIGATION: Sidebar
 * 
 * Admin/dashboard sidebar navigatie.
 * Collapsible op tablet/mobile.
 * 
 * AI-NOTE: Gebruik voor admin panels en dashboards.
 * Combineert met admin-layout voor volledige layout.
 * 
 * STRUCTURE:
 * <aside class="sidebar">
 *   <div class="sidebar__header">
 *     <a class="sidebar__logo">Logo</a>
 *     <button class="sidebar__collapse">←</button>
 *   </div>
 *   <nav class="sidebar__nav">
 *     <a class="sidebar__link">Dashboard</a>
 *     <a class="sidebar__link sidebar__link--active">Orders</a>
 *     <div class="sidebar__group">
 *       <span class="sidebar__group-title">Settings</span>
 *       <a class="sidebar__link">General</a>
 *     </div>
 *   </nav>
 *   <div class="sidebar__footer">
 *     <a class="sidebar__link">Logout</a>
 *   </div>
 * </aside>
 */

/* =================================================================
   SIDEBAR CONTAINER
   ================================================================= */

.sidebar {
  --sidebar-width: 260px;
  --sidebar-collapsed-width: 64px;
  --sidebar-bg: var(--surface-primary);
  --sidebar-border: var(--border-subtle);
  
  display: flex;
  flex-direction: column;
  width: var(--sidebar-width);
  height: 100vh;
  background: var(--sidebar-bg);
  border-right: 1px solid var(--sidebar-border);
  transition: width var(--transition-normal);
  overflow: hidden;
}

.sidebar--collapsed {
  width: var(--sidebar-collapsed-width);
}

.sidebar--collapsed .sidebar__text,
.sidebar--collapsed .sidebar__group-title {
  opacity: 0;
  visibility: hidden;
}

/* =================================================================
   SIDEBAR HEADER
   ================================================================= */

.sidebar__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4);
  border-bottom: 1px solid var(--sidebar-border);
  min-height: var(--space-16);
}

.sidebar__logo {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  text-decoration: none;
  color: var(--text-primary);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-lg);
}

.sidebar__logo-icon {
  width: 2rem;
  height: 2rem;
  flex-shrink: 0;
}

.sidebar__collapse {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  background: transparent;
  border: none;
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.sidebar__collapse:hover {
  background: var(--surface-hover);
  color: var(--text-primary);
}

.sidebar--collapsed .sidebar__collapse {
  transform: rotate(180deg);
}

/* =================================================================
   SIDEBAR NAVIGATION
   ================================================================= */

.sidebar__nav {
  flex: 1;
  padding: var(--space-3);
  overflow-y: auto;
}

.sidebar__link {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  margin-bottom: var(--space-1);
  color: var(--text-secondary);
  text-decoration: none;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  border-radius: var(--radius-md);
  transition: all var(--transition-fast);
  white-space: nowrap;
}

.sidebar__link:hover {
  color: var(--text-primary);
  background: var(--surface-hover);
}

.sidebar__link--active {
  color: var(--accent);
  background: var(--accent-subtle);
}

.sidebar__link--active:hover {
  background: var(--accent-subtle);
}

.sidebar__link-icon {
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
}

.sidebar__link-badge {
  margin-left: auto;
  padding: var(--space-1) var(--space-2);
  background: var(--accent);
  color: var(--text-on-accent);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  border-radius: var(--radius-full);
}

/* =================================================================
   SIDEBAR GROUPS
   ================================================================= */

.sidebar__group {
  margin-top: var(--space-4);
}

.sidebar__group-title {
  display: block;
  padding: var(--space-2) var(--space-3);
  color: var(--text-tertiary);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  transition: opacity var(--transition-fast);
}

/* =================================================================
   SIDEBAR FOOTER
   ================================================================= */

.sidebar__footer {
  padding: var(--space-3);
  border-top: 1px solid var(--sidebar-border);
}

.sidebar__user {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2);
  border-radius: var(--radius-md);
}

.sidebar__user-avatar {
  width: 2rem;
  height: 2rem;
  border-radius: var(--radius-full);
  object-fit: cover;
  flex-shrink: 0;
}

.sidebar__user-info {
  flex: 1;
  min-width: 0;
}

.sidebar__user-name {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sidebar__user-role {
  font-size: var(--font-size-xs);
  color: var(--text-tertiary);
}

/* =================================================================
   MOBILE OVERLAY
   ================================================================= */

.sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: var(--z-overlay);
}

@media (max-width: 1023px) {
  .sidebar {
    position: fixed;
    left: 0;
    top: 0;
    z-index: var(--z-modal);
    transform: translateX(-100%);
  }
  
  .sidebar--open {
    transform: translateX(0);
  }
  
  .sidebar--open + .sidebar-overlay {
    display: block;
  }
}

/* navigation/topbar.css */
/**
 * NAVIGATION: Topbar
 * 
 * Horizontale navigatiebalk, vaak onder de header.
 * Voor secundaire navigatie of tabs.
 * 
 * AI-NOTE: Gebruik voor category filters, tab navigatie,
 * of secundaire menu's binnen een pagina.
 * 
 * STRUCTURE:
 * <nav class="topbar">
 *   <div class="topbar__nav">
 *     <a class="topbar__link active">All</a>
 *     <a class="topbar__link">Pending</a>
 *     <a class="topbar__link">Completed</a>
 *   </div>
 *   <div class="topbar__actions">
 *     <button class="btn btn--sm">Filter</button>
 *   </div>
 * </nav>
 */

/* =================================================================
   TOPBAR CONTAINER
   ================================================================= */

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-2) var(--space-4);
  background: var(--surface-secondary);
  border-bottom: 1px solid var(--border-subtle);
}

.topbar--sticky {
  position: sticky;
  top: var(--space-16); /* Below header */
  z-index: var(--z-sticky);
}

/* =================================================================
   TOPBAR NAVIGATION
   ================================================================= */

.topbar__nav {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.topbar__nav::-webkit-scrollbar {
  display: none;
}

.topbar__link {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  color: var(--text-secondary);
  text-decoration: none;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  white-space: nowrap;
  border-radius: var(--radius-md);
  transition: all var(--transition-fast);
}

.topbar__link:hover {
  color: var(--text-primary);
  background: var(--surface-hover);
}

.topbar__link.active,
.topbar__link[aria-current="page"] {
  color: var(--accent);
  background: var(--accent-subtle);
}

.topbar__link-count {
  padding: var(--space-1) var(--space-2);
  background: var(--surface-tertiary);
  color: var(--text-secondary);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  border-radius: var(--radius-full);
}

.topbar__link.active .topbar__link-count {
  background: var(--accent);
  color: var(--text-on-accent);
}

/* =================================================================
   TOPBAR ACTIONS
   ================================================================= */

.topbar__actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 0;
}

/* =================================================================
   TOPBAR VARIANTS
   ================================================================= */

/* Pills style */
.topbar--pills .topbar__link {
  border-radius: var(--radius-full);
}

/* Underline style */
.topbar--underline {
  border-bottom: none;
}

.topbar--underline .topbar__link {
  border-radius: 0;
  border-bottom: 2px solid transparent;
  padding-bottom: var(--space-3);
  margin-bottom: -2px;
}

.topbar--underline .topbar__link.active {
  background: transparent;
  border-bottom-color: var(--accent);
}

/* Compact */
.topbar--compact {
  padding: var(--space-1) var(--space-2);
}

.topbar--compact .topbar__link {
  padding: var(--space-1) var(--space-2);
  font-size: var(--font-size-xs);
}

/* =================================================================
   RESPONSIVE
   ================================================================= */

@media (max-width: 767px) {
  .topbar {
    flex-wrap: wrap;
    gap: var(--space-2);
  }
  
  .topbar__nav {
    order: 2;
    width: 100%;
  }
  
  .topbar__actions {
    order: 1;
    width: 100%;
    justify-content: flex-end;
  }
}


/* ===== Component: tables ===== */
/* tables/_base.css */
/**
 * COMPONENT: Tables - Base
 * Data table styling voor admin interfaces
 * 
 * AI-NOTE: Tables zijn voor data-heavy admin views.
 * Sorteerbaar, filterbaar, responsive.
 * 
 * VARIANTS: data-table, simple-table
 */

/* ===== BASE TABLE ===== */
.table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}

/* ===== TABLE HEADER ===== */
.table th {
  padding: var(--space-3) var(--space-4);
  text-align: left;
  font-weight: var(--font-medium);
  color: var(--text-muted);
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}

/* Sortable header */
.table th.sortable {
  cursor: pointer;
  user-select: none;
}

.table th.sortable:hover {
  color: var(--text-primary);
}

.table th.sorted {
  color: var(--tenant-accent, var(--accent));
}

/* ===== TABLE BODY ===== */
.table td {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border);
  color: var(--text-primary);
  vertical-align: middle;
}

/* ===== ROW STATES ===== */
.table tbody tr {
  transition: background-color var(--transition-fast);
}

.table tbody tr:hover {
  background: var(--bg-hover);
}

.table tbody tr.selected {
  background: var(--accent-glow);
}

/* Clickable row */
.table tbody tr.clickable {
  cursor: pointer;
}

/* ===== TABLE WRAPPER ===== */
.table-wrapper {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}

.table-wrapper .table th:first-child,
.table-wrapper .table td:first-child {
  padding-left: var(--space-5);
}

.table-wrapper .table th:last-child,
.table-wrapper .table td:last-child {
  padding-right: var(--space-5);
}

/* ===== DATA TABLE (with actions) ===== */
.data-table {
  background: var(--bg-surface);
}

.data-table .table-actions {
  display: flex;
  gap: var(--space-2);
  opacity: 0.6;
  transition: opacity var(--transition-fast);
}

.data-table tr:hover .table-actions {
  opacity: 1;
}

/* ===== SIMPLE TABLE (minimal) ===== */
.simple-table {
  border: none;
}

.simple-table th {
  background: transparent;
  border-bottom: 2px solid var(--border);
}

.simple-table tr:last-child td {
  border-bottom: none;
}

/* ===== TABLE PAGINATION ===== */
.table-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) var(--space-4);
  background: var(--bg-surface);
  border-top: 1px solid var(--border);
  font-size: var(--text-sm);
  color: var(--text-muted);
}

.table-pagination__info {
  /* "Showing 1-10 of 100" */
}

.table-pagination__controls {
  display: flex;
  gap: var(--space-2);
}

/* ===== EMPTY STATE ===== */
.table-empty {
  text-align: center;
  padding: var(--space-8) var(--space-4);
  color: var(--text-muted);
}

.table-empty__icon {
  width: 48px;
  height: 48px;
  margin: 0 auto var(--space-3);
  opacity: 0.5;
}


/* ===== Component: modals ===== */
/* modals/_base.css */
/**
 * COMPONENT: Modals - Base
 * Overlay dialogs voor acties en content
 * 
 * AI-NOTE: Modals onderbreken de workflow voor belangrijke acties.
 * Gebruik spaarzaam. Zorg voor goede focus trap en escape handling.
 * 
 * VARIANTS: dialog, drawer, confirm
 */

/* ===== MODAL BACKDROP ===== */
.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal-backdrop);
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  
  opacity: 0;
  transition: opacity var(--duration-normal) var(--ease-out);
}

.modal-backdrop.is-open {
  opacity: 1;
}

/* ===== BASE MODAL ===== */
.modal {
  position: fixed;
  z-index: var(--z-modal);
  
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xl);
  
  max-height: calc(100vh - var(--space-8));
  overflow: hidden;
  display: flex;
  flex-direction: column;
  
  /* Animation */
  opacity: 0;
  transform: scale(0.95) translateY(10px);
  transition: 
    opacity var(--duration-normal) var(--ease-out),
    transform var(--duration-normal) var(--ease-out);
}

.modal.is-open {
  opacity: 1;
  transform: scale(1) translateY(0);
}

/* ===== MODAL POSITIONING ===== */
.modal--center {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.95);
}

.modal--center.is-open {
  transform: translate(-50%, -50%) scale(1);
}

/* ===== SIZE VARIANTS ===== */
.modal--sm {
  width: 90%;
  max-width: 400px;
}

.modal--md {
  width: 90%;
  max-width: 560px;
}

.modal--lg {
  width: 90%;
  max-width: 800px;
}

.modal--full {
  width: calc(100% - var(--space-8));
  height: calc(100% - var(--space-8));
  max-width: 1200px;
}

/* ===== MODAL SECTIONS ===== */
.modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.modal__title {
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
}

.modal__close {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  color: var(--text-muted);
  transition: 
    background-color var(--transition-fast),
    color var(--transition-fast);
}

.modal__close:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.modal__body {
  padding: var(--space-5);
  overflow-y: auto;
  flex: 1;
}

.modal__footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-top: 1px solid var(--border);
  flex-shrink: 0;
}

/* ===== DRAWER VARIANT ===== */
.modal--drawer {
  border-radius: var(--radius-xl) 0 0 var(--radius-xl);
  top: 0;
  right: 0;
  bottom: 0;
  width: 90%;
  max-width: 480px;
  max-height: none;
  
  transform: translateX(100%);
}

.modal--drawer.is-open {
  transform: translateX(0);
}

.modal--drawer-left {
  border-radius: 0 var(--radius-xl) var(--radius-xl) 0;
  left: 0;
  right: auto;
  
  transform: translateX(-100%);
}

.modal--drawer-left.is-open {
  transform: translateX(0);
}

/* ===== CONFIRM DIALOG ===== */
.modal--confirm {
  text-align: center;
}

.modal--confirm .modal__body {
  padding: var(--space-6);
}

.modal--confirm .modal__icon {
  width: 48px;
  height: 48px;
  margin: 0 auto var(--space-4);
  color: var(--warning);
}

.modal--confirm .modal__message {
  color: var(--text-secondary);
  margin-top: var(--space-2);
}

.modal--confirm .modal__footer {
  justify-content: center;
}

/* ===== MODAL WITH FORM ===== */
.modal--form .modal__body {
  padding: 0;
}

.modal--form .form {
  padding: var(--space-5);
}

/* modals/confirm.css */
/**
 * MODAL: Confirm
 * 
 * Simpele bevestigingsdialoog.
 * Voor delete, logout, destructieve acties.
 * 
 * AI-NOTE: Gebruik voor simpele ja/nee beslissingen.
 * Niet voor complexe formulieren (gebruik dialog).
 * 
 * VARIANTS:
 * - default: Neutraal bevestigen
 * - danger: Destructieve actie (rood)
 * - warning: Waarschuwing (oranje)
 * 
 * STRUCTURE:
 * <div class="confirm confirm--danger" data-open="false">
 *   <div class="confirm__overlay"></div>
 *   <div class="confirm__panel">
 *     <div class="confirm__icon">⚠️</div>
 *     <h2 class="confirm__title">Delete Order?</h2>
 *     <p class="confirm__message">This action cannot be undone.</p>
 *     <div class="confirm__actions">
 *       <button class="btn">Cancel</button>
 *       <button class="btn btn--destructive">Delete</button>
 *     </div>
 *   </div>
 * </div>
 */

/* =================================================================
   CONFIRM CONTAINER
   ================================================================= */

.confirm {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
  visibility: hidden;
  pointer-events: none;
}

.confirm[data-open="true"] {
  visibility: visible;
  pointer-events: auto;
}

/* =================================================================
   OVERLAY
   ================================================================= */

.confirm__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  opacity: 0;
  transition: opacity var(--transition-normal);
}

.confirm[data-open="true"] .confirm__overlay {
  opacity: 1;
}

/* =================================================================
   PANEL
   ================================================================= */

.confirm__panel {
  position: relative;
  width: 100%;
  max-width: 400px;
  padding: var(--space-6);
  background: var(--surface-primary);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  text-align: center;
  transform: scale(0.95);
  opacity: 0;
  transition: all var(--transition-normal);
}

.confirm[data-open="true"] .confirm__panel {
  transform: scale(1);
  opacity: 1;
}

/* =================================================================
   ICON
   ================================================================= */

.confirm__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.5rem;
  height: 3.5rem;
  margin: 0 auto var(--space-4);
  background: var(--surface-secondary);
  border-radius: var(--radius-full);
  font-size: 1.5rem;
}

/* Danger variant */
.confirm--danger .confirm__icon {
  background: var(--error-subtle);
  color: var(--error);
}

/* Warning variant */
.confirm--warning .confirm__icon {
  background: var(--warning-subtle);
  color: var(--warning);
}

/* Success variant */
.confirm--success .confirm__icon {
  background: var(--success-subtle);
  color: var(--success);
}

/* Info variant */
.confirm--info .confirm__icon {
  background: var(--info-subtle);
  color: var(--info);
}

/* =================================================================
   CONTENT
   ================================================================= */

.confirm__title {
  margin: 0 0 var(--space-2);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
}

.confirm__message {
  margin: 0 0 var(--space-5);
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
  line-height: 1.5;
}

/* =================================================================
   ACTIONS
   ================================================================= */

.confirm__actions {
  display: flex;
  gap: var(--space-3);
  justify-content: center;
}

.confirm__actions .btn {
  flex: 1;
  max-width: 140px;
}

/* Stacked actions */
.confirm--stacked .confirm__actions {
  flex-direction: column;
}

.confirm--stacked .confirm__actions .btn {
  max-width: none;
}

/* =================================================================
   LOADING STATE
   ================================================================= */

.confirm--loading .confirm__panel {
  pointer-events: none;
}

.confirm--loading .confirm__actions .btn {
  opacity: 0.6;
}

/* =================================================================
   RESPONSIVE
   ================================================================= */

@media (max-width: 479px) {
  .confirm__panel {
    padding: var(--space-5);
  }
  
  .confirm__actions {
    flex-direction: column;
  }
  
  .confirm__actions .btn {
    max-width: none;
  }
}

/* modals/dialog.css */
/**
 * MODAL: Dialog
 * 
 * Centered modal dialoog voor formulieren, content, etc.
 * Met overlay backdrop.
 * 
 * AI-NOTE: Gebruik voor formulieren, confirmaties met veel content,
 * of complexe interacties die focus vereisen.
 * 
 * STRUCTURE:
 * <div class="dialog" data-open="false">
 *   <div class="dialog__overlay"></div>
 *   <div class="dialog__container">
 *     <div class="dialog__panel">
 *       <div class="dialog__header">
 *         <h2 class="dialog__title">Title</h2>
 *         <button class="dialog__close">×</button>
 *       </div>
 *       <div class="dialog__body">Content</div>
 *       <div class="dialog__footer">
 *         <button class="btn">Cancel</button>
 *         <button class="btn btn--primary">Save</button>
 *       </div>
 *     </div>
 *   </div>
 * </div>
 */

/* =================================================================
   DIALOG CONTAINER
   ================================================================= */

.dialog {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  visibility: hidden;
  pointer-events: none;
}

.dialog[data-open="true"] {
  visibility: visible;
  pointer-events: auto;
}

/* =================================================================
   OVERLAY
   ================================================================= */

.dialog__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  opacity: 0;
  transition: opacity var(--transition-normal);
}

.dialog[data-open="true"] .dialog__overlay {
  opacity: 1;
}

/* =================================================================
   CONTAINER (Scrollable wrapper)
   ================================================================= */

.dialog__container {
  position: relative;
  max-height: 100vh;
  max-width: 100vw;
  padding: var(--space-4);
  overflow-y: auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* =================================================================
   PANEL
   ================================================================= */

.dialog__panel {
  width: 100%;
  max-width: 500px;
  background: var(--surface-primary);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  transform: scale(0.95);
  opacity: 0;
  transition: all var(--transition-normal);
}

.dialog[data-open="true"] .dialog__panel {
  transform: scale(1);
  opacity: 1;
}

/* Size variants */
.dialog--sm .dialog__panel {
  max-width: 400px;
}

.dialog--lg .dialog__panel {
  max-width: 700px;
}

.dialog--xl .dialog__panel {
  max-width: 900px;
}

.dialog--full .dialog__panel {
  max-width: calc(100vw - var(--space-8));
  max-height: calc(100vh - var(--space-8));
}

/* =================================================================
   HEADER
   ================================================================= */

.dialog__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--border-subtle);
}

.dialog__title {
  margin: 0;
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
}

.dialog__subtitle {
  margin: var(--space-1) 0 0;
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
}

.dialog__close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  background: transparent;
  border: none;
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  font-size: 1.25rem;
  cursor: pointer;
  transition: all var(--transition-fast);
  flex-shrink: 0;
}

.dialog__close:hover {
  background: var(--surface-hover);
  color: var(--text-primary);
}

/* =================================================================
   BODY
   ================================================================= */

.dialog__body {
  padding: var(--space-5);
  color: var(--text-primary);
}

.dialog__body--scroll {
  max-height: 60vh;
  overflow-y: auto;
}

/* =================================================================
   FOOTER
   ================================================================= */

.dialog__footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-top: 1px solid var(--border-subtle);
  background: var(--surface-secondary);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

.dialog__footer--split {
  justify-content: space-between;
}

/* =================================================================
   RESPONSIVE
   ================================================================= */

@media (max-width: 639px) {
  .dialog__container {
    padding: var(--space-2);
    align-items: flex-end;
  }
  
  .dialog__panel {
    max-width: 100%;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  }
  
  .dialog__body {
    padding: var(--space-4);
  }
  
  .dialog__footer {
    flex-direction: column;
    gap: var(--space-2);
  }
  
  .dialog__footer .btn {
    width: 100%;
  }
}

/* modals/drawer.css */
/**
 * MODAL: Drawer
 * 
 * Slide-in panel van de zijkant.
 * Voor settings, filters, cart, etc.
 * 
 * AI-NOTE: Gebruik voor secundaire content die niet
 * de volle focus nodig heeft. Cart drawer, filter panel, etc.
 * 
 * STRUCTURE:
 * <div class="drawer" data-open="false" data-position="right">
 *   <div class="drawer__overlay"></div>
 *   <div class="drawer__panel">
 *     <div class="drawer__header">
 *       <h2 class="drawer__title">Shopping Cart</h2>
 *       <button class="drawer__close">×</button>
 *     </div>
 *     <div class="drawer__body">Content</div>
 *     <div class="drawer__footer">
 *       <button class="btn btn--primary btn--full">Checkout</button>
 *     </div>
 *   </div>
 * </div>
 */

/* =================================================================
   DRAWER CONTAINER
   ================================================================= */

.drawer {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  visibility: hidden;
  pointer-events: none;
}

.drawer[data-open="true"] {
  visibility: visible;
  pointer-events: auto;
}

/* =================================================================
   OVERLAY
   ================================================================= */

.drawer__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
  transition: opacity var(--transition-normal);
}

.drawer[data-open="true"] .drawer__overlay {
  opacity: 1;
}

/* =================================================================
   PANEL
   ================================================================= */

.drawer__panel {
  position: absolute;
  top: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  width: min(400px, 90vw);
  background: var(--surface-primary);
  box-shadow: var(--shadow-xl);
  transition: transform var(--transition-normal);
}

/* Right position (default) */
.drawer[data-position="right"] .drawer__panel,
.drawer:not([data-position]) .drawer__panel {
  right: 0;
  transform: translateX(100%);
}

.drawer[data-position="right"][data-open="true"] .drawer__panel,
.drawer:not([data-position])[data-open="true"] .drawer__panel {
  transform: translateX(0);
}

/* Left position */
.drawer[data-position="left"] .drawer__panel {
  left: 0;
  transform: translateX(-100%);
}

.drawer[data-position="left"][data-open="true"] .drawer__panel {
  transform: translateX(0);
}

/* Bottom position (mobile-friendly) */
.drawer[data-position="bottom"] .drawer__panel {
  top: auto;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  max-height: 90vh;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  transform: translateY(100%);
}

.drawer[data-position="bottom"][data-open="true"] .drawer__panel {
  transform: translateY(0);
}

/* Size variants */
.drawer--sm .drawer__panel {
  width: min(320px, 90vw);
}

.drawer--lg .drawer__panel {
  width: min(600px, 90vw);
}

.drawer--xl .drawer__panel {
  width: min(800px, 90vw);
}

/* =================================================================
   HEADER
   ================================================================= */

.drawer__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-4);
  border-bottom: 1px solid var(--border-subtle);
  flex-shrink: 0;
}

.drawer__title {
  margin: 0;
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
}

.drawer__subtitle {
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
}

.drawer__close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  background: transparent;
  border: none;
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  font-size: 1.25rem;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.drawer__close:hover {
  background: var(--surface-hover);
  color: var(--text-primary);
}

/* =================================================================
   BODY
   ================================================================= */

.drawer__body {
  flex: 1;
  padding: var(--space-4);
  overflow-y: auto;
}

.drawer__body--no-padding {
  padding: 0;
}

/* =================================================================
   FOOTER
   ================================================================= */

.drawer__footer {
  padding: var(--space-4);
  border-top: 1px solid var(--border-subtle);
  background: var(--surface-secondary);
  flex-shrink: 0;
}

.drawer__footer-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-2);
}

.drawer__footer-row:last-child {
  margin-bottom: 0;
}

.drawer__footer-label {
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
}

.drawer__footer-value {
  color: var(--text-primary);
  font-weight: var(--font-weight-semibold);
}

.drawer__footer-total {
  font-size: var(--font-size-lg);
}

/* =================================================================
   DRAG HANDLE (for bottom drawer)
   ================================================================= */

.drawer__drag-handle {
  display: none;
  width: 36px;
  height: 4px;
  margin: var(--space-2) auto;
  background: var(--border-subtle);
  border-radius: var(--radius-full);
}

.drawer[data-position="bottom"] .drawer__drag-handle {
  display: block;
}


/* ===== Component: social-auth ===== */
/* social-auth/social-auth.css */
/**
 * Social Auth Components (SSoT)
 * Gedeelde styling voor social login buttons en dividers.
 * Gebruikt in: start context (login/register), admin context (admin login)
 */

/* ===== AUTH DIVIDER ("of" separator) ===== */
.auth-divider {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: var(--space-5) 0;
  color: var(--text-disabled);
  font-size: var(--text-xs-plus);
  text-transform: lowercase;
}

.auth-divider::before,
.auth-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border-light);
}

/* ===== SOCIAL AUTH BUTTONS ===== */
.social-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  width: 100%;
  height: 48px;
  padding: 0 var(--space-4);
  border-radius: var(--radius-lg);
  font-size: var(--text-sm-plus);
  font-weight: var(--font-semibold);
  font-family: inherit;
  cursor: pointer;
  transition: all var(--transition-fast);
  box-sizing: border-box;
}

.social-btn svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

/* Google: wit met subtle border (Google HIG) */
.social-btn--google {
  background: white;
  color: #1f1f1f;
  border: 1px solid var(--border-light);
}

.social-btn--google:hover {
  background: #f8f8f8;
  border-color: var(--text-disabled);
}

.social-btn--google:active {
  background: #f0f0f0;
  transform: scale(0.98);
}



}

@layer contexts {
/**
 * CONTEXT: Webshop (Revolutionary)
 * Base styling voor de klant-facing webshop
 * 
 * AI-NOTE: Webshop context is voor eindklanten (shoppers).
 * Consistent met POS en onboarding design patterns.
 * 
 * Kenmerken:
 * - Product-focused layouts
 * - Conversie-optimized
 * - Mobile-first
 * - Tenant branding prominent
 * - Clean, modern aesthetic (Stripe-level design)
 * 
 * FILES IN THIS CONTEXT:
 * - _base.css (this file) - tokens, body defaults, utilities
 * - layout.css - header, footer, container
 * - hero.css - hero section
 * - sections.css - generic sections
 * - usp.css - USP bar
 * - banners.css - promotional banners
 * - trust.css - trust/testimonial section
 * - loading.css - loading states
 * - product-grid.css - product listings
 * - product-detail.css - single product
 * - cart.css - shopping cart
 * - checkout.css - checkout flow
 */

/* =================================================================
   WEBSHOP-SPECIFIC TOKENS
   ================================================================= */

:root {
  /* Layout dimensions */
  --webshop-header-height: 72px;
  --webshop-content-max: 1400px;
  --webshop-content-narrow: 960px;
  --webshop-content-padding: var(--space-4);
  
  /* Product grid */
  --webshop-grid-gap: var(--space-6);
  --webshop-product-card-min: 260px;
  
  /* Touch targets (mobile-friendly) */
  --webshop-touch-min: 44px;
  
  /* Content spacing */
  --webshop-section-gap: var(--space-12, 48px);
  --webshop-section-padding: var(--space-8);
  
  /* Border radius */
  --webshop-radius-card: var(--radius-lg);
  --webshop-radius-button: var(--radius-md);
}

/* =================================================================
   WEBSHOP BODY DEFAULTS
   ================================================================= */

.webshop-layout {
  font-family: var(--tenant-font-main, var(--font-sans));
  font-size: var(--text-base);
  line-height: 1.6;
  background: var(--bg-deep);
  color: var(--text-primary);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* =================================================================
   CONTAINER UTILITY
   ================================================================= */

.container {
  max-width: var(--webshop-content-max);
  margin: 0 auto;
  padding-left: var(--webshop-content-padding);
  padding-right: var(--webshop-content-padding);
}

.container-narrow {
  max-width: var(--webshop-content-narrow);
}

.container-centered {
  text-align: center;
}

/* =================================================================
   WEBSHOP BUTTON OVERRIDES
   Alleen webshop-specifieke aanpassingen.
   Base styling komt uit @layer components (components/buttons/*).
   ================================================================= */

/* Webshop buttons gebruiken tenant-specifieke border-radius */
.btn {
  border-radius: var(--webshop-radius-button);
}

/* =================================================================
   PRICE DISPLAY
   ================================================================= */

.price {
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}

.price--sale {
  color: var(--error);
}

.price--original {
  text-decoration: line-through;
  color: var(--text-muted);
  font-weight: var(--font-normal);
  font-size: 0.875em;
}

/* =================================================================
   ANIMATIONS
   ================================================================= */

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

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

@keyframes cart-bounce {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.2); }
}

.cart-icon--animate {
  animation: cart-bounce 0.3s var(--ease-bounce);
}

/* =================================================================
   RESPONSIVE DEFAULTS
   ================================================================= */

@media (max-width: 768px) {
  :root {
    --webshop-content-padding: var(--space-3);
    --webshop-section-padding: var(--space-6);
  }
}

@media (max-width: 480px) {
  :root {
    --webshop-content-padding: var(--space-2);
  }
}

/* account.css */
/**
 * WEBSHOP CONTEXT: Account Components
 *
 * BEM-style classes for the customer account area.
 * Layout: sidebar-grid on desktop, horizontal tabs on mobile (<768px).
 *
 * Components:
 *   AccountShell.tsx          → .account-shell, .account-shell__layout, __content, __page
 *   AccountSidebar.tsx        → .account-sidebar, .account-sidebar__list, __link, __link--active
 *   AccountBreadcrumbs.tsx    → .account-breadcrumbs, __list, __item, __link, __current
 *   AccountOverviewPage.tsx   → .account-overview, .account-quick-links, .account-quick-link
 *   AccountOrdersPage.tsx     → .account-orders, __toolbar, __filters, __filter-btn
 *   AccountReturnsPage.tsx    → .account-returns, __list, __card
 *   AccountAddressesPage.tsx  → .account-addresses, __header, __grid, __card
 *   AccountSettingsPage.tsx   → .account-settings
 *   OrderDetailPage.tsx       → .order-detail, __back-link, __header, __address, __tracking
 *   OrderTimeline.tsx         → .order-timeline, __step, __indicator, __line
 *   OrderItemsTable.tsx       → .order-items-table, __header, __row, __col, __summary
 *   ReturnDetailPage.tsx      → .return-detail, __back-link, __header, __items, __refund
 *   ReturnRequestForm.tsx     → .return-request-form, __section, __items, __actions
 *   AddressBook.tsx           → (uses .account-addresses block)
 */

/* =================================================================
   ACCOUNT SHELL — Layout wrapper (sidebar + content)
   ================================================================= */

.account-shell {
  max-width: 1100px;
  margin: 0 auto;
  padding: var(--space-6);
}

.account-shell__title {
  font-size: var(--text-2xl);
  font-weight: var(--font-bold);
  color: var(--text-primary);
  margin: 0 0 var(--space-6) 0;
}

.account-shell__layout {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: var(--space-8);
  align-items: start;
}

.account-shell__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  min-width: 0;
}

.account-shell__page {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

/* =================================================================
   ACCOUNT SIDEBAR — Vertical nav (desktop) / horizontal tabs (mobile)
   ================================================================= */

.account-sidebar {
  position: sticky;
  top: var(--space-6);
}

.account-sidebar__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.account-sidebar__item {
  /* Reset list item */
}

.account-sidebar__link {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2-5, var(--space-3)) var(--space-3);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--text-secondary);
  text-decoration: none;
  transition: all var(--duration-fast) ease;
  cursor: pointer;
}

.account-sidebar__link:hover {
  color: var(--text-primary);
  background: var(--bg-hover, rgba(255, 255, 255, 0.05));
}

.account-sidebar__link--active {
  color: var(--accent);
  background: var(--accent-subtle, rgba(245, 166, 35, 0.1));
}

.account-sidebar__link--active:hover {
  color: var(--accent);
  background: var(--accent-subtle, rgba(245, 166, 35, 0.12));
}

.account-sidebar__link--disabled {
  color: var(--text-tertiary);
  cursor: not-allowed;
  opacity: 0.6;
}

.account-sidebar__link--disabled:hover {
  color: var(--text-tertiary);
  background: transparent;
}

.account-sidebar__label {
  white-space: nowrap;
}

.account-sidebar__badge {
  margin-left: auto;
  font-size: var(--text-2xs);
  font-weight: var(--font-semibold);
  color: var(--accent);
  background: var(--accent-subtle, rgba(245, 166, 35, 0.1));
  padding: var(--space-0-5) var(--space-2);
  border-radius: var(--radius-full);
}

/* =================================================================
   ACCOUNT BREADCRUMBS
   ================================================================= */

.account-breadcrumbs {
  margin-bottom: var(--space-2);
}

.account-breadcrumbs__list {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: var(--text-sm);
}

.account-breadcrumbs__item {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.account-breadcrumbs__separator {
  color: var(--text-tertiary);
  flex-shrink: 0;
}

.account-breadcrumbs__link {
  color: var(--text-secondary);
  text-decoration: none;
  transition: color var(--duration-fast) ease;
}

.account-breadcrumbs__link:hover {
  color: var(--accent);
}

.account-breadcrumbs__current {
  color: var(--text-primary);
  font-weight: var(--font-medium);
}

/* =================================================================
   SHARED — Section title used across all account pages
   ================================================================= */

.account-section-title {
  font-size: var(--text-xl);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  margin: 0 0 var(--space-4) 0;
}

/* =================================================================
   EMPTY STATE — Shared pattern for empty lists
   ================================================================= */

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--space-10) var(--space-6);
  gap: var(--space-3);
}

.empty-state-icon {
  color: var(--text-tertiary);
  margin-bottom: var(--space-2);
}

.empty-state-text {
  font-size: var(--text-base);
  font-weight: var(--font-medium);
  color: var(--text-primary);
  margin: 0;
}

.empty-state-subtext {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  margin: 0;
}

.empty-state-description {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  margin: 0;
}

/* =================================================================
   ACCOUNT OVERVIEW — Dashboard
   ================================================================= */

.account-overview {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.account-quick-links {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.account-quick-link {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--surface-primary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  color: var(--text-primary);
  text-decoration: none;
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  transition: all var(--duration-fast) ease;
}

.account-quick-link:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.account-quick-link svg:last-child {
  margin-left: auto;
  color: var(--text-tertiary);
}

.account-quick-link:hover svg:last-child {
  color: var(--accent);
}

/* =================================================================
   ACCOUNT ORDERS — List with filter toolbar
   ================================================================= */

.account-orders {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.account-orders__toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
}

.account-orders__filters {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.account-orders__filter-icon {
  color: var(--text-tertiary);
  margin-right: var(--space-1);
  flex-shrink: 0;
}

.account-orders__filter-btn {
  padding: var(--space-1-5) var(--space-3);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--text-secondary);
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  cursor: pointer;
  transition: all var(--duration-fast) ease;
  white-space: nowrap;
  font-family: inherit;
}

.account-orders__filter-btn:hover {
  border-color: var(--border-default);
  color: var(--text-primary);
}

.account-orders__filter-btn--active {
  background: var(--accent);
  color: var(--text-on-accent);
  border-color: var(--accent);
}

.account-orders__filter-btn--active:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
}

.account-orders__search {
  position: relative;
  display: flex;
  align-items: center;
  max-width: 260px;
  width: 100%;
}

.account-orders__search-icon {
  position: absolute;
  left: var(--space-3);
  color: var(--text-tertiary);
  pointer-events: none;
}

.account-orders__search-input {
  padding-left: var(--space-8) !important;
}

/* Order list + individual order cards */

.order-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.order-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-2);
}

.order-separator {
  color: var(--text-tertiary);
  margin: 0 var(--space-1);
}

.order-card__items {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: var(--space-3) 0;
}

.order-card__item-thumb {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  overflow: hidden;
  flex-shrink: 0;
}

.order-card__item-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.order-card__item-image--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-tertiary, rgba(255, 255, 255, 0.05));
  color: var(--text-tertiary);
}

.order-card__items-more {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  font-weight: var(--font-medium);
}

.order-card-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-2);
}

.order-items {
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

.order-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--border-subtle);
}

.order-link {
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--accent);
  text-decoration: none;
  transition: color var(--duration-fast) ease;
}

.order-link:hover {
  color: var(--accent-hover);
}

.order-link--invoice {
  display: flex;
  align-items: center;
  color: var(--text-secondary);
}

.order-link--invoice:hover {
  color: var(--accent);
}

/* =================================================================
   ORDER DETAIL — Full order view
   ================================================================= */

.order-detail {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.order-detail__back-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--text-secondary);
  text-decoration: none;
  transition: color var(--duration-fast) ease;
  margin-bottom: var(--space-2);
}

.order-detail__back-link:hover {
  color: var(--accent);
}

.order-detail__header-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
}

.order-detail__title {
  font-size: var(--text-xl);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  margin: 0;
}

.order-detail__date {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  margin-top: var(--space-1);
}

.order-detail__header-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-2);
}

.order-detail__total {
  font-size: var(--text-xl);
  font-weight: var(--font-bold);
  color: var(--text-primary);
}

.order-detail__address {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: var(--leading-relaxed);
}

.order-detail__address p {
  margin: 0;
}

.order-detail__payment {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.order-detail__payment-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

.order-detail__tracking {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.order-detail__tracking-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

.order-detail__tracking-code {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--text-primary);
  background: var(--surface-tertiary, rgba(255, 255, 255, 0.05));
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
}

.order-detail__actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}

/* =================================================================
   ORDER TIMELINE — Step indicator
   ================================================================= */

.order-timeline {
  display: flex;
  align-items: flex-start;
  gap: var(--space-1);
}

.order-timeline__step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  flex: 1;
  position: relative;
  text-align: center;
}

.order-timeline__indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-full);
  background: var(--surface-tertiary, rgba(255, 255, 255, 0.05));
  color: var(--text-tertiary);
  transition: all var(--duration-normal) ease;
  z-index: 1;
}

.order-timeline__step--completed .order-timeline__indicator {
  background: var(--success);
  color: white;
}

.order-timeline__step--current .order-timeline__indicator {
  background: var(--accent);
  color: var(--text-on-accent);
}

.order-timeline__step--cancelled .order-timeline__indicator {
  background: var(--error, var(--danger));
  color: white;
}

.order-timeline__line {
  position: absolute;
  top: 16px;
  left: calc(50% + 20px);
  right: calc(-50% + 20px);
  height: 2px;
  background: var(--border-subtle);
  z-index: 0;
}

.order-timeline__line--completed {
  background: var(--success);
}

.order-timeline__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.order-timeline__label {
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  color: var(--text-secondary);
}

.order-timeline__step--current .order-timeline__label {
  color: var(--text-primary);
  font-weight: var(--font-semibold);
}

.order-timeline__date {
  font-size: var(--text-2xs);
  color: var(--text-tertiary);
}

/* =================================================================
   ORDER ITEMS TABLE
   ================================================================= */

.order-items-table {
  width: 100%;
}

.order-items-table__header {
  display: grid;
  grid-template-columns: 1fr 80px 100px 100px;
  gap: var(--space-4);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--border-subtle);
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.order-items-table__body {
  display: flex;
  flex-direction: column;
}

.order-items-table__row {
  display: grid;
  grid-template-columns: 1fr 80px 100px 100px;
  gap: var(--space-4);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--border-subtle);
  align-items: center;
  font-size: var(--text-sm);
  color: var(--text-primary);
}

.order-items-table__row:last-child {
  border-bottom: none;
}

.order-items-table__col--quantity,
.order-items-table__col--price,
.order-items-table__col--total {
  text-align: right;
}

.order-items-table__product {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.order-items-table__thumbnail {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-md);
  object-fit: cover;
  flex-shrink: 0;
}

.order-items-table__thumbnail--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-tertiary, rgba(255, 255, 255, 0.05));
  color: var(--text-tertiary);
}

.order-items-table__product-info {
  display: flex;
  flex-direction: column;
  gap: var(--space-0-5);
  min-width: 0;
}

.order-items-table__product-name {
  font-weight: var(--font-medium);
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.order-items-table__product-sku {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
}

/* Summary (subtotal, shipping, discount, total) */

.order-items-table__summary {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding-top: var(--space-4);
  margin-top: var(--space-2);
  border-top: 1px solid var(--border-subtle);
}

.order-items-table__summary-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

.order-items-table__summary-row--discount {
  color: var(--success);
}

.order-items-table__summary-row--total {
  font-size: var(--text-base);
  font-weight: var(--font-bold);
  color: var(--text-primary);
  padding-top: var(--space-2);
  border-top: 1px solid var(--border-subtle);
}

/* =================================================================
   ACCOUNT RETURNS — Returns list
   ================================================================= */

.account-returns {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.account-returns__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.account-returns__card {
  text-decoration: none;
  color: inherit;
  display: block;
  transition: transform var(--duration-fast) ease;
}

.account-returns__card:hover {
  transform: translateY(-1px);
}

.account-returns__card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-2);
}

.account-returns__card-info {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.account-returns__card-number {
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
}

.account-returns__card-order {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
}

.account-returns__card-status {
  flex-shrink: 0;
}

.account-returns__card-body {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-2);
}

.account-returns__card-reason {
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

.account-returns__card-date {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  white-space: nowrap;
}

.account-returns__card-items {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  font-size: var(--text-xs);
  color: var(--text-secondary);
  margin-bottom: var(--space-2);
}

.account-returns__card-item {
  background: var(--surface-tertiary, rgba(255, 255, 255, 0.05));
  padding: var(--space-0-5) var(--space-2);
  border-radius: var(--radius-sm);
}

.account-returns__card-arrow {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  color: var(--text-tertiary);
}

/* =================================================================
   RETURN DETAIL — Full return view
   ================================================================= */

.return-detail {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.return-detail__back-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--text-secondary);
  text-decoration: none;
  transition: color var(--duration-fast) ease;
  margin-bottom: var(--space-2);
}

.return-detail__back-link:hover {
  color: var(--accent);
}

.return-detail__header-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
}

.return-detail__title {
  font-size: var(--text-xl);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  margin: 0;
}

.return-detail__date {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  margin-top: var(--space-1);
}

.return-detail__header-right {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 0;
}

.return-detail__items {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.return-detail__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--border-subtle);
  font-size: var(--text-sm);
}

.return-detail__item:last-child {
  border-bottom: none;
}

.return-detail__item-title {
  color: var(--text-primary);
  font-weight: var(--font-medium);
}

.return-detail__item-quantity {
  color: var(--text-secondary);
  white-space: nowrap;
}

.return-detail__reason {
  font-size: var(--text-sm);
  color: var(--text-primary);
  margin: 0;
}

.return-detail__description {
  margin-top: var(--space-3);
}

.return-detail__description-label {
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--text-secondary);
  margin: 0 0 var(--space-1) 0;
}

.return-detail__description-text {
  font-size: var(--text-sm);
  color: var(--text-primary);
  line-height: var(--leading-relaxed);
  margin: 0;
}

.return-detail__refund {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  font-size: var(--text-sm);
}

.return-detail__refund-amount {
  font-size: var(--text-xl);
  font-weight: var(--font-bold);
  color: var(--success);
}

.return-detail__refund-date {
  color: var(--text-secondary);
}

.return-detail__actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

/* =================================================================
   RETURN REQUEST FORM (inline in order detail)
   ================================================================= */

.return-request-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.return-request-form__title {
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  margin: 0 0 var(--space-2) 0;
}

.return-request-form__section {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.return-request-form__section-title {
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  margin: 0;
}

.return-request-form__items {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.return-request-form__item-toggle {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: transparent;
  cursor: pointer;
  transition: border-color var(--duration-fast) ease;
  width: 100%;
  text-align: left;
  font-family: inherit;
  font-size: inherit;
  color: inherit;
}

.return-request-form__item-toggle:hover {
  border-color: var(--border-default);
}

.return-request-form__item-info {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  flex: 1;
}

.return-request-form__item-title {
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--text-primary);
}

.return-request-form__item-quantity {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.return-request-form__quantity-label {
  font-size: var(--text-xs);
  color: var(--text-secondary);
}

.return-request-form__quantity-select {
  padding: var(--space-1) var(--space-2);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  background: var(--bg-surface, var(--surface-primary));
  color: var(--text-primary);
  font-size: var(--text-sm);
  font-family: inherit;
}

.return-request-form__label {
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--text-primary);
  display: block;
  margin-bottom: var(--space-1);
}

.return-request-form__select {
  width: 100%;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--bg-surface, var(--surface-primary));
  color: var(--text-primary);
  font-size: var(--text-sm);
  font-family: inherit;
  transition: border-color var(--duration-fast) ease;
}

.return-request-form__select:focus {
  outline: none;
  border-color: var(--accent);
}

.return-request-form__textarea {
  width: 100%;
  min-height: 100px;
  padding: var(--space-3);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--bg-surface, var(--surface-primary));
  color: var(--text-primary);
  font-size: var(--text-sm);
  font-family: inherit;
  line-height: var(--leading-normal);
  resize: vertical;
  transition: border-color var(--duration-fast) ease;
}

.return-request-form__textarea:focus {
  outline: none;
  border-color: var(--accent);
}

.return-request-form__actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding-top: var(--space-2);
}

/* Return request success state */

.return-request-success {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--space-8);
  gap: var(--space-3);
}

.return-request-success__icon {
  color: var(--success);
  margin-bottom: var(--space-2);
}

.return-request-success__title {
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  margin: 0;
}

.return-request-success__message {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  margin: 0;
}

.return-request-success__actions {
  display: flex;
  gap: var(--space-3);
  margin-top: var(--space-2);
}

/* =================================================================
   ACCOUNT ADDRESSES — Grid of address cards
   ================================================================= */

.account-addresses {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.account-addresses__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

.account-addresses__limit {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
}

.account-addresses__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-4);
}

.account-addresses__card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.account-addresses__card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

.account-addresses__card-badges {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.account-addresses__card-label {
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  color: var(--text-secondary);
}

.account-addresses__card-body {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: var(--leading-relaxed);
}

.account-addresses__card-body p {
  margin: 0;
}

.account-addresses__card-name {
  font-weight: var(--font-medium);
  color: var(--text-primary);
}

.account-addresses__card-company {
  color: var(--text-secondary);
}

.account-addresses__card-street {
  color: var(--text-secondary);
}

.account-addresses__card-city {
  color: var(--text-secondary);
}

.account-addresses__card-province {
  color: var(--text-secondary);
}

.account-addresses__card-country {
  color: var(--text-secondary);
}

.account-addresses__card-phone {
  color: var(--text-tertiary);
  font-size: var(--text-xs);
  margin-top: var(--space-1);
}

.account-addresses__card-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding-top: var(--space-2);
  border-top: 1px solid var(--border-subtle);
}

/* =================================================================
   ACCOUNT SETTINGS
   ================================================================= */

.account-settings {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

/* =================================================================
   FORM EXTENSIONS (account-specific additions)
   ================================================================= */

.form-stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.form-grid--3 {
  grid-template-columns: repeat(3, 1fr);
}

.form-grid__wide {
  grid-column: span 2;
}

/* =================================================================
   RESPONSIVE — Mobile (<768px)
   ================================================================= */

@media (max-width: 768px) {
  /* Shell: stack vertically */
  .account-shell {
    padding: var(--space-4) var(--space-3);
  }

  .account-shell__title {
    font-size: var(--text-xl);
    margin-bottom: var(--space-4);
  }

  .account-shell__layout {
    grid-template-columns: 1fr;
    gap: 0;
  }

  /* Sidebar: horizontal scrollable tabs */
  .account-sidebar {
    position: static;
    margin-bottom: var(--space-4);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .account-sidebar__list {
    flex-direction: row;
    gap: var(--space-1);
    padding-bottom: var(--space-2);
  }

  .account-sidebar__link {
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-full);
    border: 1px solid var(--border-subtle);
    white-space: nowrap;
    font-size: var(--text-xs);
    gap: var(--space-2);
  }

  .account-sidebar__link--active {
    border-color: var(--accent);
  }

  /* Orders toolbar: stack vertically */
  .account-orders__toolbar {
    flex-direction: column;
    align-items: stretch;
  }

  .account-orders__filters {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: var(--space-1);
  }

  .account-orders__search {
    max-width: none;
  }

  /* Order header: stack */
  .order-header {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
  }

  .order-card-summary {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-1);
  }

  /* Order detail: stack header */
  .order-detail__header-top {
    flex-direction: column;
    gap: var(--space-3);
  }

  .order-detail__header-right {
    flex-direction: row;
    align-items: center;
  }

  /* Timeline: vertical layout on mobile */
  .order-timeline {
    flex-direction: column;
    gap: var(--space-3);
  }

  .order-timeline__step {
    flex-direction: row;
    align-items: center;
    text-align: left;
    gap: var(--space-3);
  }

  .order-timeline__line {
    position: absolute;
    top: calc(32px + var(--space-1));
    left: 16px;
    right: auto;
    bottom: calc(-1 * var(--space-3));
    width: 2px;
    height: auto;
  }

  /* Items table: card layout on mobile */
  .order-items-table__header {
    display: none;
  }

  .order-items-table__row {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-3) 0;
  }

  .order-items-table__col--quantity,
  .order-items-table__col--price,
  .order-items-table__col--total {
    text-align: left;
  }

  .order-items-table__col--quantity::before,
  .order-items-table__col--price::before,
  .order-items-table__col--total::before {
    content: attr(data-label) ": ";
    font-weight: var(--font-medium);
    color: var(--text-tertiary);
  }

  /* Addresses: single column */
  .account-addresses__grid {
    grid-template-columns: 1fr;
  }

  /* Return detail: stack header */
  .return-detail__header-top {
    flex-direction: column;
    gap: var(--space-3);
  }

  /* Return request form: adjust grid */
  .form-grid--3 {
    grid-template-columns: 1fr;
  }

  .form-grid__wide {
    grid-column: auto;
  }
}

@media (max-width: 480px) {
  .account-shell {
    padding: var(--space-3) var(--space-2);
  }

  .account-sidebar__link {
    font-size: var(--text-2xs);
    padding: var(--space-1-5) var(--space-2);
  }

  .order-card__items {
    gap: var(--space-1);
  }

  .order-card__item-thumb {
    width: 32px;
    height: 32px;
  }

  .account-quick-link {
    padding: var(--space-2) var(--space-3);
  }
}

/* announcement-bar.css */
/**
 * WEBSHOP CONTEXT: Announcement Bar
 * 
 * Tenant-level announcements banner displayed above the hero.
 * Supports INFO, WARNING, and URGENT types.
 * Dismissible per session via JS toggle on data attribute.
 */

/* =================================================================
   ANNOUNCEMENT BAR CONTAINER
   ================================================================= */

.announcement-bar {
  display: flex;
  flex-direction: column;
  gap: 0;
  width: 100%;
}

/* =================================================================
   SINGLE ANNOUNCEMENT
   ================================================================= */

.announcement {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3, 12px);
  padding: var(--space-3, 12px) var(--space-4, 16px);
  font-size: var(--text-sm, 14px);
  line-height: 1.4;
  text-align: center;
  position: relative;
}

/* Hidden state (dismissed) */
.announcement[data-dismissed="true"] {
  display: none;
}

/* =================================================================
   ANNOUNCEMENT TYPES
   ================================================================= */

.announcement--info {
  background: var(--info-dim, #e0f2fe);
  color: var(--text-primary);
  border-bottom: 1px solid var(--info, #0891b2);
}

.announcement--warning {
  background: var(--warning-dim, #fef3c7);
  color: var(--text-primary);
  border-bottom: 1px solid var(--warning, #d97706);
}

.announcement--urgent {
  background: var(--error-dim, #fee2e2);
  color: var(--text-primary);
  border-bottom: 1px solid var(--error, #dc2626);
}

/* =================================================================
   ANNOUNCEMENT ICON
   ================================================================= */

.announcement__icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

.announcement--info .announcement__icon {
  color: var(--info, #0891b2);
}

.announcement--warning .announcement__icon {
  color: var(--warning, #d97706);
}

.announcement--urgent .announcement__icon {
  color: var(--error, #dc2626);
}

/* =================================================================
   ANNOUNCEMENT TEXT
   ================================================================= */

.announcement__text {
  flex: 1;
  min-width: 0;
}

.announcement__title {
  font-weight: var(--font-semibold, 600);
}

/* =================================================================
   DISMISS BUTTON
   ================================================================= */

.announcement__dismiss {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: none;
  background: transparent;
  cursor: pointer;
  border-radius: var(--radius-sm, 4px);
  color: var(--text-secondary);
  transition: background-color 0.15s;
  padding: 0;
}

.announcement__dismiss:hover {
  background: rgba(0, 0, 0, 0.08);
}

/* =================================================================
   RESPONSIVE
   ================================================================= */

@media (max-width: 768px) {
  .announcement {
    padding: var(--space-2, 8px) var(--space-3, 12px);
    font-size: var(--text-xs, 12px);
    gap: var(--space-2, 8px);
  }
}

/* auth.css */
/**
 * WEBSHOP CONTEXT: Auth Components
 *
 * Styles for login, register, password reset forms and account pages.
 * WooCommerce-style 2-column layout (login + register side by side).
 *
 * Components:
 *   AuthPage.tsx               → .auth-page, .auth-page-grid
 *   LoginForm.tsx              → .auth-form, .auth-header, .auth-title
 *   RegisterForm.tsx           → .auth-form, .form-grid
 *   PasswordResetRequest.tsx   → .auth-form, .auth-success
 *   PasswordResetForm.tsx      → .auth-form, .auth-success
 */

/* =================================================================
   AUTH PAGE — 2-Column WooCommerce Layout
   ================================================================= */

.auth-page {
  max-width: 960px;
  margin: 0 auto;
  padding: var(--space-8) var(--space-4);
}

.auth-page-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
  align-items: start;
}

.auth-page-column .auth-form {
  margin: 0;
  max-width: none;
}

/* =================================================================
   AUTH FORM — Card layout
   ================================================================= */

.auth-form {
  width: 100%;
  max-width: 420px;
  margin: var(--space-8) auto;
  padding: var(--space-6);
  background: linear-gradient(135deg, var(--bg-surface), rgb(245 166 35 / 0.08));
  border: 1px solid rgb(245 166 35 / 0.25);
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.auth-header {
  text-align: center;
  margin-bottom: 0;
  padding-bottom: var(--space-4);
  border-bottom: 1px solid rgb(245 166 35 / 0.1);
}

.auth-title {
  font-size: var(--font-size-xl, 1.25rem);
  font-weight: var(--font-weight-bold);
  color: var(--text-primary);
  margin: 0 0 var(--space-1) 0;
}

.auth-subtitle {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  margin: 0;
  line-height: 1.5;
}

/* =================================================================
   AUTH FOOTER & LINKS
   ================================================================= */

.auth-footer {
  text-align: center;
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  margin: var(--space-2) 0 0 0;
}

.auth-link {
  color: var(--accent);
  text-decoration: none;
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
  font-size: inherit;
  font-family: inherit;
  transition: color var(--transition-fast);
}

.auth-link:hover {
  color: var(--accent-hover);
  text-decoration: underline;
}

/* =================================================================
   AUTH SUCCESS STATE (password reset confirmation)
   ================================================================= */

.auth-success {
  text-align: center;
  max-width: 420px;
  margin: var(--space-8) auto;
  padding: var(--space-8) var(--space-6);
  background: var(--surface-primary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
}

.auth-success-icon {
  color: var(--success);
  margin-bottom: var(--space-2);
}

/* =================================================================
   FORM LAYOUT
   ================================================================= */

.form-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.form-group-row {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}

.form-grid {
  display: grid;
  gap: var(--space-4);
}

.form-grid-2 {
  grid-template-columns: 1fr 1fr;
}

/* =================================================================
   CHECKBOX — wrapper only (styling via components/forms/checkboxes.css)
   ================================================================= */

.form-checkboxes {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

/* =================================================================
   BUTTON MODIFIERS
   ================================================================= */

.btn--full {
  width: 100%;
}

.card-header-flex {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
}

.card-subtitle {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  margin: var(--space-1) 0 0 0;
}

/* =================================================================
   STATS GRID
   ================================================================= */

.stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
}

.stat-card {
  text-align: center;
  padding: var(--space-5);
}

.stat-value {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  color: var(--text-primary);
}

.stat-label {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  margin-top: var(--space-1);
}

/* =================================================================
   ORDERS LIST (inside account)
   ================================================================= */

.orders-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.order-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  background: var(--surface-primary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  transition: border-color var(--transition-fast);
}

.order-card:hover {
  border-color: var(--border-default);
}

.order-info {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.order-number {
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
  font-size: var(--font-size-sm);
}

.order-date {
  font-size: var(--font-size-xs);
  color: var(--text-tertiary);
}

.order-total {
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
  white-space: nowrap;
}

.orders-empty {
  text-align: center;
  padding: var(--space-8);
  color: var(--text-tertiary);
}

.orders-empty-icon {
  color: var(--text-tertiary);
  margin-bottom: var(--space-3);
}

/* =================================================================
   LOADING
   ================================================================= */

.loading-container {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-12, 4rem);
}

/* =================================================================
   RESPONSIVE
   ================================================================= */

@media (max-width: 768px) {
  .auth-page {
    padding: var(--space-4) var(--space-3);
  }

  .auth-page-grid {
    grid-template-columns: 1fr;
  }

  .auth-form {
    margin: var(--space-4) auto;
    padding: var(--space-6) var(--space-4);
  }

  .auth-success {
    margin: var(--space-4) auto;
    padding: var(--space-6) var(--space-4);
  }

  .form-grid-2 {
    grid-template-columns: 1fr;
  }

  .form-group-row {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
  }

  .stats-grid {
    grid-template-columns: 1fr;
  }

  .order-card {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (max-width: 480px) {
  .auth-form {
    border: none;
    border-radius: 0;
    padding: var(--space-5) var(--space-4);
    margin: 0;
  }

  .auth-success {
    border: none;
    border-radius: 0;
    padding: var(--space-5) var(--space-4);
    margin: 0;
  }
}

/* banners.css */
/**
 * WEBSHOP CONTEXT: Banners
 * 
 * Promotional category banners and cards.
 * Used for featured categories, sales, collections.
 */

/* =================================================================
   BANNER GRID
   ================================================================= */

.banner-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-6);
}

.banner-grid--three {
  grid-template-columns: repeat(3, 1fr);
}

.banner-grid--asymmetric {
  grid-template-columns: 2fr 1fr;
}

/* =================================================================
   BANNER CARD
   ================================================================= */

.banner-card {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 280px;
  background: var(--bg-surface);
  border-radius: var(--webshop-radius-card);
  overflow: hidden;
  text-decoration: none;
  transition: all var(--transition-normal);
}

.banner-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

/* Background variants */
.banner-card-primary {
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-light) 100%);
}

.banner-card-sale {
  background: linear-gradient(135deg, var(--error) 0%, #ff6b6b 100%);
}

.banner-card-dark {
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
}

.banner-card-gradient {
  background: linear-gradient(135deg, var(--accent-dim) 0%, var(--bg-surface) 100%);
}

/* With background image */
.banner-card[style*="background-image"] {
  background-size: cover;
  background-position: center;
}

/* =================================================================
   BANNER OVERLAY
   ================================================================= */

.banner-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.banner-overlay-primary {
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgba(0, 0, 0, 0.3) 100%
  );
}

.banner-overlay-sale {
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgba(0, 0, 0, 0.4) 100%
  );
}

.banner-overlay-dark {
  background: linear-gradient(
    180deg,
    transparent 30%,
    rgba(0, 0, 0, 0.7) 100%
  );
}

/* =================================================================
   BANNER CONTENT
   ================================================================= */

.banner-content {
  position: relative;
  z-index: 2;
  padding: var(--space-6);
  width: 100%;
}

.banner-title {
  font-size: var(--text-2xl);
  font-weight: var(--font-bold);
  color: white;
  margin: 0 0 var(--space-2);
  line-height: 1.2;
}

.banner-subtitle {
  font-size: var(--text-sm);
  color: rgba(255, 255, 255, 0.8);
  margin: 0 0 var(--space-4);
}

.banner-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: white;
  transition: gap var(--transition-fast);
}

.banner-card:hover .banner-link {
  gap: var(--space-3);
}

.banner-icon {
  width: 16px;
  height: 16px;
}

/* =================================================================
   BANNER BADGE
   ================================================================= */

.banner-badge {
  position: absolute;
  top: var(--space-4);
  left: var(--space-4);
  z-index: 3;
  padding: var(--space-1) var(--space-3);
  background: white;
  color: var(--text-primary);
  font-size: var(--text-xs);
  font-weight: var(--font-bold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-radius: var(--radius-full);
}

.banner-badge--sale {
  background: var(--error);
  color: white;
}

/* =================================================================
   RESPONSIVE
   ================================================================= */

@media (max-width: 768px) {
  .banner-grid,
  .banner-grid--three,
  .banner-grid--asymmetric {
    grid-template-columns: 1fr;
  }
  
  .banner-card {
    min-height: 200px;
  }
  
  .banner-title {
    font-size: var(--text-xl);
  }
}

/* cart.css */
/**
 * WEBSHOP CONTEXT: Cart Components
 *
 * Cart drawer (slide-out sidebar), cart items, cart summary, cart button.
 * Class names match component output (kebab-case, NO BEM __).
 */

/* =================================================================
   CART BUTTON (header icon)
   ================================================================= */

.cart-button {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--control-height-md, 40px);
  height: var(--control-height-md, 40px);
  background: transparent;
  border: none;
  color: var(--text-primary);
  cursor: pointer;
  transition: color var(--transition-fast);
}

.cart-button:hover {
  color: var(--accent);
}

.cart-badge {
  position: absolute;
  top: 2px;
  right: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  background: var(--accent);
  color: var(--text-on-accent);
  font-size: 11px;
  font-weight: var(--font-weight-bold);
  border-radius: var(--radius-full);
  line-height: 1;
}

/* =================================================================
   CART DRAWER (slide-out overlay)
   ================================================================= */

.cart-drawer {
  position: fixed;
  inset: 0;
  z-index: 9998;
  pointer-events: none;
}

.cart-drawer-open {
  pointer-events: auto;
}

/* Backdrop */
.cart-drawer-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
  transition: opacity var(--transition-normal, 0.2s ease);
  pointer-events: none;
}

.cart-drawer-open .cart-drawer-backdrop {
  opacity: 1;
  pointer-events: auto;
}

/* Panel (slides in from right) */
.cart-drawer-panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 420px;
  max-width: 100vw;
  display: flex;
  flex-direction: column;
  background: var(--bg-elevated, var(--surface-primary, #1a1a2e));
  box-shadow: var(--shadow-xl, -4px 0 24px rgba(0, 0, 0, 0.3));
  transform: translateX(100%);
  transition: transform var(--transition-normal, 0.3s ease);
}

.cart-drawer-open .cart-drawer-panel {
  transform: translateX(0);
}

/* Header */
.cart-drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--border, var(--border-subtle));
  flex-shrink: 0;
}

.cart-drawer-title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
  margin: 0;
}

.cart-drawer-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  background: transparent;
  border: 1px solid var(--border, var(--border-subtle));
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.cart-drawer-close:hover {
  color: var(--text-primary);
  border-color: var(--text-secondary);
}

/* Body (scrollable) */
.cart-drawer-body {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-4) var(--space-5);
}

/* Footer */
.cart-drawer-footer {
  flex-shrink: 0;
  padding: var(--space-4) var(--space-5);
  border-top: 1px solid var(--border, var(--border-subtle));
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

/* =================================================================
   CART STATES (loading, empty)
   ================================================================= */

.cart-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-12) 0;
}

.cart-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  padding: var(--space-12) var(--space-4);
  text-align: center;
}

.cart-empty-icon {
  color: var(--text-muted);
  opacity: 0.5;
}

.cart-empty-text {
  font-size: var(--font-size-base);
  color: var(--text-secondary);
}

/* =================================================================
   CART ITEMS
   ================================================================= */

.cart-items {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.cart-item {
  display: grid;
  grid-template-columns: 64px 1fr auto;
  gap: var(--space-3);
  padding: var(--space-3);
  border-radius: var(--radius-md);
  transition: background var(--transition-fast);
}

.cart-item:hover {
  background: var(--bg-surface, var(--surface-hover, rgba(255, 255, 255, 0.03)));
}

/* Item image */
.cart-item-image {
  width: 64px;
  height: 64px;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--bg-surface, var(--surface-secondary));
  flex-shrink: 0;
}

.cart-item-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cart-item-image-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
}

/* Item info */
.cart-item-info {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
}

.cart-item-name {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 0;
}

.cart-item-price {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
}

/* Quantity controls */
.cart-item-quantity {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  border: 1px solid var(--border, var(--border-subtle));
  border-radius: var(--radius-sm);
  margin-top: var(--space-1);
}

.cart-quantity-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  background: transparent;
  border: none;
  color: var(--text-secondary);
  cursor: pointer;
  transition: color var(--transition-fast);
}

.cart-quantity-btn:hover {
  color: var(--text-primary);
}

.cart-quantity-value {
  width: 1.75rem;
  text-align: center;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--text-primary);
}

/* Item actions (total + remove) */
.cart-item-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: space-between;
}

.cart-item-total {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
}

.cart-item-remove {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  background: transparent;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  transition: color var(--transition-fast);
  padding: 0;
}

.cart-item-remove:hover {
  color: var(--error, #dc2626);
}

/* Clear cart button */
.cart-clear-btn {
  display: block;
  margin-top: var(--space-2);
  padding: var(--space-2) 0;
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: var(--font-size-sm);
  cursor: pointer;
  text-align: left;
  transition: color var(--transition-fast);
}

.cart-clear-btn:hover {
  color: var(--error, #dc2626);
}

/* =================================================================
   CART SUMMARY (in drawer footer)
   ================================================================= */

.cart-summary {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.cart-summary-row {
  display: flex;
  justify-content: space-between;
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
}

.cart-summary-tax {
  color: var(--text-muted);
}

.cart-summary-discount {
  color: var(--success, #16a34a);
}

.cart-summary-total {
  padding-top: var(--space-2);
  border-top: 1px solid var(--border, var(--border-subtle));
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
  color: var(--text-primary);
}

/* =================================================================
   CART ACTIONS (checkout, continue)
   ================================================================= */

.cart-actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.cart-checkout-btn {
  width: 100%;
}

.cart-continue-btn {
  width: 100%;
}

.cart-error-message {
  font-size: var(--font-size-sm);
  color: var(--error, #dc2626);
  text-align: center;
  margin: 0;
}

/* =================================================================
   RESPONSIVE (DRAWER)
   ================================================================= */

@media (max-width: 480px) {
  .cart-drawer-panel {
    width: 100vw;
  }

  .cart-item {
    grid-template-columns: 56px 1fr auto;
  }

  .cart-item-image {
    width: 56px;
    height: 56px;
  }
}

/* =================================================================
   CART PAGE (full-page view at /cart)
   Clean two-column layout: items card (left) + summary card (right).
   Both sides get the standard Pagayo card treatment (golden gradient).
   ================================================================= */

/* Page container */
.cart-page {
  max-width: 1120px;
  margin: 0 auto;
  padding: var(--space-6) var(--space-4);
  min-height: 60vh;
}

/* Two-column grid: items + sidebar */
.cart-page-layout {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: var(--space-6);
  align-items: start;
}

/* =========================
   LEFT CARD: Items
   ========================= */

.cart-page-main {
  background: linear-gradient(135deg, var(--bg-surface), rgb(245 166 35 / 0.08));
  border: 1px solid rgb(245 166 35 / 0.25);
  border-radius: 16px;
  padding: var(--space-6);
}

/* Header: title + clear button */
.cart-page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: var(--space-4);
  border-bottom: 1px solid rgb(245 166 35 / 0.1);
  margin-bottom: var(--space-4);
}

.cart-page-title {
  font-size: var(--page-title-size, 24px);
  font-weight: var(--font-weight-bold);
  color: var(--text-primary);
  margin: 0;
}

.cart-page-count {
  font-weight: var(--font-weight-normal);
  color: var(--text-secondary);
  font-size: var(--font-size-lg);
}

.cart-page-clear {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  background: none;
  border: none;
  color: var(--text-tertiary);
  font-size: var(--font-size-sm);
  cursor: pointer;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  transition: color var(--transition-fast), background var(--transition-fast);
}

.cart-page-clear:hover {
  color: var(--error, #dc2626);
  background: rgb(220 38 38 / 0.06);
}

/* Items list */
.cart-page-items {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.cart-page-items .cart-item {
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.06));
}

.cart-page-items .cart-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.cart-page-items .cart-item:first-child {
  padding-top: 0;
}

/* =========================
   RIGHT CARD: Summary
   ========================= */

.cart-page-sidebar {
  min-width: 0;
}

.cart-page-sidebar-sticky {
  position: sticky;
  top: var(--space-6);
}

/* Actions inside order-summary (cart-page specific: checkout CTA + continue) */
.cart-page-actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: 0 var(--space-4) var(--space-4);
}

/* =========================
   EMPTY STATE
   ========================= */

.cart-page-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--space-16, 64px) var(--space-4);
  gap: var(--space-4);
}

.cart-page-empty-icon {
  color: var(--text-tertiary);
  opacity: 0.4;
}

.cart-page-empty-title {
  font-size: var(--section-title-size, 18px);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
  margin: 0;
}

.cart-page-empty-text {
  font-size: var(--font-size-base);
  color: var(--text-secondary);
  margin: 0;
}

/* =========================
   RESPONSIVE
   ========================= */

@media (max-width: 768px) {
  .cart-page-layout {
    grid-template-columns: 1fr;
  }

  .cart-page-sidebar-sticky {
    position: static;
  }
}

@media (max-width: 480px) {
  .cart-page {
    padding: var(--space-4) var(--space-3);
  }

  .cart-page-main {
    padding: var(--space-4);
    border-radius: 12px;
  }

  .cart-page-summary {
    padding: var(--space-4);
    border-radius: 12px;
  }

  .cart-page-title {
    font-size: var(--section-title-size, 18px);
  }
}


/* checkout.css */
/**
 * WEBSHOP CONTEXT: Checkout Components
 *
 * Class names match component kebab-case convention (NO BEM __).
 *
 * Components:
 *   CheckoutPage.tsx        → .checkout, .checkout-layout, .checkout-main, .checkout-sidebar
 *   CheckoutSteps.tsx       → .checkout-steps, .checkout-step, .checkout-step-circle/label/connector
 *   AddressForm.tsx         → .checkout-form, .checkout-form-row, .checkout-form-field
 *   ShippingMethods.tsx     → .shipping-options, .shipping-option, .shipping-option-radio/name/price
 *   PaymentMethods.tsx      → .payment-methods, .payment-method, .payment-method-radio/name/icon
 *   IdealBankPicker.tsx     → .ideal-bank-picker, .ideal-bank-item, .ideal-bank-badge/name
 *   OrderSummary.tsx        → .order-summary, .order-summary-item, .order-summary-totals
 *   CouponInput.tsx         → .coupon-input, .coupon-applied
 */

/* =================================================================
   CHECKOUT LAYOUT
   ================================================================= */

.checkout {
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--space-6);
}

.checkout-steps-container {
  margin-bottom: var(--space-6);
}

.checkout-layout {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: var(--space-8);
  align-items: start;
}

.checkout-main {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

/* =================================================================
   CHECKOUT STEPS (CheckoutSteps.tsx)
   ================================================================= */

.checkout-steps {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.checkout-step {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.checkout-step-circle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: var(--radius-full);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  background: var(--surface-tertiary);
  color: var(--text-tertiary);
  transition: all var(--transition-fast);
  flex-shrink: 0;
}

.checkout-step-active .checkout-step-circle {
  background: var(--accent);
  color: var(--text-on-accent);
}

.checkout-step-completed .checkout-step-circle {
  background: var(--success);
  color: white;
}

.checkout-step-icon {
  width: 1rem;
  height: 1rem;
}

.checkout-step-label {
  font-size: var(--font-size-sm);
  color: var(--text-tertiary);
  white-space: nowrap;
}

.checkout-step-active .checkout-step-label {
  color: var(--text-primary);
  font-weight: var(--font-weight-medium);
}

.checkout-step-completed .checkout-step-label {
  color: var(--text-secondary);
}

.checkout-step-connector {
  flex: 1;
  height: 1px;
  min-width: var(--space-4);
  background: var(--border-subtle);
}

.checkout-step-completed .checkout-step-connector {
  background: var(--success);
}

/* =================================================================
   CHECKOUT SECTIONS (CheckoutPage.tsx)
   ================================================================= */

.checkout-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  background: linear-gradient(135deg, var(--bg-surface), rgb(245 166 35 / 0.08));
  border: 1px solid rgb(245 166 35 / 0.25);
  border-radius: 16px;
  padding: var(--space-6);
}

.checkout-section-title {
  font-size: var(--section-title-size, var(--font-size-base));
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
  margin: 0;
  padding-bottom: var(--space-4);
  border-bottom: 1px solid rgb(245 166 35 / 0.1);
}

.checkout-checkbox {
  margin-bottom: var(--space-4);
}

/* Golden form overrides (select, input, textarea) staan in
   components/forms/_base.css — Single Source of Truth (Pijler 4) */

/* =================================================================
   ADDRESS FORM (AddressForm.tsx)
   ================================================================= */

.checkout-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.checkout-form-company {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
}

.checkout-form-row {
  display: grid;
  gap: var(--space-4);
}

.checkout-form-row--2 {
  grid-template-columns: 1fr 1fr;
}

.checkout-form-row--3 {
  grid-template-columns: 1fr 1fr 1fr;
}

.checkout-form-field--wide {
  grid-column: span 2;
}

/* =================================================================
   SHIPPING OPTIONS (ShippingMethods.tsx)
   ================================================================= */

.shipping-options {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.shipping-options-loading {
  display: flex;
  justify-content: center;
  padding: var(--space-6);
}

.shipping-options-error {
  font-size: var(--font-size-sm);
  color: var(--error);
  margin-bottom: var(--space-2);
}

.shipping-option {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4);
  border: 1px solid rgb(245 166 35 / 0.15);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.shipping-option:hover {
  border-color: rgb(245 166 35 / 0.3);
  background: rgb(245 166 35 / 0.03);
}

.shipping-option-selected {
  border-color: var(--accent);
  background: rgb(245 166 35 / 0.08);
}

.shipping-option-input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.shipping-option-main {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex: 1;
}

.shipping-option-radio {
  width: 1.25rem;
  height: 1.25rem;
  border: 2px solid rgb(245 166 35 / 0.35);
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all var(--transition-fast);
}

.shipping-option:hover .shipping-option-radio {
  border-color: rgb(245 166 35 / 0.5);
}

.shipping-option-selected .shipping-option-radio {
  border-color: var(--accent);
  background: rgb(245 166 35 / 0.1);
}

.shipping-option-radio-dot {
  width: 0.625rem;
  height: 0.625rem;
  background: var(--accent);
  border-radius: var(--radius-full);
}

.shipping-option-content {
  flex: 1;
}

.shipping-option-name {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--text-primary);
  margin: 0;
}

.shipping-option-description {
  font-size: var(--font-size-xs);
  color: var(--text-tertiary);
  margin: var(--space-0-5) 0 0 0;
}

.shipping-option-price {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
  white-space: nowrap;
}

/* =================================================================
   PAYMENT METHODS (PaymentMethods.tsx)
   ================================================================= */

.payment-methods {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.payment-method {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4);
  border: 1px solid rgb(245 166 35 / 0.15);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.payment-method:hover {
  border-color: rgb(245 166 35 / 0.3);
  background: rgb(245 166 35 / 0.03);
}

.payment-method-selected {
  border-color: var(--accent);
  background: rgb(245 166 35 / 0.08);
}

.payment-method-input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.payment-method-icon {
  width: 2.5rem;
  height: 1.75rem;
  object-fit: contain;
  font-size: var(--font-size-xl);
  display: flex;
  align-items: center;
  justify-content: center;
}

.payment-method-content {
  flex: 1;
}

.payment-method-name {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--text-primary);
  margin: 0;
}

.payment-method-description {
  font-size: var(--font-size-xs);
  color: var(--text-tertiary);
  margin: var(--space-0-5) 0 0 0;
}

.payment-method-radio {
  width: 1.25rem;
  height: 1.25rem;
  border: 2px solid rgb(245 166 35 / 0.35);
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all var(--transition-fast);
}

.payment-method:hover .payment-method-radio {
  border-color: rgb(245 166 35 / 0.5);
}

.payment-method-selected .payment-method-radio {
  border-color: var(--accent);
  background: rgb(245 166 35 / 0.1);
}

.payment-method-radio-dot {
  width: 0.625rem;
  height: 0.625rem;
  background: var(--accent);
  border-radius: var(--radius-full);
}

/* payment-method-wrapper: wraps label + optional sub-picker (bankpicker) */
.payment-method-wrapper {
  display: flex;
  flex-direction: column;
}

/* When iDEAL is selected, remove bottom border radius for seamless connection */
.payment-method-expanded {
  border-radius: var(--radius-md) var(--radius-md) 0 0;
}

/* iDEAL logo badge */
.ideal-logo {
  background: #cc0066;
  color: white;
  font-size: 0.65rem;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
  letter-spacing: 0.02em;
  flex-shrink: 0;
}

/* =================================================================
   iDEAL BANK PICKER (IdealBankPicker.tsx)
   ================================================================= */

.ideal-bank-picker {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1),
              opacity 0.25s ease;
}

.ideal-bank-picker--visible {
  max-height: 900px;
  opacity: 1;
}

.ideal-bank-picker-inner {
  border: 1px solid rgb(245 166 35 / 0.15);
  border-top: none;
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  margin-top: -1px;
  padding: var(--space-4);
  background: rgb(245 166 35 / 0.02);
}

.ideal-bank-picker-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2);
}

.ideal-bank-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  border: 1px solid rgb(245 166 35 / 0.15);
  border-radius: var(--radius-md);
  background: transparent;
  cursor: pointer;
  transition: all var(--transition-fast);
  font-family: inherit;
  font-size: var(--font-size-sm);
  color: var(--text-primary);
  text-align: left;
}

.ideal-bank-item:hover {
  border-color: rgb(245 166 35 / 0.4);
  background: rgb(245 166 35 / 0.04);
}

.ideal-bank-item--selected {
  border-color: var(--accent);
  background: rgb(245 166 35 / 0.08);
  box-shadow: 0 0 0 1px var(--accent);
}

.ideal-bank-item:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.ideal-bank-badge {
  width: 2rem;
  height: 2rem;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 0.6rem;
  font-weight: 700;
  flex-shrink: 0;
  letter-spacing: -0.02em;
}

.ideal-bank-name {
  font-weight: var(--font-weight-medium);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 768px) {
  .ideal-bank-picker-grid {
    grid-template-columns: 1fr;
  }
}

/* =================================================================
   ORDER SUMMARY SIDEBAR (OrderSummary.tsx)
   ================================================================= */

.checkout-sidebar {
  position: relative;
  min-width: 0;
}

.checkout-sidebar-sticky {
  position: sticky;
  top: var(--space-6);
  min-width: 0;
}

.order-summary {
  background: linear-gradient(135deg, var(--surface-primary), rgb(245 166 35 / 0.06));
  border: 1px solid rgb(245 166 35 / 0.2);
  border-radius: 16px;
  overflow: hidden;
  min-width: 0;
}

.order-summary-title {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
  margin: 0;
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid rgb(245 166 35 / 0.1);
}

.order-summary-items {
  max-height: 300px;
  overflow-y: auto;
  padding: var(--space-3) var(--space-4);
}

.order-summary-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-2) 0;
}

.order-summary-item + .order-summary-item {
  border-top: 1px solid var(--border-subtle);
}

.order-summary-item-info {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  flex: 1;
  min-width: 0;
  font-size: var(--font-size-sm);
  color: var(--text-primary);
}

.order-summary-item-qty {
  color: var(--text-secondary);
  font-weight: var(--font-weight-medium);
}

.order-summary-item-name {
  display: block;
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.order-summary-item-price {
  flex-shrink: 0;
  text-align: right;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--text-primary);
  white-space: nowrap;
}

.order-summary-divider {
  border: none;
  border-top: 1px solid var(--border-subtle);
  margin: var(--space-2) var(--space-4);
}

.order-summary-totals {
  padding: var(--space-3) var(--space-4) var(--space-4);
  min-width: 0;
}

/* =================================================================
   COUPON INPUT (CouponInput.tsx)
   ================================================================= */

.coupon-input {
  padding: 0 var(--space-4);
}

.coupon-input-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
}

.coupon-input-row .form-group {
  flex: 1;
  margin: 0;
}

.coupon-input-row .btn {
  height: var(--control-height-md);
  flex-shrink: 0;
}

.coupon-input-field {
  width: 100%;
}

.coupon-applied {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  padding: var(--space-2) var(--space-4);
  gap: var(--space-3);
}

.coupon-applied-info {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
}

.coupon-applied-details {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.coupon-applied-code {
  font-size: var(--font-size-xs);
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.coupon-applied-discount {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--success);
}

.coupon-remove-button {
  margin-left: auto;
  font-size: var(--font-size-xs);
  color: var(--error);
  background: transparent;
  border: none;
  cursor: pointer;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  transition: background var(--transition-fast);
}

.coupon-remove-button:hover {
  background: var(--surface-secondary);
}

/* =================================================================
   CHECKOUT TEXTAREA & ACTIONS (CheckoutPage.tsx)
   ================================================================= */

.checkout-textarea {
  width: 100%;
  padding: var(--space-3);
  font-family: inherit;
  font-size: var(--font-size-sm);
  color: var(--text-primary);
  background: var(--bg-surface, var(--surface-primary));
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  resize: vertical;
  transition: border-color var(--transition-fast);
}

.checkout-textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-subtle);
}

.checkout-textarea::placeholder {
  color: var(--text-tertiary);
}

.checkout-actions {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
}

.checkout-button {
  min-height: var(--control-height-md, 40px);
}

.checkout-button--full {
  width: 100%;
}

.checkout-button--submit {
  flex: 1;
}

.checkout-spinner {
  margin-right: var(--space-2);
}

/* =================================================================
   CONFIRMATION (CheckoutPage.tsx — confirmation step)
   ================================================================= */

.checkout-confirmation {
  max-width: 600px;
  margin: 0 auto;
  padding: var(--space-8) var(--space-6);
  text-align: center;
}

.checkout-confirmation-header {
  margin-bottom: var(--space-6);
}

.checkout-success-icon {
  color: var(--success);
  margin-bottom: var(--space-4);
}

.checkout-confirmation-title {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  color: var(--text-primary);
  margin: 0 0 var(--space-2) 0;
}

.checkout-confirmation-text {
  font-size: var(--font-size-base);
  color: var(--text-secondary);
  margin: 0;
}

.checkout-confirmation-details {
  margin-bottom: var(--space-6);
  text-align: left;
}

.checkout-confirmation-row {
  display: flex;
  justify-content: space-between;
  padding: var(--space-3) 0;
}

.checkout-confirmation-row + .checkout-confirmation-row {
  border-top: 1px solid var(--border-subtle);
}

.checkout-confirmation-label {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
}

.checkout-confirmation-value {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
}

.checkout-confirmation-value--mono {
  font-family: var(--font-mono, monospace);
}

.checkout-confirmation-note {
  font-size: var(--font-size-sm);
  color: var(--text-tertiary);
  margin-bottom: var(--space-6);
}

/* =================================================================
   RESPONSIVE
   ================================================================= */

@media (max-width: 1024px) {
  .checkout-layout {
    grid-template-columns: 1fr;
  }

  .checkout-sidebar {
    order: -1;
  }

  .checkout-sidebar-sticky {
    position: static;
  }

  .order-summary-items {
    max-height: none;
  }
}

@media (max-width: 768px) {
  .checkout {
    padding: var(--space-4);
  }

  .checkout-steps {
    overflow-x: auto;
    padding-bottom: var(--space-2);
    -webkit-overflow-scrolling: touch;
  }

  .checkout-step-label {
    display: none;
  }

  .checkout-form-row--2,
  .checkout-form-row--3 {
    grid-template-columns: 1fr;
  }

  .checkout-form-field--wide {
    grid-column: span 1;
  }

  .checkout-form-company {
    grid-template-columns: 1fr;
  }

  .checkout-actions {
    flex-direction: column-reverse;
  }

  .checkout-actions .btn {
    width: 100%;
    min-height: 48px;
  }

  .checkout-back-link {
    justify-content: center;
    padding: var(--space-3) 0;
  }

  .checkout-form-field--compact {
    max-width: 120px;
  }

  .coupon-input-button {
    min-width: 80px;
    flex-shrink: 0;
  }

  .checkout-confirmation {
    padding: var(--space-6) var(--space-4);
  }
}

/* =================================================================
   COLLAPSIBLE SIDEBAR TOGGLE (Fix D — ≤1024px mobile)
   ================================================================= */

@media (max-width: 1024px) {
  .order-summary-collapsible > summary {
    cursor: pointer;
    list-style: none;
    padding: var(--space-4) var(--space-5);
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(245, 166, 35, 0.1);
  }

  .order-summary-collapsible:not([open]) .order-summary-items {
    display: none;
  }
}

@media (min-width: 1025px) {
  details.order-summary-collapsible > summary {
    display: none;
  }
}

/* =================================================================
   STEP CIRCLES — SMALLEST SCREENS (Fix E — ≤480px)
   ================================================================= */

@media (max-width: 480px) {
  .checkout-step-circle {
    width: 2.25rem;
    height: 2.25rem;
  }

  .checkout-step-active .checkout-step-circle {
    animation: step-pulse 2s ease-in-out infinite;
  }

  @keyframes step-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(245, 166, 35, 0.4); }
    50% { box-shadow: 0 0 0 6px rgba(245, 166, 35, 0); }
  }
}

/* contact.css */
/* ============================================================
 * Contact Page — Pagayo Webshop (Redesign)
 * CSS: contexts/webshop/contact.css
 *
 * Layout: Two-column (form + info sidebar).
 * Responsive: Single column on mobile.
 * ============================================================ */

/* ── Page wrapper ─────────────────────────────────────── */
.contact-page {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: var(--space-8, 2rem);
  max-width: 960px;
  margin: 0 auto;
}

/* Header spans both columns */
.contact-header {
  grid-column: 1 / -1;
  margin-bottom: var(--space-4, 1rem);
}

.contact-header .page-title {
  font-size: 2rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: var(--space-2, 0.5rem);
}

.contact-header .page-subtitle {
  color: var(--text-secondary);
  font-size: 1.0625rem;
  line-height: 1.6;
}

/* ── Error alert ──────────────────────────────────────── */
.contact-error {
  grid-column: 1 / -1;
  padding: var(--space-3, 0.75rem) var(--space-4, 1rem);
  background-color: var(--color-error-bg, #fef2f2);
  border: 1px solid var(--color-error-border, #fecaca);
  border-radius: 8px;
  color: var(--color-error, #dc2626);
  font-size: 0.9375rem;
}

/* ── Form card ────────────────────────────────────────── */
.contact-form {
  background-color: var(--bg-surface, #fff);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: var(--space-8, 2rem);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.contact-form-group {
  margin-bottom: var(--space-5, 1.25rem);
}

.contact-form-group:last-of-type {
  margin-bottom: var(--space-6, 1.5rem);
}

.contact-form-label {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  margin-bottom: var(--space-1-5, 0.375rem);
  color: var(--text-primary);
}

.contact-form-required {
  color: var(--color-error, #dc2626);
  margin-left: 2px;
}

.contact-form-input,
.contact-form-textarea {
  width: 100%;
  padding: 0.6875rem 0.875rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 0.9375rem;
  font-family: inherit;
  background: var(--bg-surface, #fff);
  color: var(--text-primary);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.contact-form-input::placeholder,
.contact-form-textarea::placeholder {
  color: var(--text-tertiary, #9ca3af);
}

.contact-form-input:focus,
.contact-form-textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-alpha, rgba(37, 99, 235, 0.1));
}

.contact-form-input.has-error,
.contact-form-textarea.has-error {
  border-color: var(--color-error, #dc2626);
}

.contact-form-textarea {
  resize: vertical;
  min-height: 140px;
}

.contact-form-error {
  color: var(--color-error, #dc2626);
  font-size: 0.8125rem;
  margin-top: var(--space-1, 0.25rem);
}

/* ── Submit button ────────────────────────────────────── */
.contact-submit-btn {
  width: 100%;
  height: var(--control-height-md, 40px);
  padding: 0 var(--space-6, 1.5rem);
  background-color: var(--accent);
  color: white;
  border: none;
  border-radius: 8px;
  font-size: var(--control-font-md, 0.875rem);
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2, 0.5rem);
  transition: background-color 0.15s ease, opacity 0.15s ease;
}

.contact-submit-btn:hover:not(:disabled) {
  opacity: 0.9;
}

.contact-submit-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* ── Honeypot ─────────────────────────────────────────── */
.contact-honeypot {
  position: absolute;
  left: -9999px;
}

/* ── Sidebar — contact info ───────────────────────────── */
.contact-sidebar {
  display: flex;
  flex-direction: column;
  gap: var(--space-6, 1.5rem);
}

.contact-info-card {
  background-color: var(--bg-surface, #fff);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: var(--space-6, 1.5rem);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.contact-info-title {
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: var(--space-4, 1rem);
}

.contact-info-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-4, 1rem);
}

.contact-info-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3, 0.75rem);
}

.contact-info-icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--accent-alpha, rgba(37, 99, 235, 0.08));
  color: var(--accent);
  border-radius: 8px;
}

.contact-info-content {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.contact-info-label {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.contact-info-value {
  font-size: 0.9375rem;
  color: var(--text-primary);
  word-break: break-word;
}

.contact-info-social-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2, 0.5rem);
}

.contact-social-link {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.45rem 0.7rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg-subtle, #f8fafc);
  color: var(--text-primary);
  text-decoration: none;
}

.contact-social-link:hover {
  border-color: var(--accent);
  color: var(--accent);
  text-decoration: none;
}

.contact-info-value a:not(.contact-social-link) {
  color: var(--accent);
  text-decoration: none;
}

.contact-info-value a:not(.contact-social-link):hover {
  text-decoration: underline;
}

/* ── Response time card ───────────────────────────────── */
.contact-response-card {
  background-color: var(--accent-alpha, rgba(37, 99, 235, 0.04));
  border: 1px solid var(--accent-alpha, rgba(37, 99, 235, 0.12));
  border-radius: 12px;
  padding: var(--space-5, 1.25rem);
  text-align: center;
}

.contact-response-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-2, 0.5rem);
  color: var(--accent);
}

.contact-response-title {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: var(--space-1, 0.25rem);
}

.contact-response-text {
  font-size: 0.8125rem;
  color: var(--text-secondary);
  line-height: 1.5;
}

/* ── Privacy note ─────────────────────────────────────── */
.contact-privacy {
  grid-column: 1 / -1;
  font-size: 0.75rem;
  color: var(--text-secondary);
  text-align: center;
  margin-top: var(--space-2, 0.5rem);
}

.contact-privacy a {
  color: var(--accent);
  text-decoration: none;
}

.contact-privacy a:hover {
  text-decoration: underline;
}

/* ── Success state ────────────────────────────────────── */
.contact-success {
  grid-column: 1 / -1;
  text-align: center;
  padding: var(--space-16, 4rem) var(--space-6, 1.5rem);
}

.contact-success-icon {
  width: 72px;
  height: 72px;
  background-color: var(--color-success-bg, #dcfce7);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--space-5, 1.25rem);
  color: var(--color-success, #16a34a);
}

.contact-success-title {
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: var(--space-2, 0.5rem);
  color: var(--text-primary);
}

.contact-success-text {
  color: var(--text-secondary);
  font-size: 1rem;
  line-height: 1.6;
  max-width: 420px;
  margin: 0 auto var(--space-6, 1.5rem);
}

.contact-success-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2, 0.5rem);
  padding: 0.625rem 1.5rem;
  background-color: var(--accent);
  color: white;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.9375rem;
  transition: opacity 0.15s ease;
}

.contact-success-link:hover {
  opacity: 0.9;
}

/* ── Responsive ───────────────────────────────────────── */
@media (max-width: 768px) {
  .contact-page {
    grid-template-columns: 1fr;
    gap: var(--space-6, 1.5rem);
  }

  .contact-header {
    grid-column: 1;
  }

  .contact-error {
    grid-column: 1;
  }

  .contact-form {
    padding: var(--space-5, 1.25rem);
  }

  .contact-success {
    grid-column: 1;
    padding: var(--space-10, 2.5rem) var(--space-4, 1rem);
  }

  .contact-privacy {
    grid-column: 1;
  }
}

/* content.css */
/**
 * WEBSHOP CONTEXT: Content Pages
 * 
 * Styling voor CMS content pages (algemene voorwaarden, privacy, etc.)
 * Gerenderde HTML content met proper typography.
 */

/* =================================================================
   CONTENT PAGE CONTAINER
   ================================================================= */

.page-content {
  max-width: var(--webshop-content-max);
  margin: 0 auto;
  padding: var(--space-6) var(--space-4);
}

@media (min-width: 768px) {
  .page-content {
    padding: var(--space-8) var(--space-6);
  }
}

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

.page-content h1 {
  font-size: 2rem;
  font-weight: var(--font-bold);
  line-height: 1.2;
  margin: 0 0 var(--space-6) 0;
  color: var(--text-primary);
}

.page-content h2 {
  font-size: 1.5rem;
  font-weight: var(--font-semibold);
  line-height: 1.3;
  margin: var(--space-8) 0 var(--space-4) 0;
  color: var(--text-primary);
}

.page-content h3 {
  font-size: 1.25rem;
  font-weight: var(--font-semibold);
  line-height: 1.4;
  margin: var(--space-6) 0 var(--space-3) 0;
  color: var(--text-primary);
}

.page-content h4 {
  font-size: 1.125rem;
  font-weight: var(--font-semibold);
  line-height: 1.4;
  margin: var(--space-4) 0 var(--space-2) 0;
  color: var(--text-primary);
}

.page-content p {
  margin: 0 0 var(--space-4) 0;
  line-height: var(--leading-relaxed);
  color: var(--text-primary);
}

.page-content p:last-child {
  margin-bottom: 0;
}

/* =================================================================
   LISTS
   ================================================================= */

.page-content ul,
.page-content ol {
  margin: 0 0 var(--space-4) 0;
  padding-left: var(--space-6);
}

.page-content li {
  margin-bottom: var(--space-2);
  line-height: var(--leading-relaxed);
}

.page-content li:last-child {
  margin-bottom: 0;
}

/* =================================================================
   LINKS
   ================================================================= */

.page-content a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color var(--transition-fast);
}

.page-content a:hover {
  color: var(--accent-hover);
}

/* =================================================================
   EMPHASIS & FORMATTING
   ================================================================= */

.page-content strong {
  font-weight: var(--font-semibold);
}

.page-content em {
  font-style: italic;
}

.page-content blockquote {
  margin: var(--space-4) 0;
  padding: var(--space-4) var(--space-6);
  border-left: 4px solid var(--accent);
  background-color: var(--bg-surface);
  font-style: italic;
  color: var(--text-secondary);
}

.page-content hr {
  margin: var(--space-8) 0;
  border: none;
  border-top: 1px solid var(--border);
}

/* =================================================================
   CODE
   ================================================================= */

.page-content code {
  font-family: var(--font-mono);
  font-size: 0.875em;
  padding: 0.125em 0.375em;
  background-color: var(--bg-surface);
  border-radius: var(--radius-sm);
}

.page-content pre {
  margin: var(--space-4) 0;
  padding: var(--space-4);
  background-color: var(--bg-surface);
  border-radius: var(--radius-md);
  overflow-x: auto;
}

.page-content pre code {
  padding: 0;
  background-color: transparent;
}

/* =================================================================
   TABLES
   ================================================================= */

.page-content table {
  width: 100%;
  margin: var(--space-4) 0;
  border-collapse: collapse;
}

.page-content th,
.page-content td {
  padding: var(--space-3) var(--space-4);
  text-align: left;
  border-bottom: 1px solid var(--border);
}

.page-content th {
  font-weight: var(--font-semibold);
  background-color: var(--bg-surface);
}

/* =================================================================
   IMAGES
   ================================================================= */

.page-content img {
  max-width: 100%;
  height: auto;
  margin: var(--space-4) 0;
  border-radius: var(--radius-md);
}

/* =================================================================
   ERROR & LOADING STATES
   ================================================================= */

.page-error {
  max-width: 600px;
  margin: var(--space-12) auto;
  padding: var(--space-8);
  text-align: center;
}

.page-error h1 {
  font-size: 1.5rem;
  margin-bottom: var(--space-4);
  color: var(--text-primary);
}

.page-error p {
  margin-bottom: var(--space-6);
  color: var(--text-secondary);
}

.page-error a {
  color: var(--accent);
  text-decoration: underline;
}

/* facility-grid.css */
/**
 * WEBSHOP CONTEXT: Facility Grid
 * 
 * Grid layout for showcasing pool/recreation facilities.
 * Cards with icon, name, description, and optional metadata.
 */

/* =================================================================
   FACILITY GRID
   ================================================================= */

.facility-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6, 24px);
}

/* =================================================================
   FACILITY CARD
   ================================================================= */

.facility-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--space-6, 24px);
  background: var(--bg-surface, #ffffff);
  border: 1px solid var(--border, #e2e8f0);
  border-radius: var(--radius-lg, 12px);
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
  text-decoration: none;
  color: inherit;
}

.facility-card:hover {
  border-color: var(--accent, #0891b2);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
  transform: translateY(-2px);
}

/* =================================================================
   FACILITY ICON
   ================================================================= */

.facility-card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: var(--radius-lg, 12px);
  background: var(--accent-dim, #e0f7fa);
  color: var(--accent, #0891b2);
  margin-bottom: var(--space-4, 16px);
}

/* =================================================================
   FACILITY INFO
   ================================================================= */

.facility-card__name {
  font-size: var(--text-base, 16px);
  font-weight: var(--font-semibold, 600);
  color: var(--text-primary);
  margin: 0 0 var(--space-2, 8px);
}

.facility-card__description {
  font-size: var(--text-sm, 14px);
  color: var(--text-secondary);
  line-height: 1.5;
  margin: 0;
}

/* =================================================================
   FACILITY METADATA
   ================================================================= */

.facility-card__meta {
  display: flex;
  gap: var(--space-3, 12px);
  margin-top: var(--space-3, 12px);
  padding-top: var(--space-3, 12px);
  border-top: 1px solid var(--border, #e2e8f0);
  font-size: var(--text-xs, 12px);
  color: var(--text-tertiary, #94a3b8);
}

.facility-card__meta-item {
  display: flex;
  align-items: center;
  gap: var(--space-1, 4px);
}

/* =================================================================
   RESPONSIVE
   ================================================================= */

@media (max-width: 1024px) {
  .facility-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .facility-grid {
    grid-template-columns: 1fr;
  }
}

/* faq.css */
/* ============================================================
 * FAQ Page — Pagayo Webshop
 * CSS: contexts/webshop/faq.css
 * ============================================================ */

/* Page header */
.faq-header {
  margin-bottom: var(--space-8, 2rem);
}

.faq-header .page-title {
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: var(--space-2, 0.5rem);
  color: var(--text-primary);
}

.faq-header .page-subtitle {
  color: var(--text-secondary);
  font-size: 1.125rem;
  max-width: 600px;
}

/* Loading state */
.faq-loading {
  text-align: center;
  padding: var(--space-12, 3rem) 0;
}

.faq-loading-text {
  color: var(--text-secondary);
  margin-top: var(--space-4, 1rem);
}

/* Error state */
.faq-error {
  padding: var(--space-4, 1rem);
  background-color: var(--color-error-bg, #fef2f2);
  border: 1px solid var(--color-error-border, #fecaca);
  border-radius: 8px;
  color: var(--color-error, #dc2626);
}

/* FAQ content */
.faq-content {
  max-width: 800px;
}

/* Empty state */
.faq-empty {
  text-align: center;
  padding: var(--space-12, 3rem);
  background-color: var(--bg-secondary, #f9fafb);
  border-radius: 12px;
  max-width: 500px;
  margin: 0 auto;
}

.faq-empty-icon {
  margin-bottom: var(--space-4, 1rem);
  color: var(--text-secondary);
}

.faq-empty-title {
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: var(--space-2, 0.5rem);
}

.faq-empty-text {
  color: var(--text-secondary);
}

.faq-empty-text a {
  color: var(--accent);
  text-decoration: none;
}

.faq-empty-text a:hover {
  text-decoration: underline;
}

/* Contact CTA */
.faq-cta {
  margin-top: var(--space-12, 3rem);
  padding: var(--space-8, 2rem);
  background-color: var(--bg-secondary, #f9fafb);
  border-radius: 12px;
  text-align: center;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

.faq-cta-title {
  font-size: 1.125rem;
  font-weight: 600;
  margin-bottom: var(--space-2, 0.5rem);
}

.faq-cta-text {
  color: var(--text-secondary);
  margin-bottom: var(--space-4, 1rem);
}

.faq-cta-link {
  display: inline-block;
  padding: var(--space-3, 0.75rem) var(--space-6, 1.5rem);
  background-color: var(--accent);
  color: white;
  border-radius: 6px;
  text-decoration: none;
  font-weight: 500;
}

.faq-cta-link:hover {
  opacity: 0.9;
}

/* full-width-image.css */
/**
 * WEBSHOP CONTEXT: Full Width Image
 *
 * Decorative full-width image section for pool/recreation tenants.
 * Rendered directly between homepage sections (e.g. below opening hours).
 */

/* =================================================================
   FULL WIDTH IMAGE SECTION
   ================================================================= */

.full-width-image {
  width: 100%;
  overflow: hidden;
  line-height: 0;
}

.full-width-image__img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

/* hero.css */
/**
 * WEBSHOP CONTEXT: Hero Section
 * 
 * Full-width hero banner for homepage.
 * Supports background images, overlays, and CTAs.
 */

/* =================================================================
   HERO SECTION
   ================================================================= */

.hero {
  position: relative;
  min-height: 500px;
  display: flex;
  align-items: center;
  background: linear-gradient(135deg, var(--accent-dim) 0%, var(--bg-surface) 100%);
  overflow: hidden;
}

.hero--full {
  min-height: 80vh;
}

.hero--compact {
  min-height: 300px;
}

/* Background image support */
.hero[style*="background-image"] {
  background-size: cover;
  background-position: center;
}

/* Overlay for background images */
.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(0, 0, 0, 0.6) 0%,
    rgba(0, 0, 0, 0.3) 100%
  );
  z-index: 1;
}

/* =================================================================
   HERO CONTENT
   ================================================================= */

.hero-content {
  position: relative;
  z-index: 2;
  width: 100%;
  padding: var(--space-12, 48px) 0;
}

.hero-text {
  max-width: 600px;
}

/* When hero has background image, text should be white */
.hero[style*="background-image"] .hero-title,
.hero[style*="background-image"] .hero-subtitle {
  color: white;
}

/* =================================================================
   HERO TYPOGRAPHY
   ================================================================= */

.hero-title {
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: var(--font-bold);
  color: var(--text-primary);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0 0 var(--space-4);
}

.hero-subtitle {
  font-size: clamp(1rem, 2.5vw, 1.25rem);
  color: var(--text-secondary);
  line-height: 1.6;
  margin: 0 0 var(--space-6);
}

/* =================================================================
   HERO CTA BUTTONS
   ================================================================= */

.hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

/* Hero-specific button styles */
.hero .btn--primary {
  background: var(--tenant-accent, var(--accent));
  border-color: var(--tenant-accent, var(--accent));
  color: var(--text-on-accent, white);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1);
}

.hero .btn--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}

.hero[style*="background-image"] .btn--secondary {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.3);
  color: white;
  backdrop-filter: blur(8px);
}

.hero[style*="background-image"] .btn--secondary:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.5);
}

/* =================================================================
   HERO DECORATIVE ELEMENTS
   ================================================================= */

.hero-decoration {
  position: absolute;
  right: -100px;
  top: 50%;
  transform: translateY(-50%);
  width: 600px;
  height: 600px;
  background: radial-gradient(
    circle,
    var(--accent-dim) 0%,
    transparent 70%
  );
  opacity: 0.5;
  pointer-events: none;
  z-index: 0;
}

/* =================================================================
   RESPONSIVE
   ================================================================= */

@media (max-width: 768px) {
  .hero {
    min-height: 400px;
  }
  
  .hero--full {
    min-height: 60vh;
  }
  
  .hero-content {
    padding: var(--space-8) 0;
  }
  
  .hero-cta {
    flex-direction: column;
  }
  
  .hero-cta .btn {
    width: 100%;
    justify-content: center;
  }
  
  .hero-decoration {
    display: none;
  }
}

/* layout.css */
/**
 * WEBSHOP CONTEXT: Layout
 * 
 * Header (navbar), footer, and page structure.
 * Classes match the actual TSX components in storefront.
 */

/* =================================================================
   NAVBAR (Header)
   ================================================================= */

.navbar {
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border);
}

.navbar.navbar-sticky {
  position: sticky;
  top: 0;
  z-index: 100;
  backdrop-filter: blur(8px);
}

.navbar > .container {
  max-width: var(--webshop-content-max, 1400px);
  margin: 0 auto;
  padding: 0 var(--space-4);
}

.navbar-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--webshop-header-height, 64px);
  gap: var(--space-4);
}

/* Brand/Logo */
.navbar-brand {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xl);
  font-weight: var(--font-bold);
  color: var(--text-primary);
  text-decoration: none;
  flex-shrink: 0;
}

.navbar-brand img {
  height: 40px;
  width: auto;
}

/* Search */
.navbar-search {
  flex: 1;
  max-width: 400px;
}

.navbar-search .input-group {
  display: flex;
  align-items: center;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.navbar-search .input-group-addon {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 var(--space-3);
  color: var(--text-muted);
}

.navbar-search .form-input {
  flex: 1;
  border: none;
  background: transparent;
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm);
  color: var(--text-primary);
  outline: none;
}

.navbar-search .form-input::placeholder {
  color: var(--text-muted);
}

/* =================================================================
   UNIVERSAL SEARCH DROPDOWN
   ================================================================= */

.universal-search {
  position: relative;
  width: 100%;
}

.universal-search__form .input-group {
  display: flex;
  align-items: center;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: border-color 0.15s ease;
}

.universal-search__form .input-group:focus-within {
  border-color: var(--accent);
}

.universal-search__form .input-group-addon {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 var(--space-3);
  color: var(--text-muted);
}

.universal-search__form .form-input {
  flex: 1;
  border: none;
  background: transparent;
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm);
  color: var(--text-primary);
  outline: none;
}

.universal-search__form .form-input::placeholder {
  color: var(--text-muted);
}

.universal-search__dropdown {
  position: absolute;
  top: calc(100% + var(--space-2));
  left: 0;
  right: 0;
  min-width: 360px;
  max-height: 480px;
  overflow-y: auto;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  z-index: 200;
  padding: var(--space-2);
}

.universal-search__section {
  padding: var(--space-1) 0;
}

.universal-search__section + .universal-search__section {
  border-top: 1px solid var(--border);
  margin-top: var(--space-1);
  padding-top: var(--space-2);
}

.universal-search__section-header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-2);
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Search result items */
.universal-search__item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  padding: var(--space-2) var(--space-2);
  border: none;
  background: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  text-align: left;
  color: var(--text-primary);
  font-size: var(--text-sm);
  transition: background-color 0.1s ease;
}

.universal-search__item:hover {
  background: var(--bg-elevated);
}

.universal-search__item-image {
  width: 40px;
  height: 40px;
  object-fit: cover;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
  background: var(--bg-elevated);
}

.universal-search__item-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.universal-search__item-name {
  font-weight: var(--font-medium);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.universal-search__item-category {
  font-size: var(--text-xs);
  color: var(--text-muted);
}

.universal-search__item-price {
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  flex-shrink: 0;
  font-size: var(--text-sm);
}

.universal-search__item-arrow {
  color: var(--text-muted);
  flex-shrink: 0;
  transition: transform 0.15s ease;
}

.universal-search__item:hover .universal-search__item-arrow {
  transform: translateX(2px);
  color: var(--accent);
}

/* View all results button */
.universal-search__view-all {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  width: 100%;
  padding: var(--space-3);
  margin-top: var(--space-1);
  border: none;
  border-top: 1px solid var(--border);
  background: none;
  color: var(--accent);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  cursor: pointer;
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  transition: background-color 0.1s ease;
}

.universal-search__view-all:hover {
  background: var(--bg-elevated);
}

/* Loading dots */
.universal-search__loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-6) 0;
}

.universal-search__loading-dot {
  width: 6px;
  height: 6px;
  background: var(--text-muted);
  border-radius: 50%;
  animation: universal-search-pulse 1.2s infinite;
}

.universal-search__loading-dot:nth-child(2) {
  animation-delay: 0.15s;
}

.universal-search__loading-dot:nth-child(3) {
  animation-delay: 0.3s;
}

@keyframes universal-search-pulse {
  0%, 80%, 100% { opacity: 0.3; transform: scale(0.8); }
  40% { opacity: 1; transform: scale(1); }
}

/* Empty state */
.universal-search__empty {
  padding: var(--space-4) var(--space-2);
  text-align: center;
}

.universal-search__empty-title {
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--text-primary);
  margin: 0 0 var(--space-1);
}

.universal-search__empty-text {
  font-size: var(--text-xs);
  color: var(--text-muted);
  margin: 0;
}

/* Mobile: dropdown becomes full-width below search */
.navbar-mobile-menu .universal-search__dropdown {
  position: relative;
  top: var(--space-2);
  min-width: unset;
  box-shadow: none;
  border: 1px solid var(--border);
}

/* Actions (cart, user, menu) */
.navbar-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

/* User menu trigger */
.user-menu {
  position: relative;
}

.user-menu-trigger {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  color: var(--text-secondary);
  text-decoration: none;
  border: none;
  background: transparent;
  cursor: pointer;
  border-radius: var(--radius-md);
  transition: all var(--transition-fast);
  font: inherit;
}

.user-menu-trigger:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.user-menu-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-full, 9999px);
  background: var(--accent);
  color: var(--bg-deep);
  font-size: var(--text-xs, 12px);
  font-weight: var(--font-weight-bold, 700);
  flex-shrink: 0;
}

.user-menu-item-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

/* Dropdown */
.user-menu-dropdown {
  position: absolute;
  top: calc(100% + var(--space-2));
  right: 0;
  min-width: 220px;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg, 0 10px 25px rgba(0, 0, 0, 0.3));
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity var(--transition-fast), transform var(--transition-fast), visibility var(--transition-fast);
  z-index: var(--z-dropdown, 50);
}

.user-menu-dropdown.open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.user-menu-header {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border);
}

.user-menu-name {
  font-size: var(--text-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
  margin: 0;
}

.user-menu-email {
  font-size: var(--text-xs, 12px);
  color: var(--text-secondary);
  margin: var(--space-1) 0 0;
}

.user-menu-items {
  padding: var(--space-2) 0;
}

.user-menu-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-sm);
  color: var(--text-secondary);
  text-decoration: none;
  border: none;
  background: transparent;
  cursor: pointer;
  font: inherit;
  transition: color var(--transition-fast), background var(--transition-fast);
}

.user-menu-item:hover {
  color: var(--text-primary);
  background: var(--bg-hover);
}

.user-menu-item--danger {
  color: var(--error, #ef4444);
}

.user-menu-item--danger:hover {
  color: var(--error, #ef4444);
  background: rgba(239, 68, 68, 0.1);
}

.user-menu-divider {
  height: 1px;
  background: var(--border);
  margin: 0;
}

.rotate-180 {
  transform: rotate(180deg);
}

/* Cart button */
.cart-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--control-height-md, 40px);
  height: var(--control-height-md, 40px);
  background: transparent;
  border: none;
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all var(--transition-fast);
  position: relative;
}

.cart-button:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.cart-button .icon {
  width: 24px;
  height: 24px;
}

/* Cart badge */
.cart-button .cart-badge {
  position: absolute;
  top: 4px;
  right: 4px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  background: var(--tenant-accent, var(--accent));
  color: white;
  font-size: 11px;
  font-weight: var(--font-semibold);
  line-height: 18px;
  text-align: center;
  border-radius: var(--radius-full);
}

/* Navigation */
.navbar-nav {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-2) 0;
}

.nav-link {
  display: inline-flex;
  align-items: center;
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--text-secondary);
  text-decoration: none;
  border-radius: var(--radius-md);
  transition: background var(--transition-fast), color var(--transition-fast);
}

.nav-link:hover,
.nav-link.active {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.nav-link-sale {
  color: var(--status-error);
}

.nav-link-sale:hover {
  color: var(--status-error);
  background: rgba(var(--status-error-rgb, 239, 68, 68), 0.1);
}

/* Category dropdown */
.nav-dropdown {
  position: relative;
}

.nav-link-dropdown {
  gap: var(--space-1);
}

.nav-chevron {
  transition: transform var(--transition-fast);
}

.nav-dropdown:hover .nav-chevron {
  transform: rotate(180deg);
}

.nav-dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 200;
  min-width: 200px;
  padding: var(--space-2);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}

.nav-dropdown-item {
  display: block;
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm);
  color: var(--text-secondary);
  text-decoration: none;
  border-radius: var(--radius-md);
  transition: all var(--transition-fast);
  white-space: nowrap;
}

.nav-dropdown-item:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.nav-dropdown-item--all {
  font-weight: var(--font-medium);
  color: var(--text-primary);
  border-bottom: 1px solid var(--border);
  margin-bottom: var(--space-1);
  padding-bottom: var(--space-3);
}

/* Mobile category groups */
.nav-mobile-group {
  display: flex;
  flex-direction: column;
}

.nav-mobile-children {
  padding-left: var(--space-4);
}

.nav-link-child {
  font-size: var(--text-xs);
  color: var(--text-muted);
}

.nav-link-child:hover {
  color: var(--text-primary);
}

/* Mobile menu */
.navbar-mobile-menu {
  display: none;
  flex-direction: column;
  padding: var(--space-4);
  background: var(--bg-surface);
  border-top: 1px solid var(--border);
}

.navbar-mobile-search {
  margin-bottom: var(--space-4);
}

.navbar-nav-mobile {
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-1);
}

.navbar-nav-mobile .nav-link {
  justify-content: flex-start;
  padding: var(--space-3);
}

/* Hide utilities */
.hide-mobile {
  display: flex;
}

.hide-desktop {
  display: none !important;
}

/* =================================================================
   FOOTER
   ================================================================= */

.footer {
  background: var(--bg-surface);
  border-top: 1px solid var(--border);
  margin-top: var(--webshop-section-gap, 48px);
}

/* Newsletter section */
.footer-newsletter {
  background: var(--bg-elevated);
  padding: var(--space-8) var(--space-4);
}

.footer-newsletter-content {
  max-width: var(--webshop-content-max, 1400px);
  margin: 0 auto;
  text-align: center;
}

.footer-newsletter-title {
  font-size: var(--text-xl);
  font-weight: var(--font-bold);
  color: var(--text-primary);
  margin-bottom: var(--space-2);
}

.footer-newsletter-text {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  margin-bottom: var(--space-4);
}

.footer-newsletter-form {
  display: flex;
  gap: var(--space-2);
  max-width: 400px;
  margin: 0 auto;
}

.footer-newsletter-input {
  flex: 1;
  padding: var(--space-3);
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  color: var(--text-primary);
  outline: none;
}

.footer-newsletter-input:focus {
  border-color: var(--accent);
}

.footer-newsletter-button {
  padding: var(--space-3) var(--space-5);
  background: var(--tenant-accent, var(--accent));
  color: white;
  border: none;
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  cursor: pointer;
  transition: opacity var(--transition-fast);
  white-space: nowrap;
}

.footer-newsletter-button:hover {
  opacity: 0.9;
}

/* Footer content */
.footer-content {
  max-width: var(--webshop-content-max, 1400px);
  margin: 0 auto;
  padding: var(--space-8) var(--space-4);
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr repeat(3, 1fr);
  gap: var(--space-8);
}

.footer-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.footer-title {
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  margin-bottom: var(--space-1);
}

.footer-title--brand {
  font-size: var(--text-lg);
}

.footer-text {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: 1.6;
}

.footer-links {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.footer-link {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.footer-link:hover {
  color: var(--tenant-accent, var(--accent));
}

/* Footer bottom */
.footer-bottom {
  border-top: 1px solid var(--border);
  padding: var(--space-4);
}

.footer-bottom-content {
  max-width: var(--webshop-content-max, 1400px);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-4);
}

.footer-copyright {
  font-size: var(--text-xs);
  color: var(--text-muted);
}

.footer-payment {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.footer-payment-label {
  font-size: var(--text-xs);
  color: var(--text-muted);
}

.footer-payment-icons {
  display: flex;
  gap: var(--space-2);
}

.footer-payment-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-1) var(--space-2);
  background: var(--bg-elevated);
  border-radius: var(--radius-sm);
}

.footer-payment-icon-text {
  font-size: 10px;
  font-weight: var(--font-bold);
  color: var(--text-secondary);
}

.footer-payment-icon-text--ideal { color: #cc2e74; }
.footer-payment-icon-text--visa { color: #1a1f71; }
.footer-payment-icon-text--mastercard { color: #eb001b; }
.footer-payment-icon-text--paypal { color: #003087; }

/* =================================================================
   RESPONSIVE
   ================================================================= */

@media (max-width: 1024px) {
  .navbar-nav.hide-mobile {
    display: none;
  }
  
  .hide-mobile {
    display: none !important;
  }
  
  .hide-desktop {
    display: flex !important;
  }
  
  .navbar-mobile-menu {
    display: flex;
  }

  .footer-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .footer-section:first-child {
    grid-column: span 2;
  }
}

@media (max-width: 768px) {
  .footer-grid {
    grid-template-columns: 1fr;
  }
  
  .footer-section:first-child {
    grid-column: 1;
  }
  
  .footer-bottom-content {
    flex-direction: column;
    text-align: center;
  }
  
  .footer-newsletter-form {
    flex-direction: column;
  }
}

/* loading.css */
/**
 * WEBSHOP CONTEXT: Loading States
 * 
 * Loading spinners, skeletons, and placeholders.
 * Consistent with onboarding loading patterns.
 */

/* =================================================================
   LOADING CONTAINER
   ================================================================= */

.loading-container {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-12, 48px) var(--space-4);
  min-height: 200px;
}

.loading-container--full {
  min-height: 400px;
}

.loading-container--page {
  min-height: 60vh;
}

/* =================================================================
   LOADING PLACEHOLDER (for SSR hydration)
   Server renders this as temporary content before Preact mounts.
   Text is hidden; skeleton shimmer shows instead for professional UX.
   ================================================================= */

.loading-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-12, 48px);
  min-height: 40vh;
  gap: var(--space-4, 16px);
}

/* Hide "Laden..." / "Loading..." server text — skeleton replaces it */
.loading-placeholder p,
.loading-placeholder__text {
  display: none;
}

/* Skeleton shimmer bars as visual placeholder */
.loading-placeholder::before,
.loading-placeholder::after {
  content: '';
  display: block;
  height: 16px;
  border-radius: var(--radius-md, 6px);
  background: linear-gradient(
    90deg,
    var(--bg-hover, #f3f4f6) 25%,
    var(--bg-surface, #ffffff) 50%,
    var(--bg-hover, #f3f4f6) 75%
  );
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.5s infinite;
}

.loading-placeholder::before {
  width: min(60%, 300px);
}

.loading-placeholder::after {
  width: min(40%, 200px);
}

/* =================================================================
   SKELETON LOADING
   ================================================================= */

.skeleton {
  background: linear-gradient(
    90deg,
    var(--bg-hover) 25%,
    var(--bg-surface) 50%,
    var(--bg-hover) 75%
  );
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.5s infinite;
  border-radius: var(--radius-md);
}

@keyframes skeleton-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Skeleton variants */
.skeleton-text {
  height: 1em;
  margin-bottom: var(--space-2);
}

.skeleton-text--sm {
  width: 60%;
}

.skeleton-text--md {
  width: 80%;
}

.skeleton-text--lg {
  width: 100%;
}

.skeleton-title {
  height: 1.5em;
  width: 70%;
  margin-bottom: var(--space-4);
}

.skeleton-image {
  aspect-ratio: 1;
  width: 100%;
}

.skeleton-button {
  height: var(--control-height-md);
  width: 120px;
}

/* =================================================================
   PRODUCT CARD SKELETON
   ================================================================= */

.product-card-skeleton {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.product-card-skeleton__image {
  aspect-ratio: 1;
  border-radius: var(--webshop-radius-card);
}

.product-card-skeleton__info {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-2);
}

/* =================================================================
   INLINE LOADER
   ================================================================= */

.loader-inline {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--text-muted);
}

.loader-inline__spinner {
  width: 16px;
  height: 16px;
}

/* =================================================================
   PAGE TRANSITION
   ================================================================= */

.page-loading {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--accent-dim);
  z-index: 9999;
}

.page-loading__bar {
  height: 100%;
  background: var(--tenant-accent, var(--accent));
  animation: page-loading-progress 2s ease-in-out infinite;
}

@keyframes page-loading-progress {
  0% { width: 0; transform: translateX(0); }
  50% { width: 70%; }
  100% { width: 100%; transform: translateX(0); }
}

/* =================================================================
   BUTTON LOADING STATE
   ================================================================= */

.btn--loading {
  position: relative;
  color: transparent !important;
  pointer-events: none;
}

.btn--loading::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 20px;
  margin: -10px 0 0 -10px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: var(--radius-full);
  animation: spin 0.6s linear infinite;
  opacity: 0.8;
}

/* Reset color for spinner visibility */
.btn--primary.btn--loading::after {
  border-color: rgba(255, 255, 255, 0.3);
  border-top-color: white;
}

/* =================================================================
   ANIMATIONS
   ================================================================= */

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

/* opening-hours.css */
/**
 * WEBSHOP CONTEXT: Opening Hours
 * 
 * Weekly schedule table for pool/recreation tenants.
 * Highlights the current day and supports exception notices.
 */

/* =================================================================
   OPENING HOURS SECTION
   ================================================================= */

.opening-hours {
  max-width: 640px;
  margin: 0 auto;
}

/* =================================================================
   OPENING HOURS TABLE
   ================================================================= */

.opening-hours__table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm, 14px);
}

.opening-hours__table th,
.opening-hours__table td {
  padding: var(--space-3, 12px) var(--space-4, 16px);
  text-align: left;
  border-bottom: 1px solid var(--border, #e2e8f0);
}

.opening-hours__table th {
  font-weight: var(--font-semibold, 600);
  color: var(--text-primary);
  white-space: nowrap;
}

.opening-hours__table td {
  color: var(--text-secondary);
}

/* Day name column */
.opening-hours__day {
  font-weight: var(--font-medium, 500);
  color: var(--text-primary);
  min-width: 100px;
}

/* Time column */
.opening-hours__time {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Note column */
.opening-hours__note {
  font-size: var(--text-xs, 12px);
  color: var(--text-tertiary, #94a3b8);
  font-style: italic;
}

/* =================================================================
   TODAY HIGHLIGHT
   ================================================================= */

.opening-hours__row--today {
  background: var(--accent-glow, rgb(8 145 178 / 0.12));
  box-shadow: inset 3px 0 0 var(--accent, #0891b2);
}

.opening-hours__row--today .opening-hours__day {
  color: var(--text-primary);
  font-weight: var(--font-semibold, 600);
}

.opening-hours__row--today .opening-hours__time {
  color: var(--text-primary);
  font-weight: var(--font-semibold, 600);
}

.opening-hours__today-badge {
  color: var(--accent, #0891b2);
  font-weight: var(--font-semibold, 600);
}

/* =================================================================
   CLOSED STATE
   ================================================================= */

.opening-hours__closed {
  color: var(--text-tertiary, #94a3b8);
  font-style: italic;
}

/* =================================================================
   EXCEPTION NOTICE
   ================================================================= */

.opening-hours__exception {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2, 8px);
  margin-top: var(--space-4, 16px);
  padding: var(--space-3, 12px) var(--space-4, 16px);
  background: var(--info-dim, #e0f2fe);
  border-radius: var(--radius-md, 8px);
  font-size: var(--text-sm, 14px);
  color: var(--text-primary);
}

.opening-hours__exception-icon {
  flex-shrink: 0;
  color: var(--info, #0891b2);
  margin-top: 1px;
}

/* =================================================================
   SEASON NOTE
   ================================================================= */

.opening-hours__season {
  margin-top: var(--space-4, 16px);
  padding: var(--space-3, 12px) var(--space-4, 16px);
  background: var(--accent-dim, #e0f7fa);
  border-radius: var(--radius-md, 8px);
  font-size: var(--text-sm, 14px);
  color: var(--text-primary);
  text-align: center;
}

/* =================================================================
   RESPONSIVE
   ================================================================= */

@media (max-width: 768px) {
  .opening-hours__table th,
  .opening-hours__table td {
    padding: var(--space-2, 8px) var(--space-3, 12px);
  }

  .opening-hours__note {
    display: none;
  }
}

@media (max-width: 480px) {
  .opening-hours__table {
    font-size: var(--text-xs, 12px);
  }
}

/* partners.css */
/**
 * WEBSHOP CONTEXT: Partners
 *
 * Public partners page, logo cards and homepage slider section.
 */

.partners-page__header {
  margin-bottom: var(--space-8);
}

.partners-page__state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  min-height: 240px;
  padding: var(--space-8);
  text-align: center;
  background: linear-gradient(135deg, var(--bg-surface), var(--accent-dim));
  border: 1px solid var(--border);
  border-radius: 24px;
}

.partners-page__state--error {
  color: var(--error);
}

.partners-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-5);
}

.partners-tier-groups {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.partners-tier-group__header {
  margin-bottom: var(--space-4);
}

.partners-tier-group__title {
  margin: 0;
  font-size: var(--text-xl);
  color: var(--text-primary);
}

.partners-card {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--space-4);
  min-height: 112px;
  padding: var(--space-5);
  background: color-mix(in srgb, var(--bg-surface) 88%, white 12%);
  border: 1px solid var(--border);
  border-radius: 20px;
  box-shadow: var(--shadow-sm);
  color: inherit;
  text-decoration: none;
  transition: transform var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.partners-card:hover {
  transform: translateY(-2px);
  border-color: var(--accent-dim);
  box-shadow: var(--shadow-md);
}

.partners-card--compact {
  min-height: 92px;
  min-width: 280px;
  padding: var(--space-4) var(--space-5);
}

.partners-card__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  overflow: hidden;
  border-radius: 18px;
  background: var(--bg-deep);
  border: 1px solid var(--border);
}

.partners-card__logo--compact {
  width: 56px;
  height: 56px;
  border-radius: 14px;
}

.partners-card__logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.partners-card__logo-fallback {
  font-size: var(--text-xl);
  font-weight: var(--font-semibold);
  color: var(--tenant-accent, var(--accent));
}

.partners-card__body {
  min-width: 0;
}

.partners-card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-1);
}

.partners-card__title {
  margin: 0;
  font-size: var(--text-lg);
  color: var(--text-primary);
}

.partners-card__tier {
  display: inline-flex;
  align-items: center;
  padding: 0.375rem 0.625rem;
  border-radius: 999px;
  background: var(--accent-dim);
  color: var(--tenant-accent, var(--accent));
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
}

.partners-card__description {
  margin: 0;
  color: var(--text-secondary);
  font-size: var(--text-sm);
  line-height: 1.6;
}

.partners-card__link-icon {
  color: var(--text-muted);
}

.partners-section {
  position: relative;
  padding: var(--space-4) 0 var(--space-2);
}

.partners-section__header {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}

.partners-section__header .page-subtitle {
  margin-bottom: 0;
}

.partners-section__link {
  display: inline-flex;
  align-items: center;
  color: var(--tenant-accent, var(--accent));
  font-weight: var(--font-medium);
  text-decoration: none;
  white-space: nowrap;
}

.partners-slider {
  overflow: hidden;
  mask-image: linear-gradient(to right, transparent, black 6%, black 94%, transparent);
}

.partners-slider__track {
  display: flex;
  align-items: stretch;
  gap: var(--space-4);
  width: max-content;
  animation: partners-marquee 28s linear infinite;
  will-change: transform;
}

.partners-slider:hover .partners-slider__track {
  animation-play-state: paused;
}

.partners-slider__item {
  flex: 0 0 auto;
}

@keyframes partners-marquee {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(calc(-50% - var(--space-2)));
  }
}

@media (max-width: 768px) {
  .partners-page__header {
    margin-bottom: var(--space-6);
  }

  .partners-card,
  .partners-card--compact {
    min-width: 0;
  }

  .partners-card {
    grid-template-columns: 1fr;
    justify-items: start;
  }

  .partners-section__header {
    flex-direction: column;
    align-items: flex-start;
  }

  .partners-slider {
    mask-image: none;
  }

  .partners-slider__track {
    animation-duration: 22s;
  }
}
/* payment-return.css */
/**
 * WEBSHOP CONTEXT: Payment Return Components
 *
 * Class names match component kebab-case convention (NO BEM __).
 * Follows the same pattern as checkout.css confirmation section.
 *
 * Components:
 *   PaymentReturn.tsx  → .payment-return, .payment-return--loading/success/pending/failed
 *                      → .payment-return-header, -icon, -title, -subtitle, -spinner
 *                      → .payment-return-card, -card-header, -order-title
 *                      → .payment-return-items, -item, -item-name, -item-price
 *                      → .payment-return-divider, -totals, -total-row, -total-label, -total-value
 *                      → .payment-return-actions, -text, -note, -error, -alert
 */

/* =================================================================
   FADE-IN ANIMATION
   ================================================================= */

@keyframes payment-return-fade-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* =================================================================
   ROOT CONTAINER & STATE MODIFIERS
   ================================================================= */

.payment-return {
  max-width: 640px;
  margin: 0 auto;
  padding: var(--space-8) var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  animation: payment-return-fade-in var(--duration-slow) var(--ease-out) both;
}

.payment-return--loading {
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 50vh;
}

.payment-return--success,
.payment-return--pending,
.payment-return--failed {
  align-items: center;
  text-align: center;
}

/* =================================================================
   HEADER — Icon + Title + Subtitle
   ================================================================= */

.payment-return-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
}

.payment-return-title {
  font-size: var(--font-size-2xl, var(--text-2xl));
  font-weight: var(--font-weight-bold, var(--font-bold));
  color: var(--text-primary);
  margin: 0;
  line-height: var(--leading-tight);
}

.payment-return-subtitle {
  font-size: var(--font-size-base, var(--text-base));
  color: var(--text-secondary);
  margin: 0;
  max-width: 480px;
}

/* =================================================================
   STATUS ICONS — Colored circles with icon
   ================================================================= */

.payment-return-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 5rem;
  height: 5rem;
  border-radius: var(--radius-full);
  margin-bottom: var(--space-2);
}

.payment-return-icon--success {
  color: var(--success);
  background: rgb(34 197 94 / 0.1);
}

.payment-return-icon--pending {
  color: var(--warning, rgb(245 158 11));
  background: rgb(245 158 11 / 0.1);
}

.payment-return-icon--failed {
  color: var(--error);
  background: rgb(239 68 68 / 0.1);
}

/* =================================================================
   SPINNER (loading state)
   ================================================================= */

.payment-return-spinner {
  margin-bottom: var(--space-4);
}

/* =================================================================
   CARD — Order detail card
   ================================================================= */

.payment-return-card {
  width: 100%;
  text-align: left;
}

.payment-return-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.payment-return-order-title {
  font-size: var(--font-size-base, var(--text-base));
  font-weight: var(--font-weight-semibold, var(--font-semibold));
  color: var(--text-primary);
  margin: 0;
}

/* Subscription banner variant */
.payment-return-card--subscription {
  border-color: var(--accent);
  background: linear-gradient(135deg, var(--surface-primary), rgb(245 166 35 / 0.06));
}

/* =================================================================
   ORDER ITEMS
   ================================================================= */

.payment-return-items {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.payment-return-item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-2) 0;
  font-size: var(--font-size-sm, var(--text-sm));
}

.payment-return-item + .payment-return-item {
  border-top: 1px solid var(--border-subtle);
}

.payment-return-item-name {
  color: var(--text-primary);
  flex: 1;
  min-width: 0;
}

.payment-return-item-price {
  color: var(--text-primary);
  font-weight: var(--font-weight-medium, var(--font-medium));
  white-space: nowrap;
  flex-shrink: 0;
}

/* =================================================================
   DIVIDER
   ================================================================= */

.payment-return-divider {
  border: none;
  border-top: 1px solid var(--border-subtle);
  margin: var(--space-2) 0;
}

/* =================================================================
   TOTALS
   ================================================================= */

.payment-return-totals {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.payment-return-total-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: var(--font-size-sm, var(--text-sm));
  color: var(--text-secondary);
}

.payment-return-total-row--discount {
  color: var(--success);
}

.payment-return-total-row--final {
  font-size: var(--font-size-base, var(--text-base));
  font-weight: var(--font-weight-bold, var(--font-bold));
  color: var(--text-primary);
  padding-top: var(--space-2);
  border-top: 2px solid var(--border-subtle);
  margin-top: var(--space-1);
}

.payment-return-total-label {
  color: var(--text-secondary);
}

.payment-return-total-value {
  font-weight: var(--font-weight-medium, var(--font-medium));
  color: var(--text-primary);
}

/* =================================================================
   ACTIONS — Button groups
   ================================================================= */

.payment-return-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  width: 100%;
}

/* =================================================================
   TEXT, NOTE, ERROR, ALERT
   ================================================================= */

.payment-return-text {
  font-size: var(--font-size-base, var(--text-base));
  color: var(--text-secondary);
  margin: 0;
  max-width: 480px;
}

.payment-return-note {
  font-size: var(--font-size-sm, var(--text-sm));
  color: var(--text-tertiary);
  margin: 0;
  max-width: 480px;
  line-height: var(--leading-relaxed);
}

.payment-return-error {
  font-size: var(--font-size-base, var(--text-base));
  color: var(--error);
  margin: 0;
  max-width: 480px;
}

.payment-return-alert {
  width: 100%;
  max-width: 480px;
}

/* =================================================================
   RESPONSIVE
   ================================================================= */

@media (max-width: 768px) {
  .payment-return {
    padding: var(--space-6) var(--space-4);
    gap: var(--space-5);
  }

  .payment-return-title {
    font-size: var(--font-size-xl, var(--text-xl));
  }

  .payment-return-icon {
    width: 4rem;
    height: 4rem;
  }

  .payment-return-icon svg {
    width: 36px;
    height: 36px;
  }

  .payment-return-actions {
    flex-direction: column;
  }

  .payment-return-actions > * {
    width: 100%;
  }
}

/* photo-upload.css */
/* ===========================================
 * Photo Upload — Public standalone page
 *
 * Standalone page for tokenized photo upload.
 * No admin shell, no webshop chrome — clean, mobile-first.
 *
 * Used by: family members uploading passport photos via emailed link.
 *
 * Design tokens: uses @pagayo/design base tokens.
 * =========================================== */

.photo-upload {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100vh;
  padding: var(--space-6, 1.5rem) var(--space-4, 1rem);
  background: var(--bg-base, #f9fafb);
  font-family: var(--font-sans, system-ui, -apple-system, sans-serif);
}

/* Logo */
.photo-upload__logo {
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: var(--space-8, 2rem);
  color: var(--text-primary, #111827);
  letter-spacing: -0.02em;
}

.photo-upload__logo-p {
  color: var(--accent, #4f46e5);
}

.photo-upload__logo-dot {
  color: var(--accent, #4f46e5);
}

/* Status screens (loading, error, success) */
.photo-upload__status {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-4, 1rem);
  max-width: 420px;
  padding: var(--space-8, 2rem) var(--space-6, 1.5rem);
}

.photo-upload__status p {
  color: var(--text-secondary, #6b7280);
  font-size: 0.9375rem;
  line-height: 1.5;
  margin: 0;
}

.photo-upload__status--error {
  color: var(--danger, #dc2626);
}

.photo-upload__status--error p {
  color: var(--text-primary, #111827);
}

.photo-upload__status--success {
  color: var(--success, #16a34a);
}

.photo-upload__status--success h2 {
  color: var(--text-primary, #111827);
  font-size: 1.25rem;
  margin: 0;
}

.photo-upload__status--success p {
  color: var(--text-secondary, #6b7280);
}

/* Form container */
.photo-upload__form {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 100%;
  max-width: 420px;
}

.photo-upload__title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text-primary, #111827);
  margin: 0 0 var(--space-2, 0.5rem) 0;
}

.photo-upload__subtitle {
  font-size: 0.9375rem;
  color: var(--text-secondary, #6b7280);
  margin: 0 0 var(--space-6, 1.5rem) 0;
  line-height: 1.5;
}

.photo-upload__subtitle strong {
  color: var(--text-primary, #111827);
}

/* Inline error */
.photo-upload__inline-error {
  display: flex;
  align-items: center;
  gap: var(--space-2, 0.5rem);
  width: 100%;
  padding: var(--space-3, 0.75rem) var(--space-4, 1rem);
  margin-bottom: var(--space-4, 1rem);
  background: var(--danger-bg, #fef2f2);
  color: var(--danger, #dc2626);
  border-radius: var(--radius-md, 8px);
  font-size: 0.875rem;
  text-align: left;
}

/* Photo picker area */
.photo-upload__picker {
  width: 100%;
  margin-bottom: var(--space-4, 1rem);
}

/* Choose photo button (when no photo selected) */
.photo-upload__choose {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3, 0.75rem);
  width: 100%;
  min-height: 200px;
  padding: var(--space-8, 2rem);
  border: 2px dashed var(--border, #d1d5db);
  border-radius: var(--radius-lg, 12px);
  background: var(--bg-surface, #ffffff);
  color: var(--text-secondary, #6b7280);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}

.photo-upload__choose:hover,
.photo-upload__choose:focus-within {
  border-color: var(--accent, #4f46e5);
  background: var(--accent-bg, #eef2ff);
}

.photo-upload__choose span {
  font-size: 0.9375rem;
  font-weight: 500;
}

/* Preview */
.photo-upload__preview {
  position: relative;
  width: 100%;
  border-radius: var(--radius-lg, 12px);
  overflow: hidden;
  background: var(--bg-surface, #ffffff);
  border: 1px solid var(--border, #d1d5db);
}

.photo-upload__preview img {
  display: block;
  width: 100%;
  max-height: 300px;
  object-fit: contain;
}

.photo-upload__preview-remove {
  position: absolute;
  top: var(--space-2, 0.5rem);
  right: var(--space-2, 0.5rem);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  cursor: pointer;
  transition: background 0.15s;
}

.photo-upload__preview-remove:hover {
  background: rgba(0, 0, 0, 0.8);
}

/* Change photo link */
.photo-upload__change {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1, 0.25rem);
  margin-bottom: var(--space-4, 1rem);
  color: var(--accent, #4f46e5);
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.photo-upload__change:hover {
  color: var(--accent-hover, #4338ca);
}

/* Submit button */
.photo-upload__submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2, 0.5rem);
  width: 100%;
  height: var(--control-height-lg, 48px);
  padding: 0 var(--space-6, 1.5rem);
  border: none;
  border-radius: var(--radius-md, 8px);
  background: var(--accent, #4f46e5);
  color: #fff;
  font-size: var(--control-font-md, 14px);
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, opacity 0.15s;
}

.photo-upload__submit:hover:not(:disabled) {
  background: var(--accent-hover, #4338ca);
}

.photo-upload__submit:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Hint text */
.photo-upload__hint {
  margin-top: var(--space-3, 0.75rem);
  font-size: 0.8125rem;
  color: var(--text-muted, #9ca3af);
}

/* Spinner (reuse from design system or inline) */
.photo-upload .spinner {
  width: 24px;
  height: 24px;
  border: 3px solid var(--border, #d1d5db);
  border-top-color: var(--accent, #4f46e5);
  border-radius: 50%;
  animation: photo-upload-spin 0.6s linear infinite;
}

.photo-upload .spinner--sm {
  width: 16px;
  height: 16px;
  border-width: 2px;
}

@keyframes photo-upload-spin {
  to { transform: rotate(360deg); }
}

/* Mobile optimizations */
@media (max-width: 480px) {
  .photo-upload {
    padding: var(--space-4, 1rem);
  }

  .photo-upload__title {
    font-size: 1.25rem;
  }

  .photo-upload__choose {
    min-height: 160px;
    padding: var(--space-6, 1.5rem);
  }
}

/* pool-hero.css */
/**
 * WEBSHOP CONTEXT: Pool Hero
 * 
 * Swimming pool hero section with gradient background,
 * today's opening hours, and decorative wave at the bottom.
 */

/* =================================================================
   POOL HERO
   ================================================================= */

.pool-hero {
  position: relative;
  min-height: 420px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-light, #0284c7) 100%);
  overflow: hidden;
  text-align: center;
  color: #ffffff;
}

.pool-hero--with-image {
  background: transparent;
}

.pool-hero__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

.pool-hero--with-image::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(8, 145, 178, 0.85) 0%,
    rgba(2, 132, 199, 0.7) 100%
  );
  z-index: 1;
}

/* =================================================================
   POOL HERO CONTENT
   ================================================================= */

.pool-hero__content {
  position: relative;
  z-index: 2;
  padding: var(--space-12, 48px) var(--space-4, 16px);
  max-width: 700px;
}

.pool-hero__title {
  font-size: clamp(1.75rem, 4.5vw, 3rem);
  font-weight: var(--font-bold, 700);
  line-height: 1.15;
  margin: 0 0 var(--space-3, 12px);
  letter-spacing: -0.02em;
  color: inherit;
}

.pool-hero__hours {
  font-size: var(--text-lg, 18px);
  opacity: 0.9;
  margin: 0 0 var(--space-6, 24px);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2, 8px);
}

.pool-hero__hours-icon {
  flex-shrink: 0;
}

.pool-hero__closed {
  background: rgba(255, 255, 255, 0.15);
  padding: var(--space-1, 4px) var(--space-3, 12px);
  border-radius: var(--radius-md, 8px);
  font-size: var(--text-sm, 14px);
}

/* =================================================================
   POOL HERO ACTIONS
   ================================================================= */

.pool-hero__actions {
  display: flex;
  gap: var(--space-3, 12px);
  justify-content: center;
  flex-wrap: wrap;
}

.pool-hero__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2, 8px);
  padding: var(--space-3, 12px) var(--space-6, 24px);
  border-radius: var(--radius-md, 8px);
  font-size: var(--text-base, 16px);
  font-weight: var(--font-semibold, 600);
  text-decoration: none;
  transition: all 0.2s;
  cursor: pointer;
  border: none;
  height: var(--control-height-lg, 48px);
}

.pool-hero__cta--primary {
  background: #ffffff;
  color: var(--accent, #0891b2);
}

.pool-hero__cta--primary:hover {
  background: rgba(255, 255, 255, 0.9);
  transform: translateY(-1px);
}

.pool-hero__cta--secondary {
  background: rgba(255, 255, 255, 0.15);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.4);
}

.pool-hero__cta--secondary:hover {
  background: rgba(255, 255, 255, 0.25);
  transform: translateY(-1px);
}

/* =================================================================
   POOL HERO WAVE (bottom decoration)
   ================================================================= */

.pool-hero__wave {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 2;
  line-height: 0;
}

.pool-hero__wave svg {
  display: block;
  width: 100%;
  height: auto;
}

/* =================================================================
   RESPONSIVE
   ================================================================= */

@media (max-width: 768px) {
  .pool-hero {
    min-height: 340px;
  }

  .pool-hero__content {
    padding: var(--space-8, 32px) var(--space-4, 16px);
  }

  .pool-hero__actions {
    flex-direction: column;
    align-items: center;
  }

  .pool-hero__cta {
    width: 100%;
    max-width: 280px;
    justify-content: center;
  }
}

/* pos-animations.css */
/* ==========================================================================
   POS Payment Animations — Webshop Context
   CSS: pagayo-design/src/contexts/webshop/pos-animations.css
   ========================================================================== */

@keyframes scale-in {
  from {
    transform: scale(0);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes draw-check {
  to {
    stroke-dashoffset: 0;
  }
}

.pos-success-overlay__icon {
  animation: scale-in 0.4s ease-out;
}

.pos-success-overlay__checkmark-path {
  stroke-dasharray: 30;
  stroke-dashoffset: 30;
  animation: draw-check 0.4s ease-out 0.2s forwards;
}

/* product-detail.css */
/**
 * WEBSHOP CONTEXT: Product Detail
 * 
 * Product detail page: wrapper, breadcrumb, gallery, info, variants,
 * add-to-cart, description.
 *
 * Class names match component output (kebab-case, NO BEM __).
 */

/* =================================================================
   PAGE WRAPPER
   ================================================================= */

.product-page {
  max-width: var(--webshop-content-max, 1400px);
  margin: 0 auto;
  padding: var(--space-8) var(--webshop-content-padding, var(--space-6));
}

.product-page--loading {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 50vh;
}

.product-page-spinner {
  text-align: center;
}

.product-page--error {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-6);
  min-height: 40vh;
  text-align: center;
}

.product-page-back-link {
  margin-top: var(--space-2);
}

.product-page-back-link a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--accent);
  text-decoration: none;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  transition: color var(--transition-fast);
}

.product-page-back-link a:hover {
  color: var(--accent-hover);
}

/* SSR placeholder — visible before Preact mounts, invisible after */
.product-seo {
  max-width: var(--webshop-content-max, 1400px);
  margin: 0 auto;
  padding: var(--space-6) var(--webshop-content-padding, var(--space-6));
  color: var(--text-secondary);
}

/* Product page price in the page header (subtitle position) */
.product-page-price {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
}

/* =================================================================
   BREADCRUMB
   ================================================================= */

.breadcrumb {
  margin-bottom: var(--space-6);
}

.breadcrumb-list {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: var(--font-size-sm);
  color: var(--text-muted);
}

.breadcrumb-item {
  display: inline-flex;
  align-items: center;
}

.breadcrumb-link {
  color: var(--text-secondary);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.breadcrumb-link:hover {
  color: var(--accent);
}

.breadcrumb-separator {
  color: var(--text-muted);
  user-select: none;
  font-size: var(--font-size-xs);
}

.breadcrumb-item--current {
  color: var(--text-primary);
  font-weight: var(--font-weight-medium);
}

/* =================================================================
   PRODUCT DETAIL HEADER (title left, breadcrumb right)
   ================================================================= */

.product-detail-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-1);
}

.product-detail-title {
  font-size: clamp(1.75rem, 4vw, 2.25rem);
  font-weight: var(--font-bold);
  color: var(--text-primary);
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin: -0.15em 0 0 0;
}

/* Subtle breadcrumb in header row */
.product-detail-breadcrumb {
  margin: 0;
  flex-shrink: 0;
}

.product-detail-breadcrumb .breadcrumb-list {
  font-size: 0.65rem;
  color: var(--text-muted);
  opacity: 0.7;
}

.product-detail-breadcrumb .breadcrumb-link {
  color: var(--text-muted);
}

.product-detail-breadcrumb .breadcrumb-link:hover {
  color: var(--text-secondary);
}

.product-detail-breadcrumb .breadcrumb-item--current {
  color: var(--text-secondary);
  font-weight: var(--font-weight-normal);
}

.product-detail-price {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

/* =================================================================
   PRODUCT DETAIL — 2-COLUMN LAYOUT
   ================================================================= */

.product-detail {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-10);
  align-items: start;
}

.product-detail-gallery {
  position: sticky;
  top: var(--space-6);
}

.product-detail-content {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

/* Tight spacing between header/price (Zalando-style) */
.product-detail-header + .product-detail-price {
  margin-top: calc(-1 * var(--space-4));
}

/* =================================================================
   PRODUCT GALLERY (ProductGallery.tsx)
   ================================================================= */

.product-gallery {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

/* Placeholder when no images */
.product-gallery-placeholder {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-surface, var(--surface-secondary));
  border-radius: var(--radius-lg);
  color: var(--text-muted);
}

.product-gallery-placeholder-icon {
  opacity: 0.5;
}

/* Main image container — adapts to image aspect ratio */
.product-gallery-main {
  position: relative;
  background: var(--bg-surface, var(--surface-secondary));
  border-radius: var(--radius-lg);
  overflow: hidden;
  cursor: zoom-in;
}

.product-gallery-image {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
}

/* Navigation arrows */
.product-gallery-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  background: var(--bg-elevated, rgba(255, 255, 255, 0.9));
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  color: var(--text-primary);
  cursor: pointer;
  opacity: 0;
  transition: opacity var(--transition-fast);
  z-index: 2;
}

.product-gallery-main:hover .product-gallery-nav {
  opacity: 1;
}

.product-gallery-nav--prev {
  left: var(--space-3);
}

.product-gallery-nav--next {
  right: var(--space-3);
}

.product-gallery-nav:hover {
  background: var(--bg-elevated, white);
  box-shadow: var(--shadow-sm);
}

/* Thumbnails */
.product-gallery-thumbnails {
  display: flex;
  gap: var(--space-3);
  overflow-x: auto;
  padding-bottom: var(--space-2);
}

.product-gallery-thumb {
  flex: 0 0 auto;
  width: 72px;
  height: 72px;
  background: var(--bg-surface, var(--surface-secondary));
  border: 2px solid transparent;
  border-radius: var(--radius-md);
  overflow: hidden;
  cursor: pointer;
  transition: border-color var(--transition-fast);
  padding: 0;
}

.product-gallery-thumb:hover,
.product-gallery-thumb--active {
  border-color: var(--accent);
}

.product-gallery-thumb-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Lightbox overlay */
.product-lightbox {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.9);
  cursor: zoom-out;
}

.product-lightbox-close {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  background: rgba(255, 255, 255, 0.1);
  border: none;
  border-radius: var(--radius-full);
  color: white;
  cursor: pointer;
  transition: background var(--transition-fast);
  z-index: 1;
}

.product-lightbox-close:hover {
  background: rgba(255, 255, 255, 0.2);
}

.product-lightbox-image {
  max-width: 90vw;
  max-height: 90vh;
  object-fit: contain;
  cursor: default;
}

.product-lightbox-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  background: rgba(255, 255, 255, 0.1);
  border: none;
  border-radius: var(--radius-full);
  color: white;
  cursor: pointer;
  transition: background var(--transition-fast);
}

.product-lightbox-nav:hover {
  background: rgba(255, 255, 255, 0.2);
}

.product-lightbox-nav--prev {
  left: var(--space-6);
}

.product-lightbox-nav--next {
  right: var(--space-6);
}

/* =================================================================
   PRODUCT INFO (ProductInfo.tsx)
   ================================================================= */

.product-info {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.product-brand {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.product-title {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  color: var(--text-primary);
  line-height: var(--line-height-tight);
  margin: 0;
}

/* Price block */
.product-price {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  padding: var(--space-3) 0;
}

.product-price-current {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  color: var(--text-primary);
}

.product-price-sale {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  color: var(--error, #dc2626);
}

.product-price-original {
  font-size: var(--font-size-lg);
  color: var(--text-muted);
  text-decoration: line-through;
}

/* Badges */
.product-badge {
  display: inline-flex;
  align-items: center;
  padding: var(--space-1) var(--space-2);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  border-radius: var(--radius-sm);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.product-badge--sale {
  background: var(--error, #dc2626);
  color: white;
}

.product-badge--in-stock {
  background: var(--success-bg, rgba(34, 197, 94, 0.1));
  color: var(--success, #16a34a);
}

.product-badge--low-stock {
  background: var(--warning-bg, rgba(245, 158, 11, 0.1));
  color: var(--warning, #d97706);
}

.product-badge--out-of-stock {
  background: var(--error-bg, rgba(220, 38, 38, 0.1));
  color: var(--error, #dc2626);
}

/* Stock row */
.product-stock {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

/* SKU */
.product-sku {
  font-size: var(--font-size-sm);
  color: var(--text-muted);
}

.product-sku-value {
  font-family: var(--font-mono, monospace);
}

/* =================================================================
   VARIANT SELECTOR (ProductVariantSelector.tsx)
   ================================================================= */

.product-variant-selector {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.product-variant-label {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
  margin-bottom: var(--space-2);
}

.product-variant-name {
  color: var(--text-secondary);
  font-weight: var(--font-weight-normal);
}

.product-variant-options {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.product-variant-option-group {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  background: var(--bg-surface, var(--surface-secondary));
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.product-variant-option-group:hover {
  border-color: var(--accent);
}

.product-variant-option-group.selected {
  border-color: var(--accent);
  background: var(--accent-bg, rgba(37, 99, 235, 0.05));
}

/* Selected variant info */
.product-variant-selected-info {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-3);
  background: var(--bg-surface, var(--surface-secondary));
  border-radius: var(--radius-md);
  margin-top: var(--space-2);
}

.product-variant-price {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  color: var(--text-primary);
}

.product-variant-sku {
  font-size: var(--font-size-sm);
  color: var(--text-muted);
  font-family: var(--font-mono, monospace);
}

.product-variant-stock {
  font-size: var(--font-size-sm);
  color: var(--success, #16a34a);
}

.product-variant-stock--low {
  color: var(--warning, #d97706);
}

.product-variant-stock--out {
  color: var(--error, #dc2626);
}

/* =================================================================
   ADD TO CART
   ================================================================= */

.product-add-to-cart {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
}

/* Quantity selector: pill-shaped with border */
.add-to-cart-quantity {
  display: flex;
  align-items: center;
  gap: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-full, 9999px);
  overflow: hidden;
  background: var(--bg-surface);
}

.add-to-cart-quantity-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: transparent;
  border: none;
  color: var(--text-secondary);
  cursor: pointer;
  transition: color var(--transition-fast), background var(--transition-fast);
}

.add-to-cart-quantity-btn:hover:not(:disabled) {
  color: var(--text-primary);
  background: var(--bg-elevated);
}

.add-to-cart-quantity-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.add-to-cart-quantity-value {
  min-width: 32px;
  text-align: center;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
  user-select: none;
}

/* Add-to-cart button stretches to fill remaining space */
.add-to-cart-btn {
  flex: 1;
}

/* =================================================================
   PRODUCT DESCRIPTION
   ================================================================= */

.product-description {
  padding-top: var(--space-6);
  border-top: 1px solid var(--border-subtle, var(--border));
}

.product-description-title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
  margin-bottom: var(--space-3);
}

.product-description-content {
  color: var(--text-secondary);
  font-size: var(--font-size-base);
  line-height: var(--line-height-relaxed);
}

.product-description-content p {
  margin: 0 0 var(--space-3);
}

.product-description-content p:last-child {
  margin-bottom: 0;
}

/* =================================================================
   RELATED PRODUCTS (future use)
   ================================================================= */

.product-related {
  margin-top: var(--space-12);
  padding-top: var(--space-8);
  border-top: 1px solid var(--border-subtle, var(--border));
}

.product-related-title {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  color: var(--text-primary);
  margin-bottom: var(--space-6);
}

/* =================================================================
   RESPONSIVE
   ================================================================= */

@media (max-width: 1024px) {
  .product-detail {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }

  .product-detail-gallery {
    position: static;
  }
}

@media (max-width: 768px) {
  .product-page {
    padding: var(--space-4) var(--space-4);
  }

  .product-title {
    font-size: var(--font-size-xl);
  }

  .product-price-current,
  .product-price-sale {
    font-size: var(--font-size-xl);
  }

  .product-gallery-thumbnails {
    gap: var(--space-2);
  }

  .product-gallery-thumb {
    width: 56px;
    height: 56px;
  }

  /* Hide breadcrumb on mobile */
  .product-detail-breadcrumb {
    display: none;
  }

  .breadcrumb-list {
    flex-wrap: wrap;
  }

  .product-related {
    margin-top: var(--space-8);
  }
}

@media (max-width: 480px) {
  .product-page {
    padding: var(--space-3) var(--space-3);
  }

  .breadcrumb {
    margin-bottom: var(--space-4);
  }

  .product-gallery-nav {
    display: none;
  }
}

/* product-grid.css */
/**
 * WEBSHOP CONTEXT: Product Grid & Cards
 * 
 * Grid layout and product cards for listings.
 * Classes match storefront ProductCard.tsx component.
 */

/* =================================================================
   PRODUCT GRID
   ================================================================= */

.product-grid {
  display: grid;
  gap: var(--space-6);
}

.product-grid--cols-2 { grid-template-columns: repeat(2, 1fr); }
.product-grid--cols-3 { grid-template-columns: repeat(3, 1fr); }
.product-grid--cols-4 { grid-template-columns: repeat(4, 1fr); }
.product-grid--cols-5 { grid-template-columns: repeat(5, 1fr); }

/* =================================================================
   PRODUCT CARD
   ================================================================= */

.product-card {
  display: flex;
  flex-direction: column;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: all var(--transition-fast);
}

.product-card:hover {
  border-color: var(--border-hover, var(--border));
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.product-card--out-of-stock {
  opacity: 0.7;
}

.product-card-link {
  display: flex;
  flex-direction: column;
  flex: 1;
  text-decoration: none;
  color: inherit;
}

/* Product Image */
.product-card-image {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  background: var(--bg-elevated);
}

.product-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-normal);
}

.product-card:hover .product-image {
  transform: scale(1.05);
}

/* Placeholder for missing images */
.product-image-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background: var(--bg-elevated);
}

.product-image-placeholder-icon {
  width: 48px;
  height: 48px;
  color: var(--text-muted);
}

/* Badges */
.product-badges {
  position: absolute;
  top: var(--space-3);
  left: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.product-badge {
  padding: var(--space-1) var(--space-2);
  font-size: 11px;
  font-weight: var(--font-semibold);
  border-radius: var(--radius-sm);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.product-badge--sale {
  background: var(--status-error);
  color: white;
}

.product-badge--new {
  background: var(--accent);
  color: white;
}

.product-badge--out-of-stock {
  background: var(--bg-elevated);
  color: var(--text-secondary);
  border: 1px solid var(--border);
}

/* Product Body */
.product-card-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-4);
}

.product-brand {
  font-size: var(--text-xs);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.product-name {
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--text-primary);
  line-height: 1.4;
  
  /* Truncate to 2 lines */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Price */
.product-price {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  margin-top: var(--space-1);
}

.product-price-current {
  font-size: var(--text-base);
  font-weight: var(--font-bold);
  color: var(--text-primary);
}

.product-price-sale {
  font-size: var(--text-base);
  font-weight: var(--font-bold);
  color: var(--status-error);
}

.product-price-original {
  font-size: var(--text-sm);
  color: var(--text-muted);
  text-decoration: line-through;
}

.product-variants-count {
  font-size: var(--text-xs);
  color: var(--text-muted);
  margin-top: var(--space-1);
}

/* Quick Add Actions */
.product-card-actions {
  position: absolute;
  bottom: var(--space-3);
  right: var(--space-3);
  opacity: 0;
  transform: translateY(8px);
  transition: all var(--transition-fast);
}

.product-card:hover .product-card-actions {
  opacity: 1;
  transform: translateY(0);
}

.product-quick-add-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: var(--accent);
  border: none;
  border-radius: var(--radius-full);
  color: white;
  cursor: pointer;
  transition: all var(--transition-fast);
  box-shadow: var(--shadow-md);
}

.product-quick-add-btn:hover {
  transform: scale(1.1);
}

.product-quick-add-icon {
  width: 20px;
  height: 20px;
  pointer-events: none;
}

/* =================================================================
   GRID HEADER (filters/sorting)
   ================================================================= */

.product-grid-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
  flex-wrap: wrap;
}

.product-grid-count {
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

.product-grid-sort {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.product-grid-sort-label {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  white-space: nowrap;
}

/* =================================================================
   RESPONSIVE
   ================================================================= */

@media (max-width: 1200px) {
  .product-grid--cols-4,
  .product-grid--cols-5 {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 768px) {
  .product-grid--cols-3,
  .product-grid--cols-4,
  .product-grid--cols-5 {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-4);
  }
  
  .product-card-body {
    padding: var(--space-3);
  }
  
  .product-price-current,
  .product-price-sale {
    font-size: var(--text-sm);
  }
}

@media (max-width: 480px) {
  .product-grid {
    gap: var(--space-3);
  }
  
  .product-card-actions {
    opacity: 1;
    transform: none;
  }
  
  .product-name {
    font-size: var(--text-xs);
  }
}

/* product-list.css */
/**
 * WEBSHOP CONTEXT: Product List Page
 * 
 * Page-level layout for product listings.
 * Includes page header, filters bar, results count, load more, empty state.
 * Classes match storefront ProductList.tsx and ProductGrid.tsx.
 *
 * RELATED: product-grid.css (grid layout & card styling)
 */

/* =================================================================
   PAGE CONTAINER
   ================================================================= */

.product-list-container {
  max-width: var(--webshop-content-max);
  margin: 0 auto;
  padding: var(--space-8) var(--webshop-content-padding);
  min-height: 60vh;
}

/* =================================================================
   PAGE HEADER — two-column: title left, filter + count right
   ================================================================= */

.product-list-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-6);
  margin-bottom: var(--space-8);
  padding-bottom: var(--space-6);
  border-bottom: 1px solid var(--border);
}

.product-list-header-left {
  flex: 1;
  min-width: 0;
}

.product-list-header-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-2);
  flex-shrink: 0;
}

.product-list-title {
  font-size: clamp(1.75rem, 4vw, 2.25rem);
  font-weight: var(--font-bold);
  color: var(--text-primary);
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin: 0 0 var(--space-2);
}

.product-list-subtitle {
  font-size: var(--text-base);
  color: var(--text-secondary);
  line-height: 1.5;
  margin: 0;
  max-width: 600px;
}

/* =================================================================
   FILTERS (inside header-right)
   ================================================================= */

/* Sort dropdown wrapper */
.product-filters-sort {
  flex-shrink: 0;
  min-width: 200px;
}

.product-filters-sort .form-select {
  background-color: var(--bg-surface);
}

/* =================================================================
   RESULTS COUNT (inside header-right)
   ================================================================= */

.product-results-count {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  margin: 0;
  padding: 0;
}

/* =================================================================
   LOAD MORE
   ================================================================= */

.product-load-more {
  display: flex;
  justify-content: center;
  padding: var(--space-10) 0 var(--space-4);
}

.product-load-more .btn {
  min-width: 220px;
}

/* =================================================================
   EMPTY STATE
   ================================================================= */

.product-grid-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--space-12, 48px) var(--space-4);
  background: var(--bg-surface);
  border: 2px dashed var(--border);
  border-radius: var(--radius-lg);
  min-height: 320px;
}

.product-grid-empty-icon {
  color: var(--text-muted);
  margin-bottom: var(--space-4);
  opacity: 0.4;
}

.product-grid-empty-text {
  font-size: var(--text-base);
  color: var(--text-secondary);
  margin: 0;
  max-width: 320px;
  line-height: 1.5;
}

/* =================================================================
   SKELETON LOADING ENHANCEMENTS
   ================================================================= */

.product-card--loading {
  pointer-events: none;
}

.product-image-skeleton {
  border-radius: 0;
}

/* =================================================================
   RESPONSIVE
   ================================================================= */


@media (max-width: 768px) {
  .product-list-container {
    padding-top: var(--space-6);
    padding-bottom: var(--space-6);
  }

  .product-list-header {
    flex-direction: column;
    gap: var(--space-4);
    margin-bottom: var(--space-6);
    padding-bottom: var(--space-4);
  }

  .product-list-header-right {
    align-items: flex-start;
    width: 100%;
  }

  .product-filters-sort {
    min-width: 0;
    width: 100%;
  }

  .product-load-more {
    padding: var(--space-8) 0 var(--space-4);
  }

  .product-grid-empty {
    min-height: 240px;
    padding: var(--space-8) var(--space-4);
  }
}

@media (max-width: 480px) {
  .product-list-container {
    padding-top: var(--space-4);
    padding-bottom: var(--space-4);
  }

  .product-list-header {
    margin-bottom: var(--space-4);
    padding-bottom: var(--space-3);
  }

  .product-list-title {
    font-size: 1.5rem;
  }
}

/* sections.css */
/**
 * WEBSHOP CONTEXT: Sections
 * 
 * Generic section layouts for content blocks.
 * Consistent spacing, headers, and responsive behavior.
 */

/* =================================================================
   SECTION BASE
   ================================================================= */

.section {
  padding: var(--webshop-section-padding) 0;
}

.section + .section {
  padding-top: 0;
}

/* Section variants */
.section-white {
  background: var(--bg-surface);
}

.section-muted {
  background: var(--bg-deep);
}

.section-accent {
  background: linear-gradient(135deg, var(--accent-dim) 0%, var(--bg-surface) 100%);
}

/* =================================================================
   SECTION HEADER
   ================================================================= */

.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-6);
  gap: var(--space-4);
}

.section-title {
  font-size: var(--text-2xl);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  margin: 0;
  letter-spacing: -0.01em;
}

.section-subtitle {
  font-size: var(--text-base);
  color: var(--text-secondary);
  margin: var(--space-2) 0 0;
  max-width: 600px;
}

.section-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--tenant-accent, var(--accent));
  text-decoration: none;
  transition: gap var(--transition-fast);
  white-space: nowrap;
}

.section-link:hover {
  gap: var(--space-2);
}

.section-link svg {
  width: 16px;
  height: 16px;
}

/* =================================================================
   CONTENT GRIDS
   ================================================================= */

.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-6);
}

.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
}

.grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-6);
}

/* Auto-fit grids */
.grid-auto-sm {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-4);
}

.grid-auto-md {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-6);
}

.grid-auto-lg {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--space-6);
}

/* =================================================================
   GENERIC CARDS
   ================================================================= */

.card {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--webshop-radius-card);
  padding: var(--space-6);
  transition: all var(--transition-fast);
}

.card:hover {
  border-color: var(--border-hover, var(--accent-dim));
  box-shadow: var(--shadow-md);
}

.card-clickable {
  cursor: pointer;
}

.card-clickable:hover {
  transform: translateY(-2px);
}

/* =================================================================
   EMPTY STATES
   ================================================================= */

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--space-12, 48px) var(--space-4);
  min-height: 300px;
}

.empty-state__icon {
  width: 64px;
  height: 64px;
  color: var(--text-muted);
  margin-bottom: var(--space-4);
}

.empty-state__title {
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  margin: 0 0 var(--space-2);
}

.empty-state__description {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  max-width: 320px;
  margin: 0 0 var(--space-6);
}

/* =================================================================
   RESPONSIVE
   ================================================================= */

@media (max-width: 1024px) {
  .grid-4 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .section-header {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .grid-2,
  .grid-3,
  .grid-4 {
    grid-template-columns: 1fr;
  }
}

/* social-landing.css */
/**
 * Social Landing Page — Kale productpagina voor social sellers
 *
 * BUSINESS CONTEXT:
 * Social sellers delen product links via WhatsApp/Instagram.
 * De klant ziet een kale pagina (geen header/footer/nav) met:
 * - Product foto (groot, mobile-first)
 * - Titel + prijs
 * - Beschrijving
 * - "Bestellen" knop
 * - Inline checkout formulier (naam + telefoon)
 * - "Verkocht door [seller] via Pagayo" subtiele footer
 *
 * DESIGN: 100% Revolutionary theme (dark + gold accent).
 * Alle kleuren via design tokens uit revolutionary.css.
 *
 * Plan: werkvoorbereiding-social-seller-dashboard.md, Sectie E + H
 */

/* === BODY OVERRIDE ===
 * Social landing pages zijn minimal layout (geen header/footer).
 * Body moet de revolutionary dark achtergrond krijgen.
 */
body[data-page-type="social-product"] {
  background: var(--bg-deep, #0a0a0f);
  color: var(--text-primary, #f0f0f5);
  margin: 0;
  font-family: var(--font-sans, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* === CONTAINER === */
.social-landing {
  max-width: 480px;
  margin: 0 auto;
  padding: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--bg-deep, #0a0a0f);
}

/* === PRODUCT IMAGE === */
.social-landing-image {
  width: calc(100% - 2.5rem);
  margin: 1.25rem auto 0;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
  background: var(--bg-surface, #0e0e14);
  border-radius: var(--radius-lg, 12px);
}

/* === IMAGE PLACEHOLDER (when no image) === */
.social-landing-image-placeholder {
  width: calc(100% - 2.5rem);
  margin: 1.25rem auto 0;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-surface, #0e0e14);
  border-radius: var(--radius-lg, 12px);
  color: var(--text-muted, rgb(240 240 245 / 0.45));
}

/* === PRODUCT CONTENT === */
.social-landing-content {
  padding: 1.5rem 1.25rem;
  flex: 1;
}

.social-landing-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text-primary, #f0f0f5);
  margin: 0 0 0.5rem;
  line-height: 1.3;
}

.social-landing-price {
  font-size: 1.375rem;
  font-weight: 700;
  color: var(--accent, #f5a623);
  margin: 0 0 1rem;
}

.social-landing-description {
  font-size: 0.9375rem;
  color: var(--text-secondary, rgb(240 240 245 / 0.7));
  line-height: 1.6;
  margin: 0 0 1.5rem;
}

/* === ORDER BUTTON === */
.social-landing-order-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  height: var(--control-height-lg, 48px);
  font-size: var(--control-font-lg, 16px);
  font-weight: 600;
  color: var(--bg-deep, #0a0a0f);
  background: var(--accent, #f5a623);
  border: none;
  border-radius: var(--radius-md, 8px);
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
}

.social-landing-order-btn:hover {
  background: var(--accent-light, #ffbe3f);
}

.social-landing-order-btn:active {
  transform: scale(0.98);
}

.social-landing-order-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* === POWERED BY PAGAYO BADGE === */
.social-landing-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  padding: 0.875rem 1.5rem;
  margin: 2rem auto 1rem;
  width: fit-content;
  background: linear-gradient(
    135deg,
    rgb(245 166 35 / 0.08) 0%,
    rgb(245 166 35 / 0.03) 100%
  );
  border: 1px solid rgb(245 166 35 / 0.18);
  border-radius: 999px;
  text-align: center;
}

.social-landing-badge-tenant {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-primary, #f0f0f5);
  letter-spacing: 0.02em;
  line-height: 1;
}

.social-landing-badge-powered {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.625rem;
  font-weight: 600;
  color: var(--accent, #f5a623);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
}

.social-landing-badge-powered svg {
  width: 10px;
  height: 10px;
  flex-shrink: 0;
}

/* === CHECKOUT VIEW === */
.social-landing-checkout {
  padding: 1.5rem 1.25rem;
  flex: 1;
}

/* Mini product summary in checkout */
.social-landing-checkout-summary {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem;
  background: var(--bg-surface, #0e0e14);
  border: 1px solid var(--border, rgb(240 240 245 / 0.06));
  border-radius: var(--radius-md, 8px);
  margin-bottom: 1.5rem;
}

.social-landing-checkout-thumb {
  width: 56px;
  height: 56px;
  object-fit: cover;
  border-radius: var(--radius-sm, 4px);
  flex-shrink: 0;
}

.social-landing-checkout-info {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 0;
}

.social-landing-checkout-name {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-primary, #f0f0f5);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.social-landing-checkout-price {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--accent, #f5a623);
}

.social-landing-checkout-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text-primary, #f0f0f5);
  margin: 0 0 1rem;
}

/* === FORM === */
.social-landing-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.social-landing-field {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.social-landing-label {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--text-secondary, rgb(240 240 245 / 0.7));
}

.social-landing-input,
.social-landing-textarea {
  width: 100%;
  height: var(--control-height-md, 40px);
  padding: 0 0.75rem;
  font-size: var(--control-font-md, 14px);
  color: var(--text-primary, #f0f0f5);
  background: var(--bg-surface, #0e0e14);
  border: 1px solid var(--border-light, rgb(240 240 245 / 0.09));
  border-radius: var(--radius-md, 8px);
  outline: none;
  transition: border-color 0.15s;
  box-sizing: border-box;
}

.social-landing-textarea {
  height: auto;
  padding: 0.75rem;
  resize: vertical;
  min-height: 60px;
}

.social-landing-input:focus,
.social-landing-textarea:focus {
  border-color: var(--accent, #f5a623);
  box-shadow: 0 0 0 3px var(--accent-glow, rgb(245 166 35 / 0.15));
}

.social-landing-input::placeholder,
.social-landing-textarea::placeholder {
  color: var(--text-muted, rgb(240 240 245 / 0.45));
}

/* === PAYMENT INFO === */
.social-landing-payment-info {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem;
  background: var(--bg-elevated, #111118);
  border-radius: var(--radius-md, 8px);
  font-size: 0.8125rem;
  color: var(--text-secondary, rgb(240 240 245 / 0.7));
}

/* === ERROR === */
.social-landing-error {
  padding: 0.75rem;
  background: var(--error-dim, rgb(248 113 113 / 0.15));
  color: var(--error, #f87171);
  border-radius: var(--radius-md, 8px);
  font-size: 0.8125rem;
}

/* === SUBMIT BUTTON === */
.social-landing-submit-btn {
  width: 100%;
  height: var(--control-height-lg, 48px);
  font-size: var(--control-font-lg, 16px);
  font-weight: 600;
  color: var(--bg-deep, #0a0a0f);
  background: var(--success, #34d399);
  border: none;
  border-radius: var(--radius-md, 8px);
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
  margin-top: 0.5rem;
}

.social-landing-submit-btn:hover {
  background: var(--success-light, #49e3a7);
}

.social-landing-submit-btn:active {
  transform: scale(0.98);
}

.social-landing-submit-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* === BACK BUTTON === */
.social-landing-back-btn {
  width: 100%;
  height: var(--control-height-md, 40px);
  font-size: var(--control-font-md, 14px);
  font-weight: 500;
  color: var(--text-secondary, rgb(240 240 245 / 0.7));
  background: transparent;
  border: 1px solid var(--border-light, rgb(240 240 245 / 0.09));
  border-radius: var(--radius-md, 8px);
  cursor: pointer;
  transition: background 0.15s;
}

.social-landing-back-btn:hover {
  background: var(--bg-hover, #1a1a23);
}

/* === CONFIRMATION VIEW === */
.social-landing-confirmation {
  padding: 2rem 1.25rem;
  text-align: center;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}

.social-landing-success-icon {
  color: var(--success, #34d399);
  margin-bottom: 0.5rem;
}

.social-landing-confirmation-text {
  font-size: 0.9375rem;
  color: var(--text-secondary, rgb(240 240 245 / 0.7));
  line-height: 1.5;
  margin: 0;
}

.social-landing-order-number {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 1rem;
  background: var(--bg-surface, #0e0e14);
  border: 1px solid var(--border-light, rgb(240 240 245 / 0.09));
  border-radius: var(--radius-md, 8px);
  width: 100%;
  max-width: 300px;
}

.social-landing-order-label {
  font-size: 0.75rem;
  color: var(--text-muted, rgb(240 240 245 / 0.45));
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.social-landing-order-value {
  font-size: 1rem;
  font-weight: 600;
  color: var(--accent, #f5a623);
  font-family: monospace;
}

.social-landing-confirmation-note {
  font-size: 0.8125rem;
  color: var(--text-muted, rgb(240 240 245 / 0.45));
  margin: 0;
}

/* =================================================================
   SOCIAL SHOP PAGE (/s/shop)
   Grid van alle actieve producten van een seller.
   Consistent met social-landing styling (dark, minimal).
   ================================================================= */

.social-shop {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100dvh;
  padding: 2rem 1rem;
  background: var(--bg-deep, #0a0a10);
  color: var(--text-primary, #f0f0f5);
}

.social-shop__header {
  text-align: center;
  margin-bottom: 1.5rem;
}

.social-shop__title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text-primary, #f0f0f5);
  margin: 0 0 0.25rem;
}

.social-shop__count {
  font-size: 0.875rem;
  color: var(--text-muted, rgb(240 240 245 / 0.45));
  margin: 0;
}

.social-shop__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
  width: 100%;
  max-width: 500px;
  margin-bottom: 2rem;
}

.social-shop-card {
  display: flex;
  flex-direction: column;
  background: var(--bg-surface, #0e0e14);
  border: 1px solid var(--border-light, rgb(240 240 245 / 0.09));
  border-radius: var(--radius-lg, 12px);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}

.social-shop-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgb(0 0 0 / 0.3);
}

.social-shop-card__img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  background: var(--bg-deep, #0a0a10);
}

.social-shop-card__img--empty {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-surface, #0e0e14);
}

.social-shop-card__info {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  padding: 0.5rem 0.625rem;
}

.social-shop-card__title {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--text-primary, #f0f0f5);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.social-shop-card__price {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--accent, #f5a623);
}

.social-shop-empty {
  text-align: center;
  color: var(--text-muted, rgb(240 240 245 / 0.45));
  font-size: 0.875rem;
  padding: 2rem 0;
  grid-column: 1 / -1;
}

@media (min-width: 500px) {
  .social-shop__grid {
    grid-template-columns: repeat(3, 1fr);
    max-width: 640px;
  }
}

/* subscription-showcase.css */
/**
 * WEBSHOP CONTEXT: Subscription Showcase
 * 
 * Comparison cards for subscription/membership plans.
 * Used on pool homepage to display pricing tiers.
 */

/* =================================================================
   SUBSCRIPTION SHOWCASE GRID
   ================================================================= */

.sub-showcase {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6, 24px);
  align-items: start;
}

/* =================================================================
   SUBSCRIPTION CARD
   ================================================================= */

.sub-card {
  display: flex;
  flex-direction: column;
  background: var(--bg-surface, #ffffff);
  border: 1px solid var(--border, #e2e8f0);
  border-radius: var(--radius-lg, 12px);
  padding: var(--space-6, 24px);
  position: relative;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.sub-card:hover {
  border-color: var(--accent, #0891b2);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

/* Popular/featured variant */
.sub-card--featured {
  border-color: var(--accent, #0891b2);
  box-shadow: 0 4px 24px rgba(8, 145, 178, 0.15);
  transform: scale(1.03);
}

/* =================================================================
   POPULAR BADGE
   ================================================================= */

.sub-card__badge {
  position: absolute;
  top: calc(-1 * var(--space-3, 12px));
  left: 50%;
  transform: translateX(-50%);
  background: var(--accent, #0891b2);
  color: #ffffff;
  font-size: var(--text-xs, 12px);
  font-weight: var(--font-semibold, 600);
  padding: var(--space-1, 4px) var(--space-4, 16px);
  border-radius: 100px;
  white-space: nowrap;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* =================================================================
   CARD HEADER
   ================================================================= */

.sub-card__name {
  font-size: var(--text-lg, 18px);
  font-weight: var(--font-semibold, 600);
  color: var(--text-primary);
  margin: 0 0 var(--space-2, 8px);
}

.sub-card__price {
  display: flex;
  align-items: baseline;
  gap: var(--space-1, 4px);
  margin-bottom: var(--space-4, 16px);
}

.sub-card__amount {
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: var(--font-bold, 700);
  color: var(--text-primary);
  line-height: 1;
}

.sub-card__period {
  font-size: var(--text-sm, 14px);
  color: var(--text-secondary);
}

.sub-card__description {
  font-size: var(--text-sm, 14px);
  color: var(--text-secondary);
  margin-bottom: var(--space-4, 16px);
  line-height: 1.5;
}

/* =================================================================
   FEATURES LIST
   ================================================================= */

.sub-card__features {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-6, 24px);
  display: flex;
  flex-direction: column;
  gap: var(--space-2, 8px);
  flex: 1;
}

.sub-card__feature {
  display: flex;
  align-items: center;
  gap: var(--space-2, 8px);
  font-size: var(--text-sm, 14px);
  color: var(--text-primary);
}

.sub-card__feature-icon {
  flex-shrink: 0;
  color: var(--success, #059669);
}

/* =================================================================
   CTA BUTTON
   ================================================================= */

.sub-card__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: var(--control-height-md, 40px);
  padding: 0 var(--control-padding-lg, 16px);
  border: 1px solid var(--accent, #0891b2);
  border-radius: var(--radius-md, 8px);
  font-size: var(--control-font-md, 14px);
  font-weight: var(--font-semibold, 600);
  text-decoration: none;
  cursor: pointer;
  transition: all 0.2s;
  background: transparent;
  color: var(--accent, #0891b2);
}

.sub-card__cta:hover {
  background: var(--accent, #0891b2);
  color: #ffffff;
}

.sub-card--featured .sub-card__cta {
  background: var(--accent, #0891b2);
  color: #ffffff;
}

.sub-card--featured .sub-card__cta:hover {
  background: var(--accent-light, #0e7490);
}

/* =================================================================
   RESPONSIVE
   ================================================================= */

@media (max-width: 1024px) {
  .sub-showcase {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-4, 16px);
  }

  .sub-card--featured {
    transform: none;
  }
}

@media (max-width: 768px) {
  .sub-showcase {
    grid-template-columns: 1fr;
    max-width: 400px;
    margin: 0 auto;
  }
}

/* subscriptions.css */
/* ============================================
 * WEBSHOP — Customer Subscription Pages
 * ============================================
 * Customer-facing subscription list and detail views.
 * Uses webshop.css context (not admin).
 */

/* ---- List Page ---- */

.my-subscriptions {
  padding: var(--space-6, 1.5rem) var(--space-4, 1rem);
  max-width: 800px;
  margin: 0 auto;
}

.my-subscriptions__title {
  font-size: var(--page-title-size, 24px);
  font-weight: 700;
  margin-bottom: var(--space-6, 1.5rem);
  color: var(--text-primary);
}

.my-subscriptions__loading,
.my-subscriptions__error,
.my-subscriptions__empty {
  text-align: center;
  padding: var(--space-8, 2rem) 0;
  color: var(--text-secondary);
}

.my-subscriptions__empty svg {
  color: var(--text-tertiary);
  margin-bottom: var(--space-4, 1rem);
  opacity: 0.5;
}

.my-subscriptions__empty .btn {
  margin-top: var(--space-4, 1rem);
}

.my-subscriptions__error {
  color: var(--danger, #dc2626);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2, 0.5rem);
}

.my-subscriptions__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-4, 1rem);
}

.my-subscriptions__nav {
  margin-top: var(--space-6, 1.5rem);
  padding-top: var(--space-4, 1rem);
  border-top: 1px solid var(--border);
}

.my-subscriptions__back {
  color: var(--accent);
  text-decoration: none;
  font-size: 14px;
}

.my-subscriptions__back:hover {
  text-decoration: underline;
}

/* ---- Subscription Card ---- */

.my-sub-card {
  display: flex;
  flex-direction: column;
  padding: var(--space-4, 1rem);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg, 12px);
  background: var(--bg-surface);
  text-decoration: none;
  color: inherit;
  position: relative;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.my-sub-card:hover {
  border-color: var(--accent);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.my-sub-card--expiring {
  border-color: var(--warning, #f59e0b);
}

.my-sub-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-2, 0.5rem);
}

.my-sub-card__title {
  font-size: 16px;
  font-weight: 600;
  margin: 0;
  color: var(--text-primary);
}

.my-sub-card__price {
  font-size: 14px;
  color: var(--text-secondary);
  margin-bottom: var(--space-3, 0.75rem);
}

.my-sub-card__warning {
  display: flex;
  align-items: center;
  gap: var(--space-2, 0.5rem);
  font-size: 13px;
  color: var(--warning, #f59e0b);
  margin-bottom: var(--space-3, 0.75rem);
}

.my-sub-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3, 0.75rem);
}

.my-sub-card__meta-item {
  display: flex;
  align-items: center;
  gap: var(--space-1, 0.25rem);
  font-size: 13px;
  color: var(--text-secondary);
}

.my-sub-card__arrow {
  position: absolute;
  right: var(--space-4, 1rem);
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-tertiary);
}

/* ---- Status Badge ---- */

.my-sub-status {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: var(--radius-full, 999px);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.my-sub-status--active,
.my-sub-status--trialing {
  background: rgba(16, 185, 129, 0.1);
  color: #059669;
}

.my-sub-status--paused {
  background: rgba(245, 158, 11, 0.1);
  color: #d97706;
}

.my-sub-status--past_due {
  background: rgba(239, 68, 68, 0.1);
  color: #dc2626;
}

.my-sub-status--canceled,
.my-sub-status--expired {
  background: rgba(107, 114, 128, 0.1);
  color: #6b7280;
}

/* ---- Detail Page ---- */

.my-sub-detail {
  display: flex;
  flex-direction: column;
  gap: var(--space-4, 1rem);
}

.my-sub-detail__loading,
.my-sub-detail__error {
  text-align: center;
  padding: var(--space-8, 2rem) 0;
  color: var(--text-secondary);
}

.my-sub-detail__error {
  color: var(--danger, #dc2626);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2, 0.5rem);
}

.my-sub-detail__header {
  margin-bottom: var(--space-6, 1.5rem);
}

.my-sub-detail__back {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1, 0.25rem);
  color: var(--accent);
  text-decoration: none;
  font-size: 14px;
  margin-bottom: var(--space-3, 0.75rem);
}

.my-sub-detail__back:hover {
  text-decoration: underline;
}

.my-sub-detail__title {
  font-size: var(--page-title-size, 24px);
  font-weight: 700;
  margin: var(--space-2, 0.5rem) 0;
  color: var(--text-primary);
}

.my-sub-detail__photo-warning,
.my-sub-detail__cancel-notice {
  display: flex;
  align-items: center;
  gap: var(--space-2, 0.5rem);
  padding: var(--space-3, 0.75rem) var(--space-4, 1rem);
  border-radius: var(--radius-md, 8px);
  font-size: 14px;
  margin-bottom: var(--space-4, 1rem);
}

.my-sub-detail__photo-warning {
  background: rgba(245, 158, 11, 0.1);
  color: #d97706;
  border: 1px solid rgba(245, 158, 11, 0.2);
}

.my-sub-detail__cancel-notice {
  background: rgba(239, 68, 68, 0.08);
  color: #dc2626;
  border: 1px solid rgba(239, 68, 68, 0.15);
}

/* ---- Detail Sections ---- */

.my-sub-detail__section {
  margin-bottom: var(--space-6, 1.5rem);
  padding: var(--space-4, 1rem);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg, 12px);
  background: var(--bg-surface);
}

.my-sub-detail__section-title {
  display: flex;
  align-items: center;
  gap: var(--space-2, 0.5rem);
  font-size: var(--section-title-size, 18px);
  font-weight: 600;
  margin-bottom: var(--space-4, 1rem);
  color: var(--text-primary);
}

/* Overview */

.my-sub-detail__overview {
  display: flex;
  flex-direction: column;
  gap: var(--space-2, 0.5rem);
}

.my-sub-detail__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-2, 0.5rem) 0;
  border-bottom: 1px solid var(--border);
}

.my-sub-detail__row:last-child {
  border-bottom: none;
}

.my-sub-detail__label {
  font-size: 14px;
  color: var(--text-secondary);
}

.my-sub-detail__value {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-primary);
}

.my-sub-detail__member-stats {
  display: grid;
  gap: var(--space-3, 0.75rem);
  margin-bottom: var(--space-4, 1rem);
}

.my-sub-detail__stat {
  font-size: 13px;
  color: var(--text-secondary);
}

.my-sub-detail__progress {
  margin-top: var(--space-2, 0.5rem);
}

.my-sub-detail__progress-bar {
  width: 100%;
  height: 8px;
}

.my-sub-detail__photo-banner {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2, 0.5rem);
  margin-bottom: var(--space-4, 1rem);
  padding: var(--space-2, 0.5rem) var(--space-3, 0.75rem);
  border-radius: var(--radius-md, 8px);
  background: rgba(245, 158, 11, 0.1);
  color: #b45309;
  font-size: 13px;
}

.my-sub-detail__pass-code {
  font-family: monospace;
  font-size: 15px;
  letter-spacing: 0.05em;
  color: var(--accent);
}

/* Members */

.my-sub-detail__members {
  display: flex;
  flex-direction: column;
  gap: var(--space-3, 0.75rem);
}

.my-sub-detail__max-reached {
  font-size: 13px;
  color: var(--text-secondary);
  font-style: italic;
  margin-top: var(--space-3, 0.75rem);
}

/* ---- Member Card ---- */

.my-sub-member {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4, 1rem);
  padding: var(--space-4, 1rem);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg, 12px);
  background: linear-gradient(180deg, var(--bg-surface) 0%, var(--bg-page, #fafafa) 100%);
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.04);
}

.my-sub-member--no-photo {
  border-color: var(--warning, #f59e0b);
  background: rgba(245, 158, 11, 0.03);
}

.my-sub-member--owner {
  border: 2px solid var(--success, #22c55e);
}

.my-sub-member--owner.my-sub-member--no-photo {
  border-color: var(--success, #22c55e);
  background: rgba(245, 158, 11, 0.03);
}

.my-sub-member__photo {
  width: 64px;
  height: 64px;
  flex-shrink: 0;
  border-radius: var(--radius-md, 8px);
  overflow: hidden;
  background: var(--bg-surface);
  border: 1px solid var(--border);
}

.my-sub-member__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.my-sub-member__file-input {
  display: none;
}

.my-sub-member__photo-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-tertiary);
}

.my-sub-member__info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3, 0.75rem);
}

.my-sub-member__header {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3, 0.75rem);
  align-items: flex-start;
}

.my-sub-member__badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--space-2, 0.5rem);
}

.my-sub-member__name {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
}

.my-sub-member__role {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
  padding: 1px 6px;
  border-radius: var(--radius-full, 999px);
  background: rgba(79, 70, 229, 0.1);
  color: var(--accent);
}

.my-sub-member__badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: var(--radius-full, 999px);
  font-size: 11px;
  font-weight: 600;
}

.my-sub-member__badge--inactive {
  background: rgba(107, 114, 128, 0.12);
  color: #4b5563;
}

.my-sub-member__badge--adult {
  background: rgba(14, 165, 233, 0.12);
  color: #0369a1;
}

.my-sub-member__badge--child {
  background: rgba(16, 185, 129, 0.12);
  color: #047857;
}

.my-sub-member__meta {
  display: grid;
  gap: var(--space-2, 0.5rem);
}

.my-sub-member__code {
  font-size: 13px;
  color: var(--text-primary);
  font-family: monospace;
  letter-spacing: 0.04em;
  font-weight: 600;
}

.my-sub-member__detail-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2, 0.5rem);
  align-items: baseline;
}

.my-sub-member__detail-label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-secondary);
}

.my-sub-member__detail-value {
  font-size: 14px;
  color: var(--text-primary);
}

.my-sub-member__status-stack {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2, 0.5rem);
}

.my-sub-member__photo-status {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  padding: 4px 10px;
  border-radius: var(--radius-full, 999px);
}

.my-sub-member__photo-status--ok {
  background: rgba(16, 185, 129, 0.12);
  color: #047857;
}

.my-sub-member__warning {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: var(--warning, #f59e0b);
  padding: 4px 10px;
  border-radius: var(--radius-full, 999px);
  background: rgba(245, 158, 11, 0.12);
}

.my-sub-member__actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-2, 0.5rem);
  flex-shrink: 0;
  min-width: 180px;
}

.my-sub-member__upload-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: var(--control-height-md, 40px);
  font-size: 13px;
  font-weight: 600;
  color: var(--accent);
  cursor: pointer;
  padding: 0 var(--space-3, 0.75rem);
  border: 1px solid rgba(79, 70, 229, 0.18);
  border-radius: var(--radius-md, 8px);
  background: rgba(79, 70, 229, 0.06);
  transition: background 0.15s, border-color 0.15s;
}

.my-sub-member__upload-btn:hover {
  background: rgba(79, 70, 229, 0.12);
  border-color: rgba(79, 70, 229, 0.3);
}

.my-sub-member__action-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: var(--control-height-md, 40px);
  font-size: 13px;
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  font-family: inherit;
  text-align: center;
  padding: 0 var(--space-3, 0.75rem);
  border-radius: var(--radius-md, 8px);
  transition: background 0.15s, border-color 0.15s;
  cursor: pointer;
}

.my-sub-member__action-link:hover {
  background: rgba(79, 70, 229, 0.05);
  border-color: rgba(79, 70, 229, 0.24);
}

.my-sub-member__action-link:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.my-sub-member__deactivate-btn,
.my-sub-member__activate-btn,
.my-sub-member__remove-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: var(--control-height-md, 40px);
  font-size: 13px;
  font-weight: 600;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  cursor: pointer;
  padding: 0 var(--space-3, 0.75rem);
  border-radius: var(--radius-md, 8px);
  transition: background 0.15s, border-color 0.15s;
}

.my-sub-member__deactivate-btn,
.my-sub-member__remove-btn {
  color: var(--danger, #dc2626);
}

.my-sub-member__activate-btn {
  color: #047857;
  border-color: rgba(16, 185, 129, 0.24);
  background: rgba(16, 185, 129, 0.06);
}

.my-sub-member__deactivate-btn:hover,
.my-sub-member__remove-btn:hover {
  background: rgba(239, 68, 68, 0.08);
  border-color: rgba(239, 68, 68, 0.22);
}

.my-sub-member__activate-btn:hover {
  background: rgba(16, 185, 129, 0.12);
  border-color: rgba(16, 185, 129, 0.3);
}

.my-sub-member__remove-btn:disabled,
.my-sub-member__upload-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ---- Add Member Form ---- */

.my-sub-add-member-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1, 0.25rem);
  font-size: 14px;
  color: var(--accent);
  background: none;
  border: 1px dashed var(--accent);
  border-radius: var(--radius-md, 8px);
  padding: var(--space-2, 0.5rem) var(--space-3, 0.75rem);
  cursor: pointer;
  margin-top: var(--space-3, 0.75rem);
  transition: background 0.15s;
}

.my-sub-add-member-btn:hover {
  background: rgba(79, 70, 229, 0.05);
}

.my-sub-add-member-form {
  margin-top: var(--space-3, 0.75rem);
  padding: var(--space-4, 1rem);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg, 12px);
  background: linear-gradient(180deg, var(--bg-surface) 0%, var(--bg-page, #fafafa) 100%);
}

.my-sub-add-member-form__intro {
  margin-bottom: var(--space-3, 0.75rem);
}

.my-sub-add-member-form__title {
  margin: 0 0 var(--space-1, 0.25rem) 0;
  font-size: var(--card-title-size, 16px);
  font-weight: 600;
  color: var(--text-primary);
}

.my-sub-add-member-form__description {
  margin: 0;
  font-size: 13px;
  color: var(--text-secondary);
}

.my-sub-add-member-form__fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3, 0.75rem);
}

.my-sub-add-member-form__date-group {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  gap: var(--space-1, 0.25rem);
}

.my-sub-add-member-form__label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
}

.my-sub-add-member-form__required {
  color: var(--danger, #dc2626);
  margin-left: 2px;
}

.my-sub-add-member-form__date-group .input {
  max-width: 220px;
}

.my-sub-add-member-form__hint {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.4;
}

.my-sub-add-member-form__error {
  font-size: 12px;
  color: var(--danger, #dc2626);
}

.my-sub-add-member-form__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2, 0.5rem);
  margin-top: var(--space-3, 0.75rem);
}

.my-sub-add-member-form__error-banner {
  margin-top: var(--space-3, 0.75rem);
  padding: var(--space-2, 0.5rem) var(--space-3, 0.75rem);
  border: 1px solid rgba(239, 68, 68, 0.16);
  border-radius: var(--radius-md, 8px);
  background: rgba(239, 68, 68, 0.08);
  color: var(--danger, #dc2626);
  font-size: 13px;
}

/* ---- Payments ---- */

.my-sub-detail__payments {
  display: flex;
  flex-direction: column;
  gap: var(--space-1, 0.25rem);
}

.my-sub-detail__payment-row {
  display: grid;
  grid-template-columns: 120px 100px 80px 1fr;
  gap: var(--space-2, 0.5rem);
  align-items: center;
  padding: var(--space-2, 0.5rem) 0;
  border-bottom: 1px solid var(--border);
  font-size: 14px;
}

.my-sub-detail__payment-row:last-child {
  border-bottom: none;
}

.my-sub-detail__payment-date {
  color: var(--text-secondary);
}

.my-sub-detail__payment-amount {
  font-weight: 600;
  color: var(--text-primary);
}

.my-sub-detail__payment-status {
  font-size: 13px;
}

.my-sub-detail__payment-status--paid {
  color: #059669;
}

.my-sub-detail__payment-order {
  color: var(--text-secondary);
  font-family: monospace;
  font-size: 13px;
  text-align: right;
}

/* ---- Actions Section ---- */

.my-sub-detail__actions-section {
  border-color: var(--border);
}

.my-sub-detail__actions {
  display: flex;
  gap: var(--space-3, 0.75rem);
}

.my-sub-detail__actions .btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1, 0.25rem);
}

.btn--danger {
  background: var(--danger, #dc2626);
  color: white;
  border: none;
}

.btn--danger:hover {
  background: #b91c1c;
}

/* ---- Success banner ---- */

.my-sub-detail__success-banner {
  display: flex;
  align-items: center;
  gap: var(--space-2, 0.5rem);
  padding: var(--space-3, 0.75rem) var(--space-4, 1rem);
  background: var(--success-dim, #dcfce7);
  color: var(--success, #16a34a);
  border-radius: var(--radius-md, 8px);
  margin-bottom: var(--space-4, 1rem);
  font-size: var(--text-sm, 0.875rem);
}

/* ---- Extra Slots Purchase ---- */

.my-sub-extra-slots-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2, 0.5rem);
  margin-top: var(--space-3, 0.75rem);
}

.my-sub-extra-slots-btn__price {
  font-size: var(--text-xs, 0.75rem);
  opacity: 0.7;
}

.my-sub-extra-slots {
  margin-top: var(--space-4, 1rem);
  padding: var(--space-5, 1.25rem);
  background: var(--bg-surface, #f9fafb);
  border: 1px solid var(--border, #e5e7eb);
  border-radius: var(--radius-md, 8px);
}

.my-sub-extra-slots__title {
  font-size: var(--card-title-size, 16px);
  font-weight: var(--card-title-weight, 600);
  margin: 0 0 var(--space-2, 0.5rem) 0;
  color: var(--text-primary, #111827);
}

.my-sub-extra-slots__desc {
  font-size: var(--text-sm, 0.875rem);
  color: var(--text-secondary, #6b7280);
  margin: 0 0 var(--space-5, 1.25rem) 0;
  line-height: 1.5;
}

.my-sub-extra-slots__stepper {
  display: flex;
  align-items: center;
  gap: var(--space-3, 0.75rem);
  margin-bottom: var(--space-5, 1.25rem);
  padding-bottom: var(--space-5, 1.25rem);
  border-bottom: 1px solid var(--border, #e5e7eb);
}

.my-sub-extra-slots__label {
  font-size: var(--text-sm, 0.875rem);
  font-weight: 500;
  color: var(--text-primary, #111827);
}

.my-sub-extra-slots__controls {
  display: flex;
  align-items: center;
  gap: var(--space-2, 0.5rem);
}

.my-sub-extra-slots__count {
  font-size: var(--text-md, 1rem);
  font-weight: 600;
  min-width: 2rem;
  text-align: center;
}

.my-sub-extra-slots__error {
  display: flex;
  align-items: center;
  gap: var(--space-2, 0.5rem);
  padding: var(--space-3, 0.75rem);
  background: var(--error-dim, #fef2f2);
  color: var(--error, #dc2626);
  border-radius: var(--radius-sm, 4px);
  font-size: var(--text-sm, 0.875rem);
  margin-bottom: var(--space-4, 1rem);
}

/* Confirm sectie */
.my-sub-extra-slots__confirm {
  display: flex;
  flex-direction: column;
  gap: var(--space-4, 1rem);
}

.my-sub-extra-slots__confirm-title {
  font-size: var(--text-md, 1rem);
  font-weight: 600;
  margin: 0;
  color: var(--text-primary, #111827);
}

.my-sub-extra-slots__confirm-msg {
  font-size: var(--text-sm, 0.875rem);
  color: var(--text-secondary, #6b7280);
  margin: 0;
  line-height: 1.5;
}

.my-sub-extra-slots__confirm-actions {
  display: flex;
  gap: var(--space-3, 0.75rem);
  margin-top: var(--space-2, 0.5rem);
}

.my-sub-extra-slots__actions {
  display: flex;
  gap: var(--space-3, 0.75rem);
}

.btn--icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--control-height-sm, 32px);
  height: var(--control-height-sm, 32px);
  padding: 0;
  border: 1px solid var(--border, #e5e7eb);
  border-radius: var(--radius-sm, 4px);
  background: var(--bg-surface, #f9fafb);
  cursor: pointer;
  color: var(--text-primary, #111827);
}

.btn--icon:hover:not(:disabled) {
  background: var(--bg-hover, #f3f4f6);
}

.btn--icon:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* ---- Responsive ---- */

@media (max-width: 640px) {
  .my-sub-member {
    flex-direction: column;
  }

  .my-sub-member__header {
    flex-direction: column;
  }

  .my-sub-member__badges {
    justify-content: flex-start;
  }

  .my-sub-member__photo {
    width: 48px;
    height: 48px;
  }

  .my-sub-member__actions {
    width: 100%;
    min-width: 0;
  }

  .my-sub-detail__payment-row {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-1, 0.25rem);
  }

  .my-sub-add-member-form__fields {
    grid-template-columns: 1fr;
  }

  .my-sub-card__arrow {
    display: none;
  }
}

/* trust.css */
/**
 * WEBSHOP CONTEXT: Trust Section
 * 
 * Trust indicators, testimonials, and social proof.
 * Builds customer confidence during shopping journey.
 */

/* =================================================================
   TRUST GRID
   ================================================================= */

.trust-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-8);
  margin-top: var(--space-8);
}

/* =================================================================
   TRUST ITEM
   ================================================================= */

.trust-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--space-6);
  background: var(--bg-surface);
  border-radius: var(--webshop-radius-card);
  border: 1px solid var(--border);
  transition: all var(--transition-fast);
}

.trust-item:hover {
  border-color: var(--accent-dim);
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}

/* Trust icon wrapper */
.trust-icon-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  background: var(--accent-dim);
  border-radius: var(--radius-full);
  margin-bottom: var(--space-4);
}

.trust-icon {
  width: 28px;
  height: 28px;
  color: var(--tenant-accent, var(--accent));
}

/* Trust typography */
.trust-title {
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  margin: 0 0 var(--space-2);
}

.trust-description {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: 1.6;
  margin: 0;
}

/* =================================================================
   TRUST STATS
   ================================================================= */

.trust-stats {
  display: flex;
  justify-content: center;
  gap: var(--space-12, 48px);
  padding: var(--space-8) 0;
}

.trust-stat {
  text-align: center;
}

.trust-stat__value {
  display: block;
  font-size: var(--text-4xl);
  font-weight: var(--font-bold);
  color: var(--tenant-accent, var(--accent));
  line-height: 1;
  margin-bottom: var(--space-2);
}

.trust-stat__label {
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

/* =================================================================
   TESTIMONIALS
   ================================================================= */

.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
}

.testimonial {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--webshop-radius-card);
  padding: var(--space-6);
}

.testimonial__stars {
  display: flex;
  gap: 2px;
  color: var(--warning);
  margin-bottom: var(--space-4);
}

.testimonial__stars svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
}

.testimonial__text {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: 1.7;
  margin: 0 0 var(--space-4);
  font-style: italic;
}

.testimonial__author {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.testimonial__avatar {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  background: var(--accent-dim);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--tenant-accent, var(--accent));
}

.testimonial__name {
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--text-primary);
}

.testimonial__date {
  font-size: var(--text-xs);
  color: var(--text-muted);
}

/* =================================================================
   PARTNER LOGOS
   ================================================================= */

.partner-logos {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-8);
  padding: var(--space-6) 0;
}

.partner-logo {
  height: 32px;
  width: auto;
  opacity: 0.5;
  filter: grayscale(1);
  transition: all var(--transition-fast);
}

.partner-logo:hover {
  opacity: 1;
  filter: grayscale(0);
}

/* =================================================================
   RESPONSIVE
   ================================================================= */

@media (max-width: 1024px) {
  .trust-grid,
  .testimonials-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .trust-grid,
  .testimonials-grid {
    grid-template-columns: 1fr;
  }
  
  .trust-stats {
    flex-direction: column;
    gap: var(--space-6);
  }
  
  .partner-logos {
    gap: var(--space-6);
  }
  
  .partner-logo {
    height: 24px;
  }
}

/* usp.css */
/**
 * WEBSHOP CONTEXT: USP Bar
 * 
 * Unique Selling Points bar.
 * Trust indicators shown below hero or in footer.
 */

/* =================================================================
   USP BAR
   ================================================================= */

.usp-bar {
  background: var(--bg-surface);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: var(--space-4) 0;
}

.usp-bar--accent {
  background: var(--accent-dim);
  border-color: transparent;
}

/* =================================================================
   USP GRID
   ================================================================= */

.usp-grid {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-6);
}

@media (min-width: 768px) {
  .usp-grid {
    justify-content: space-between;
  }
}

/* =================================================================
   USP ITEM
   ================================================================= */

.usp-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.usp-icon {
  width: 20px;
  height: 20px;
  color: var(--tenant-accent, var(--accent));
  flex-shrink: 0;
}

.usp-text {
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--text-primary);
  white-space: nowrap;
}

/* =================================================================
   USP VARIANTS
   ================================================================= */

/* Vertical stacked variant */
.usp-item--vertical {
  flex-direction: column;
  text-align: center;
  gap: var(--space-3);
}

.usp-item--vertical .usp-icon {
  width: 32px;
  height: 32px;
}

/* With description */
.usp-item--detailed {
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-1);
}

.usp-item--detailed .usp-icon {
  margin-bottom: var(--space-2);
}

.usp-description {
  font-size: var(--text-xs);
  color: var(--text-secondary);
  line-height: 1.4;
}

/* =================================================================
   RESPONSIVE
   ================================================================= */

@media (max-width: 768px) {
  .usp-bar {
    padding: var(--space-3) 0;
  }
  
  .usp-grid {
    gap: var(--space-4);
  }
  
  .usp-item {
    flex: 0 1 calc(50% - var(--space-2));
    justify-content: center;
  }
  
  .usp-text {
    font-size: var(--text-xs);
  }
}

@media (max-width: 480px) {
  .usp-item {
    flex: 1 1 100%;
  }
}

/* wave-dividers.css */
/**
 * WEBSHOP CONTEXT: Wave Dividers
 * 
 * Reusable CSS wave shape section dividers for pool/recreation themes.
 * Uses inline SVG backgrounds — no external images needed.
 */

/* =================================================================
   WAVE DIVIDER BASE
   ================================================================= */

.wave-divider {
  position: relative;
  width: 100%;
  overflow: hidden;
  line-height: 0;
  pointer-events: none;
}

.wave-divider svg {
  display: block;
  width: 100%;
  height: auto;
}

/* =================================================================
   WAVE SIZES
   ================================================================= */

.wave-divider--sm {
  height: 40px;
}

.wave-divider--sm svg {
  height: 40px;
}

.wave-divider--md {
  height: 64px;
}

.wave-divider--md svg {
  height: 64px;
}

.wave-divider--lg {
  height: 96px;
}

.wave-divider--lg svg {
  height: 96px;
}

/* =================================================================
   WAVE DIRECTION
   ================================================================= */

/* Flip vertically for bottom-to-top transitions */
.wave-divider--flip {
  transform: scaleY(-1);
}

/* =================================================================
   WAVE FILL VARIANTS
   ================================================================= */

.wave-divider--white svg path {
  fill: var(--bg-surface, #ffffff);
}

.wave-divider--muted svg path {
  fill: var(--bg-deep, #f8fafc);
}

.wave-divider--accent svg path {
  fill: var(--accent-dim, #e0f7fa);
}

/* =================================================================
   RESPONSIVE
   ================================================================= */

@media (max-width: 768px) {
  .wave-divider--lg {
    height: 48px;
  }

  .wave-divider--lg svg {
    height: 48px;
  }

  .wave-divider--md {
    height: 40px;
  }

  .wave-divider--md svg {
    height: 40px;
  }
}

/* whatsapp-modal.css */
/* ==========================================================================
   WhatsApp Customer Modal — Webshop Context
   CSS: pagayo-design/src/contexts/webshop/whatsapp-modal.css
   ========================================================================== */

.whatsapp-modal {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.whatsapp-modal__preview {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  background: var(--bg-secondary);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-2);
}

.whatsapp-modal__preview-icon {
  font-size: 1.5rem;
}

.whatsapp-modal__preview-text {
  display: flex;
  flex-direction: column;
  font-size: var(--font-sm);
}

.whatsapp-modal__preview-text strong {
  color: var(--text-primary);
}

.whatsapp-modal__preview-text span {
  color: var(--text-secondary);
}

.whatsapp-modal__field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.whatsapp-modal__label {
  font-size: var(--font-sm);
  font-weight: 500;
  color: var(--text-primary);
}

.whatsapp-modal__select {
  width: 100%;
  padding: 0.625rem var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: var(--font-base);
  background: var(--bg-surface);
}

.whatsapp-modal__select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 10%, transparent);
}

.whatsapp-modal__phone-input {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.whatsapp-modal__phone-prefix {
  flex-shrink: 0;
  padding: 0.625rem var(--space-3);
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: var(--font-sm);
  font-weight: 500;
  color: var(--text-secondary);
}

.whatsapp-modal__phone-input input {
  flex: 1;
}

.whatsapp-modal__textarea {
  width: 100%;
  padding: 0.625rem var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: var(--font-base);
  font-family: inherit;
  resize: vertical;
  min-height: 60px;
}

.whatsapp-modal__textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 10%, transparent);
}

.whatsapp-modal__error-text {
  font-size: var(--font-xs);
  color: var(--color-error);
}

.whatsapp-modal__error {
  margin-bottom: var(--space-2);
}

.whatsapp-modal__terms {
  padding-top: var(--space-2);
}

.whatsapp-modal__actions {
  display: flex;
  gap: var(--space-3);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border);
  margin-top: var(--space-2);
}

.whatsapp-modal__actions > * {
  flex: 1;
}

.whatsapp-modal__submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-6);
  background-color: #25D366;
  color: white;
  font-weight: 600;
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background-color 0.2s;
  font-size: var(--font-base);
}

.whatsapp-modal__submit:hover:not(:disabled) {
  background-color: #128C7E;
}

.whatsapp-modal__submit:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

@media (max-width: 480px) {
  .whatsapp-modal__actions {
    flex-direction: column-reverse;
  }
}

/* whatsapp.css */
/* =============================================================================
   WhatsApp Checkout Button
   Context: webshop
   ============================================================================= */

.whatsapp-checkout-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  background-color: #25D366;
  color: white;
  font-weight: 600;
  border: none;
  border-radius: var(--radius-md, 8px);
  cursor: pointer;
  transition: background-color 0.2s, transform 0.1s, box-shadow 0.2s;
  font-size: 1rem;
  line-height: 1.5;
}

.whatsapp-checkout-btn:hover:not(:disabled) {
  background-color: #128C7E;
  box-shadow: 0 4px 12px rgba(37, 211, 102, 0.3);
}

.whatsapp-checkout-btn:active:not(:disabled) {
  transform: scale(0.98);
}

.whatsapp-checkout-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.whatsapp-checkout-btn--sm {
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
}

.whatsapp-checkout-btn--lg {
  padding: 1rem 2rem;
  font-size: 1.125rem;
}

.whatsapp-checkout-btn--full {
  width: 100%;
}

.whatsapp-checkout-btn__icon {
  flex-shrink: 0;
}

.whatsapp-checkout-btn__text {
  white-space: nowrap;
}

@media (max-width: 480px) {
  .whatsapp-checkout-btn {
    padding: 0.875rem 1.25rem;
  }

  .whatsapp-checkout-btn--lg {
    padding: 1rem 1.5rem;
  }
}


}

@layer utilities {
/**
 * UTILITY CLASSES
 * Veelgebruikte utility classes voor snelle styling
 * 
 * AI-NOTE: Gebruik utilities voor one-off styling.
 * Voor herhalende patterns, maak een component.
 * 
 * CONVENTIES:
 * - Prefix: geen (direct bruikbaar)
 * - Naming: beschrijvend (sr-only, truncate, etc.)
 */

/* ===== SCREEN READER ONLY ===== */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.not-sr-only {
  position: static;
  width: auto;
  height: auto;
  padding: 0;
  margin: 0;
  overflow: visible;
  clip: auto;
  white-space: normal;
}

/* ===== TEXT UTILITIES ===== */
.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.line-clamp-1 {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

/* ===== DISPLAY UTILITIES ===== */
.hidden { display: none; }
.block { display: block; }
.inline { display: inline; }
.inline-block { display: inline-block; }
.flex { display: flex; }
.inline-flex { display: inline-flex; }
.grid { display: grid; }

/* ===== FLEX UTILITIES ===== */
.flex-row { flex-direction: row; }
.flex-col { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.flex-nowrap { flex-wrap: nowrap; }

.items-start { align-items: flex-start; }
.items-center { align-items: center; }
.items-end { align-items: flex-end; }
.items-stretch { align-items: stretch; }

.justify-start { justify-content: flex-start; }
.justify-center { justify-content: center; }
.justify-end { justify-content: flex-end; }
.justify-between { justify-content: space-between; }
.justify-around { justify-content: space-around; }

.flex-1 { flex: 1 1 0%; }
.flex-auto { flex: 1 1 auto; }
.flex-none { flex: none; }

.gap-1 { gap: var(--space-1); }
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }
.gap-6 { gap: var(--space-6); }
.gap-8 { gap: var(--space-8); }

/* ===== SPACING UTILITIES ===== */
.m-0 { margin: 0; }
.m-auto { margin: auto; }
.mx-auto { margin-left: auto; margin-right: auto; }

.p-0 { padding: 0; }
.p-1 { padding: var(--space-1); }
.p-2 { padding: var(--space-2); }
.p-3 { padding: var(--space-3); }
.p-4 { padding: var(--space-4); }
.p-6 { padding: var(--space-6); }
.p-8 { padding: var(--space-8); }

/* ===== SIZING UTILITIES ===== */
.w-full { width: 100%; }
.h-full { height: 100%; }
.min-h-screen { min-height: 100vh; }
.max-w-full { max-width: 100%; }

/* ===== POSITION UTILITIES ===== */
.relative { position: relative; }
.absolute { position: absolute; }
.fixed { position: fixed; }
.sticky { position: sticky; }

.inset-0 {
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

/* ===== OVERFLOW UTILITIES ===== */
.overflow-hidden { overflow: hidden; }
.overflow-auto { overflow: auto; }
.overflow-scroll { overflow: scroll; }
.overflow-x-auto { overflow-x: auto; }
.overflow-y-auto { overflow-y: auto; }

/* ===== CURSOR UTILITIES ===== */
.cursor-pointer { cursor: pointer; }
.cursor-not-allowed { cursor: not-allowed; }
.cursor-wait { cursor: wait; }

/* ===== OPACITY UTILITIES ===== */
.opacity-0 { opacity: 0; }
.opacity-50 { opacity: 0.5; }
.opacity-75 { opacity: 0.75; }
.opacity-100 { opacity: 1; }

/* ===== POINTER EVENTS ===== */
.pointer-events-none { pointer-events: none; }
.pointer-events-auto { pointer-events: auto; }

/* ===== USER SELECT ===== */
.select-none { user-select: none; }
.select-text { user-select: text; }
.select-all { user-select: all; }

/* ===== TRANSITION UTILITIES ===== */
.transition {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform;
  transition-timing-function: var(--ease-out);
  transition-duration: var(--duration-normal);
}

.transition-colors {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: var(--ease-out);
  transition-duration: var(--duration-normal);
}

.transition-opacity {
  transition-property: opacity;
  transition-timing-function: var(--ease-out);
  transition-duration: var(--duration-normal);
}

.transition-transform {
  transition-property: transform;
  transition-timing-function: var(--ease-out);
  transition-duration: var(--duration-normal);
}

/* ===== ANIMATION UTILITIES ===== */
@keyframes spin {
  to { transform: rotate(360deg); }
}

@keyframes pulse {
  50% { opacity: 0.5; }
}

@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slide-in-up {
  from { 
    opacity: 0;
    transform: translateY(10px);
  }
  to { 
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-spin {
  animation: spin 1s linear infinite;
}

.animate-pulse {
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.animate-fade-in {
  animation: fade-in var(--duration-normal) var(--ease-out);
}

.animate-slide-in-up {
  animation: slide-in-up var(--duration-normal) var(--ease-out);
}

}

@layer tenant {
/**
 * TENANT OVERRIDE VARIABLES
 * Placeholder voor runtime tenant customization
 * 
 * AI-NOTE: Deze variabelen worden overschreven door:
 * 1. Tenant configuratie in database
 * 2. Runtime CSS injection via injectTenantStyles()
 * 
 * USAGE:
 * Components refereren naar --tenant-* variabelen.
 * Defaults fallback naar theme tokens.
 * Tenant kan alleen deze variabelen overschrijven, niet de theme tokens.
 */

:root {
  /* ===== BRAND COLORS (tenant customizable) ===== */
  --tenant-accent: var(--accent);
  --tenant-accent-light: var(--accent-light);
  --tenant-accent-dim: var(--accent-dim);
  --tenant-accent-glow: var(--accent-glow);
  
  /* ===== TYPOGRAPHY (tenant customizable) ===== */
  --tenant-font-main: var(--font-sans);
  --tenant-font-heading: var(--font-sans);
  
  /* ===== HEADER VARIANT (set by admin choice) ===== */
  /* Options: minimal | full | centered | split */
  /* This is used for conditional styling if needed */
  
  /* ===== FOOTER VARIANT (set by admin choice) ===== */
  /* Options: simple | detailed | links | minimal */
  
  /* ===== CUSTOM LOGO ===== */
  /* Set via CSS custom property from tenant config */
  --tenant-logo-url: none;
  --tenant-logo-width: auto;
  --tenant-logo-height: 40px;
}

/* 
 * RUNTIME INJECTION EXAMPLE:
 * 
 * <style id="tenant-overrides">
 *   :root {
 *     --tenant-accent: #e91e63;
 *     --tenant-accent-light: #f48fb1;
 *     --tenant-font-main: 'Poppins', sans-serif;
 *   }
 * <\/style>
 */

}