/*!
 * Pagayo Design System - Webshop (fresh)
 * E-commerce Webshop
 * Theme: Light + Blue Accent
 * Build: @pagayo/design 2.17.1
 * (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;
}

/* ===== RICHTING (rechts-naar-links) =====
   --dir-sign is 1 in links-naar-rechts en -1 in rechts-naar-links. Wie iets
   van de ene kant laat inschuiven (laden), vermenigvuldigt de verschuiving
   ermee: translateX(calc(-100% * var(--dir-sign, 1))). Zet de kant zelf met
   inset-inline-start/end, niet met left/right. */
:root {
  --dir-sign: 1;
}

[dir="rtl"] {
  --dir-sign: -1;
}

/* Een links-naar-rechts blok binnen een rechts-naar-links pagina begint opnieuw. */
[dir="ltr"] {
  --dir-sign: 1;
}

/* ===== 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, var(--admin-v2-color-brand-gold));
  outline-offset: 2px;
}

/* ===== SELECTION ===== */
::selection {
  background: var(--accent, var(--admin-v2-color-brand-gold));
  color: var(--bg-deep, var(--admin-v2-color-brand-ink));
}

}

@layer tokens {
/**
 * Self-hosted webfont @font-face declarations (paths match @pagayo/config/fonts preset catalog).
 * Files are copied to dist/assets/fonts/ by scripts/compose-fonts.js.
 */

@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/design/immutable/assets/fonts/geist-latin-wght-normal.19f9c92546aa300c.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/design/immutable/assets/fonts/inter-latin-wght-normal.3100e775e8616cd2.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/design/immutable/assets/fonts/dm-sans-latin-wght-normal.9fea608a947e6702.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/design/immutable/assets/fonts/plus-jakarta-sans-latin-wght-normal.153fc85b70298bee.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/design/immutable/assets/fonts/source-sans-3-latin-wght-normal.7a19a7027e125257.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/design/immutable/assets/fonts/poppins-latin-wght-normal.7d93459d86585bfc.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/design/immutable/assets/fonts/playfair-display-latin-wght-normal.e0c764a8e9e1cce9.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/**
 * 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 {
  /* Foreground on the dark contrast layer over photography, in every theme. */
  --media-overlay-foreground: #ffffff;
  /* ===== 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: 'Geist', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-serif: 'Playfair Display', Georgia, 'Times New Roman', 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.8125rem;   /* 13px */
  --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: 250;
  --z-modal: 260;
  --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 in admin via remap */
  --control-font-lg: var(--text-base);     /* 16px */

  /* Admin list page control fonts (reference pattern) */
  --admin-font-size-base: 14px;
  --admin-font-size-body: var(--admin-font-size-base);
  /* Field subtitles (labels) sit 2px above readout/body text. */
  --admin-font-size-label: calc(var(--admin-font-size-base) + 2px);
  --admin-font-size-heading: var(--admin-font-size-base);
  --admin-list-toolbar-control-font: var(--admin-font-size-base);
  --admin-list-detail-control-font: var(--admin-font-size-base);
  --admin-products-list-font: var(--admin-font-size-base);
  --admin-workspace-detail-font: var(--admin-font-size-base);
  --admin-workspace-section-title-height: 34px;
  --admin-workspace-section-content-gap: 12px;
  /** Afstand label → control (TailAdmin: dichter op het veld dan op het veld erboven). */
  --products-editor-label-gap: var(--admin-v2-label-gap, 6px);

  /* Admin sidebar + POS merkstrook-footer (zelfde hoogte/ritme) */
  --brand-strip-height: 52px;
  
  /* Icon sizes (per control size) */
  --control-icon-sm: 16px;
  --control-icon-md: 20px;
  --control-icon-lg: 24px;

  /* ===== FORM CHECKBOX (cross-surface SSoT) ===== */
  --form-control-checkbox-size: 20px;
  --form-control-checkbox-radius: var(--radius-sm);
  --form-control-checkbox-border-width: 1.5px;
  --form-control-checkbox-check-size: 12px;
  --form-control-checkbox-gap: var(--space-3);
  --form-control-checkbox-label-font-size: var(--text-sm);
  --form-control-checkbox-label-font-weight: var(--font-medium);
  --form-control-checkbox-label-line-height: var(--form-control-checkbox-size);
  --form-control-checkbox-disabled-check: #98a2b3;
  --form-control-checkbox-border: var(--border-strong, #e4e7ec);
  --form-control-checkbox-bg: var(--bg-surface, #ffffff);
  --form-control-checkbox-checked-bg: var(
    --color-primary,
    var(--tenant-accent, var(--accent, #465fff))
  );

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

/* @pagayo-webshop-ui begin */
/**
 * WEBSHOP UI — de eigen structuur- en verflaag van de webshop
 *
 * Eigendom van de webshop, niet van de ontwerpstandaard (opdracht 162, KV-033).
 *
 * De webshop is van de winkelier en valt buiten de Pagayo-ontwerpstandaard
 * (`tokens/pg-ui.css` + `tokens/profiles/`). Tot en met @pagayo/design 2.8.24
 * kreeg de webshop die standaard rechtstreeks; elke bijstelling voor admin of
 * kassa verschoof dan ook de winkels van klanten. Dit bestand bevriest de
 * waarden die de webshop op dat moment op :root kreeg (pdc/current 792362be),
 * zodat de winkel er exact hetzelfde uitziet maar de standaard hem niet meer
 * raakt.
 *
 * Dit is de enige plek die de webshopstructuur bepaalt. Wijzig je hier iets,
 * dan verandert elke winkel. Een wijziging aan de standaard hoort hier niet
 * vanzelf in terecht te komen.
 *
 * De namen blijven `--pg-ui-*` omdat de webshopbundel en de gedeelde
 * componenten ze al lezen; de waarden zijn van de webshop. De website-editor
 * is een admin-gereedschap en krijgt de standaard zelf, alleen zolang hij
 * actief is (zie build.js, `scopeToWebsiteEditor`).
 *
 * Bewaker: scripts/check-design-standard-scope.mjs
 */

:root {
  /* ===== Structuur: afstanden, hoeken, letterschaal, bediening, randen (was tokens/pg-ui.css) ===== */
  --pg-ui-color-surface-selected: var(--pg-ui-color-primary-soft);
  --pg-ui-color-surface-disabled: var(--pg-ui-color-surface-muted);
  --pg-ui-color-text-link: var(--pg-ui-color-primary);
  --pg-ui-color-accent: var(--pg-ui-color-primary);
  --pg-ui-color-success-text: var(--pg-ui-state-success-text);
  --pg-ui-color-danger-text: var(--pg-ui-state-danger-text);
  --pg-ui-border-active: var(--pg-ui-color-primary);
  --pg-ui-radius-xs: 4px;
  --pg-ui-radius-sm: 6px;
  --pg-ui-radius-md: 8px;
  --pg-ui-radius-lg: 12px;
  --pg-ui-radius-xl: 16px;
  --pg-ui-radius-pill: 999px;
  --pg-ui-radius-control: var(--pg-ui-radius-md);
  --pg-ui-radius-card: var(--pg-ui-radius-lg);
  --pg-ui-radius-panel: var(--pg-ui-radius-xl);
  --pg-ui-radius-sheet: var(--pg-ui-radius-xl);
  --pg-ui-radius-badge: var(--pg-ui-radius-pill);
  --pg-ui-radius-interactive: var(--pg-ui-radius-control);
  --pg-ui-radius-label: var(--pg-ui-radius-pill);
  --pg-ui-space-0: 0;
  --pg-ui-space-1: 4px;
  --pg-ui-space-2: 8px;
  --pg-ui-space-3: 12px;
  --pg-ui-space-4: 16px;
  --pg-ui-space-5: 20px;
  --pg-ui-space-6: 24px;
  --pg-ui-space-8: 32px;
  --pg-ui-section-gap: var(--pg-ui-space-6);
  --pg-ui-panel-gap: var(--pg-ui-space-5);
  --pg-ui-card-padding-x: var(--pg-ui-space-5);
  --pg-ui-card-padding-y: var(--pg-ui-space-5);
  --pg-ui-toolbar-gap: var(--pg-ui-space-4);
  --pg-ui-font-size-page-title: 20px;
  --pg-ui-line-height-page-title: 28px;
  --pg-ui-font-size-section-title: 16px;
  --pg-ui-line-height-section-title: 24px;
  --pg-ui-font-size-heading-sm: 16px;
  --pg-ui-line-height-heading-sm: 24px;
  --pg-ui-font-size-card-title: 16px;
  --pg-ui-line-height-card-title: 24px;
  --pg-ui-font-size-list-item-title: 14px;
  --pg-ui-line-height-list-item-title: 20px;
  --pg-ui-font-size-body: 14px;
  --pg-ui-line-height-body: 20px;
  --pg-ui-font-size-meta: 12px;
  --pg-ui-line-height-meta: 18px;
  --pg-ui-font-size-control: 14px;
  --pg-ui-line-height-control: 20px;
  --pg-ui-font-size-badge: 12px;
  --pg-ui-line-height-badge: 18px;
  --pg-ui-font-weight-normal: var(--font-normal);
  --pg-ui-font-weight-medium: var(--font-medium);
  --pg-ui-font-weight-semibold: var(--font-semibold);
  --pg-ui-font-weight-bold: var(--font-bold);
  --pg-ui-letter-spacing: 0;
  --pg-ui-control-height-sm: 32px;
  --pg-ui-control-height-md: 40px;
  --pg-ui-control-height-lg: 44px;
  --pg-ui-control-padding-x-sm: var(--pg-ui-space-3);
  --pg-ui-control-padding-x-md: var(--pg-ui-space-4);
  --pg-ui-control-padding-x-lg: var(--pg-ui-space-4);
  --pg-ui-icon-size-sm: 16px;
  --pg-ui-icon-size-md: 20px;
  --pg-ui-icon-size-lg: 20px;
  --pg-ui-icon-size-xl: 24px;
  --pg-ui-icon-stroke-strong: 2;
  --pg-ui-icon-button-size-sm: 32px;
  --pg-ui-icon-button-size-md: 40px;
  --pg-ui-icon-button-size-lg: 44px;
  --pg-ui-button-primary-bg: var(--pg-ui-color-primary);
  --pg-ui-button-primary-bg-hover: var(--pg-ui-color-primary-hover);
  --pg-ui-button-primary-text: var(--pg-ui-color-primary-contrast);
  --pg-ui-button-height-md: var(--pg-ui-control-height-md);
  --pg-ui-button-height-lg: var(--pg-ui-control-height-lg);
  --pg-ui-button-gap: var(--pg-ui-space-2);
  --pg-ui-button-secondary-bg: var(--pg-ui-color-surface);
  --pg-ui-button-secondary-bg-hover: var(--pg-ui-color-surface-muted);
  --pg-ui-button-secondary-border: var(--pg-ui-border-strong);
  --pg-ui-badge-height: 24px;
  --pg-ui-badge-padding-x: 10px;
  --pg-ui-badge-padding-y: 2px;
  --pg-ui-counter-size: 24px;
  --pg-ui-counter-text: var(--pg-ui-color-primary);
  --pg-ui-input-height: var(--pg-ui-control-height-lg);
  --pg-ui-input-padding-x: var(--pg-ui-space-4);
  --pg-ui-input-padding-x-with-icon: 36px;
  --pg-ui-input-radius: var(--pg-ui-radius-control);
  --pg-ui-input-bg: var(--pg-ui-color-surface);
  --pg-ui-input-text: var(--pg-ui-color-text);
  --pg-ui-input-placeholder: var(--pg-ui-color-text-soft);
  --pg-ui-input-border: var(--pg-ui-border-strong);
  --pg-ui-input-border-focus: var(--pg-ui-color-primary);
  --pg-ui-input-disabled-bg: var(--pg-ui-color-surface-muted);
  --pg-ui-input-disabled-text: var(--pg-ui-color-text-disabled);
  --pg-ui-input-bg-disabled: var(--pg-ui-input-disabled-bg);
  --pg-ui-helper-text-color: var(--pg-ui-color-text-muted);
  --pg-ui-label-gap: 6px;
  --pg-ui-field-gap: var(--pg-ui-space-6);
  --pg-ui-state-loading-text: var(--pg-ui-color-text-muted);
  --pg-ui-state-unavailable-text: var(--pg-ui-color-text-muted);
  --pg-ui-state-error-bg: var(--pg-ui-state-danger-bg);
  --pg-ui-state-error-text: var(--pg-ui-state-danger-text);
  --pg-ui-state-info-bg: var(--pg-ui-state-information-bg);
  --pg-ui-state-info-text: var(--pg-ui-state-information-text);
  --pg-ui-shadow-floating: var(--pg-ui-shadow-lg);
  --pg-ui-nav-text: var(--pg-ui-color-text-muted);
  --pg-ui-nav-text-active: var(--pg-ui-color-text);
  --pg-ui-nav-surface-hover: var(--pg-ui-color-surface-hover);
  --pg-ui-nav-surface-active: var(--pg-ui-color-primary-soft);
  --pg-ui-chart-compare-current: var(--pg-ui-color-primary);
  --pg-ui-chart-series-1: var(--pg-ui-color-primary);
  --pg-ui-chart-series-2: var(--pg-ui-state-information-text);
  --pg-ui-chart-series-3: var(--pg-ui-state-warning-text);
  --pg-ui-chart-series-4: color-mix(in srgb, var(--pg-ui-state-information-text) 80%, var(--pg-ui-color-primary));
  --pg-ui-chart-series-5: var(--pg-ui-state-success-text);
  --pg-ui-chart-series-6: var(--pg-ui-color-text-muted);
  --pg-ui-icon-color: var(--pg-ui-color-text-soft);

  /* ===== Verf: vlakken, tekst, labels, staten, schaduwen (was tokens/profiles/admin-light.css) ===== */
  --pg-ui-color-surface-muted: #f3f4f6;
  --pg-ui-color-surface-overlay: rgb(255 255 255 / 90%);
  --pg-ui-color-surface-hover: #f8fafc;
  --pg-ui-color-text-soft: #98a2b3;
  --pg-ui-color-text-inverse: #ffffff;
  --pg-ui-color-text-disabled: #98a2b3;
  --pg-ui-color-primary-active: #2a31e0;
  --pg-ui-color-success-border: #abefc6;
  --pg-ui-border-subtle: #eef2f6;
  --pg-ui-border-default: #e4e7ec;
  --pg-ui-border-strong: #d0d5dd;
  --pg-ui-button-secondary-text: #344054;
  --pg-ui-counter-bg: #f1f5ff;
  --pg-ui-label-bg-neutral: #f3f4f6;
  --pg-ui-label-text-neutral: #475467;
  --pg-ui-label-bg-success: #ecfdf3;
  --pg-ui-label-text-success: #027a48;
  --pg-ui-label-bg-warning: #fffaeb;
  --pg-ui-label-text-warning: #b54708;
  --pg-ui-label-bg-info: #eff8ff;
  --pg-ui-label-text-info: #175cd3;
  --pg-ui-label-bg-danger: #fef3f2;
  --pg-ui-label-text-danger: #b42318;
  --pg-ui-label-color: #344054;
  --pg-ui-state-loading-bg: #f8fafc;
  --pg-ui-state-saving-bg: #eff8ff;
  --pg-ui-state-dirty-bg: #fffaeb;
  --pg-ui-state-saved-bg: #ecfdf3;
  --pg-ui-state-setup-bg: #f5f8ff;
  --pg-ui-state-unavailable-bg: #f3f4f6;
  --pg-ui-state-warning-bg: #fffaeb;
  --pg-ui-state-success-bg: #ecfdf3;
  --pg-ui-state-danger-bg: #fff6f5;
  --pg-ui-state-information-bg: #f0f9ff;
  --pg-ui-state-saving-text: #175cd3;
  --pg-ui-state-dirty-text: #b54708;
  --pg-ui-state-saved-text: #027a48;
  --pg-ui-state-setup-text: #3538cd;
  --pg-ui-state-warning-text: #b54708;
  --pg-ui-state-success-text: #027a48;
  --pg-ui-state-danger-text: #b42318;
  --pg-ui-state-information-text: #0ba5ec;
  --pg-ui-shadow-xs: 0 1px 2px rgba(16, 24, 40, 0.05);
  --pg-ui-shadow-sm: 0 1px 3px rgba(16, 24, 40, 0.10), 0 1px 2px rgba(16, 24, 40, 0.06);
  --pg-ui-shadow-md: 0 4px 8px -2px rgba(16, 24, 40, 0.10), 0 2px 4px -2px rgba(16, 24, 40, 0.06);
  --pg-ui-shadow-lg: 0 12px 24px rgba(16, 24, 40, 0.12);
  --pg-ui-backdrop: rgba(16, 24, 40, 0.18);
  --pg-ui-nav-role-daily: #f5a623;
  --pg-ui-nav-role-order: #ef4444;
  --pg-ui-nav-role-return: #f97316;
  --pg-ui-nav-role-commerce: #60a5fa;
  --pg-ui-nav-role-subscription: #f59e0b;
  --pg-ui-nav-role-content: #a78bfa;
  --pg-ui-nav-role-insight: #94a3b8;
  --pg-ui-chart-compare-previous: #e4e7ec;
  --pg-ui-select-chevron: 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='%2398a2b3' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  --pg-ui-select-chevron-muted: 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='%23667085' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  --pg-ui-icon-check-on-primary: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M3.5 8.5l3 3 6-7' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --pg-ui-chrome-header-shadow: 0 4px 12px rgb(15 23 42 / 0.08);
  --pg-ui-chrome-footer-shadow: 0 -4px 12px rgb(15 23 42 / 0.08);
  --pg-ui-avatar-bg: linear-gradient(135deg, var(--pg-ui-color-primary-soft), var(--pg-ui-color-surface-hover));
  --pg-ui-media-frame-bg: #f3f4f6;
  --pg-ui-media-frame-border: #e4e7ec;
  --admin-border-subtle: rgba(15, 23, 42, 0.06);
  --admin-border-light: rgba(15, 23, 42, 0.08);
  --admin-border-medium: rgba(15, 23, 42, 0.1);
  --admin-border-strong: rgba(15, 23, 42, 0.14);
  --admin-border-hover: rgba(15, 23, 42, 0.12);
  --admin-border-accent: rgba(15, 23, 42, 0.15);
  --admin-bg-wash: rgba(15, 23, 42, 0.02);
  --admin-v2-color-brand-gold: #f5a623;
  --admin-v2-color-brand-gold-strong: #d98e00;
  --admin-v2-color-brand-gold-deep: #db930f;
  --admin-v2-color-brand-ink: #0a0a0f;
  --admin-v2-shell-footer-partner-bg: #112857;
  /* Oude brugnamen: het winkelthema zet --bg-deep t/m --bg-muted daarna opnieuw; --bg-soft blijft staan. */
  --bg-deep: var(--pg-ui-color-bg);
  --bg-surface: var(--pg-ui-color-surface);
  --bg-elevated: var(--pg-ui-color-surface-raised);
  --bg-hover: var(--pg-ui-color-surface-hover);
  --bg-active: var(--pg-ui-color-surface-hover);
  --bg-muted: var(--pg-ui-color-surface-muted);
  --bg-soft: var(--pg-ui-color-surface-muted);

  /* ===== Merk van de winkelier: kleur, focus, lettertype, vlakken volgen het winkelthema (was tokens/pg-ui-brand-tenant.css) ===== */
  --pg-ui-color-primary: var(--tenant-accent, var(--accent));
  --pg-ui-color-primary-hover: var(--accent-hover, var(--tenant-accent, var(--accent)));
  --pg-ui-color-primary-soft: var(--accent-subtle, color-mix(in srgb, var(--pg-ui-color-primary) 12%, #ffffff));
  --pg-ui-color-primary-contrast: var(--accent-contrast, #ffffff);
  --pg-ui-focus-ring: 0 0 0 3px color-mix(in srgb, var(--pg-ui-color-primary) 22%, transparent);
  --pg-ui-font-family: var(--tenant-font-main, var(--font-sans));
  --pg-ui-color-bg: var(--bg-base, #f9fafb);
  --pg-ui-color-app-bg: var(--pg-ui-color-bg);
  --pg-ui-color-surface: var(--bg-surface, #ffffff);
  --pg-ui-color-surface-raised: var(--bg-surface, #ffffff);
  --pg-ui-color-text: var(--text-primary, #101828);
  --pg-ui-color-text-muted: var(--text-secondary, #667085);
}

/* @pagayo-webshop-ui end */
/* @pagayo-standard begin: website-editor */
/**
 * PAGAYO UI FOUNDATION — shared visual contract (structure)
 *
 * Canonical name: `--pg-ui-*`. Admin keeps `--admin-v2-*` as aliases.
 *
 * Wave E+: this file is STRUCTURE only (names, geometry, typography scale, var() graph).
 * Theme PAINT lives in `tokens/profiles/admin-*.css` (admin-light / admin-dark / admin-revolutionary).
 *
 * Theme contract:
 *   consumer → semantic token (--pg-ui-* / --admin-v2-* alias) → theme profile
 *
 * Manifest: src/tokens/semantic-contract.manifest.json
 * Docs: THEME-SEMANTIC-CONTRACT.md
 */

:root:where(:has(body.website-editor-active)) {
  --pg-ui-color-app-bg: var(--pg-ui-color-bg);
  --pg-ui-color-surface-selected: var(--pg-ui-color-primary-soft);
  --pg-ui-color-surface-disabled: var(--pg-ui-color-surface-muted);
  --pg-ui-color-text-link: var(--pg-ui-color-primary);
  --pg-ui-color-accent: var(--pg-ui-color-primary);
  --pg-ui-color-success-text: var(--pg-ui-state-success-text);
  --pg-ui-color-danger-text: var(--pg-ui-state-danger-text);
  --pg-ui-border-active: var(--pg-ui-color-primary);
  /* ===== RADIUS ===== */
  --pg-ui-radius-xs: 4px;
  --pg-ui-radius-sm: 6px;
  --pg-ui-radius-md: 8px;
  --pg-ui-radius-lg: 12px;
  --pg-ui-radius-xl: 16px;
  --pg-ui-radius-pill: 999px;
  --pg-ui-radius-control: var(--pg-ui-radius-md);
  --pg-ui-radius-card: var(--pg-ui-radius-lg);
  --pg-ui-radius-panel: var(--pg-ui-radius-xl);
  --pg-ui-radius-sheet: var(--pg-ui-radius-xl);
  --pg-ui-radius-badge: var(--pg-ui-radius-pill);
  --pg-ui-radius-interactive: var(--pg-ui-radius-control);
  --pg-ui-radius-label: var(--pg-ui-radius-pill);
  /* ===== SPACING ===== */
  --pg-ui-space-0: 0;
  --pg-ui-space-1: 4px;
  --pg-ui-space-2: 8px;
  --pg-ui-space-3: 12px;
  --pg-ui-space-4: 16px;
  --pg-ui-space-5: 20px;
  --pg-ui-space-6: 24px;
  --pg-ui-space-8: 32px;
  --pg-ui-section-gap: var(--pg-ui-space-6);
  --pg-ui-panel-gap: var(--pg-ui-space-5);
  --pg-ui-card-padding-x: var(--pg-ui-space-5);
  --pg-ui-card-padding-y: var(--pg-ui-space-5);
  --pg-ui-toolbar-gap: var(--pg-ui-space-4);
  /* ===== TYPOGRAPHY ===== */
  --pg-ui-font-family: Geist, var(--font-sans);
  --pg-ui-font-size-page-title: 20px;
  --pg-ui-line-height-page-title: 28px;
  --pg-ui-font-size-section-title: 16px;
  --pg-ui-line-height-section-title: 24px;
  --pg-ui-font-size-heading-sm: 16px;
  --pg-ui-line-height-heading-sm: 24px;
  --pg-ui-font-size-card-title: 16px;
  --pg-ui-line-height-card-title: 24px;
  --pg-ui-font-size-list-item-title: 14px;
  --pg-ui-line-height-list-item-title: 20px;
  --pg-ui-font-size-body: 14px;
  /* Leestekst op een beheerpagina (smaak.md §1: body 16). Kassa en start houden font-size-body. */
  --pg-ui-font-size-reading: 16px;
  --pg-ui-line-height-body: 20px;
  --pg-ui-font-size-meta: 12px;
  --pg-ui-line-height-meta: 18px;
  --pg-ui-font-size-control: 14px;
  --pg-ui-line-height-control: 20px;
  --pg-ui-font-size-badge: 12px;
  --pg-ui-line-height-badge: 18px;
  --pg-ui-font-weight-normal: var(--font-normal);
  --pg-ui-font-weight-medium: var(--font-medium);
  --pg-ui-font-weight-semibold: var(--font-semibold);
  --pg-ui-font-weight-bold: var(--font-bold);
  --pg-ui-letter-spacing: 0;
  /* ===== CONTROLS (geometry) ===== */
  --pg-ui-control-height-sm: 32px;
  --pg-ui-control-height-md: 40px;
  --pg-ui-control-height-lg: 44px;
  --pg-ui-control-padding-x-sm: var(--pg-ui-space-3);
  --pg-ui-control-padding-x-md: var(--pg-ui-space-4);
  --pg-ui-control-padding-x-lg: var(--pg-ui-space-4);
  --pg-ui-icon-size-sm: 16px;
  --pg-ui-icon-size-md: 20px;
  --pg-ui-icon-size-lg: 20px;
  --pg-ui-icon-size-xl: 24px;
  --pg-ui-icon-stroke-strong: 2;
  --pg-ui-icon-button-size-sm: 32px;
  --pg-ui-icon-button-size-md: 40px;
  --pg-ui-icon-button-size-lg: 44px;
  /* ===== BUTTONS ===== */
  --pg-ui-button-primary-bg: var(--pg-ui-color-primary);
  --pg-ui-button-primary-bg-hover: var(--pg-ui-color-primary-hover);
  --pg-ui-button-primary-text: var(--pg-ui-color-primary-contrast);
  --pg-ui-button-height-md: var(--pg-ui-control-height-md);
  --pg-ui-button-height-lg: var(--pg-ui-control-height-lg);
  --pg-ui-button-gap: var(--pg-ui-space-2);
  --pg-ui-button-secondary-bg: var(--pg-ui-color-surface);
  --pg-ui-button-secondary-bg-hover: var(--pg-ui-color-surface-muted);
  --pg-ui-button-secondary-border: var(--pg-ui-border-strong);
  /* ===== LABELS / BADGES / COUNTERS ===== */
  --pg-ui-badge-height: 24px;
  --pg-ui-badge-padding-x: 10px;
  --pg-ui-badge-padding-y: 2px;
  --pg-ui-counter-size: 24px;
  --pg-ui-counter-text: var(--pg-ui-color-primary);
  /* ===== FORMS / INPUT CONTROLS ===== */
  --pg-ui-input-height: var(--pg-ui-control-height-lg);
  --pg-ui-input-padding-x: var(--pg-ui-space-4);
  --pg-ui-input-padding-x-with-icon: 36px;
  --pg-ui-input-radius: var(--pg-ui-radius-control);
  --pg-ui-input-bg: var(--pg-ui-color-surface);
  --pg-ui-input-text: var(--pg-ui-color-text);
  --pg-ui-input-placeholder: var(--pg-ui-color-text-soft);
  --pg-ui-input-border: var(--pg-ui-border-strong);
  --pg-ui-input-border-focus: var(--pg-ui-color-primary);
  --pg-ui-input-disabled-bg: var(--pg-ui-color-surface-muted);
  --pg-ui-input-disabled-text: var(--pg-ui-color-text-disabled);
  --pg-ui-input-bg-disabled: var(--pg-ui-input-disabled-bg);
  --pg-ui-helper-text-color: var(--pg-ui-color-text-muted);
  --pg-ui-label-gap: 6px;
  --pg-ui-field-gap: var(--pg-ui-space-6);
  --pg-ui-state-loading-text: var(--pg-ui-color-text-muted);
  --pg-ui-state-unavailable-text: var(--pg-ui-color-text-muted);
  /* Compatibility aliases (do not delete — consumers still reference error/info) */
  --pg-ui-state-error-bg: var(--pg-ui-state-danger-bg);
  --pg-ui-state-error-text: var(--pg-ui-state-danger-text);
  --pg-ui-state-info-bg: var(--pg-ui-state-information-bg);
  --pg-ui-state-info-text: var(--pg-ui-state-information-text);
  --pg-ui-shadow-floating: var(--pg-ui-shadow-lg);
  /* Rustende elementen hebben geen schaduw (smaak.md §1). */
  --pg-ui-shadow-none: none;
  /* ===== NAVIGATION ===== */
  --pg-ui-nav-text: var(--pg-ui-color-text-muted);
  --pg-ui-nav-text-active: var(--pg-ui-color-text);
  --pg-ui-nav-surface-hover: var(--pg-ui-color-surface-hover);
  --pg-ui-nav-surface-active: var(--pg-ui-color-primary-soft);
  /* ===== DATA / CHART (semantic series — not blue-1 / green-4) ===== */
  --pg-ui-chart-compare-current: var(--pg-ui-color-primary);
  --pg-ui-chart-series-1: var(--pg-ui-color-primary);
  --pg-ui-chart-series-2: var(--pg-ui-state-information-text);
  --pg-ui-chart-series-3: var(--pg-ui-state-warning-text);
  --pg-ui-chart-series-4: color-mix(in srgb, var(--pg-ui-state-information-text) 80%, var(--pg-ui-color-primary));
  --pg-ui-chart-series-5: var(--pg-ui-state-success-text);
  --pg-ui-chart-series-6: var(--pg-ui-color-text-muted);
  /* ===== ICONS (theme owns encoded stroke; components reference the token) ===== */
  --pg-ui-icon-color: var(--pg-ui-color-text-soft);
  /* ===== MEDIA FRAME (paint overrides in profiles) ===== */
  --pg-ui-media-frame-bg: var(--pg-ui-color-surface-muted);
  --pg-ui-media-frame-border: var(--pg-ui-border-default);
}

/**
 * PAGAYO ADMIN THEME PROFILE — admin-light (Wave E)
 *
 * Visual values for the canonical Admin Light appearance.
 * Structure / names / var() graph live in `tokens/pg-ui.css`.
 * Do not redesign — values calibrate 1:1 to the pre-Wave-E Light look.
 *
 * Activation: :root (default) and [data-admin-theme-profile="admin-light"].
 */

:root:where(:has(body.website-editor-active)),
[data-admin-theme-profile="admin-light"]:where(:has(body.website-editor-active)) {
  /* ===== SURFACE ===== */
  --pg-ui-color-bg: #f9fafb;
  --pg-ui-color-surface: #ffffff;
  --pg-ui-color-surface-muted: #f3f4f6;
  --pg-ui-color-surface-raised: #ffffff;
  --pg-ui-color-surface-overlay: rgb(255 255 255 / 90%);
  --pg-ui-color-surface-hover: #f8fafc;
  /* ===== TEXT ===== */
  --pg-ui-color-text: #101828;
  --pg-ui-color-text-muted: #667085;
  --pg-ui-color-text-soft: #98a2b3;
  --pg-ui-color-text-inverse: #ffffff;
  --pg-ui-color-text-disabled: #98a2b3;
  /* ===== BRAND / INTERACTION (product brand — not semantic state) ===== */
  --pg-ui-color-primary: #465fff;
  --pg-ui-color-primary-hover: #3641f5;
  --pg-ui-color-primary-active: #2a31e0;
  --pg-ui-color-primary-soft: #eef4ff;
  --pg-ui-color-primary-contrast: #ffffff;
  --pg-ui-color-success-border: #abefc6;
  /* ===== BORDER / FOCUS ===== */
  --pg-ui-border-subtle: #eef2f6;
  --pg-ui-border-default: #e4e7ec;
  --pg-ui-border-strong: #d0d5dd;
  --pg-ui-focus-ring: 0 0 0 3px rgba(70, 95, 255, 0.16);
  --pg-ui-button-secondary-text: #344054;
  --pg-ui-counter-bg: #f1f5ff;
  --pg-ui-label-bg-neutral: #f3f4f6;
  --pg-ui-label-text-neutral: #475467;
  --pg-ui-label-bg-success: #ecfdf3;
  --pg-ui-label-text-success: #027a48;
  --pg-ui-label-bg-warning: #fffaeb;
  --pg-ui-label-text-warning: #b54708;
  --pg-ui-label-bg-info: #eff8ff;
  --pg-ui-label-text-info: #175cd3;
  --pg-ui-label-bg-danger: #fef3f2;
  --pg-ui-label-text-danger: #b42318;
  --pg-ui-label-color: #344054;
  /* ===== STATE (semantic — independent of product brand) ===== */
  --pg-ui-state-loading-bg: #f8fafc;
  --pg-ui-state-saving-bg: #eff8ff;
  --pg-ui-state-dirty-bg: #fffaeb;
  --pg-ui-state-saved-bg: #ecfdf3;
  --pg-ui-state-setup-bg: #f5f8ff;
  --pg-ui-state-unavailable-bg: #f3f4f6;
  --pg-ui-state-warning-bg: #fffaeb;
  --pg-ui-state-success-bg: #ecfdf3;
  --pg-ui-state-danger-bg: #fff6f5;
  --pg-ui-state-information-bg: #f0f9ff;
  --pg-ui-state-saving-text: #175cd3;
  --pg-ui-state-dirty-text: #b54708;
  --pg-ui-state-saved-text: #027a48;
  --pg-ui-state-setup-text: #3538cd;
  --pg-ui-state-warning-text: #b54708;
  --pg-ui-state-success-text: #027a48;
  --pg-ui-state-danger-text: #b42318;
  --pg-ui-state-information-text: #0ba5ec;
  /* ===== ELEVATION ===== */
  --pg-ui-shadow-xs: 0 1px 2px rgba(16, 24, 40, 0.05);
  --pg-ui-shadow-sm: 0 1px 3px rgba(16, 24, 40, 0.10), 0 1px 2px rgba(16, 24, 40, 0.06);
  --pg-ui-shadow-md: 0 4px 8px -2px rgba(16, 24, 40, 0.10), 0 2px 4px -2px rgba(16, 24, 40, 0.06);
  --pg-ui-shadow-lg: 0 12px 24px rgba(16, 24, 40, 0.12);
  --pg-ui-backdrop: rgba(16, 24, 40, 0.18);
  /*
   * Admin nav category accent roles (Wave C).
   * Light values calibrate 1:1 to the previous storefront hex accents.
   * Theme profiles own these values — consumers pass a role, never a hex.
   */
  --pg-ui-nav-role-daily: #f5a623;
  --pg-ui-nav-role-order: #ef4444;
  --pg-ui-nav-role-return: #f97316;
  --pg-ui-nav-role-commerce: #60a5fa;
  --pg-ui-nav-role-subscription: #f59e0b;
  --pg-ui-nav-role-content: #a78bfa;
  --pg-ui-nav-role-insight: #94a3b8;
  --pg-ui-chart-compare-previous: #e4e7ec;
  --pg-ui-select-chevron: 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='%2398a2b3' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  --pg-ui-select-chevron-muted: 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='%23667085' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  --pg-ui-icon-check-on-primary: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M3.5 8.5l3 3 6-7' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  /* Chrome elevation (Admin shell + entity-sheet shared hangpoints) */
  --pg-ui-chrome-header-shadow: 0 4px 12px rgb(15 23 42 / 0.08);
  --pg-ui-chrome-footer-shadow: 0 -4px 12px rgb(15 23 42 / 0.08);
  --pg-ui-avatar-bg: linear-gradient(135deg, var(--pg-ui-color-primary-soft), var(--pg-ui-color-surface-hover));

  /* ===== MEDIA FRAME (neutral image/logo cradle) ===== */
  --pg-ui-media-frame-bg: #f3f4f6;
  --pg-ui-media-frame-border: #e4e7ec;

  /* ===== ADMIN CHROME (Light appearance — migrated from admin _base) ===== */
  --admin-border-subtle: rgba(15, 23, 42, 0.06);
  --admin-border-light: rgba(15, 23, 42, 0.08);
  --admin-border-medium: rgba(15, 23, 42, 0.1);
  --admin-border-strong: rgba(15, 23, 42, 0.14);
  --admin-border-hover: rgba(15, 23, 42, 0.12);
  --admin-border-accent: rgba(15, 23, 42, 0.15);
  --admin-bg-wash: rgba(15, 23, 42, 0.02);
  --admin-v2-color-brand-gold: #f5a623;
  --admin-v2-color-brand-gold-strong: #d98e00;
  --admin-v2-color-brand-gold-deep: #db930f;
  --admin-v2-color-brand-ink: #0a0a0f;
  --admin-v2-shell-footer-partner-bg: #112857;

  /* Closure — bridge legacy skin paint tokens → semantic Admin surfaces */
  --bg-deep: var(--pg-ui-color-bg);
  --bg-surface: var(--pg-ui-color-surface);
  --bg-elevated: var(--pg-ui-color-surface-raised);
  --bg-hover: var(--pg-ui-color-surface-hover);
  --bg-active: var(--pg-ui-color-surface-hover);
  --bg-muted: var(--pg-ui-color-surface-muted);
  --bg-soft: var(--pg-ui-color-surface-muted);
}

/**
 * PAGAYO ADMIN THEME PROFILE — admin-dark (Wave F)
 *
 * Professional night-mode paint for Admin. Same token names as admin-light;
 * structure / var() graph stay in `tokens/pg-ui.css`.
 *
 * Activation: [data-admin-theme-profile="admin-dark"] only (never bare :root).
 * No neon / glow — practical working night mode.
 */

[data-admin-theme-profile="admin-dark"]:where(:has(body.website-editor-active)) {
  /* ===== SURFACE ===== */
  --pg-ui-color-bg: #0b0d12;
  --pg-ui-color-surface: #141820;
  --pg-ui-color-surface-muted: #10141b;
  --pg-ui-color-surface-raised: #1b2130;
  --pg-ui-color-surface-overlay: rgb(20 24 32 / 92%);
  --pg-ui-color-surface-hover: #222938;
  /* ===== TEXT ===== */
  --pg-ui-color-text: #f0f2f5;
  --pg-ui-color-text-muted: #9aa3b5;
  --pg-ui-color-text-soft: #7b8496;
  --pg-ui-color-text-inverse: #ffffff;
  --pg-ui-color-text-disabled: #6b7385;
  /* ===== BRAND / INTERACTION (Pagayo blue — contrast-adjusted) ===== */
  --pg-ui-color-primary: #465fff;
  --pg-ui-color-primary-hover: #5568f0;
  --pg-ui-color-primary-active: #3641f5;
  --pg-ui-color-primary-soft: #1a2240;
  --pg-ui-color-primary-contrast: #ffffff;
  --pg-ui-color-success-border: #2f6f4e;
  /* ===== BORDER / FOCUS ===== */
  --pg-ui-border-subtle: rgba(240, 242, 245, 0.06);
  --pg-ui-border-default: rgba(240, 242, 245, 0.10);
  --pg-ui-border-strong: rgba(240, 242, 245, 0.16);
  --pg-ui-focus-ring: 0 0 0 3px rgba(70, 95, 255, 0.40);
  --pg-ui-button-secondary-text: #d0d5dd;
  --pg-ui-counter-bg: #1a2240;
  --pg-ui-label-bg-neutral: #1f2533;
  --pg-ui-label-text-neutral: #c5cbd6;
  --pg-ui-label-bg-success: #143226;
  --pg-ui-label-text-success: #6ee7a8;
  --pg-ui-label-bg-warning: #33260f;
  --pg-ui-label-text-warning: #f5c15a;
  --pg-ui-label-bg-info: #13253a;
  --pg-ui-label-text-info: #7db7ff;
  --pg-ui-label-bg-danger: #3a1614;
  --pg-ui-label-text-danger: #f5a09a;
  --pg-ui-label-color: #d0d5dd;
  /* ===== STATE (semantic — independent of product brand) ===== */
  --pg-ui-state-loading-bg: #1a1f2a;
  --pg-ui-state-saving-bg: #13253a;
  --pg-ui-state-dirty-bg: #33260f;
  --pg-ui-state-saved-bg: #143226;
  --pg-ui-state-setup-bg: #1a2240;
  --pg-ui-state-unavailable-bg: #1a1f2a;
  --pg-ui-state-warning-bg: #33260f;
  --pg-ui-state-success-bg: #143226;
  --pg-ui-state-danger-bg: #3a1614;
  --pg-ui-state-information-bg: #13253a;
  --pg-ui-state-saving-text: #7db7ff;
  --pg-ui-state-dirty-text: #f5c15a;
  --pg-ui-state-saved-text: #6ee7a8;
  --pg-ui-state-setup-text: #a5b4fc;
  --pg-ui-state-warning-text: #f5c15a;
  --pg-ui-state-success-text: #6ee7a8;
  --pg-ui-state-danger-text: #f5a09a;
  --pg-ui-state-information-text: #7dd3fc;
  /* ===== ELEVATION ===== */
  --pg-ui-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.35);
  --pg-ui-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.45), 0 1px 2px rgba(0, 0, 0, 0.30);
  --pg-ui-shadow-md: 0 4px 8px -2px rgba(0, 0, 0, 0.50), 0 2px 4px -2px rgba(0, 0, 0, 0.35);
  --pg-ui-shadow-lg: 0 12px 24px rgba(0, 0, 0, 0.55);
  --pg-ui-backdrop: rgba(0, 0, 0, 0.55);
  /* Nav role accents — slightly lifted for dark surfaces */
  --pg-ui-nav-role-daily: #f5b84a;
  --pg-ui-nav-role-order: #f87171;
  --pg-ui-nav-role-return: #fb923c;
  --pg-ui-nav-role-commerce: #7db7ff;
  --pg-ui-nav-role-subscription: #fbbf24;
  --pg-ui-nav-role-content: #c4b5fd;
  --pg-ui-nav-role-insight: #94a3b8;
  --pg-ui-chart-compare-previous: #3a4150;
  --pg-ui-select-chevron: 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='%239aa3b5' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  --pg-ui-select-chevron-muted: 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='%237b8496' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  --pg-ui-icon-check-on-primary: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M3.5 8.5l3 3 6-7' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --pg-ui-chrome-header-shadow: 0 4px 12px rgb(0 0 0 / 0.35);
  --pg-ui-chrome-footer-shadow: 0 -4px 12px rgb(0 0 0 / 0.35);
  --pg-ui-avatar-bg: linear-gradient(135deg, var(--pg-ui-color-primary-soft), var(--pg-ui-color-surface-hover));

  /* ===== MEDIA FRAME (neutral image/logo cradle) ===== */
  --pg-ui-media-frame-bg: #1b2130;
  --pg-ui-media-frame-border: rgba(240, 242, 245, 0.10);

  /* ===== ADMIN CHROME ===== */
  --admin-border-subtle: rgba(240, 242, 245, 0.06);
  --admin-border-light: rgba(240, 242, 245, 0.08);
  --admin-border-medium: rgba(240, 242, 245, 0.10);
  --admin-border-strong: rgba(240, 242, 245, 0.14);
  --admin-border-hover: rgba(240, 242, 245, 0.12);
  --admin-border-accent: rgba(240, 242, 245, 0.16);
  --admin-bg-wash: rgba(240, 242, 245, 0.03);
  --admin-v2-color-brand-gold: #f5a623;
  --admin-v2-color-brand-gold-strong: #d98e00;
  --admin-v2-color-brand-gold-deep: #db930f;
  --admin-v2-color-brand-ink: #f0f2f5;
  --admin-v2-shell-footer-partner-bg: #0a1020;

  /* Closure — bridge legacy skin paint tokens → semantic Admin surfaces */
  --bg-deep: var(--pg-ui-color-bg);
  --bg-surface: var(--pg-ui-color-surface);
  --bg-elevated: var(--pg-ui-color-surface-raised);
  --bg-hover: var(--pg-ui-color-surface-hover);
  --bg-active: var(--pg-ui-color-surface-hover);
  --bg-muted: var(--pg-ui-color-surface-muted);
  --bg-soft: var(--pg-ui-color-surface-muted);
}

/**
 * PAGAYO ADMIN THEME PROFILE — admin-revolutionary (Wave F)
 *
 * Premium black/gold Admin paint. Colour inspiration from historical
 * Revolutionary — NOT a restore of legacy component CSS.
 * Same token names / same Admin components as Light and Dark.
 *
 * Gold is product primary only — never replaces danger/success/warning.
 *
 * Activation: [data-admin-theme-profile="admin-revolutionary"] only.
 */

[data-admin-theme-profile="admin-revolutionary"]:where(:has(body.website-editor-active)) {
  /* ===== SURFACE ===== */
  --pg-ui-color-bg: #0a0a0f;
  --pg-ui-color-surface: #12121a;
  --pg-ui-color-surface-muted: #0e0e14;
  --pg-ui-color-surface-raised: #1a1a24;
  --pg-ui-color-surface-overlay: rgb(18 18 26 / 92%);
  --pg-ui-color-surface-hover: #1e1e2a;
  /* ===== TEXT ===== */
  --pg-ui-color-text: #f0f0f5;
  --pg-ui-color-text-muted: #9b9baf;
  --pg-ui-color-text-soft: #7a7a8c;
  /* On gold primary, inverse must be dark ink for contrast */
  --pg-ui-color-text-inverse: #0a0a0f;
  --pg-ui-color-text-disabled: #6a6a7a;
  /* ===== BRAND / INTERACTION (Pagayo gold primary) ===== */
  --pg-ui-color-primary: #f5a623;
  --pg-ui-color-primary-hover: #ffb84a;
  --pg-ui-color-primary-active: #d98e00;
  --pg-ui-color-primary-soft: #2a2110;
  --pg-ui-color-primary-contrast: #0a0a0f;
  --pg-ui-color-success-border: #2f6f4e;
  /* ===== BORDER / FOCUS ===== */
  --pg-ui-border-subtle: rgba(240, 240, 245, 0.06);
  --pg-ui-border-default: rgba(240, 240, 245, 0.10);
  --pg-ui-border-strong: rgba(240, 240, 245, 0.16);
  --pg-ui-focus-ring: 0 0 0 3px rgba(245, 166, 35, 0.35);
  --pg-ui-button-secondary-text: #d4d4de;
  --pg-ui-counter-bg: #2a2110;
  --pg-ui-label-bg-neutral: #1e1e2a;
  --pg-ui-label-text-neutral: #c8c8d4;
  --pg-ui-label-bg-success: #143226;
  --pg-ui-label-text-success: #6ee7a8;
  --pg-ui-label-bg-warning: #33260f;
  --pg-ui-label-text-warning: #f5c15a;
  --pg-ui-label-bg-info: #13253a;
  --pg-ui-label-text-info: #7db7ff;
  --pg-ui-label-bg-danger: #3a1614;
  --pg-ui-label-text-danger: #f5a09a;
  --pg-ui-label-color: #d4d4de;
  /* ===== STATE (semantic — gold must NOT replace these) ===== */
  --pg-ui-state-loading-bg: #1a1a24;
  --pg-ui-state-saving-bg: #13253a;
  --pg-ui-state-dirty-bg: #33260f;
  --pg-ui-state-saved-bg: #143226;
  --pg-ui-state-setup-bg: #2a2110;
  --pg-ui-state-unavailable-bg: #1a1a24;
  --pg-ui-state-warning-bg: #33260f;
  --pg-ui-state-success-bg: #143226;
  --pg-ui-state-danger-bg: #3a1614;
  --pg-ui-state-information-bg: #13253a;
  --pg-ui-state-saving-text: #7db7ff;
  --pg-ui-state-dirty-text: #f5c15a;
  --pg-ui-state-saved-text: #6ee7a8;
  --pg-ui-state-setup-text: #f5c15a;
  --pg-ui-state-warning-text: #f5c15a;
  --pg-ui-state-success-text: #6ee7a8;
  --pg-ui-state-danger-text: #f5a09a;
  --pg-ui-state-information-text: #7dd3fc;
  /* ===== ELEVATION ===== */
  --pg-ui-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.40);
  --pg-ui-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.50), 0 1px 2px rgba(0, 0, 0, 0.35);
  --pg-ui-shadow-md: 0 4px 8px -2px rgba(0, 0, 0, 0.55), 0 2px 4px -2px rgba(0, 0, 0, 0.40);
  --pg-ui-shadow-lg: 0 12px 24px rgba(0, 0, 0, 0.60);
  --pg-ui-backdrop: rgba(0, 0, 0, 0.60);
  /* Nav roles — gold daily stays brand-adjacent; others stay semantic hues */
  --pg-ui-nav-role-daily: #f5a623;
  --pg-ui-nav-role-order: #f87171;
  --pg-ui-nav-role-return: #fb923c;
  --pg-ui-nav-role-commerce: #7db7ff;
  --pg-ui-nav-role-subscription: #fbbf24;
  --pg-ui-nav-role-content: #c4b5fd;
  --pg-ui-nav-role-insight: #94a3b8;
  --pg-ui-chart-compare-previous: #2e2e3a;
  --pg-ui-select-chevron: 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='%239b9baf' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  --pg-ui-select-chevron-muted: 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='%237a7a8c' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  --pg-ui-icon-check-on-primary: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M3.5 8.5l3 3 6-7' stroke='%230a0a0f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --pg-ui-chrome-header-shadow: 0 4px 12px rgb(0 0 0 / 0.40);
  --pg-ui-chrome-footer-shadow: 0 -4px 12px rgb(0 0 0 / 0.40);
  --pg-ui-avatar-bg: linear-gradient(135deg, var(--pg-ui-color-primary-soft), var(--pg-ui-color-surface-hover));

  /* ===== MEDIA FRAME ===== */
  --pg-ui-media-frame-bg: #1a1a24;
  --pg-ui-media-frame-border: rgba(240, 240, 245, 0.10);

  /* ===== ADMIN CHROME ===== */
  --admin-border-subtle: rgba(240, 240, 245, 0.06);
  --admin-border-light: rgba(240, 240, 245, 0.08);
  --admin-border-medium: rgba(240, 240, 245, 0.10);
  --admin-border-strong: rgba(240, 240, 245, 0.14);
  --admin-border-hover: rgba(240, 240, 245, 0.12);
  --admin-border-accent: rgba(245, 166, 35, 0.35);
  --admin-bg-wash: rgba(245, 166, 35, 0.04);
  --admin-v2-color-brand-gold: #f5a623;
  --admin-v2-color-brand-gold-strong: #d98e00;
  --admin-v2-color-brand-gold-deep: #db930f;
  --admin-v2-color-brand-ink: #f0f0f5;
  --admin-v2-shell-footer-partner-bg: #0a0a0f;

  /* Closure — bridge legacy skin paint tokens → semantic Admin surfaces */
  --bg-deep: var(--pg-ui-color-bg);
  --bg-surface: var(--pg-ui-color-surface);
  --bg-elevated: var(--pg-ui-color-surface-raised);
  --bg-hover: var(--pg-ui-color-surface-hover);
  --bg-active: var(--pg-ui-color-surface-hover);
  --bg-muted: var(--pg-ui-color-surface-muted);
  --bg-soft: var(--pg-ui-color-surface-muted);
}

/**
 * PAGAYO UI FOUNDATION — tenant brand binding
 *
 * Applies to tenant-branded contexts (webshop and other customer-facing surfaces).
 *
 * WHY THIS FILE EXISTS
 * `tokens/pg-ui.css` carries the shared structural language: radius, spacing,
 * control rhythm, typography scale, borders, states and shadows. Those are
 * tenant-neutral and are adopted as-is.
 *
 * The brand group is NOT tenant-neutral. The Pagayo product blue belongs to the
 * admin product surface. On a customer-facing storefront the merchant's own
 * colour must win, otherwise every shop would render in the same blue and the
 * merchant would lose their identity.
 *
 * So: structure is shared, brand stays with the tenant.
 *
 * Custom properties resolve lazily, so binding to `--tenant-accent` here works
 * even though the tenant layer is emitted after the tokens layer.
 *
 * Sinds opdracht 162 leest de winkel zelf tokens/webshop-ui.css (bevroren
 * kopie, inclusief deze binding). Dit bestand voedt alleen nog de
 * website-editor, zolang body.website-editor-active staat (build.js).
 */

:root:where(:has(body.website-editor-active)) {
  /* Brand — merchant identity wins over the Pagayo product blue */
  --pg-ui-color-primary: var(--tenant-accent, var(--accent));
  --pg-ui-color-primary-hover: var(--accent-hover, var(--tenant-accent, var(--accent)));
  --pg-ui-color-primary-soft: var(--accent-subtle, color-mix(in srgb, var(--pg-ui-color-primary) 12%, #ffffff));
  --pg-ui-color-primary-contrast: var(--accent-contrast, #ffffff);

  /* Focus ring derives from the tenant brand instead of the product blue */
  --pg-ui-focus-ring: 0 0 0 3px color-mix(in srgb, var(--pg-ui-color-primary) 22%, transparent);

  /* Typography follows the tenant font choice, not the admin product font */
  --pg-ui-font-family: var(--tenant-font-main, var(--font-sans));

  /*
   * Surfaces and text follow the storefront theme so light/dark and tenant
   * skins keep working. Structural tokens above stay untouched.
   */
  --pg-ui-color-bg: var(--bg-base, #f9fafb);
  --pg-ui-color-app-bg: var(--pg-ui-color-bg);
  --pg-ui-color-surface: var(--bg-surface, #ffffff);
  --pg-ui-color-surface-raised: var(--bg-surface, #ffffff);
  --pg-ui-color-text: var(--text-primary, #101828);
  --pg-ui-color-text-muted: var(--text-secondary, #667085);
}

/* @pagayo-standard end */
/**
 * THEME: fresh
 * Light-first design met blue accent - modern en helder Pagayo theme
 * 
 * Mode: light
 * Build: @pagayo/design 2.17.1
 * 
 * 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;
  --bg-muted: #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);

  /* ===== SEMANTIC ALIASES ===== */
  --surface-primary: #ffffff;
  --surface-secondary: #f6f8fa;
  --surface-tertiary: #edf1f5;
  --surface-hover: #e8ecf2;
  --surface-inset: #f6f8fa;
  --border-subtle: rgb(15 23 42 / 0.15);
  --text-tertiary: rgb(15 23 42 / 0.5);
  --accent-subtle: rgb(37 99 235 / 0.06);

  /* ===== STOREFRONT SEMANTIC COLORS ===== */
  --storefront-canvas: #ffffff;
  --storefront-surface: #f6f8fa;
  --storefront-surface-elevated: #ffffff;
  --storefront-surface-muted: #e8eaf1;
  --storefront-surface-subtle: #e8eaf1;
  --storefront-surface-hover: #e8ecf2;
  --storefront-surface-active: #e8eaf1;
  --storefront-text-primary: #0f172a;
  --storefront-text-secondary: rgb(15 23 42 / 0.75);
  --storefront-text-muted: rgb(15 23 42 / 0.5);
  --storefront-text-disabled: rgb(15 23 42 / 0.35);
  --storefront-text-inverse: #ffffff;
  --storefront-accent: #2563eb;
  --storefront-accent-hover: #004ed1;
  --storefront-accent-active: #004ed1;
  --storefront-accent-subtle: rgb(37 99 235 / 0.06);
  --storefront-accent-contrast: #ffffff;
  --storefront-border: rgb(15 23 42 / 0.15);
  --storefront-border-strong: rgb(15 23 42 / 0.375);
  --storefront-focus-ring: #2563eb;
  --storefront-shadow-color: #0f172a;
  --storefront-overlay: #0f172a;
  --storefront-shadow-sm: 0 1px 2px color-mix(in srgb, #0f172a 18%, transparent);
  --storefront-shadow-md: 0 4px 12px color-mix(in srgb, #0f172a 22%, transparent);
  --storefront-success: #22c55e;
  --storefront-success-subtle: rgb(34 197 94 / 0.1);
  --storefront-warning: #f59e0b;
  --storefront-warning-subtle: rgb(245 158 11 / 0.1);
  --storefront-error: #ef4444;
  --storefront-error-subtle: rgb(239 68 68 / 0.1);
  --storefront-info: #3b82f6;
  --storefront-info-subtle: rgb(59 130 246 / 0.1);

}

/**
 * Admin Appearance UX — cascade-winning legacy paint re-bridge.
 *
 * Skin `tokens/generated/{theme}.css` loads after profiles and resets
 * `:root { --bg-deep / --text-primary / … }`. This file must be the LAST
 * token input so `html[data-admin-theme-profile=…]` (higher specificity
 * than `:root`) restores legacy consumers (Today cards, dashboard, reports)
 * to Admin semantic paint — surfaces AND text/borders.
 */

html[data-admin-theme-profile="admin-light"]:where(:has(body.website-editor-active)),
html[data-admin-theme-profile="admin-dark"]:where(:has(body.website-editor-active)),
html[data-admin-theme-profile="admin-revolutionary"]:where(:has(body.website-editor-active)) {
  --bg-deep: var(--pg-ui-color-bg);
  --bg-surface: var(--pg-ui-color-surface);
  --bg-elevated: var(--pg-ui-color-surface-raised);
  --bg-hover: var(--pg-ui-color-surface-hover);
  --bg-active: var(--pg-ui-color-surface-hover);
  --bg-muted: var(--pg-ui-color-surface-muted);
  --bg-soft: var(--pg-ui-color-surface-muted);
  --background: var(--pg-ui-color-bg);

  --text-primary: var(--pg-ui-color-text);
  --text-secondary: var(--pg-ui-color-text-muted);
  --text-muted: var(--pg-ui-color-text-soft);
  --text-disabled: var(--pg-ui-color-text-disabled);
  --text-tertiary: var(--pg-ui-color-text-soft);

  --border: var(--pg-ui-border-default);
  --border-light: var(--pg-ui-border-subtle);
  --border-strong: var(--pg-ui-border-strong);
  --border-subtle: var(--pg-ui-border-subtle);

  --surface-primary: var(--pg-ui-color-surface);
  --surface-secondary: var(--pg-ui-color-surface-muted);
  --surface-tertiary: var(--pg-ui-color-surface-raised);
  --surface-hover: var(--pg-ui-color-surface-hover);
  --surface-inset: var(--pg-ui-color-surface-muted);

  --accent: var(--pg-ui-color-primary);
  --accent-light: var(--pg-ui-color-primary-hover);
  --accent-dim: var(--pg-ui-color-primary-active);
  --accent-subtle: var(--pg-ui-color-primary-soft);
}


}

@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, success, purchase
 * SIZES: sm, md (default), lg
 * STATES: default, hover, active, disabled, loading
 *
 * AI-NOTE: Storefront primaire koopacties → `btn--purchase` (zie purchase.css).
 * Success blijft voor statusacties, niet voor koop-CTA's.
 */

/* ===== 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--danger: alias voor storefront Button variant="danger" (zelfde als destructive). */
.btn--danger,
.btn--destructive {
  background: var(--error);
  color: var(--admin-v2-color-text-inverse);
  border-color: var(--error);
}

.btn--danger:hover:not(:disabled),
.btn--destructive:hover:not(:disabled) {
  background: var(--error-light);
  border-color: var(--error-light);
  box-shadow: 0 0 10px color-mix(in srgb, var(--admin-v2-state-danger-text) 25%, transparent);
}

.btn--danger:active:not(:disabled),
.btn--destructive:active:not(:disabled) {
  background: var(--admin-v2-state-danger-text);
  border-color: var(--admin-v2-state-danger-text);
  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: color-mix(in srgb, var(--admin-v2-state-danger-text) 20%, transparent);
  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/purchase.css */
/**
 * COMPONENT: Button - Purchase
 * Gedeelde storefront-koop-CTA (card, PDP, cart, checkout)
 *
 * AI-NOTE: Storefront primaire koopacties gebruiken uitsluitend `btn--purchase`.
 * Kleur volgt tenant-accent (thema), niet success-groen en niet page/bundle overrides.
 * Success blijft voor echte statusacties (bevestigd, toegepast), niet voor koop-CTA's.
 * Min-hoogte 46px is het gedeelde koopcontract; layout-CSS mag breedte zetten, niet paint.
 */

.btn--purchase {
  height: auto;
  min-block-size: 46px;
  min-inline-size: 0;
  padding: var(--space-2) var(--space-4);
  gap: var(--space-2);
  border-radius: var(--radius-md);
  font-family: var(--tenant-font-main, var(--font-sans));
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  line-height: 1.25;
  white-space: normal;
  overflow-wrap: anywhere;
  background: var(--tenant-accent, var(--accent));
  border-color: var(--tenant-accent, var(--accent));
  color: var(--btn-primary-fg, var(--bg-deep));
  box-shadow: none;
  transform: none;
  filter: none;
}

@media (hover: hover) and (pointer: fine) {
  .btn--purchase:hover:not(:disabled):not([aria-disabled="true"]) {
    background: var(--tenant-accent-hover,
      var(--accent-hover, var(--tenant-accent-light, var(--accent-light))));
    border-color: var(--tenant-accent-hover,
      var(--accent-hover, var(--tenant-accent-light, var(--accent-light))));
    box-shadow: var(--shadow-glow-sm);
  }
}

.btn--purchase:active:not(:disabled):not([aria-disabled="true"]) {
  background: var(--tenant-accent-dim, var(--accent-dim));
  border-color: var(--tenant-accent-dim, var(--accent-dim));
  transform: scale(0.98);
}

.btn--purchase:focus-visible {
  outline: 2px solid var(--tenant-accent, var(--accent));
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .btn--purchase {
    transition: none;
  }

  .btn--purchase:active:not(:disabled) {
    transform: none;
  }
}

/* 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 status/bevestigingsbutton
 *
 * AI-NOTE: Success is voor echte statusacties (bevestigd, toegepast, geslaagd).
 * Storefront-koop-CTA's (card, PDP, cart, checkout) gebruiken `btn--purchase`, niet success.
 * 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-hover, var(--success-light, var(--success)));
  border-color: var(--success-hover, var(--success-light, var(--success)));
  box-shadow: 0 0 16px color-mix(in srgb, var(--admin-v2-state-success-text, var(--success)) 25%, transparent);
}

.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: var(--admin-v2-color-text);
  border-color: var(--warning);
}

.btn--warning:hover:not(:disabled) {
  background: var(--admin-v2-state-warning-text);
  border-color: var(--admin-v2-state-warning-text);
  box-shadow: 0 0 10px color-mix(in srgb, var(--admin-v2-state-warning-text) 25%, transparent);
}

.btn--warning:active:not(:disabled) {
  background: var(--admin-v2-state-warning-text);
  border-color: var(--admin-v2-state-warning-text);
  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(--admin-v2-color-surface, var(--pg-ui-color-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(--admin-v2-color-surface, var(--pg-ui-color-surface));
  border: 1px solid var(--border-light);
  box-shadow: none;
}

.card--bordered.card--interactive:hover {
  border-color: var(--border-strong);
  background: var(--admin-v2-color-surface-hover, var(--pg-ui-color-surface-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 */
/* theme-literal-exception: glass-effect-recipe — Wave B allowed identity/preview/effect literals */
/**
 * 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: var(--admin-v2-color-text-inverse);
  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);
  margin-bottom: 0.625rem;
}

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

/* ===== INPUT BASE (SSoT — alle form inputs) ===== */
.form-input {
  width: 100%;
  height: auto;
  padding: 0.75rem 1.25rem;
  
  font-family: var(--tenant-font-main, var(--font-sans));
  font-size: var(--text-sm-plus);
  font-weight: var(--font-medium);
  color: var(--text-primary);
  
  background: var(--bg-surface);
  border: 1.5px solid var(--border);
  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-surface) inset !important;
  -webkit-text-fill-color: var(--text-primary) !important;
  transition: background-color 5000s ease-in-out 0s;
}

/* ===== 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: var(--admin-v2-select-chevron);
  background-repeat: no-repeat;
  background-position: right var(--space-3) center;
  padding-left: var(--control-padding-md);
  padding-right: var(--space-10);
  cursor: pointer;
}

/* Select fill stays white; golden border marks dropdown affordance (no tinted fill). */
.form-select {
  background-color: var(--admin-v2-color-text-inverse);
  border-color: color-mix(in srgb, var(--admin-v2-color-brand-gold) 35%, transparent);
}

.form-select:hover:not(:disabled):not(:focus) {
  border-color: color-mix(in srgb, var(--admin-v2-color-brand-gold) 55%, transparent);
}

.form-select:focus {
  background-color: var(--admin-v2-color-text-inverse);
}

/* ===== STATES ===== */
.form-input:disabled,
.form-input[readonly],
.form-select:disabled {
  opacity: 1;
  cursor: not-allowed;
  background: var(
    --admin-v2-input-bg-disabled,
    var(--admin-v2-color-surface-muted)
  );
  color: var(--admin-v2-color-text, var(--text-primary));
}

.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/_workspace-field.css */
/**
 * Workspace-style form controls (admin Products editor SSoT).
 *
 * Bundled in all contexts (admin + webshop). Admin markup may still use
 * `.products-workspace-field`; storefront facet filters use `.form-field-workspace`.
 *
 * Theme-pure: fills/chevrons via --admin-v2-* / --pg-ui-* only (Wave B).
 */

.form-field-workspace.form-input,
.form-field-workspace.form-select,
.form-input.products-workspace-field:not(.products-workspace-field--color):not(.products-workspace-search-field__input),
.form-select.products-workspace-field {
  width: 100%;
  box-sizing: border-box;
  min-height: var(--admin-control-field, 36px) !important;
  height: var(--admin-control-field, 36px);
  max-height: var(--admin-control-field, 36px);
  padding: 0 var(--admin-control-inline-padding, 12px) !important;
  border: 1.5px solid var(--admin-v2-border-strong, var(--admin-border-strong)) !important;
  border-radius: var(--admin-radius-control, var(--radius-md)) !important;
  background-color: var(--admin-v2-input-bg) !important;
  font-size: var(--admin-v2-field-control-font-size, var(--admin-workspace-detail-font, var(--text-sm))) !important;
  line-height: var(--admin-control-field, 36px);
  font-weight: var(--font-medium);
  box-shadow: none;
  color: var(--admin-v2-input-text, var(--admin-v2-color-text));
}

/* Dense workspace cells: hide native number steppers (square chrome clashes with control radius). */
.form-field-workspace.form-input[type='number'],
.form-input.products-workspace-field[type='number'] {
  appearance: textfield;
  -moz-appearance: textfield;
  font-variant-numeric: tabular-nums;
}

.form-field-workspace.form-input[type='number']::-webkit-outer-spin-button,
.form-field-workspace.form-input[type='number']::-webkit-inner-spin-button,
.form-input.products-workspace-field[type='number']::-webkit-outer-spin-button,
.form-input.products-workspace-field[type='number']::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.form-field-workspace.form-select,
.form-select.products-workspace-field {
  appearance: none;
  background-color: var(--admin-v2-input-bg) !important;
  padding-right: calc(var(--control-padding-md) + var(--space-6)) !important;
  background-image: var(--admin-v2-select-chevron);
  background-repeat: no-repeat;
  background-position: right var(--control-padding-md) center;
  cursor: pointer;
}

.form-field-workspace.form-select:hover:not(:disabled):not(:focus),
.form-field-workspace.form-select:focus,
.form-select.products-workspace-field:hover:not(:disabled):not(:focus),
.form-select.products-workspace-field:focus {
  border-color: var(--admin-v2-input-border-focus, var(--admin-v2-color-primary)) !important;
  background-color: var(--admin-v2-input-bg) !important;
  background-image: var(--admin-v2-select-chevron);
  box-shadow: var(--admin-v2-focus-ring);
}

/*
 * Role: admin disabled / read-only text controls — muted surface (SSoT).
 * Must beat the input fill above so unusable fields read as unusable.
 */
.form-field-workspace.form-input:disabled,
.form-field-workspace.form-input[readonly],
.form-field-workspace.form-select:disabled,
.form-input.products-workspace-field:disabled,
.form-input.products-workspace-field[readonly],
.form-select.products-workspace-field:disabled {
  background-color: var(--admin-v2-input-disabled-bg) !important;
  color: var(--admin-v2-input-disabled-text, var(--admin-v2-color-text-disabled));
  opacity: 1;
  cursor: not-allowed;
}

.form-field-workspace.form-select:disabled {
  background-image: var(--admin-v2-select-chevron-muted);
}

.form-field-workspace-label,
.products-editor-label {
  display: block;
  font-size: var(--admin-field-label-font-size, var(--admin-font-size-label, var(--text-sm)));
  font-weight: var(--admin-field-label-font-weight, var(--font-medium));
  color: var(--admin-v2-color-text);
  letter-spacing: 0;
  margin: 0 0 0.625rem;
}

/* 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.
 * Checked chrome = solid primary + white check.
 * Disabled checked = light border + muted gray check (not faded blue).
 */

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

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

.form-checkbox__box {
  width: var(--form-control-checkbox-size);
  min-width: var(--form-control-checkbox-size);
  height: var(--form-control-checkbox-size);
  border: var(--form-control-checkbox-border-width) solid var(--form-control-checkbox-border);
  border-radius: var(--form-control-checkbox-radius);
  background: var(--form-control-checkbox-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition:
    background-color var(--transition-fast),
    border-color var(--transition-fast);
}

.form-checkbox__box::after {
  content: "";
  width: var(--form-control-checkbox-check-size);
  height: var(--form-control-checkbox-check-size);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  opacity: 0;
  transform: scale(0.5);
  transition:
    opacity var(--transition-fast),
    transform var(--transition-fast);
}

/* Checked state — solid primary + white check */
.form-checkbox__input:checked + .form-checkbox__box {
  background: var(--form-control-checkbox-checked-bg);
  border-color: var(--form-control-checkbox-checked-bg);
}

.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(--form-control-checkbox-checked-bg);
  outline-offset: 2px;
}

/* Disabled — muted chrome, not opacity-fade of primary */
.form-checkbox__input:disabled + .form-checkbox__box {
  cursor: not-allowed;
  background: var(--form-control-checkbox-bg);
  border-color: var(--form-control-checkbox-border);
}

.form-checkbox__input:disabled:checked + .form-checkbox__box {
  background: var(--form-control-checkbox-bg);
  border-color: var(--form-control-checkbox-border);
}

.form-checkbox__input:disabled:checked + .form-checkbox__box::after {
  opacity: 1;
  transform: scale(1);
  background-image: var(--admin-v2-select-chevron);
}

.form-checkbox__input:disabled ~ .form-checkbox__label,
.form-checkbox:has(.form-checkbox__input:disabled) .form-checkbox__label {
  color: var(--admin-v2-color-text-muted, var(--admin-v2-color-text-muted));
  cursor: not-allowed;
}

.form-checkbox__label {
  font-size: var(--form-control-checkbox-label-font-size);
  font-weight: var(--form-control-checkbox-label-font-weight);
  line-height: var(--form-control-checkbox-label-line-height);
  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;
}

/* Inline radio row (Website Editor / settings) — same rhythm as horizontal group */
.form-radio--inline {
  display: inline-flex;
  align-items: flex-start;
  gap: var(--space-2);
}

/* ===== 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);
}

/*
 * Native checkbox used as <input type="checkbox" class="form-checkbox">
 * (workspace chips / category rows). Distinct from label.form-checkbox custom pattern.
 */
input[type="checkbox"].form-checkbox {
  appearance: none;
  -webkit-appearance: none;
  display: inline-block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: var(--form-control-checkbox-size);
  min-width: var(--form-control-checkbox-size);
  height: var(--form-control-checkbox-size);
  margin: 0;
  padding: 0;
  border: var(--form-control-checkbox-border-width) solid var(--form-control-checkbox-border);
  border-radius: var(--form-control-checkbox-radius);
  background-color: var(--form-control-checkbox-bg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: var(--form-control-checkbox-check-size) var(--form-control-checkbox-check-size);
  cursor: pointer;
  vertical-align: middle;
  transition:
    background-color var(--transition-fast),
    border-color var(--transition-fast);
}

input[type="checkbox"].form-checkbox:checked {
  background-color: var(--form-control-checkbox-checked-bg);
  border-color: var(--form-control-checkbox-checked-bg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
}

input[type="checkbox"].form-checkbox:focus-visible {
  outline: 2px solid var(--form-control-checkbox-checked-bg);
  outline-offset: 2px;
}

input[type="checkbox"].form-checkbox:disabled {
  cursor: not-allowed;
  background-color: var(--form-control-checkbox-bg);
  border-color: var(--form-control-checkbox-border);
  opacity: 1;
}

input[type="checkbox"].form-checkbox:disabled:checked {
  background-color: var(--form-control-checkbox-bg);
  border-color: var(--form-control-checkbox-border);
  background-image: var(--admin-v2-select-chevron);
}

/* 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-muted, 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(--bg-deep, var(--admin-v2-color-surface));
  border-radius: var(--radius-full);
  box-shadow: var(--admin-v2-shadow-sm);
  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, var(--admin-v2-color-surface));
}

/* 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 */
/* theme-literal-exception: spinner-animation — Wave B allowed identity/preview/effect literals */
/**
 * 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(calc(-100% * var(--dir-sign, 1)));
  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 (markup SSoT in storefront):
 *   PagayoAdminWordmark — pagayo-storefront/src/client/components/common/PagayoAdminWordmark.tsx
 *   Zie ook DESIGN.md + ADMIN-UI-SOURCE-OF-TRUTH.md (brand wordmark).
 *
 * <nav class="main-nav">
 *   <a class="main-nav__logo"> … logo-p / logo-dot … </a>
 * </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);
  --main-nav-height: 56px;
  height: var(--main-nav-height);
  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-color: var(--admin-v2-backdrop);
  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;
  inset-inline-start: 0;
  bottom: 0;
  width: min(320px, 85vw);
  display: flex;
  flex-direction: column;
  background: var(--surface-primary);
  transform: translateX(calc(-100% * var(--dir-sign, 1)));
  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-inline-end: 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-color: var(--admin-v2-backdrop);
  z-index: var(--z-overlay);
}

@media (max-width: 1023px) {
  .sidebar {
    position: fixed;
    inset-inline-start: 0;
    top: 0;
    z-index: var(--z-modal);
    transform: translateX(calc(-100% * var(--dir-sign, 1)));
  }
  
  .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-color: var(--admin-v2-backdrop);
  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--xl {
  width: 92%;
  max-width: 1600px;
}

.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: 40px;
  height: 40px;
  display: flex;
  flex: 0 0 40px;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid var(--border-subtle, var(--border));
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  background: var(--admin-v2-color-surface-muted);
  cursor: pointer;
  transition: 
    background-color var(--transition-fast),
    border-color var(--transition-fast),
    color var(--transition-fast);
}

.modal__close:hover {
  background: var(--admin-v2-color-surface-hover);
  border-color: color-mix(in srgb, var(--text-secondary) 28%, var(--border));
  color: var(--text-primary);
}

.modal__close:focus-visible {
  outline: 2px solid var(--admin-v2-color-primary);
  outline-offset: 2px;
}

.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;
}

.modal__footer-secondary,
.modal__footer-primary {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

/* ===== 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-color: var(--admin-v2-backdrop);
  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-color: var(--admin-v2-backdrop);
  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-color: var(--admin-v2-backdrop);
  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 */
/* theme-literal-exception: external-oauth-brand — Wave B allowed identity/preview/effect literals */
/**
 * 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);
}


/* ===== Component: guided-choice ===== */
/* guided-choice/_base.css */
/**
 * COMPONENT: Guided Choice - Base
 * Wizard-style choice helper for storefront and admin surfaces.
 *
 * AI-NOTE: Keuzehulpen — step-by-step option selection with ranked results.
 * Uses semantic tokens only; no tenant/branch-specific styling.
 *
 * ELEMENTS: progress, step, options, result cards, matrix, warning
 * STATES: default, selected, best-match, alternate, no-match
 */

/* ===== ROOT ===== */
.pg-guided-choice {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  width: 100%;
  color: var(--text-primary);
  font-family: var(--font-sans);
}

.pg-guided-choice--experience,
.pg-guided-choice--index {
  max-width: 64rem;
  margin: 0 auto;
  padding: var(--space-8) var(--space-4);
}

.pg-guided-choice__hero {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  max-width: 42rem;
}

.pg-guided-choice__eyebrow {
  color: var(--accent);
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.pg-guided-choice__title {
  margin: 0;
  color: var(--text-primary);
  font-size: var(--text-3xl);
  font-weight: var(--font-bold);
  line-height: var(--leading-tight);
}

.pg-guided-choice__lead {
  margin: 0;
  color: var(--text-secondary);
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
}

.pg-guided-choice__navigation {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.pg-guided-choice__index-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: var(--space-4);
}

.pg-guided-choice__index-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: 5rem;
  padding: var(--space-5);
  color: var(--text-primary);
  font-weight: var(--font-semibold);
  text-decoration: none;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
}

.pg-guided-choice__index-card:hover {
  border-color: var(--accent);
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

/* ===== PROGRESS ===== */
.pg-guided-choice__progress {
  --pg-guided-choice-progress: 0%;
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
}

.pg-guided-choice__progress:not(:has(.pg-guided-choice__steps))::before {
  content: "";
  flex: 1;
  height: 4px;
  border-radius: var(--radius-full);
  background: var(--border);
}

.pg-guided-choice__progress-bar {
  position: absolute;
  left: 0;
  height: 4px;
  width: var(--pg-guided-choice-progress);
  border-radius: var(--radius-full);
  background: var(--accent);
  transition: width var(--transition-normal);
}

.pg-guided-choice__steps {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.pg-guided-choice__steps::before {
  content: "";
  position: absolute;
  top: 50%;
  right: 0.875rem;
  left: 0.875rem;
  z-index: 0;
  height: 2px;
  background: var(--border);
  transform: translateY(-50%);
}

.pg-guided-choice__step-dot {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: var(--radius-full);
  border: 1.5px solid var(--accent);
  color: var(--accent);
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  background: var(--bg-surface);
}

.pg-guided-choice__step-dot--current {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--text-on-accent, var(--admin-v2-color-surface));
}

.pg-guided-choice__step-dot--done {
  border-color: var(--accent);
  color: var(--accent);
}

.pg-guided-choice__progress-label {
  flex-shrink: 0;
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  color: var(--text-muted);
  white-space: nowrap;
}

/* ===== STEP ===== */
.pg-guided-choice__step {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-5);
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}

.pg-guided-choice__step-title {
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  margin: 0;
}

.pg-guided-choice__step-title:focus {
  outline: none;
}

.pg-guided-choice__step-title:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.pg-guided-choice__step-image {
  display: block;
  width: 100%;
  max-width: 32rem;
  height: auto;
  border-radius: var(--radius-md);
  object-fit: contain;
}

.pg-guided-choice__step-description {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  margin: 0;
  line-height: var(--leading-normal);
}

/* ===== OPTIONS ===== */
.pg-guided-choice__options {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.pg-guided-choice__option {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  padding: var(--space-3);
  background: var(--bg-surface);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-lg);
  cursor: pointer;
  text-align: left;
  color: var(--text-primary);
  transition:
    border-color var(--transition-fast),
    box-shadow var(--transition-fast),
    transform var(--transition-fast),
    background-color var(--transition-fast);
}

.pg-guided-choice__option-thumb {
  display: block;
  flex-shrink: 0;
  width: 4.5rem;
  height: 3.5rem;
  overflow: hidden;
  background: var(--bg-hover);
  border-radius: var(--radius-md);
}

.pg-guided-choice__option-thumb--empty {
  background:
    linear-gradient(135deg, var(--bg-hover) 0%, var(--border) 100%);
}

.pg-guided-choice__option-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pg-guided-choice__option-copy {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
}

.pg-guided-choice__option-check {
  display: grid;
  flex-shrink: 0;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  margin-left: auto;
  color: var(--admin-v2-color-text-inverse);
  background: var(--accent);
  border-radius: var(--radius-full);
}

.pg-guided-choice__option:hover {
  border-color: var(--border-strong);
  background: var(--bg-hover);
}

.pg-guided-choice__option:disabled {
  cursor: wait;
  opacity: 0.72;
}

.pg-guided-choice__option:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.pg-guided-choice__option:active {
  transform: scale(0.995);
}

.pg-guided-choice__option--selected {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent);
  background: var(--accent-glow);
}

.pg-guided-choice__option-label {
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
}

.pg-guided-choice__option-description {
  font-size: var(--text-xs);
  color: var(--text-secondary);
  line-height: var(--leading-normal);
}

/* ===== RESULT GRID ===== */
.pg-guided-choice__result-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--space-4);
}

.pg-guided-choice--results .pg-guided-choice__result-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.pg-guided-choice__results-stage {
  min-width: 0;
}

.pg-guided-choice--immersive.pg-guided-choice--results .pg-guided-choice__results-stage {
  position: relative;
  z-index: 1;
  grid-column: 2;
  align-self: start;
  padding-top: calc(var(--space-4) + 2.25rem + var(--space-4));
  padding-inline: var(--space-2);
}

.pg-guided-choice--immersive.pg-guided-choice--results.pg-guided-choice--panel-right
  .pg-guided-choice__results-stage {
  grid-column: 1;
}

.pg-guided-choice--results .pg-guided-choice__result-card {
  min-width: 0;
  box-shadow: var(--shadow-md, var(--shadow-sm));
}

/* ===== RESULT CARD ===== */
.pg-guided-choice__result-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-4);
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  transition:
    border-color var(--transition-normal),
    box-shadow var(--transition-normal);
}

.pg-guided-choice__result-card--best {
  border-color: var(--success);
  box-shadow: 0 0 0 1px var(--success);
}

.pg-guided-choice__result-card--alt {
  border-color: var(--border-strong);
  opacity: 0.95;
}

.pg-guided-choice__result-card-title {
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  margin: 0;
}

.pg-guided-choice__result-card-meta {
  font-size: var(--text-xs);
  color: var(--text-muted);
}

/* ===== REASONS ===== */
.pg-guided-choice__reasons {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.pg-guided-choice__reasons li {
  position: relative;
  padding-left: var(--space-5);
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: var(--leading-normal);
}

.pg-guided-choice__reasons li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.45em;
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  background: var(--success);
}

.pg-guided-choice__result-card--alt .pg-guided-choice__reasons li::before {
  background: var(--text-muted);
}

/* ===== TRADEOFF ===== */
.pg-guided-choice__tradeoff {
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-sm);
  color: var(--text-secondary);
  background: var(--bg-hover);
  border-left: 3px solid var(--border-strong);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  line-height: var(--leading-normal);
}

.pg-guided-choice__tradeoff-label {
  display: block;
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: var(--space-1);
}

/* ===== NO MATCH ===== */
.pg-guided-choice__no-match {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-8) var(--space-4);
  text-align: center;
  background: var(--bg-surface);
  border: 1px dashed var(--border);
  border-radius: var(--radius-lg);
}

.pg-guided-choice__no-match-title {
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  margin: 0;
}

.pg-guided-choice__no-match-message {
  font-size: var(--text-sm);
  color: var(--text-muted);
  max-width: 36ch;
  margin: 0;
  line-height: var(--leading-normal);
}

/* ===== MATRIX (admin decision matrix) ===== */
.pg-guided-choice__matrix {
  width: 100%;
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg-surface);
}

.pg-guided-choice__matrix table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}

.pg-guided-choice__matrix th {
  padding: var(--space-3) var(--space-4);
  text-align: left;
  font-weight: var(--font-medium);
  color: var(--text-muted);
  background: var(--bg-hover);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}

.pg-guided-choice__matrix td {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border);
  color: var(--text-primary);
  vertical-align: middle;
}

.pg-guided-choice__matrix tbody tr:last-child td {
  border-bottom: none;
}

.pg-guided-choice__matrix tbody tr:hover {
  background: var(--bg-hover);
}

.pg-guided-choice__matrix-cell--match {
  color: var(--success);
  font-weight: var(--font-medium);
}

.pg-guided-choice__matrix-cell--miss {
  color: var(--text-muted);
}

/* ===== WARNING ===== */
.pg-guided-choice__warning {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--warning);
  background: var(--warning-dim);
  border: 1px solid var(--warning);
  border-radius: var(--radius-md);
}

.pg-guided-choice__warning-icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin-top: 1px;
}

.pg-guided-choice__warning-content {
  flex: 1;
  min-width: 0;
}

.pg-guided-choice__warning-title {
  font-weight: var(--font-semibold);
  margin-bottom: var(--space-1);
}

/* ===== IMMERSIVE SHELL ===== */
body[data-page-type="guided-choice"] #header-mount,
body[data-page-type="guided-choice"] #footer-mount,
body[data-page-type="guided-choice"] #cart-drawer-mount {
  display: none !important;
}

.pg-guided-choice--immersive {
  position: relative;
  display: grid;
  grid-template-columns: minmax(20rem, 32rem) 1fr;
  align-items: start;
  max-width: none;
  min-height: 100dvh;
  margin: 0;
  padding: var(--space-6);
  isolation: isolate;
  background: var(--bg);
}

.pg-guided-choice--panel-right {
  grid-template-columns: 1fr minmax(20rem, 32rem);
}

.pg-guided-choice--panel-right .pg-guided-choice__panel {
  grid-column: 2;
}

.pg-guided-choice__atmosphere {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pg-guided-choice--crop-top .pg-guided-choice__atmosphere {
  object-position: center top;
}

.pg-guided-choice--crop-center .pg-guided-choice__atmosphere {
  object-position: center;
}

.pg-guided-choice__chrome {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(20rem, 32rem) 1fr;
  align-items: start;
  padding: var(--space-4);
  pointer-events: none;
}

.pg-guided-choice--panel-right .pg-guided-choice__chrome {
  grid-template-columns: 1fr minmax(20rem, 32rem);
}

.pg-guided-choice__atmosphere-chrome {
  display: flex;
  grid-column: 2;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-width: 0;
}

.pg-guided-choice--panel-right .pg-guided-choice__atmosphere-chrome {
  grid-column: 1;
}

.pg-guided-choice__brand {
  display: inline-flex;
  align-items: center;
  max-width: 12rem;
  color: var(--text-on-accent, var(--admin-v2-color-surface));
  font-weight: var(--font-semibold);
  text-decoration: none;
  pointer-events: auto;
  text-shadow: 0 1px 2px color-mix(in srgb, var(--admin-v2-color-text) 45%, transparent);
}

.pg-guided-choice__brand img {
  display: block;
  max-width: 8rem;
  max-height: 2rem;
  object-fit: contain;
}

.pg-guided-choice__close {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  margin-left: auto;
  color: var(--text-primary);
  background: var(--bg-surface);
  border-radius: var(--radius-full);
  text-decoration: none;
  pointer-events: auto;
}

.pg-guided-choice__panel {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  min-height: calc(100dvh - (var(--space-6) * 2));
  max-width: 32rem;
  padding: var(--space-8);
  background: var(--bg-surface);
  border-radius: var(--radius-xl, var(--radius-lg));
  box-shadow: var(--shadow-lg, var(--shadow-md));
}

.pg-guided-choice--immersive .pg-guided-choice__hero {
  max-width: none;
}

.pg-guided-choice--immersive .pg-guided-choice__title {
  font-size: var(--text-4xl, var(--text-3xl));
}

.pg-guided-choice--immersive .pg-guided-choice__step {
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
}

.pg-guided-choice__back {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 0;
  color: var(--accent);
  font: inherit;
  font-weight: var(--font-medium);
  background: none;
  border: 0;
  text-decoration: none;
  cursor: pointer;
}

.pg-guided-choice__back:disabled {
  cursor: wait;
  opacity: 0.6;
}

.pg-guided-choice__next {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.pg-guided-choice__trust {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  margin: 0;
  color: var(--text-muted);
  font-size: var(--text-xs);
  text-align: center;
}

.pg-guided-choice__results {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.pg-guided-choice__result-card--best {
  padding: var(--space-5);
}

.pg-guided-choice__why-title {
  margin: 0 0 var(--space-2);
  color: var(--text-primary);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
}

/* ===== REDUCED MOTION ===== */
@media (prefers-reduced-motion: reduce) {
  .pg-guided-choice__option,
  .pg-guided-choice__result-card,
  .pg-guided-choice__progress-bar {
    transition: none;
  }

  .pg-guided-choice__option:active {
    transform: none;
  }
}

@media (max-width: 47.99rem) {
  .pg-guided-choice--experience,
  .pg-guided-choice--index {
    padding: var(--space-5) var(--space-3);
  }

  .pg-guided-choice--immersive {
    display: flex;
    flex-direction: column;
    padding: 0;
  }

  .pg-guided-choice--immersive .pg-guided-choice__atmosphere {
    position: relative;
    height: 10rem;
    flex-shrink: 0;
  }

  .pg-guided-choice--immersive .pg-guided-choice__chrome {
    display: flex;
    inset: 0 0 auto 0;
    height: 10rem;
    padding: var(--space-3) var(--space-4);
  }

  .pg-guided-choice--immersive .pg-guided-choice__atmosphere-chrome {
    display: flex;
    flex: 1 1 auto;
    grid-column: auto;
    width: 100%;
  }

  .pg-guided-choice--immersive .pg-guided-choice__panel {
    max-width: none;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    margin-top: -1.25rem;
  }

  .pg-guided-choice--immersive.pg-guided-choice--results .pg-guided-choice__panel {
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  }

  .pg-guided-choice--immersive.pg-guided-choice--results .pg-guided-choice__results-stage {
    grid-column: auto;
    padding: 0 var(--space-3) var(--space-5);
    margin-top: 0;
    background: var(--bg-surface);
  }

  .pg-guided-choice__title {
    font-size: var(--text-2xl);
  }

  .pg-guided-choice__options,
  .pg-guided-choice__result-grid,
  .pg-guided-choice--results .pg-guided-choice__result-grid,
  .pg-guided-choice__index-grid {
    grid-template-columns: 1fr;
  }

  .pg-guided-choice__result-card .btn--primary {
    position: sticky;
    bottom: var(--space-3);
    width: 100%;
  }
}



}

@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
 * - hero-slider.css - homepage hero carousel
 * - sections.css - generic sections
 * - website-editor.css - storefront-native website editor chrome
 * - usp.css - USP bar
 * - banners.css - promotional banners
 * - category-showcase.css - catalog-fed category tiles
 * - category-showcase.css - catalog-fed category tiles
 * - content-split.css - side-by-side image + text sections
 * - 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
   ================================================================= */

body[data-page-type]:not([data-page-type="admin"]):not([data-page-type^="admin-"]) {
  font-family: var(--tenant-font-main, var(--font-sans));
}

body[data-page-type]:not([data-page-type="admin"]):not([data-page-type^="admin-"])
  :is(h1, h2, h3, h4, h5, h6, .hero-title, .page-title, .section-title) {
  font-family: var(--tenant-font-heading, var(--tenant-font-main, var(--font-sans)));
}

.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;
}

.container.block-content-align-left {
  margin-inline: 0 auto;
}

.container.block-content-align-center {
  margin-inline: auto;
}

.container.block-content-align-right {
  margin-inline: auto 0;
}

/* =================================================================
   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);
  }
}

/* age-gate.css */
/* ==========================================================================
   Age Gate (18+) — Webshop centered dialog (TailAdmin modal golden lane)
   CSS: pagayo-design/src/contexts/webshop/age-gate.css

   Markup: AgeGateModal (storefront). Must sit above cart-drawer (9998).
   Optional merchant overrides via --age-gate-* CSS variables on .age-gate-overlay.
   ========================================================================== */

.age-gate-overlay {
  position: fixed;
  inset: 0;
  /* Keep above website-editor chrome (z ~1300–1600) and cart drawer. */
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
  background: var(--age-gate-overlay-bg, rgba(15, 23, 42, 0.45));
  backdrop-filter: blur(var(--age-gate-overlay-blur, 8px));
  -webkit-backdrop-filter: blur(var(--age-gate-overlay-blur, 8px));
  box-sizing: border-box;
}

.age-gate-card {
  width: 100%;
  max-width: 28rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-10, 2.5rem) var(--space-8, 2rem);
  background: var(--age-gate-card-bg, var(--surface-primary, #fff));
  color: var(--age-gate-title-color, var(--text-primary));
  border-radius: var(--age-gate-card-radius, var(--radius-2xl));
  box-shadow:
    0 20px 40px -12px rgba(15, 23, 42, 0.18),
    0 8px 16px -8px rgba(15, 23, 42, 0.08);
  text-align: center;
  box-sizing: border-box;
}

.age-gate-card--declined {
  box-shadow:
    0 20px 40px -12px rgba(15, 23, 42, 0.18),
    0 0 0 1px color-mix(in srgb, var(--error, #c62828) 35%, transparent);
}

/* Compact age mark — not a hero stamp; sits above the title */
.age-gate-badge {
  display: inline-flex;
  align-items: baseline;
  justify-content: center;
  gap: 0.05em;
  margin-bottom: var(--space-1);
  padding: 0.35rem 0.85rem;
  border-radius: var(--radius-full);
  background: var(
    --age-gate-badge-bg,
    color-mix(in srgb, var(--tenant-accent, var(--accent)) 12%, transparent)
  );
  color: var(--age-gate-badge-color, var(--tenant-accent, var(--accent)));
  line-height: 1;
  box-sizing: border-box;
}

.age-gate-badge__age {
  font-family: var(--tenant-font-heading, var(--tenant-font-main, var(--font-sans)));
  font-size: var(--text-base, 1rem);
  font-weight: var(--font-bold, 700);
  letter-spacing: -0.02em;
}

.age-gate-badge__plus {
  font-family: var(--tenant-font-heading, var(--tenant-font-main, var(--font-sans)));
  font-size: var(--text-sm, 0.875rem);
  font-weight: var(--font-bold, 700);
}

.age-gate-brand {
  margin: 0;
  font-family: var(--tenant-font-heading, var(--tenant-font-main, var(--font-sans)));
  font-size: var(--text-2xl, 1.5rem);
  font-weight: var(--font-bold, 700);
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: var(--age-gate-title-color, var(--text-primary));
}

.age-gate-question {
  margin: 0;
  max-width: 22rem;
  font-size: var(--text-sm, 0.875rem);
  font-weight: var(--font-normal, 400);
  line-height: 1.6;
  color: var(--age-gate-body-color, var(--text-secondary, var(--text-muted, #667085)));
}

.age-gate-question--solo {
  font-family: var(--tenant-font-heading, var(--tenant-font-main, var(--font-sans)));
  font-size: var(--text-2xl, 1.5rem);
  font-weight: var(--font-bold, 700);
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: var(--age-gate-title-color, var(--text-primary));
}

.age-gate-actions-row {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  justify-content: center;
  gap: var(--space-3);
  width: 100%;
  margin-top: var(--space-5, 1.25rem);
}

.age-gate-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 1 1 0;
  min-height: 2.75rem;
  padding: 0 var(--space-5);
  border-radius: var(--radius-lg);
  border: 1px solid transparent;
  font-family: var(--tenant-font-main, var(--font-sans));
  font-size: var(--text-sm, 0.875rem);
  font-weight: var(--font-medium, 500);
  line-height: 1;
  cursor: pointer;
  transition:
    background-color var(--transition-fast, 0.15s ease),
    border-color var(--transition-fast, 0.15s ease),
    color var(--transition-fast, 0.15s ease),
    box-shadow var(--transition-fast, 0.15s ease);
}

.age-gate-btn--secondary {
  background: var(--age-gate-btn-secondary-bg, var(--surface-primary, #fff));
  color: var(--age-gate-btn-secondary-color, var(--text-primary));
  border-color: var(
    --age-gate-btn-secondary-border,
    var(--border, var(--border-light, #d0d5dd))
  );
}

.age-gate-btn--secondary:hover {
  background: var(--bg-hover, rgba(15, 23, 42, 0.04));
  border-color: var(--border-strong, var(--border, #98a2b3));
}

.age-gate-btn--secondary:focus-visible {
  outline: 2px solid var(--border-strong, var(--accent));
  outline-offset: 2px;
}

.age-gate-btn--primary {
  background: var(--age-gate-btn-primary-bg, var(--tenant-accent, var(--accent)));
  color: var(--age-gate-btn-primary-color, var(--text-on-accent, #fff));
  border-color: var(--age-gate-btn-primary-bg, var(--tenant-accent, var(--accent)));
}

.age-gate-btn--primary:hover {
  filter: brightness(1.06);
  box-shadow: var(--shadow-glow-sm, 0 0 10px color-mix(in srgb, var(--accent) 20%, transparent));
}

.age-gate-btn--primary:focus-visible {
  outline: 2px solid var(--age-gate-btn-primary-bg, var(--tenant-accent, var(--accent)));
  outline-offset: 2px;
}

.age-gate-remember {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  margin: var(--space-1) 0 0;
  font-size: var(--text-sm, 0.875rem);
  color: var(--age-gate-body-color, var(--text-secondary, var(--text-muted, #667085)));
  cursor: pointer;
  user-select: none;
}

.age-gate-remember input {
  width: 1rem;
  height: 1rem;
  accent-color: var(--age-gate-btn-primary-bg, var(--tenant-accent, var(--accent)));
  cursor: pointer;
}

.age-gate-decline-message {
  margin: var(--space-2) 0 0;
  width: 100%;
  padding: var(--space-3);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--error, #c62828) 10%, transparent);
  color: var(--error, #c62828);
  font-size: var(--text-sm, 0.875rem);
  font-weight: var(--font-medium, 500);
  line-height: 1.45;
}

@media (max-width: 480px) {
  .age-gate-card {
    padding: var(--space-8) var(--space-5);
  }

  .age-gate-actions-row {
    flex-direction: column-reverse;
  }

  .age-gate-btn {
    width: 100%;
  }
}

/* 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--none {
  background: transparent;
  color: var(--text-primary);
  border: none;
}

.announcement-bar--feed .announcement--none {
  background: transparent;
  border: none;
}

.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);
}

/* =================================================================
   ANNOUNCEMENTS FEED BLOCK (content block in section)
   Full border per item; stacked bar above hero keeps border-bottom only.
   ================================================================= */

.announcement-bar--feed {
  gap: var(--space-3, 12px);
}

.announcement-bar--feed .announcement {
  border-radius: var(--radius-md, 6px);
}

.announcement-bar--feed .announcement--info {
  border: 1px solid var(--info, #0891b2);
}

.announcement-bar--feed .announcement--warning {
  border: 1px solid var(--warning, #d97706);
}

.announcement-bar--feed .announcement--urgent {
  border: 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__body {
  flex: 1;
  min-width: 0;
  text-align: center;
}

.announcement__body p {
  margin: 0;
}

/* Feed cards use `.prose` for links — override global `.prose` block margins (loaded later). */
.announcement-bar--feed .announcement__body.prose :is(h1, h2, h3, h4, p, ul, ol, blockquote) {
  margin: 0;
}

.announcement-bar--feed .announcement__body.prose :is(h1, h2, h3, h4) {
  line-height: 1.3;
  font-weight: var(--font-semibold, 600);
}

.announcement-bar--feed .announcement__body.prose h1 {
  font-size: 2em;
}

.announcement-bar--feed .announcement__body.prose h2 {
  font-size: 1.5em;
}

.announcement-bar--feed .announcement__body.prose h3 {
  font-size: 1.25em;
}

.announcement-bar--feed .announcement__body.prose h4 {
  font-size: 1.125em;
}

.announcement-bar--feed .announcement__body.prose p {
  line-height: inherit;
}

.announcement-bar--feed .announcement__body.prose p + p {
  margin-top: 0.35em;
}

.announcement-bar--feed .announcement__body.prose p:empty,
.announcement-bar--feed .announcement__body.prose p:has(> br:only-child) {
  display: none;
  margin: 0;
  padding: 0;
}

.announcement__body p + p {
  margin-top: 0.35em;
}

.announcement__body h1,
.announcement__body h2,
.announcement__body h3 {
  margin: 0;
  line-height: 1.3;
  font-weight: var(--font-semibold, 600);
}

.announcement__body h1 {
  font-size: 2em;
}

.announcement__body h2 {
  font-size: 1.5em;
}

.announcement__body h3 {
  font-size: 1.25em;
}

.announcement__body strong,
.announcement__body b {
  font-weight: var(--font-semibold, 600);
}

.announcement__body ul,
.announcement__body ol {
  margin: 0.35em 0 0;
  padding-left: 1.25em;
  text-align: left;
  display: inline-block;
}

.announcement__body blockquote {
  margin: 0.35em 0 0;
  padding-left: 0.75em;
  border-left: 2px solid currentColor;
  opacity: 0.9;
}

.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--two {
  grid-template-columns: repeat(2, 1fr);
}

.banner-grid--three {
  grid-template-columns: repeat(3, 1fr);
}

.banner-grid--four {
  grid-template-columns: repeat(4, 1fr);
}

.banner-grid--five {
  grid-template-columns: repeat(5, 1fr);
}

.banner-grid--asymmetric {
  grid-template-columns: 2fr 1fr;
}

.banner-grid--square-corners .banner-card {
  border-radius: 0;
}

.banner-grid--aspect-square .banner-card,
.banner-grid--aspect-square .banner-card--promo {
  aspect-ratio: 1 / 1;
  min-height: unset;
  height: auto;
}

.banner-grid--aspect-landscape .banner-card,
.banner-grid--aspect-landscape .banner-card--promo {
  aspect-ratio: 4 / 3;
  min-height: unset;
  height: auto;
}

.banner-grid--aspect-portrait .banner-card,
.banner-grid--aspect-portrait .banner-card--promo {
  aspect-ratio: 3 / 4;
  min-height: unset;
  height: auto;
}

.banner-grid--aspect-natural .banner-card {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  align-items: stretch;
  min-height: unset;
  height: auto;
}

.banner-grid--aspect-natural .banner-card--promo {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  min-height: unset;
  height: auto;
}

.banner-grid--aspect-natural .banner-card:not(.banner-card--has-image) {
  min-height: 280px;
}

.banner-grid--aspect-natural .banner-card--promo:not(.banner-card--has-image) {
  min-height: 320px;
}

.banner-grid--aspect-natural .banner-card__image {
  position: relative;
  grid-area: 1 / 1;
  inset: unset;
  width: 100%;
  height: auto;
  z-index: 0;
}

.banner-grid--aspect-natural .banner-overlay {
  grid-area: 1 / 1;
  position: relative;
  align-self: stretch;
  min-height: 100%;
}

.banner-grid--aspect-natural .banner-content {
  grid-area: 1 / 1;
  position: relative;
  z-index: 2;
  align-self: end;
}

/* =================================================================
   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);
}

.banner-card--hover-none:hover,
.banner-card--promo.banner-card--hover-none:hover {
  transform: none;
  box-shadow: none;
}

.banner-card--hover-zoom:hover .banner-card__image,
.banner-card--promo.banner-card--hover-zoom:hover .banner-card__image {
  transform: scale(1.06);
}

.banner-card--hover-zoom .banner-card__image,
.banner-card--promo.banner-card--hover-zoom .banner-card__image {
  transition: transform var(--transition-normal);
}

@media (prefers-reduced-motion: reduce) {
  .banner-card:hover,
  .banner-card--promo:hover,
  .banner-card--hover-zoom:hover .banner-card__image,
  .banner-card--promo.banner-card--hover-zoom:hover .banner-card__image {
    transform: none;
  }
}

/* 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%);
}

/* Image banners: neutral base so accent/sale gradients do not flash before <img> paints. */
.banner-card-primary.banner-card--has-image,
.banner-card-sale.banner-card--has-image,
.banner-card-dark.banner-card--has-image,
.banner-card-gradient.banner-card--has-image {
  background: var(--bg-muted, #e8e8e8);
}

/* With background image */
.banner-card[style*="background-image"] {
  background-size: cover;
  background-position: center;
}

/* Foreground <img> banner image — fill the card so the background variant
   never shows through at narrow widths / responsive columns. */
.banner-card__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  z-index: 0;
}

/* =================================================================
   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-overlay-light {
  background: linear-gradient(
    180deg,
    transparent 20%,
    rgba(255, 255, 255, 0.75) 100%
  );
}

.banner-overlay-gradient {
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.15) 0%,
    rgba(0, 0, 0, 0.65) 100%
  );
}

.banner-overlay-none {
  display: none;
}

.banner-card__stretched-link {
  position: absolute;
  inset: 0;
  z-index: 3;
  border-radius: inherit;
}

.banner-card__stretched-link:focus-visible {
  outline: 2px solid var(--tenant-accent, var(--accent));
  outline-offset: 2px;
}

/* =================================================================
   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);
}

/* Promo tiles: image background, rich copy top-left, CTA button bottom-center */
.banner-card--promo {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  min-height: 320px;
  text-decoration: none;
  cursor: default;
}

.banner-card--promo:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.banner-content--promo {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 100%;
  height: 100%;
}

.banner-content--promo-v-top {
  justify-content: flex-start;
}

.banner-content--promo-v-center {
  justify-content: center;
}

.banner-content--promo-v-bottom {
  justify-content: flex-end;
}

.banner-content--promo-h-left .banner-content__copy {
  text-align: left;
}

.banner-content--promo-h-center .banner-content__copy {
  text-align: center;
}

.banner-content--promo-h-right .banner-content__copy {
  text-align: right;
}

.banner-content--promo-h-center .banner-content__actions {
  justify-content: center;
}

.banner-content--promo-h-right .banner-content__actions {
  justify-content: flex-end;
}

.banner-content--promo-h-left .banner-content__actions {
  justify-content: flex-start;
}

.banner-content__copy {
  flex: 1;
  text-align: left;
}

.banner-content__actions {
  display: flex;
  justify-content: center;
  padding-top: var(--space-4);
}

.banner-content__actions--align-left {
  justify-content: flex-start;
}

.banner-content__actions--align-right {
  justify-content: flex-end;
}

.banner-prose {
  color: var(--block-banner-prose-color, #fff);
}

.banner-prose :is(h1, h2, h3, h4, h5, h6, p, li, strong, em) {
  color: inherit;
}

.banner-cta-button {
  text-decoration: none;
  white-space: nowrap;
}

.banner-content__actions .banner-cta-button.btn--primary {
  background: var(--block-cta-button-bg, var(--tenant-accent, var(--accent)));
  border-color: var(--block-cta-button-bg, var(--tenant-accent, var(--accent)));
  color: var(--block-cta-button-color, var(--bg-deep));
}

.banner-content__actions .banner-cta-button.btn--primary:hover:not(:disabled) {
  background: var(--block-cta-button-bg, var(--tenant-accent-light, var(--accent-light)));
  border-color: var(--block-cta-button-bg, var(--tenant-accent-light, var(--accent-light)));
}

.banner-content__actions .banner-cta-button.btn--primary:active:not(:disabled) {
  background: var(--block-cta-button-bg, var(--tenant-accent-dim, var(--accent-dim)));
  border-color: var(--block-cta-button-bg, var(--tenant-accent-dim, var(--accent-dim)));
}

.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--two,
  .banner-grid--three,
  .banner-grid--four,
  .banner-grid--five,
  .banner-grid--asymmetric {
    grid-template-columns: 1fr;
  }
  
  .banner-card {
    min-height: 200px;
  }
  
  .banner-title {
    font-size: var(--text-xl);
  }
}

/* block-presentation-responsive.css */
/**
 * Block presentation — responsiveVisibility (STOREFRONT-RESPONSIVE-CONTRACT).
 *
 * Classes emitted by resolveSharedPresentationClassNames:
 *   .block-presentation--visible-mobile
 *   .block-presentation--visible-tablet
 *   .block-presentation--visible-desktop
 *
 * Breakpoints: mobile ≤767 · tablet 768–1023 · desktop ≥1024
 *
 * Editor device preview uses a media-query-aware iframe (viewport-preview.ts).
 * Parent body[data-website-editor-viewport] remains for residual same-document
 * chrome; iframe content relies on real @media rules below.
 */

/* Real viewport media queries */
@media (max-width: 767px) {
  .block-presentation--visible-desktop,
  .block-presentation--visible-tablet {
    display: none !important;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .block-presentation--visible-desktop,
  .block-presentation--visible-mobile {
    display: none !important;
  }
}

@media (min-width: 1024px) {
  .block-presentation--visible-tablet,
  .block-presentation--visible-mobile {
    display: none !important;
  }
}

/* Website editor viewport attribute (same-document preview / iframe parent chrome) */
body[data-website-editor-viewport="mobile"] .block-presentation--visible-desktop,
body[data-website-editor-viewport="mobile"] .block-presentation--visible-tablet {
  display: none !important;
}

body[data-website-editor-viewport="tablet"] .block-presentation--visible-desktop,
body[data-website-editor-viewport="tablet"] .block-presentation--visible-mobile {
  display: none !important;
}

body[data-website-editor-viewport="desktop"] .block-presentation--visible-tablet,
body[data-website-editor-viewport="desktop"] .block-presentation--visible-mobile {
  display: none !important;
}

/* block-typography.css */
/**
 * Block-level typography overrides on storefront sections.
 * Vars are set inline from presentation.typography font presets.
 *
 * Must stay **unlayered**: `_base.css` tenant heading defaults and `.prose` sizes are
 * unlayered and beat any `@layer webshop` rule regardless of specificity.
 * Scope class `.block-typography-scope` is added when block typography overrides are set.
 */

body[data-page-type]:not([data-page-type="admin"]):not([data-page-type^="admin-"])
  .section.block-typography-scope :is(
    h1,
    h2,
    h3,
    .section-title,
    .banner-title,
    .category-composition__label,
    .trust-title
  ),
body[data-page-type]:not([data-page-type="admin"]):not([data-page-type^="admin-"])
  .section.block-typography-scope .prose :is(h1, h2, h3),
body[data-page-type]:not([data-page-type="admin"]):not([data-page-type^="admin-"])
  .image-text-section.block-typography-scope .prose :is(h1, h2, h3) {
  font-family: var(
    --block-heading-font,
    var(--tenant-font-heading, var(--tenant-font-main, var(--font-sans)))
  );
  font-size: var(--block-heading-size);
  font-weight: var(--block-heading-weight);
  color: var(--block-heading-color);
}

body[data-page-type]:not([data-page-type="admin"]):not([data-page-type^="admin-"])
  .section.block-typography-scope .hero-text :is(h1, .hero-title) {
  font-family: var(
    --block-heading-font,
    var(--tenant-font-heading, var(--tenant-font-main, var(--font-sans)))
  );
}

body[data-page-type]:not([data-page-type="admin"]):not([data-page-type^="admin-"])
  .section.block-typography-scope :is(
    p,
    .banner-subtitle,
    .category-composition__description,
    .trust-description,
    .rich-content
  ),
body[data-page-type]:not([data-page-type="admin"]):not([data-page-type^="admin-"])
  .section.block-typography-scope .prose :is(p, li, blockquote),
body[data-page-type]:not([data-page-type="admin"]):not([data-page-type^="admin-"])
  .image-text-section.block-typography-scope .prose :is(p, li, blockquote),
body[data-page-type]:not([data-page-type="admin"]):not([data-page-type^="admin-"])
  .section.block-typography-scope .hero-text :is(p, .hero-subtitle) {
  font-family: var(--block-body-font, var(--tenant-font-main, var(--font-sans)));
  font-size: var(--block-body-size);
  font-weight: var(--block-body-weight);
  color: var(--block-body-color);
}

/* 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;
  inset-inline-end: 0;
  bottom: 0;
  width: 420px;
  max-width: 100vw;
  display: flex;
  flex-direction: column;
  background: var(--storefront-cart-drawer-bg, var(--bg-elevated, var(--surface-primary, #1a1a2e)));
  box-shadow: var(--shadow-xl, calc(-4px * var(--dir-sign, 1)) 0 24px rgba(0, 0, 0, 0.3));
  transform: translateX(calc(100% * var(--dir-sign, 1)));
  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: 1fr auto;
  grid-template-areas:
    "image image"
    "info actions";
  gap: var(--space-3);
  padding: var(--space-3);
  border-radius: var(--radius-md);
  transition: background var(--transition-fast);
}

.cart-item:hover {
  background: var(--storefront-cart-drawer-hover-bg, var(--bg-surface, var(--surface-hover, rgba(255, 255, 255, 0.03))));
}

/* Item image */
.cart-item-image {
  grid-area: 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 {
  grid-area: 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);
}

/* Bundle contents — indented list under the product name. */
.cart-item-bundle-contents {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin: 0;
  padding: 0 0 0 var(--space-2);
  list-style: none;
  border-left: 2px solid var(--border-subtle);
}

.cart-item-bundle-contents-line {
  font-size: var(--font-size-xs);
  color: var(--text-secondary);
  padding-left: var(--space-2);
}

/* Configurable bundle — resolved component lines in cart (Wave 5). */
.cart-item-bundle-config {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin: 0;
  padding: 0 0 0 var(--space-2);
  list-style: none;
  border-left: 2px solid var(--border-subtle);
}

.cart-item-bundle-config-line {
  font-size: var(--font-size-xs);
  color: var(--text-secondary);
  padding-left: var(--space-2);
}

.cart-item-bundle-config-edit {
  font-size: var(--font-size-xs);
  color: var(--color-primary, var(--text-link));
  text-decoration: underline;
}

.cart-item-bundle-config-edit:hover,
.cart-item-bundle-config-edit:focus-visible {
  color: var(--color-primary-hover, var(--text-link));
}

/* 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 {
  grid-area: 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: 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 */
/* Container, grid and collapse: checkout-workspace.css (shared with checkout) */

/* =========================
   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-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: 480px) {
  .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);
  }
}


/* category-showcase.css */
/**
 * WEBSHOP CONTEXT: Category showcase
 *
 * Shared composition recipes for category tiles (Preset-First V100)
 * and semantic grid recipes (Grid Presets V100).
 * Presets combine recipes — no preset-id CSS classes.
 * Absolute positioning only inside media-fill / inside-bottom recipes.
 */

.category-composition-container {
  container-type: inline-size;
  width: 100%;
  min-width: 0;
}

.category-composition {
  --category-composition-gap: var(--storefront-space-md, 1rem);
  display: grid;
  gap: var(--category-composition-gap);
  align-items: start;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.category-composition--compact { --category-composition-gap: var(--storefront-space-sm, .5rem); }
.category-composition--roomy { --category-composition-gap: var(--storefront-space-lg, 1.5rem); }
.category-composition__tile {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-content: start;
  gap: var(--storefront-space-sm, .5rem);
  min-width: 0;
  color: var(--storefront-text-primary, currentColor);
  text-decoration: none;
  border-radius: var(--radius-lg);
}
.category-composition__tile:focus-visible {
  outline: 3px solid var(--storefront-focus-ring);
  outline-offset: 4px;
}
.category-composition__media {
  display: block;
  grid-column: 1 / -1;
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--storefront-surface-subtle);
  border-radius: inherit;
}
.category-composition__fallback {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--storefront-space-sm, .5rem);
  padding: var(--storefront-space-md, 1rem);
  box-sizing: border-box;
  color: var(--storefront-text-primary, currentColor);
  background: linear-gradient(145deg, var(--storefront-surface-subtle), var(--storefront-surface-muted, var(--storefront-surface-subtle)));
}
.category-composition__image {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
}
.category-composition__image[hidden] { display: none; }
.category-composition__copy { min-width: 0; overflow-wrap: anywhere; }
.category-composition__label { display: block; font-weight: var(--font-weight-semibold, 600); }
.category-composition__description { display: block; margin-top: var(--space-2); font-size: var(--text-sm); }
.category-composition__arrow { align-self: end; }
.category-composition__tile--overlay { display: grid; overflow: hidden; align-content: stretch; }
.category-composition__tile--overlay .category-composition__media { grid-area: 1 / 1 / 2 / 3; height: 100%; }
.category-composition__tile--overlay .category-composition__fallback { display: none; }
.category-composition__tile--missing:not(.category-composition__tile--overlay, .category-composition__tile--row) { display: grid; overflow: hidden; align-content: stretch; }
.category-composition__tile--missing:not(.category-composition__tile--overlay, .category-composition__tile--row) .category-composition__media { grid-area: 1 / 1 / 2 / 3; }
.category-composition__tile--missing:not(.category-composition__tile--overlay, .category-composition__tile--row) :is(.category-composition__copy, .category-composition__arrow) { position: relative; z-index: 1; align-self: end; padding: var(--storefront-space-md, 1rem); }
.category-composition__tile--missing:not(.category-composition__tile--overlay, .category-composition__tile--row) .category-composition__copy { grid-area: 1 / 1 / 2 / 3; padding-right: var(--space-12); }
.category-composition__tile--missing:not(.category-composition__tile--overlay, .category-composition__tile--row) .category-composition__arrow { grid-area: 1 / 2 / 2 / 3; }
.category-composition__tile--row .category-composition__fallback { padding: var(--space-2); }
.category-composition__tile--overlay .category-composition__copy,
.category-composition__tile--overlay .category-composition__arrow {
  position: relative;
  z-index: 1;
  align-self: end;
  padding: var(--storefront-space-md, 1rem);
  color: var(--media-overlay-foreground);
}
.category-composition__tile--overlay .category-composition__copy {
  grid-area: 1 / 1 / 2 / 3;
  padding-right: var(--space-12);
  background: linear-gradient(transparent, color-mix(in srgb, var(--storefront-overlay) 90%, transparent));
}
.category-composition__tile--overlay .category-composition__arrow { grid-area: 1 / 2 / 2 / 3; }
.category-composition--featured-grid > .category-composition__tile--featured { grid-column: 1 / -1; }
.category-composition--featured-grid[data-count="2"] > .category-composition__tile { grid-column: auto; }
.category-composition--featured-list,
.category-composition--landscape-grid { grid-template-columns: minmax(0, 1fr); }
.category-composition--featured-grid,
.category-composition--featured-list,
.category-composition--landscape-grid { width: 100%; max-width: 90rem; margin-inline: auto; }
.category-composition--featured-grid .category-composition__media,
.category-composition--landscape-grid .category-composition__media { aspect-ratio: 16 / 9; }
.category-composition--featured-list > .category-composition__tile--featured { max-height: 24rem; overflow: hidden; }
.category-composition__list { display: grid; gap: var(--category-composition-gap); min-width: 0; }
.category-composition__tile--row { grid-template-columns: var(--space-16) minmax(0, 1fr) auto; align-items: center; padding-block: var(--space-2); border-bottom: 1px solid var(--storefront-border); }
.category-composition__tile--row .category-composition__media { grid-column: 1; aspect-ratio: 1; }
.category-composition__tile--row .category-composition__arrow { align-self: center; }
.category-composition--product-grid .category-composition__media { aspect-ratio: 1; }
.category-composition--product-grid .category-composition__image { padding: var(--storefront-space-md, 1rem); box-sizing: border-box; }
.category-composition--product-grid { width: 100%; max-width: 80rem; margin-inline: auto; }
.category-composition--circle-grid .category-composition__media { aspect-ratio: 1; border-radius: 50%; }
.category-composition--circle-grid .category-composition__copy { text-align: center; grid-column: 1 / -1; }
.category-composition--circle-grid .category-composition__arrow { display: none; }
.category-composition--circle-grid { width: 100%; max-width: 80rem; margin-inline: auto; justify-content: center; }
.category-composition--text-grid { grid-template-columns: minmax(0, 1fr); }
.category-composition__tile--text { border-bottom: 1px solid var(--storefront-border); border-radius: 0; padding-block: var(--storefront-space-md, 1rem); }
@container (max-width: 319px) {
  .category-composition--product-grid { grid-template-columns: minmax(0, 1fr); }
}
@container (min-width: 390px) {
  .category-composition--circle-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .category-composition--text-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@container (min-width: 768px) {
  .category-composition--landscape-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .category-composition--featured-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .category-composition--featured-list > .category-composition__tile--featured { max-height: 28rem; }
  .category-composition--featured-list[data-count="1"] { grid-template-columns: minmax(0, 40rem); }
  .category-composition--featured-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .category-composition--featured-grid > .category-composition__tile--featured { grid-column: span 2; grid-row: span 2; height: 100%; }
  .category-composition--featured-grid[data-count="1"] { grid-template-columns: minmax(0, 40rem); }
  .category-composition--featured-grid[data-count="1"] > .category-composition__tile { grid-column: auto; grid-row: auto; }
  .category-composition--featured-grid[data-count="2"],
  .category-composition--featured-grid[data-count="3"],
  .category-composition--featured-grid[data-count="4"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .category-composition--featured-grid[data-count="2"] > .category-composition__tile { grid-row: auto; }
  .category-composition--featured-grid[data-count="3"] > .category-composition__tile--featured { grid-column: 1; }
  .category-composition--featured-grid[data-count="4"] > .category-composition__tile--featured { grid-column: 1; grid-row: span 3; }
  .category-composition--featured-grid[data-count="3"] { grid-template-rows: repeat(2, minmax(0, 16rem)); }
  .category-composition--featured-grid[data-count="4"] { grid-template-rows: repeat(3, minmax(0, 11rem)); }
  .category-composition--featured-grid:is([data-count="3"], [data-count="4"]) > .category-composition__tile { min-height: 0; }
  .category-composition--featured-grid:is([data-count="3"], [data-count="4"]) .category-composition__media { aspect-ratio: auto; height: 100%; }
  .category-composition--circle-grid[data-count="1"] { grid-template-columns: minmax(0, 14rem); }
  .category-composition--circle-grid[data-count="2"] { grid-template-columns: repeat(2, minmax(0, 14rem)); }
  .category-composition--circle-grid[data-count="3"] { grid-template-columns: repeat(3, minmax(0, 14rem)); }
  .category-composition--circle-grid[data-count="4"] { grid-template-columns: repeat(4, minmax(0, 12rem)); }
  .category-composition--circle-grid[data-count="5"] { grid-template-columns: repeat(5, minmax(0, 11rem)); }
}
@container (min-width: 1024px) {
  .category-composition--landscape-grid,
  .category-composition--text-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .category-composition--product-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .category-composition--circle-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

.category-showcase {
  width: 100%;
  /* Canonical tile + gap scales (merchant never sees these numbers). */
  --storefront-category-tile-sm: var(--storefront-tile-min-sm, 10rem);
  --storefront-category-tile-md: var(--storefront-tile-min-md, 12.5rem);
  --storefront-category-tile-lg: var(--storefront-tile-min-lg, 15rem);
  --storefront-grid-gap-sm: var(--storefront-space-sm, 0.5rem);
  --storefront-grid-gap-md: var(--storefront-space-md, 1rem);
  --storefront-grid-gap-lg: var(--storefront-space-lg, 1.5rem);
  --storefront-grid-row-gap-sm: var(--storefront-space-sm, 0.5rem);
  --storefront-grid-row-gap-md: var(--storefront-space-md, 1rem);
  --storefront-grid-row-gap-lg: var(--storefront-space-lg, 1.5rem);
  --storefront-grid-row-gap-xl: var(--storefront-space-2xl, 2rem);
}

/* Legacy auto-fit stretch grid (no gridRecipe). */
.category-showcase__grid {
  display: grid;
  grid-template-columns: repeat(
    auto-fit,
    minmax(var(--category-tile-min-width, var(--storefront-tile-min-md, 10rem)), 1fr)
  );
  gap: var(--storefront-block-gap, var(--space-6));
}

.category-showcase__grid--two {
  grid-template-columns: repeat(2, 1fr);
}

.category-showcase__grid--three {
  grid-template-columns: repeat(3, 1fr);
}

.category-showcase__grid--four {
  grid-template-columns: repeat(4, 1fr);
}

.category-showcase__grid--five {
  grid-template-columns: repeat(5, 1fr);
}

.category-showcase__grid--square-corners .category-tile {
  border-radius: 0;
}

/**
 * Semantic grid recipes — fixed track width + centered incomplete last row.
 * Specificity beats legacy `__grid` 1fr stretch when both classes are present.
 */
.category-showcase__grid.category-showcase-grid,
.category-showcase-grid {
  display: grid;
  width: 100%;
  justify-content: center;
  align-content: start;
  gap: unset;
}

.category-showcase__grid.category-showcase-grid--balanced,
.category-showcase-grid--balanced {
  grid-template-columns: repeat(
    auto-fit,
    minmax(var(--storefront-category-tile-md), var(--storefront-category-tile-md))
  );
  column-gap: var(--storefront-grid-gap-md);
  row-gap: var(--storefront-grid-row-gap-md);
}

.category-showcase__grid.category-showcase-grid--dense,
.category-showcase-grid--dense {
  grid-template-columns: repeat(
    auto-fit,
    minmax(var(--storefront-category-tile-sm), var(--storefront-category-tile-sm))
  );
  column-gap: var(--storefront-grid-gap-sm);
  row-gap: var(--storefront-grid-row-gap-sm);
}

.category-showcase__grid.category-showcase-grid--showcase,
.category-showcase-grid--showcase {
  grid-template-columns: repeat(
    auto-fit,
    minmax(var(--storefront-category-tile-lg), var(--storefront-category-tile-lg))
  );
  column-gap: var(--storefront-grid-gap-lg);
  row-gap: var(--storefront-grid-row-gap-lg);
}

.category-showcase__grid.category-showcase-grid--centered,
.category-showcase-grid--centered {
  grid-template-columns: repeat(
    auto-fit,
    minmax(var(--storefront-category-tile-md), var(--storefront-category-tile-md))
  );
  column-gap: var(--storefront-grid-gap-lg);
  row-gap: var(--storefront-grid-row-gap-lg);
  max-width: 56rem;
  margin-inline: auto;
}

.category-showcase__grid.category-showcase-grid--wide,
.category-showcase-grid--wide {
  grid-template-columns: repeat(
    auto-fit,
    minmax(var(--storefront-category-tile-lg), var(--storefront-category-tile-lg))
  );
  column-gap: var(--storefront-grid-gap-md);
  row-gap: var(--storefront-grid-row-gap-md);
}

.category-showcase__grid.category-showcase-grid--editorial,
.category-showcase-grid--editorial {
  grid-template-columns: repeat(
    auto-fit,
    minmax(var(--storefront-category-tile-lg), var(--storefront-category-tile-lg))
  );
  column-gap: var(--storefront-grid-gap-lg);
  row-gap: var(--storefront-grid-row-gap-xl);
}

.category-showcase__grid.category-showcase-grid--campaign,
.category-showcase-grid--campaign {
  grid-template-columns: repeat(
    auto-fit,
    minmax(var(--storefront-category-tile-lg), var(--storefront-category-tile-lg))
  );
  column-gap: var(--storefront-grid-gap-lg);
  row-gap: var(--storefront-grid-row-gap-lg);
}

/* Tablet: tighten campaign / showcase density via larger min track (fewer cols). */
@media (max-width: 1024px) {
  .category-showcase__grid.category-showcase-grid--showcase,
  .category-showcase-grid--showcase,
  .category-showcase__grid.category-showcase-grid--campaign,
  .category-showcase-grid--campaign,
  .category-showcase__grid.category-showcase-grid--wide,
  .category-showcase-grid--wide,
  .category-showcase__grid.category-showcase-grid--editorial,
  .category-showcase-grid--editorial {
    grid-template-columns: repeat(
      auto-fit,
      minmax(min(100%, 14rem), min(100%, 14rem))
    );
  }

  .category-showcase__grid.category-showcase-grid--balanced,
  .category-showcase-grid--balanced,
  .category-showcase__grid.category-showcase-grid--centered,
  .category-showcase-grid--centered {
    grid-template-columns: repeat(
      auto-fit,
      minmax(min(100%, 11rem), min(100%, 11rem))
    );
  }
}

/* Base card — media-above default (flex column, no absolute). */
.category-tile {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-width: 0;
  width: 100%;
  background: var(
    --storefront-surface-subtle,
    var(--color-surface-subtle, var(--color-gray-50, #f8f8f8))
  );
  border-radius: var(--storefront-card-radius, var(--radius-lg));
  box-shadow: var(--storefront-shadow-sm, var(--shadow-sm));
  text-decoration: none;
  color: inherit;
  transition:
    transform var(--pg-ui-motion-fast, 0.15s) ease,
    box-shadow var(--pg-ui-motion-fast, 0.15s) ease;
}

.category-tile--hover-lift:hover {
  transform: translateY(-2px);
  box-shadow: var(--storefront-shadow-md, var(--shadow-md));
}

.category-tile--hover-zoom:hover .category-tile__image {
  transform: scale(1.04);
}

.category-tile__media {
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  background: inherit;
  overflow: hidden;
}

.category-tile__media--landscape {
  aspect-ratio: 4 / 3;
}

.category-tile__media--portrait {
  aspect-ratio: 3 / 4;
}

.category-tile__image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform var(--pg-ui-motion-fast, 0.2s) ease;
}

.category-tile__image--cover {
  object-fit: cover;
}

.category-tile__label {
  text-align: center;
  padding: var(--space-3) var(--space-2);
  font: inherit;
}

.category-tile__frame {
  position: relative;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
}

.category-tile__overlay {
  pointer-events: none;
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* --- Layout recipes --- */

.category-tile--layout-media-above {
  /* Default flex column: media then label — no absolute. */
}

.category-tile--layout-media-free {
  background: transparent;
  box-shadow: none;
  border: none;
}

.category-tile--layout-media-free .category-tile__media {
  background: transparent;
}

.category-tile--layout-media-fill {
  position: relative;
}

.category-tile--layout-media-fill .category-tile__frame {
  flex: 1 1 auto;
  min-height: var(--category-tile-fill-min-height, 12rem);
}

.category-tile--layout-media-fill .category-tile__media {
  position: absolute;
  inset: 0;
  aspect-ratio: auto;
  height: 100%;
  width: 100%;
}

.category-tile--layout-media-fill .category-tile__image {
  object-fit: cover;
}

/* --- Label recipes --- */

.category-tile--label-below-media .category-tile__label,
.category-tile--label-below-card .category-tile__label {
  position: static;
  z-index: auto;
  color: inherit;
  background: transparent;
}

.category-tile--label-inside-bottom .category-tile__label {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  padding: var(--space-4) var(--space-3) var(--space-3);
  text-align: left;
  color: var(--storefront-color-on-media, var(--color-on-media, currentColor));
  font-weight: var(--font-weight-semibold, 600);
  text-shadow: 0 1px 2px rgb(0 0 0 / 0.35);
}

.category-tile--overlay-soft .category-tile__overlay {
  background: linear-gradient(
    to top,
    rgb(0 0 0 / 0.45) 0%,
    rgb(0 0 0 / 0.08) 55%,
    transparent 100%
  );
}

.category-tile--overlay-strong .category-tile__overlay {
  background: linear-gradient(
    to top,
    rgb(0 0 0 / 0.7) 0%,
    rgb(0 0 0 / 0.25) 50%,
    transparent 100%
  );
}

.category-tile--overlay-strong .category-tile__label {
  font-size: 1.05em;
}

/* Mobile columns: merchant/recipe choice via data-mobile-columns (default 2). */
@media (max-width: 768px) {
  .category-showcase__grid[data-mobile-columns="1"],
  .category-showcase-grid[data-mobile-columns="1"] {
    grid-template-columns: minmax(0, 1fr);
    justify-content: stretch;
  }

  .category-showcase__grid[data-mobile-columns="2"],
  .category-showcase-grid[data-mobile-columns="2"] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    justify-content: stretch;
  }
}

/* checkout-workspace.css */
/**
 * CHECKOUT WORKSPACE — one shell for the whole cart → confirmation flow.
 *
 * WHY THIS EXISTS
 * The cart and checkout pages each defined their own container width, padding,
 * grid and collapse breakpoint. Walking from cart to checkout therefore shifted
 * the whole page — including the progress bar — sideways, and a tablet showed
 * one page as two columns and the next as one.
 *
 * Every step of the flow now shares this shell, so geometry cannot drift again.
 * Step-specific styling stays in cart.css / checkout.css; only the workspace
 * frame lives here.
 *
 * Legacy selectors (.cart-page, .checkout, …) are part of the same rules rather
 * than copies, so there is exactly one definition per property.
 */

:root {
  --pg-checkout-workspace-max-width: 1200px;
  --pg-checkout-workspace-padding-block: var(--pg-ui-space-6);
  --pg-checkout-workspace-padding-inline: var(--pg-ui-space-6);
  --pg-checkout-workspace-aside-width: 380px;
  --pg-checkout-workspace-gap: var(--pg-ui-space-8);
  --pg-checkout-workspace-progress-gap: var(--pg-ui-space-6);
}

/* Container */
.pg-checkout-workspace,
.cart-page,
.checkout,
.checkout-confirmation {
  max-width: var(--pg-checkout-workspace-max-width);
  margin: 0 auto;
  padding: var(--pg-checkout-workspace-padding-block)
    var(--pg-checkout-workspace-padding-inline);
}

/* Progress bar sits above the columns on every step */
.pg-checkout-workspace__progress,
.checkout-steps-container {
  margin-bottom: var(--pg-checkout-workspace-progress-gap);
}

/* Two columns: the work on the left, the order summary on the right */
.pg-checkout-workspace__layout,
.cart-page-layout,
.checkout-layout {
  display: grid;
  grid-template-columns: 1fr var(--pg-checkout-workspace-aside-width);
  gap: var(--pg-checkout-workspace-gap);
  align-items: start;
}

.pg-checkout-workspace__main,
.cart-page-main,
.checkout-main {
  min-width: 0;
}

.pg-checkout-workspace__aside,
.cart-page-sidebar,
.checkout-sidebar {
  min-width: 0;
}

/*
 * Single column below this width. Both pages collapse at the same point —
 * previously the cart collapsed at 768px and checkout at 1024px, so a tablet
 * changed layout mid-flow.
 */
@media (max-width: 1024px) {
  .pg-checkout-workspace__layout,
  .cart-page-layout,
  .checkout-layout {
    grid-template-columns: 1fr;
  }

  /* Keep the amount and the primary action in view first. */
  .pg-checkout-workspace__aside,
  .cart-page-sidebar,
  .checkout-sidebar {
    order: -1;
  }

  .pg-checkout-workspace__aside-sticky,
  .cart-page-sidebar-sticky,
  .checkout-sidebar-sticky {
    position: static;
  }
}

@media (max-width: 480px) {
  .pg-checkout-workspace,
  .cart-page,
  .checkout,
  .checkout-confirmation {
    --pg-checkout-workspace-padding-block: var(--pg-ui-space-4);
    --pg-checkout-workspace-padding-inline: var(--pg-ui-space-3);
  }
}

/* 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
 *                             .checkout-subscription-option*, .checkout-beneficiary-*
 *   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
   ================================================================= */

/* Container, progress gap, grid and collapse: checkout-workspace.css */

.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);
}

/* =================================================================
   SUBSCRIPTION RECIPIENT (CheckoutPage.tsx)
   ================================================================= */

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

.checkout-subscription-recipient-hint {
  margin: 0;
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  line-height: 1.5;
}

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

.checkout-subscription-option {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  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);
}

.checkout-subscription-option:hover {
  border-color: rgb(245 166 35 / 0.3);
  background: rgb(245 166 35 / 0.03);
}

.checkout-subscription-option-selected {
  border-color: var(--accent);
  background: rgb(245 166 35 / 0.08);
}

.checkout-subscription-option-input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.checkout-subscription-option-radio {
  width: 1.25rem;
  height: 1.25rem;
  margin-top: 0.125rem;
  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);
}

.checkout-subscription-option:hover .checkout-subscription-option-radio {
  border-color: rgb(245 166 35 / 0.5);
}

.checkout-subscription-option-selected .checkout-subscription-option-radio {
  border-color: var(--accent);
  background: rgb(245 166 35 / 0.1);
}

.checkout-subscription-option-radio-dot {
  width: 0.625rem;
  height: 0.625rem;
  background: var(--accent);
  border-radius: var(--radius-full);
}

.checkout-subscription-option-label {
  flex: 1;
  min-width: 0;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--text-primary);
  line-height: 1.5;
}

.checkout-beneficiary-fields {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid rgb(245 166 35 / 0.1);
}

.checkout-beneficiary-title {
  margin: 0;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
}

/* 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 color-mix(in srgb, var(--accent) 15%, transparent);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: border-color var(--transition-fast),
              background-color var(--transition-fast);
}

.payment-method:hover {
  border-color: color-mix(in srgb, var(--accent) 30%, transparent);
  background: color-mix(in srgb, var(--accent) 3%, transparent);
}

.payment-method-selected {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
}

.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;
  min-width: 0;
}

.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 color-mix(in srgb, var(--accent) 35%, transparent);
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: border-color var(--transition-fast),
              background-color var(--transition-fast);
}

.payment-method:hover .payment-method-radio {
  border-color: color-mix(in srgb, var(--accent) 50%, transparent);
}

.payment-method-selected .payment-method-radio {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
}

.payment-method:has(.payment-method-input:focus-visible) {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .payment-method,
  .payment-method-radio {
    transition: none;
  }
}

.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 / Wero co-brand badge.
 *
 * iDEAL is migrating to Wero; since January 2026 Dutch payments are shown
 * co-branded. Built from text in our own badge style rather than the official
 * logo artwork, so it inherits the storefront typography and needs no assets.
 */
.ideal-logo--cobrand {
  display: inline-flex;
  align-items: stretch;
  padding: 0;
  overflow: hidden;
  line-height: 1;
}

.ideal-logo__part {
  display: inline-flex;
  align-items: center;
  padding: 2px 6px;
}

/* Wero segment: darker half of the lockup, keeps both names readable. */
.ideal-logo__part--wero {
  background: #1a1a2e;
  color: #ffffff;
}

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

.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;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-2) 0;
}

.order-summary-item + .order-summary-item {
  border-top: 1px solid var(--border-subtle);
}

.order-summary-item-row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  min-width: 0;
  font-size: var(--font-size-sm);
  color: var(--text-primary);
}

.order-summary-item-qty {
  flex-shrink: 0;
  color: var(--text-secondary);
  font-weight: var(--font-weight-medium);
}

/* Name column — direct flex child so long bundle titles wrap
   instead of painting over the price. */
.order-summary-item-name {
  flex: 1;
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Full-width under the row — vertical list, flush left with the item. */
.order-summary-item-meta {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--font-size-xs);
  color: var(--text-secondary);
}

.order-summary-item-meta-line {
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Bundle contents — indented under the parent item to show hierarchy. */
.order-summary-item-bundle-contents {
  margin-left: var(--space-4);
  padding-left: var(--space-2);
  border-left: 2px solid var(--border-subtle);
}

.order-summary-item-bundle-contents .order-summary-item-meta-line {
  position: relative;
}

.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: stretch;
}

.coupon-input-row .form-group {
  flex: 1;
  margin: 0;
}

.coupon-input-row .btn {
  flex-shrink: 0;
  height: auto;
}

.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);
}

.coupon-input-hint {
  margin: var(--space-2) 0 0;
  font-size: var(--font-size-xs);
  color: var(--warning, #b45309);
  line-height: 1.4;
}

/* =================================================================
   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-inline-login-actions {
  margin-top: var(--space-3);
}

.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);
}

/*
 * "What happens next" — tells the customer whether the order is coming to
 * them, waiting to be collected, booked, or recurring.
 */
.checkout-confirmation-next {
  list-style: none;
  margin: 0 0 var(--pg-ui-space-6);
  padding: var(--pg-ui-card-padding-y) var(--pg-ui-card-padding-x);
  display: flex;
  flex-direction: column;
  gap: var(--pg-ui-space-3);
  text-align: left;
  background: var(--pg-ui-color-surface-muted);
  border: 1px solid var(--pg-ui-border-default);
  border-radius: var(--pg-ui-radius-card);
  font-size: var(--pg-ui-font-size-body);
  line-height: var(--pg-ui-line-height-body);
  color: var(--pg-ui-color-text);
}

.checkout-confirmation-next:empty {
  display: none;
}

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

@media (max-width: 1024px) {
  .order-summary-items {
    max-height: none;
  }
}

@media (max-width: 768px) {
  .checkout-steps {
    overflow-x: auto;
    padding-bottom: var(--space-2);
    -webkit-overflow-scrolling: touch;
  }

  /*
   * Bare numbers convey nothing. Keep the step the customer is on readable;
   * the others stay hidden so the bar still fits a phone.
   */
  .checkout-step-label {
    display: none;
  }

  .checkout-step-active .checkout-step-label {
    display: inline;
  }

  .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%;
  }

  .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-split.css */
/**
 * WEBSHOP CONTEXT: Content Split
 *
 * Side-by-side image + text editorial layout for content_split blocks.
 */

/* =================================================================
   CONTENT SPLIT LAYOUT
   ================================================================= */

.content-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
  align-items: stretch;
  min-height: 400px;
}

.content-split--image-right .content-split__image {
  order: 1;
}

.content-split--image-right .content-split__text {
  order: 0;
}

.content-split__image {
  position: relative;
  overflow: hidden;
  min-height: 280px;
}

@media (min-width: 769px) {
  .content-split__image img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }

  .content-split__image--fit-cover img {
    object-fit: cover;
  }

  .content-split__image--fit-contain img {
    object-fit: contain;
  }

  .content-split__image--position-center img {
    object-position: center;
  }

  .content-split__image--position-top img {
    object-position: top center;
  }

  .content-split__image--position-bottom img {
    object-position: bottom center;
  }

  .content-split__image--position-left img {
    object-position: center left;
  }

  .content-split__image--position-right img {
    object-position: center right;
  }
}

@media (max-width: 768px) {
  .content-split__image img {
    display: block;
    width: 100%;
    height: auto;
  }
}

.content-split__image--fit-contain {
  background: var(--bg-elevated);
}

.content-split__image--empty {
  background: var(--bg-elevated);
}

.content-split__text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-4);
  padding: var(--space-12) var(--space-8);
}

.content-split__tagline {
  margin: 0;
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.content-split__heading {
  margin: 0;
  font-size: var(--text-3xl);
  font-weight: var(--font-bold);
  line-height: 1.15;
  color: var(--text-primary);
}

.content-split__body {
  margin: 0;
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--text-secondary);
}

.content-split__actions {
  display: flex;
  margin-top: var(--space-2);
}

.content-split__actions--align-left {
  justify-content: flex-start;
}

.content-split__actions--align-center {
  justify-content: center;
}

.content-split__actions--align-right {
  justify-content: flex-end;
}

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

@media (max-width: 768px) {
  .content-split {
    grid-template-columns: 1fr;
    min-height: unset;
  }

  .content-split__image {
    min-height: unset;
    overflow: visible;
  }

  .content-split__text {
    padding: var(--space-8) var(--space-6);
  }

  .content-split--mobile-image-below .content-split__image {
    order: 1;
  }

  .content-split--mobile-image-below .content-split__text {
    order: 0;
  }
}

/* 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);
}

.storefront-page__hero-content {
  max-width: 100%;
}

.storefront-page__hero-card {
  max-width: 72rem;
  margin: 0 auto;
  padding: clamp(var(--space-6), 4vw, var(--space-8));
}

.storefront-page__hero-card h1 {
  font-size: clamp(2rem, 4vw, 2.75rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0 0 var(--space-3);
}

.storefront-page__hero-card .section-subtitle {
  max-width: none;
  margin: 0;
}

@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);
}

.blog-related-image--placeholder {
  background: linear-gradient(135deg, var(--accent-dim) 0%, var(--bg-surface) 100%);
}

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

/* =================================================================
   PROSE UTILITY — Rich text content (TipTap/CMS HTML output)
   Gebruikt voor blog posts en product descriptions met HTML inhoud.
   ================================================================= */

.prose h1 {
  font-size: 2rem;
  font-weight: var(--font-bold);
  line-height: 1.2;
  margin: 0 0 var(--space-6) 0;
  color: var(--text-primary);
}

.prose 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);
}

.prose 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);
}

.prose 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);
}

.prose p {
  margin: 0 0 var(--space-4) 0;
  line-height: var(--leading-relaxed);
}

.prose p:last-child {
  margin-bottom: 0;
}

.prose ul,
.prose ol {
  margin: 0 0 var(--space-4) 0;
  padding-left: var(--space-6);
}

.prose li {
  margin-bottom: var(--space-2);
  line-height: var(--leading-relaxed);
}

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

.prose a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color var(--transition-fast);
}

.prose a:hover {
  color: var(--accent-hover);
}

.prose strong {
  font-weight: var(--font-semibold);
}

.prose em {
  font-style: italic;
}

.prose 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);
}

.prose hr {
  margin: var(--space-8) 0;
  border: none;
  border-top: 1px solid var(--border);
}

.prose 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);
}

.prose pre {
  margin: var(--space-4) 0;
  padding: var(--space-4);
  background-color: var(--bg-surface);
  border-radius: var(--radius-md);
  overflow-x: auto;
}

.prose pre code {
  padding: 0;
  background-color: transparent;
}

.prose img {
  max-width: 100%;
  height: auto;
  margin: var(--space-4) 0;
  border-radius: var(--radius-md);
}

/* 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
 * ============================================================ */

/* Server and client share the same FAQ page language. */
.faq-page {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.faq-page__hero-content {
  max-width: 100%;
}

.faq-page__hero-card {
  max-width: 72rem;
  margin: 0 auto;
  padding: clamp(var(--space-6), 4vw, var(--space-8));
}

.faq-page__hero-card h1,
.faq-header .faq-title {
  font-size: clamp(2rem, 4vw, 2.75rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0 0 var(--space-3);
}

.faq-page__hero-card .section-subtitle,
.faq-header .faq-intro {
  max-width: none;
  margin: 0;
  font-size: var(--text-base);
  color: var(--text-secondary);
}

.faq-page__layout {
  display: grid;
  grid-template-columns: minmax(0, 1.75fr) minmax(18rem, 0.85fr);
  gap: var(--space-6);
  align-items: start;
}

.faq-page__main,
.faq-page__aside {
  min-width: 0;
}

.faq-page__content-card,
.faq-page__contact-card {
  box-shadow: var(--shadow-sm);
}

.faq-page__contact-card {
  position: sticky;
  top: calc(var(--space-6) + 5rem);
}

.faq-page__contact-card h2 {
  margin: 0 0 var(--space-2);
  font-size: var(--text-xl);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
}

.faq-page__contact-card .section-subtitle {
  margin-top: 0;
  max-width: none;
}

.faq-page__contact-actions {
  margin-top: var(--space-6);
}

/* Page header */
.faq-header {
  margin-bottom: var(--space-8);
}

/* Loading state */
.faq-loading {
  text-align: center;
  padding: var(--space-12) 0;
}

.faq-loading-text {
  color: var(--text-secondary);
  margin-top: var(--space-4);
}

/* Error state */
.faq-error {
  padding: var(--space-4);
  background-color: var(--error-dim, #fef2f2);
  border: 1px solid var(--error, #fecaca);
  border-radius: var(--radius-md);
  color: var(--error, #dc2626);
}

/* FAQ content */
.faq-content {
  max-width: 100%;
}

.faq-accordion {
  border: 1px solid var(--border);
  border-radius: var(--webshop-radius-card);
  background: var(--bg-surface);
  overflow: hidden;
}

.faq-accordion .accordion-item {
  border-bottom: 1px solid var(--border);
}

.faq-accordion .accordion-item--last {
  border-bottom: none;
}

.faq-accordion .accordion-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: var(--space-4);
  padding: var(--space-5) var(--space-6);
  border: 0;
  background: transparent;
  cursor: pointer;
  text-align: left;
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  transition:
    color var(--transition-fast),
    background-color var(--transition-fast);
  list-style: none;
}

.faq-accordion .accordion-header::-webkit-details-marker {
  display: none;
}

.faq-accordion .accordion-header:hover,
.faq-accordion .accordion-header:focus-visible {
  color: var(--accent);
  background: color-mix(in srgb, var(--accent-dim) 45%, transparent);
  outline: none;
}

.faq-accordion .accordion-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  flex-shrink: 0;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent-dim) 55%, transparent);
  color: var(--accent);
  transition:
    transform var(--transition-fast),
    background-color var(--transition-fast);
}

.faq-accordion .accordion-item--expanded .accordion-icon {
  transform: rotate(180deg);
}

.faq-accordion .accordion-content {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition:
    max-height 0.35s ease,
    opacity 0.2s ease;
}

.faq-accordion .accordion-item--expanded .accordion-content {
  max-height: 64rem;
  opacity: 1;
}

.faq-accordion .accordion-body {
  padding: 0 var(--space-6) var(--space-5);
  color: var(--text-secondary);
  line-height: var(--leading-relaxed);
}

.faq-accordion .accordion-body p {
  margin: 0 0 var(--space-3);
}

.faq-accordion .accordion-body p:last-child {
  margin-bottom: 0;
}

.faq-accordion .accordion-body a {
  color: var(--accent);
  text-decoration: underline;
}

.faq-accordion .accordion-body ul,
.faq-accordion .accordion-body ol {
  margin: 0 0 var(--space-3);
  padding-left: 1.5rem;
}

.faq-accordion .accordion-body li + li {
  margin-top: var(--space-2);
}

/* Empty state */
.faq-empty {
  text-align: center;
  padding: var(--space-12);
  background-color: var(--bg-deep);
  border-radius: var(--webshop-radius-card);
  max-width: 32rem;
  margin: 0 auto;
}

.faq-empty-icon {
  margin-bottom: var(--space-4);
  color: var(--text-secondary);
}

.faq-empty-title {
  font-size: var(--text-xl);
  font-weight: var(--font-semibold);
  margin-bottom: var(--space-2);
}

.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 (legacy SSR/shared styles) */
.faq-cta {
  margin-top: var(--space-12);
  padding: var(--space-8);
  background-color: var(--bg-deep);
  border-radius: var(--webshop-radius-card);
  text-align: center;
  max-width: 37.5rem;
  margin-left: auto;
  margin-right: auto;
}

.faq-cta-title {
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  margin-bottom: var(--space-2);
}

.faq-cta-text {
  color: var(--text-secondary);
  margin-bottom: var(--space-4);
}

.faq-cta-link {
  display: inline-block;
  padding: var(--space-3) var(--space-6);
  background-color: var(--accent);
  color: #fff;
  border-radius: var(--radius-md);
  text-decoration: none;
  font-weight: var(--font-medium);
}

.faq-cta-link:hover {
  opacity: 0.92;
}

@media (max-width: 1024px) {
  .faq-page__layout {
    grid-template-columns: 1fr;
  }

  .faq-page__contact-card {
    position: static;
  }
}

@media (max-width: 768px) {
  .faq-page__hero-card {
    padding: var(--space-5);
  }

  .faq-accordion .accordion-header {
    padding: var(--space-4) var(--space-4);
    font-size: var(--text-base);
  }

  .faq-accordion .accordion-body {
    padding: 0 var(--space-4) var(--space-4);
  }
}

/* forms-storefront.css */
/* ==========================================================================
   Storefront form fields — TailAdmin Form Layout golden lane
   CSS: pagayo-design/src/contexts/webshop/forms-storefront.css

   Role: public storefront field set (label + control + checkbox) in a
   customer-facing flow (booking, checkout, account, contact).
   Opt in by adding `storefront-form-fields` to the container that holds the
   fields; the base chrome stays in components/forms/_base.css.

   TailAdmin traits vs webshop base:
   - control surface is pure white (not the muted --bg-surface fill)
   - 8px radius (--radius-md) instead of the 12px card radius
   - label sits tight on its control; the stack gap between fields is larger
   - label and control share one type size
   ========================================================================== */

.storefront-form-fields {
  display: grid;
  gap: var(--storefront-form-field-gap, 1.125rem);
  min-width: 0;
}

/* Label→control distance lives on the label, so the stack gap stays readable. */
.storefront-form-fields .form-group {
  gap: 0;
}

.storefront-form-fields .form-label {
  margin-bottom: var(--storefront-form-label-gap, 0.75rem);
  font-size: var(--text-sm-plus);
  font-weight: var(--font-medium);
  color: var(--text-primary);
}

.storefront-form-fields .form-input,
.storefront-form-fields .form-textarea,
.storefront-form-fields .form-select {
  background: var(--storefront-form-control-bg, #ffffff);
  border-radius: var(--radius-md);
  font-weight: var(--font-normal);
}

.storefront-form-fields .form-input::placeholder,
.storefront-form-fields .form-textarea::placeholder {
  color: var(--text-muted);
}

.storefront-form-fields .form-input:-webkit-autofill,
.storefront-form-fields .form-input:-webkit-autofill:hover,
.storefront-form-fields .form-input:-webkit-autofill:focus,
.storefront-form-fields .form-input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 1000px var(--storefront-form-control-bg, #ffffff)
    inset !important;
}

.storefront-form-fields .form-helper,
.storefront-form-fields .form-field-error {
  margin: 0;
}

/* Section heading with rule — TailAdmin form-layout card sections. */
.storefront-form-fields__section-title {
  margin: 0;
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--border-subtle, var(--border));
  color: var(--text-primary);
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
  line-height: 1.35;
}

/* Two controls side by side (first/last name, city/state). */
.storefront-form-fields__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--storefront-form-field-gap, 1.125rem);
}

@media (max-width: 640px) {
  .storefront-form-fields__row {
    grid-template-columns: 1fr;
  }
}

/* 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;
}

/* gift-card.css */
/**
 * WEBSHOP CONTEXT: Gift card (Cadeaubonnen V100)
 *
 * PDP configurator lives inside `.product-purchase-panel` (purchase theme paint
 * already defined). Receive/balance pages sit outside that panel — theme-bridge
 * below re-establishes the same `--purchase-*` semantics.
 *
 * Artwork presentation uses semantic data attributes (not preset IDs):
 *   data-artwork-mode="calm" | "brand" | "photo"
 *   data-surface-tone="neutral" | "accent"
 *   data-media-placement="cover" | "text-zone"
 */

/* =================================================================
   THEME BRIDGE — receive / balance (outside .product-purchase-panel)
   ================================================================= */

.gift-card-receive {
  --purchase-accent: var(--tenant-accent, var(--accent, var(--color-primary)));
  --purchase-surface: var(--color-surface, var(--bg-surface, #ffffff));
  --purchase-text: var(--text-primary, var(--color-text-primary));
  --purchase-muted: var(--text-secondary, var(--color-text-secondary));
  --purchase-border: var(--border, var(--color-border));
  --purchase-tint: color-mix(in srgb, var(--purchase-accent) 3%, var(--purchase-surface));

  box-sizing: border-box;
  display: grid;
  gap: var(--space-6, 24px);
  min-inline-size: 0;
  max-inline-size: 40rem;
  margin-inline: auto;
  padding: var(--space-8, 32px) var(--space-6, 24px);
  color: var(--purchase-text);
  background: var(--purchase-surface);
}

.gift-card-balance {
  display: grid;
  gap: var(--space-2, 8px);
  min-inline-size: 0;
  color: var(--purchase-text);
  font-variant-numeric: tabular-nums;
}

.gift-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3, 12px);
  min-inline-size: 0;
}

/* =================================================================
   CONFIGURATOR + CHECKOUT PAYMENT LINE (preplan §7 core)
   ================================================================= */

/* Binnen het bestaande product-purchase-panel: bestaand theme paint beschikbaar. */
.gift-card-configurator {
  display: grid;
  min-inline-size: 0;
  gap: 20px; /* dezelfde gedeelde purchase choices-waarde */
}

.gift-card-amounts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px; /* bestaande purchase keuze-gap */
}

.gift-card-artwork {
  --purchase-accent: var(--tenant-accent, var(--accent, var(--color-primary)));
  --purchase-surface: var(--color-surface, var(--bg-surface, #ffffff));
  --purchase-text: var(--text-primary, var(--color-text-primary));
  --purchase-muted: var(--text-secondary, var(--color-text-secondary));
  --purchase-border: var(--border, var(--color-border));
  --purchase-tint: color-mix(in srgb, var(--purchase-accent) 16%, var(--purchase-surface));

  box-sizing: border-box;
  display: grid;
  inline-size: 100%;
  aspect-ratio: 3 / 2;
  min-block-size: 16rem;
  overflow: hidden;
  border-radius: 16px;
  background: var(--purchase-tint);
  color: var(--purchase-text);
}

.gift-card-artwork img {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

.gift-card-message {
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.gift-card-payment-line {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px;
}

.gift-card-payment-line__amount {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

@container product-purchase (max-width: 640px) {
  .gift-card-amounts .product-variant-choice {
    flex-basis: calc(50% - 8px);
  }
}

/* =================================================================
   ARTWORK VARIANTS — semantic data attributes (Website Editor presets)
   ================================================================= */

.gift-card-artwork__media {
  min-inline-size: 0;
  min-block-size: 0;
}

.gift-card-artwork__text-zone {
  box-sizing: border-box;
  display: grid;
  gap: var(--space-1, 4px);
  padding: var(--space-5, 20px) var(--space-6, 24px);
  color: var(--purchase-text);
}

.gift-card-artwork__shop {
  font-size: 0.95rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--purchase-muted);
}

.gift-card-artwork__value {
  font-size: clamp(1.75rem, 4vw, 2.75rem);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}

.product-detail-gallery > .gift-card-artwork {
  min-block-size: 20rem;
}

.gift-card-artwork[data-has-media="true"] {
  grid-template-rows: 1fr auto;
}

.gift-card-artwork[data-artwork-mode="calm"] {
  background: var(--purchase-tint);
  color: var(--purchase-text);
}

.gift-card-artwork[data-artwork-mode="brand"] {
  background: color-mix(in srgb, var(--purchase-accent) 14%, var(--purchase-surface));
  color: var(--purchase-text);
}

.gift-card-artwork[data-artwork-mode="photo"] {
  background: var(--purchase-border);
  color: var(--purchase-text);
}

.gift-card-artwork[data-surface-tone="neutral"] {
  background: var(--purchase-surface);
  color: var(--purchase-text);
  border: 1px solid var(--purchase-border);
}

.gift-card-artwork[data-surface-tone="accent"] {
  background: color-mix(in srgb, var(--purchase-accent) 10%, var(--purchase-surface));
  color: var(--purchase-text);
  border: 1px solid color-mix(in srgb, var(--purchase-accent) 22%, var(--purchase-border));
}

/*
 * No photo: painted card must win over calm/neutral surface (white shops
 * otherwise look like a missing image).
 */
.gift-card-artwork[data-has-media="false"] {
  grid-template: 1fr / 1fr;
  background:
    linear-gradient(
      160deg,
      color-mix(in srgb, var(--purchase-accent) 34%, var(--purchase-surface)),
      color-mix(in srgb, var(--purchase-accent) 12%, var(--purchase-surface)) 48%,
      var(--purchase-tint) 100%
    );
  border: 1px solid color-mix(in srgb, var(--purchase-accent) 28%, var(--purchase-border));
}

.gift-card-artwork[data-has-media="false"][data-artwork-mode="brand"],
.gift-card-artwork[data-has-media="false"][data-surface-tone="accent"] {
  background:
    linear-gradient(
      155deg,
      color-mix(in srgb, var(--purchase-accent) 52%, var(--purchase-surface)),
      color-mix(in srgb, var(--purchase-accent) 22%, var(--purchase-surface)) 60%,
      var(--purchase-tint)
    );
}

.gift-card-artwork__media-error {
  margin: 0;
  padding: var(--space-2) var(--space-3);
  font-size: var(--font-size-sm);
  color: var(--purchase-text-muted);
  background: color-mix(in srgb, var(--purchase-danger, #b42318) 8%, var(--purchase-surface));
  border: 1px solid color-mix(in srgb, var(--purchase-danger, #b42318) 24%, var(--purchase-border));
  border-radius: var(--radius-sm);
}

.gift-card-artwork[data-has-media="false"] > .gift-card-artwork__media {
  display: none;
}

.gift-card-artwork[data-has-media="false"] > .gift-card-artwork__text-zone {
  align-content: end;
  justify-items: start;
  block-size: 100%;
  background: transparent;
}

/* Cover: media fills the card plane. */
.gift-card-artwork[data-media-placement="cover"] {
  grid-template: 1fr / 1fr;
}

.gift-card-artwork[data-media-placement="cover"] > .gift-card-artwork__media,
.gift-card-artwork[data-media-placement="cover"] > img {
  grid-area: 1 / 1;
  inline-size: 100%;
  block-size: 100%;
}

.gift-card-artwork[data-has-media="true"][data-media-placement="cover"] > .gift-card-artwork__text-zone {
  display: grid;
  background: color-mix(in srgb, var(--purchase-surface) 88%, transparent);
}

/*
 * Text-zone: opaque copy band under media so amount/message stay readable
 * on unpredictable photos (preplan §7).
 */
.gift-card-artwork[data-media-placement="text-zone"] {
  grid-template-rows: 1fr auto;
}

.gift-card-artwork[data-media-placement="text-zone"] > .gift-card-artwork__media,
.gift-card-artwork[data-media-placement="text-zone"] > img {
  min-block-size: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

.gift-card-artwork[data-media-placement="text-zone"] > .gift-card-artwork__text-zone {
  display: grid;
  border-block-start: 1px solid var(--purchase-border);
}

/* hero-slider.css */
/**
 * WEBSHOP CONTEXT: Homepage hero slider
 *
 * Carousel chrome + V100 composition (overlay | split | panel).
 * Shared media/overlay/content stack mirrors banners grid-overlap pattern
 * without importing category-grid rules.
 */

.hero-slider {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.hero-slider__viewport {
  display: grid;
  width: 100%;
  overflow: hidden;
  position: relative;
  isolation: isolate;
  min-inline-size: 0;
  /* Reserve height before media decode — avoids empty autoplay / CLS collapse. */
  aspect-ratio: 21 / 9;
  min-block-size: 16rem;
}

.hero-slider:has(.hero-composition--split) .hero-slider__viewport {
  aspect-ratio: unset;
  min-block-size: 20rem;
}

/* All slides share one grid cell so only one visible area stacks in layout. */
.hero-slider__slide {
  grid-area: 1 / 1;
  width: 100%;
  min-width: 0;
  min-inline-size: 0;
  block-size: 100%;
  min-block-size: 100%;
}

.hero-slider__slide:not(.hero-slider__slide--active) {
  visibility: hidden;
  pointer-events: none;
  opacity: 0;
  z-index: 1;
}

.hero-slider__slide--active {
  visibility: visible;
  pointer-events: auto;
  opacity: 1;
  z-index: 2;
  animation: hero-slider-fade-in 0.45s ease;
}

.hero-slider__slide[inert],
.hero-slider__slide[aria-hidden="true"] {
  pointer-events: none;
}

@keyframes hero-slider-fade-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* V100 composition primitives — grid stack like banners natural aspect */
.hero-composition {
  display: grid;
  min-inline-size: 0;
  isolation: isolate;
  width: 100%;
  block-size: 100%;
  min-block-size: 100%;
}

.hero-composition__media,
.hero-composition__overlay,
.hero-composition__content {
  grid-area: 1 / 1;
}

.hero-composition__media {
  min-inline-size: 0;
  overflow: hidden;
  position: relative;
}

.hero-composition__media img,
.hero-composition__media picture,
.hero-composition__media picture img {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

.hero-composition__overlay {
  pointer-events: none;
  z-index: 1;
}

.hero-composition__content {
  position: relative;
  z-index: 2;
  min-inline-size: 0;
  display: flex;
  align-items: flex-end;
}

.hero-composition__copy {
  overflow-wrap: anywhere;
  min-inline-size: 0;
}

.hero-composition--overlay .hero-composition__content {
  padding: var(--space-6);
  align-items: flex-end;
  justify-content: flex-start;
}

.hero-composition--overlay .hero-composition__copy {
  max-inline-size: min(40rem, 100%);
}

.hero-composition--split {
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto;
  align-items: stretch;
  background: var(--bg-surface);
}

.hero-composition--split .hero-composition__content {
  grid-area: 1 / 1;
  grid-column: 1;
  align-items: center;
  padding: var(--space-8);
  background: var(--bg-surface);
}

.hero-composition--split .hero-composition__media {
  grid-area: 1 / 2;
  grid-column: 2;
  min-block-size: 16rem;
}

.hero-composition--split .hero-composition__overlay {
  display: none;
}

.hero-composition--panel .hero-composition__content {
  align-items: flex-end;
  justify-content: flex-start;
  padding: var(--space-6);
}

.hero-composition--panel .hero-composition__copy {
  background: var(--bg-surface);
  color: var(--text-primary);
  padding: var(--space-5);
  border-radius: var(--radius-md, 0.5rem);
  max-inline-size: min(28rem, 100%);
  box-shadow: var(--shadow-sm, 0 1px 2px color-mix(in srgb, var(--text-primary) 12%, transparent));
}

/* Controls row under composition — not overlaid on CTA */
.hero-slider__controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  padding-inline: var(--space-2);
  padding-block: var(--space-1);
}

.hero-slider__nav {
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid var(--border-subtle);
  border-radius: 999px;
  background: color-mix(in srgb, var(--bg-surface) 88%, transparent);
  color: var(--text-primary);
  cursor: pointer;
}

.hero-slider__nav:hover {
  background: var(--bg-surface);
}

.hero-slider__nav:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.hero-slider__dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  flex: 0 1 auto;
}

.hero-slider__dot {
  /* Visible stip stays small; hit area is separate */
  position: relative;
  width: 0.625rem;
  height: 0.625rem;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: color-mix(in srgb, var(--text-primary) 35%, transparent);
  cursor: pointer;
}

.hero-slider__dot::before {
  content: "";
  position: absolute;
  inset: -0.5rem;
}

.hero-slider__dot--active {
  background: var(--text-primary);
}

.hero-slider__dot:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.hero-slider__playback {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-inline-size: 2.75rem;
  min-block-size: 2.75rem;
  padding-inline: var(--space-3);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md, 0.5rem);
  background: var(--bg-surface);
  color: var(--text-primary);
  cursor: pointer;
  font: inherit;
}

.hero-slider__playback:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.hero-slider__status {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.hero-slider__loading {
  position: absolute;
  inset-inline-end: var(--space-3);
  inset-block-start: var(--space-3);
  z-index: 4;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md, 0.5rem);
  background: color-mix(in srgb, var(--bg-surface) 90%, transparent);
  color: var(--text-primary);
  font-size: var(--font-size-sm, 0.875rem);
}

.hero-slider__media-fallback {
  background: var(--bg-surface);
  min-block-size: 12rem;
}

@media (prefers-reduced-motion: reduce) {
  .hero-slider__slide--active {
    animation: none;
  }
}

@media (max-width: 768px) {
  .hero-composition--split {
    grid-template-columns: 1fr;
  }

  .hero-composition--split .hero-composition__media {
    grid-area: 1 / 1;
    grid-column: 1;
    grid-row: 1;
    min-block-size: 12rem;
  }

  .hero-composition--split .hero-composition__content {
    grid-area: 2 / 1;
    grid-column: 1;
    grid-row: 2;
    padding: var(--space-5);
  }

  .hero-composition--panel .hero-composition__content {
    align-items: stretch;
  }

  .hero-composition--panel .hero-composition__copy {
    max-inline-size: none;
    border-radius: 0;
    margin-block-start: auto;
  }

  .hero-composition--overlay .hero-composition__content {
    padding: var(--space-4);
  }

  /*
   * Mobiel: de hoogte van het vak is het maximum van de natuurlijke beeldhoogte en de inhoud —
   * geen vaste ondergrens (16rem) en geen 21/9 meer. Media en inhoud delen één gridcel, dus
   * de cel is zo hoog als de hoogste van de twee. Desktop en de split-compositie blijven gelijk.
   * (KV-005; dezelfde regel voor de enkele hero staat in hero.css en in de critical CSS van storefront.)
   */
  .hero-slider__viewport {
    aspect-ratio: auto;
    min-block-size: 0;
  }

  /* Inhoud in de flow (niet absoluut over het beeld): een hogere inhoud rekt het vak op. */
  .hero-slider .hero-slider__slide .hero-composition__content {
    position: relative;
    inset: auto;
  }

  /*
   * Het beeld vult het hele vak (cover). Zolang het beeld nog niet geladen is geldt 21/9 als
   * plaatshouder (CLS); zodra de echte afmetingen bekend zijn volgt het vak het beeld zelf.
   */
  .hero-slider .hero-slider__slide .hero-composition__media .hero__media {
    inline-size: 100%;
    block-size: 100%;
    aspect-ratio: auto 21 / 9;
    object-fit: cover;
  }

  .hero-slider__nav {
    width: 2.25rem;
    height: 2.25rem;
  }
}

/* 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 (cover mode — legacy gradient shell without <img>) */
.hero--fit-cover.hero--has-image,
.hero[style*="background-image"] {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.hero--fit-cover.hero--has-image {
  min-height: var(--hero-cover-min-height, 500px);
}

/* Cover via <img>: desktop fills min-height box; mobile uses contain (full image visible). */
.hero--fit-cover.hero--has-image .hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--hero-object-position, center center);
  pointer-events: none;
}

/* Contain: flow image sets section height (no tiling) */
.hero--fit-contain {
  min-height: 0;
  display: block;
}

.hero--fit-contain .hero__media {
  width: 100%;
  height: auto;
  display: block;
  vertical-align: top;
}

.hero--fit-contain.hero--has-image {
  background: transparent;
}

.hero--fit-contain .hero-overlay {
  position: absolute;
  inset: 0;
}

.hero--fit-contain .hero-content {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  pointer-events: none;
  box-sizing: border-box;
}

.hero--fit-contain .hero-content .hero-cta,
.hero--fit-contain .hero-content a,
.hero--fit-contain .hero-content button {
  pointer-events: auto;
}

/* Overlay for background images (defaults; tenant config may override inline) */
.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;
  pointer-events: none;
}

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

.hero-content {
  position: relative;
  z-index: 2;
  width: 100%;
  box-sizing: border-box;
  padding: var(--space-12, 48px) 0;
}

/* Full-bleed heroes omit `.container` — still need safe horizontal inset (mobile clip fix). */
.hero-content:not(.container) {
  padding-inline: var(--webshop-content-padding);
}

.hero-text {
  max-width: 600px;
  min-width: 0;
  width: 100%;
  overflow-wrap: anywhere;
}

/* Horizontal text alignment (block presentation) */
.hero-content--align-center {
  display: flex;
  justify-content: center;
}

.hero-content--align-right {
  display: flex;
  justify-content: flex-end;
}

.hero--fit-contain .hero-content--align-center,
.hero--fit-contain .hero-content--align-right {
  justify-content: center;
}

.hero--fit-contain .hero-content--align-right {
  justify-content: flex-end;
}

.hero-content--align-center .hero-text {
  text-align: center;
  margin-inline: auto;
}

.hero-content--align-right .hero-text {
  text-align: right;
  margin-inline-start: auto;
}

.hero-content--align-center .hero-cta,
.hero-content--align-center .pool-hero__actions {
  justify-content: center;
}

.hero-content--align-right .hero-cta,
.hero-content--align-right .pool-hero__actions {
  justify-content: flex-end;
}

.hero-content--align-center .pool-hero__hours,
.hero-content--align-right .pool-hero__hours {
  text-align: inherit;
}

/* When hero has an image, text should be white */
.hero--has-image .hero-title,
.hero--has-image .hero-subtitle,
.hero[style*="background-image"] .hero-title,
.hero[style*="background-image"] .hero-subtitle {
  color: white;
}

/* Whole-hero sectionLink — sibling of CTAs (no nested anchors).
   Free space clicks hit the stretched link; CTAs keep pointer-events. */
.hero__section-link {
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
}

.hero__section-link:focus-visible {
  outline: 2px solid var(--tenant-accent, var(--accent));
  outline-offset: 2px;
}

.hero--has-section-link .hero-content {
  pointer-events: none;
}

.hero--has-section-link .hero-content .hero-cta,
.hero--has-section-link .hero-content a,
.hero--has-section-link .hero-content button,
.hero--has-section-link .hero-content .pool-hero__actions {
  pointer-events: auto;
  position: relative;
  z-index: 4;
}

/* =================================================================
   HERO TYPOGRAPHY
   ================================================================= */

.hero-title {
  font-size: var(--hero-title-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: var(--hero-subtitle-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 .btn,
.hero .btn--primary,
.hero .btn--secondary {
  font-size: var(--hero-cta-size, inherit);
}

/* 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--has-image .btn--secondary,
.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--has-image .btn--secondary:hover,
.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
   ================================================================= */

/* =================================================================
   IMAGE TEXT SECTION
   Full-width background image with rich HTML overlay.
   ================================================================= */

.image-text-section {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 28rem;
  padding: var(--space-10) 0;
  background-color: var(--bg-muted, #1a1a1a);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  overflow: hidden;
}

.image-text-section__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.image-text-section__content {
  position: relative;
  z-index: 2;
  width: 100%;
}

.image-text-section__body {
  color: #fff;
}

.image-text-section__body h1,
.image-text-section__body h2,
.image-text-section__body h3,
.image-text-section__body h4,
.image-text-section__body p,
.image-text-section__body li,
.image-text-section__body strong,
.image-text-section__body em {
  color: inherit;
}

.image-text-section__body a {
  color: #fff;
  text-decoration: underline;
}

@media (max-width: 768px) {
  .image-text-section {
    min-height: 20rem;
    padding: var(--space-8) 0;
  }

  .hero:not(.hero--fit-contain):not(.hero--has-image) {
    min-height: 400px;
  }

  /*
   * Enkele hero met beeld — hoogte = maximum van het beeld (natuurlijke hoogte bij volle breedte)
   * en de inhoud (tekst + knop + ruimte). Beeld en inhoud delen één gridcel; het beeld vult het
   * vak als achtergrond (cover), de tekst blijft binnen het vak. (KV-005)
   * Dezelfde regel staat in storefront `webshop-critical-css.ts` (niet-gelaagd, dus die wint):
   * houd de twee gelijk. Slides in de hero-slider hebben hun eigen regels in hero-slider.css.
   */
  .hero--fit-cover.hero--has-image,
  .hero--fit-contain.hero--has-image {
    --hero-cover-min-height: 0;
    min-height: 0;
    display: block;
    background: transparent;
    overflow: visible;
  }

  .hero--fit-cover.hero--has-image:not(.hero-slider__slide),
  .hero--fit-contain.hero--has-image:not(.hero-slider__slide) {
    display: grid;
  }

  .hero--fit-cover.hero--has-image.hero--full,
  .hero--fit-cover.hero--has-image.hero--compact {
    min-height: 0;
  }

  .hero--fit-cover.hero--has-image:not(.hero-slider__slide) > .hero__media,
  .hero--fit-contain.hero--has-image:not(.hero-slider__slide) > .hero__media {
    grid-area: 1 / 1;
    position: static;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: var(--hero-object-position, center center);
    vertical-align: top;
  }

  /* Inhoud in de flow: een hogere inhoud rekt het vak op (nooit onder de kop of buiten het vak). */
  .hero--fit-cover.hero--has-image:not(.hero-slider__slide) > .hero-content,
  .hero--fit-contain.hero--has-image:not(.hero-slider__slide) > .hero-content {
    grid-area: 1 / 1;
    position: relative;
    inset: auto;
    display: flex;
    align-items: center;
    pointer-events: none;
  }

  .hero--fit-cover.hero--has-image .hero-content .hero-cta,
  .hero--fit-cover.hero--has-image .hero-content a,
  .hero--fit-cover.hero--has-image .hero-content button,
  .hero--fit-cover.hero--has-image .hero-content .pool-hero__actions {
    pointer-events: auto;
  }

  .hero--fit-cover.hero--has-image .hero-overlay {
    bottom: auto;
    height: 100%;
  }

  .hero--full:not(.hero--has-image) {
    min-height: 60vh;
  }

  .hero-content {
    padding-block: var(--space-8);
  }

  .hero-title {
    font-size: min(var(--hero-title-size, 9999px), clamp(1.75rem, 8vw, 2.75rem));
  }

  .hero-subtitle {
    font-size: min(var(--hero-subtitle-size, 9999px), clamp(1rem, 4vw, 1.125rem));
  }

  .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.
 */

/* =================================================================
   TOP BAR (above navbar)
   ================================================================= */

.storefront-top-bar {
  background: var(--bg-elevated, var(--bg-surface));
  border-bottom: 1px solid var(--border-subtle, var(--border));
  font-size: var(--text-sm, 0.875rem);
  color: var(--text-secondary, var(--text-muted));
}

.storefront-top-bar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: 36px;
  padding-top: var(--space-1);
  padding-bottom: var(--space-1);
}

.storefront-top-bar__contact {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
  min-width: 0;
}

.storefront-top-bar__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: inherit;
  text-decoration: none;
  white-space: nowrap;
}

.storefront-top-bar__link:hover {
  color: var(--text-primary);
  text-decoration: underline;
}

@media (max-width: 640px) {
  .storefront-top-bar__inner {
    align-items: center;
    gap: var(--space-3);
    padding-top: var(--space-2);
    padding-bottom: var(--space-2);
  }

  .storefront-top-bar__contact {
    flex: 1 1 auto;
    gap: var(--space-3);
  }

  .storefront-top-bar .product-share--inline {
    margin-left: auto;
    flex: 0 0 auto;
    align-self: center;
  }

  .storefront-top-bar .product-share--inline .product-share-actions {
    justify-content: flex-end;
  }
}

/* =================================================================
   NAVBAR (Header)
   ================================================================= */

.navbar {
  background: var(--bg-surface);
}

/* Split header: chrome row + nav bar paint their own backgrounds — no parent tint bleed. */
.navbar:has([data-storefront-header-chrome-row="true"]),
.navbar:has(.storefront-header-chrome) {
  background: transparent;
}

.navbar:not(:has(.storefront-nav-bar)) {
  border-bottom: 1px solid var(--border);
}

.navbar.navbar-sticky {
  position: sticky;
  top: 0;
  z-index: 100;
  -webkit-backdrop-filter: blur(8px);
  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);
}

/* Full-width chrome shell (logo/search/actions) — same pattern as .storefront-nav-bar */
.storefront-header-chrome,
[data-storefront-header-chrome-row="true"] {
  display: block;
  width: 100%;
  background-color: var(--storefront-header-chrome-bg, var(--bg-surface));
}

.storefront-header-chrome[data-chrome-background],
[data-storefront-header-chrome-row="true"][data-chrome-background] {
  background-color: var(--storefront-header-chrome-bg) !important;
}

.storefront-header-chrome__inner {
  display: block;
  min-height: var(--webshop-header-height, 64px);
}

.storefront-header-chrome.storefront-header-chrome--fixed,
[data-storefront-header-chrome-row="true"].storefront-header-chrome--fixed {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 101;
  box-sizing: border-box;
}

[data-storefront-header-chrome-row="true"] .user-menu-trigger:hover,
[data-storefront-header-chrome-row="true"] .cart-button:hover,
[data-storefront-header-chrome-row="true"] .universal-search__form .input-group:focus-within {
  background: var(--storefront-header-chrome-hover-bg, var(--bg-hover));
}

.universal-search__dropdown {
  background: var(--storefront-search-panel-bg, var(--bg-elevated));
}

[data-storefront-header-chrome-row="true"] .universal-search__item:hover {
  background: var(--storefront-search-panel-hover-bg, var(--bg-hover));
}

.user-menu-dropdown {
  background: var(--storefront-account-panel-bg, var(--bg-surface));
}

[data-storefront-header-chrome-row="true"] .user-menu-item:hover,
[data-storefront-header-chrome-row="true"] .user-menu-item a:hover {
  background: var(--storefront-account-panel-hover-bg, var(--bg-hover));
}

/* Brand/Logo */
.navbar-brand {
  display: inline-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;
  min-width: 0;
  max-width: min(280px, 45vw);
  border: 0;
  background: transparent;
  appearance: none;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.navbar-brand img,
.navbar-brand-logo {
  display: block;
  height: 40px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

.navbar-brand:focus-visible {
  outline: 2px solid var(--color-primary, currentColor);
  outline-offset: 4px;
  border-radius: var(--radius-sm);
}

/* 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 */
.nav-drawer .universal-search__dropdown,
.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;
}

/* Desktop main menu — full-width bar (like top bar), content in .container */
.storefront-nav-bar,
.storefront-nav-bar.hide-mobile {
  display: block;
  width: 100%;
  background-color: var(--storefront-nav-bar-bg, var(--bg-surface));
  border-bottom: 1px solid var(--border);
}

/* Mobile: still hidden via .hide-mobile media query in responsive section. */
@media (max-width: 1024px) {
  .storefront-nav-bar.hide-mobile {
    display: none;
  }
}

/* Tenant menu color: solid bar (backdrop blur only tints when sticky — looks like color works only on scroll). */
.storefront-nav-bar[data-nav-bar-background] {
  background-color: var(--storefront-nav-bar-bg) !important;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.storefront-nav-bar__inner {
  display: flex;
  align-items: center;
  min-height: 0;
}

.storefront-nav-bar.storefront-nav-bar--fixed {
  position: fixed;
  top: var(--storefront-fixed-chrome-height, 0);
  left: 0;
  right: 0;
  width: 100%;
  z-index: 100;
}

.storefront-nav-bar.storefront-nav-bar--fixed:not([data-nav-bar-background]) {
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.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);
}

.storefront-nav-bar .navbar-nav .nav-link:not(.nav-link-sale):hover,
.storefront-nav-bar .navbar-nav .nav-link:not(.nav-link-sale).active {
  background: var(--storefront-menu-hover-bg, 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(--storefront-submenu-bg, 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);
}

.storefront-nav-bar .nav-dropdown-item:hover {
  background: var(--storefront-submenu-hover-bg, 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);
}

/* Brand label (shop name text when no logo) */
.navbar-brand-label {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Mobile category groups */
.nav-mobile-group {
  display: flex;
  flex-direction: column;
}

.nav-mobile-group-header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.nav-mobile-group-header .nav-link {
  flex: 1;
}

/* Toggle button for mobile nav group expand/collapse */
.nav-mobile-group-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  min-width: 44px;
  min-height: 44px;
  border: 0;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  transition: color var(--transition-fast), background-color var(--transition-fast);
}

.nav-mobile-group-toggle:hover {
  color: var(--text-primary);
  background: color-mix(in srgb, var(--bg-elevated) 72%, transparent);
}

.nav-mobile-group-toggle svg {
  transition: transform var(--transition-normal);
}

.nav-mobile-group-toggle[data-expanded="true"] svg {
  transform: rotate(180deg);
}

.nav-mobile-children {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: 0 0 0 var(--space-2);
}

.nav-mobile-children[hidden] {
  display: none;
}

.nav-link-child {
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

.nav-link-child:hover {
  color: var(--text-primary);
}

/* Mobile nav overlay (sibling of header — not in-flow, not a tree view).
   Lives outside `.navbar` so sticky/backdrop-filter do not trap position:fixed. */
.nav-drawer {
  position: fixed;
  inset: 0;
  z-index: 9998;
  pointer-events: none;
}

.nav-drawer[hidden] {
  display: none !important;
}

.nav-drawer-open {
  pointer-events: auto;
}

.nav-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;
}

.nav-drawer-open .nav-drawer-backdrop {
  opacity: 1;
  pointer-events: auto;
}

.nav-drawer-panel {
  position: absolute;
  top: 0;
  inset-inline-end: 0;
  bottom: 0;
  width: min(22rem, 100vw);
  display: flex;
  flex-direction: column;
  background: var(--bg-surface, var(--bg-elevated, #fff));
  box-shadow: var(--shadow-xl, calc(-4px * var(--dir-sign, 1)) 0 24px rgba(0, 0, 0, 0.3));
  transform: translateX(calc(100% * var(--dir-sign, 1)));
  transition: transform var(--transition-normal, 0.3s ease);
}

.nav-drawer-open .nav-drawer-panel {
  transform: translateX(0);
}

body:has(.nav-drawer-open) {
  overflow: hidden;
}

.nav-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, var(--border-subtle));
  flex-shrink: 0;
}

.nav-drawer-title {
  margin: 0;
  font-size: var(--text-lg, 1.125rem);
  font-weight: var(--font-semibold, 600);
  color: var(--text-primary);
}

.nav-drawer-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  min-width: 44px;
  min-height: 44px;
  background: transparent;
  border: 1px solid var(--border, var(--border-subtle));
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  cursor: pointer;
  transition: color var(--transition-fast), border-color var(--transition-fast);
}

.nav-drawer-close:hover {
  color: var(--text-primary);
  border-color: var(--text-secondary);
}

.nav-drawer-body {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.navbar-mobile-search {
  margin-bottom: 0;
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--border);
}

/* Always-visible mobile search bar — own row below the chrome row.
   Hidden on desktop via `.hide-desktop`; shown only on mobile breakpoints. */
.navbar-mobile-search-bar {
  padding: var(--space-3) var(--space-4);
  background: var(--bg-surface, var(--bg, #fff));
  border-bottom: 1px solid var(--border);
}

.navbar-mobile-search-bar .universal-search__form {
  width: 100%;
}

.navbar-mobile-search-bar .input-group {
  width: 100%;
}

.navbar-mobile-search-bar .form-input {
  width: 100%;
}

.navbar-nav-mobile {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-1);
  padding: 0;
}

.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 — default full-bleed band (legacy); column variant used in grid */
.footer-newsletter {
  background: var(--bg-elevated);
  padding: var(--space-8) var(--space-4);
}

.footer-newsletter--column {
  background: transparent;
  padding: 0;
}

.footer-newsletter-content {
  max-width: var(--webshop-content-max, 1400px);
  margin: 0 auto;
  text-align: center;
}

.footer-newsletter--column .footer-newsletter-title,
.footer-newsletter--column .footer-newsletter-text {
  text-align: left;
}

.footer-newsletter--column .footer-newsletter-form {
  margin: 0;
  max-width: none;
  flex-direction: column;
}

.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-section--newsletter {
  background: var(--bg-elevated);
  border-radius: var(--radius-md);
  padding: var(--space-4);
}

/* Footer social row (about column) */
.footer-social {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

.footer-social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  background: var(--bg-elevated);
  transition: background var(--transition-fast), color var(--transition-fast);
}

.footer-social-link:hover {
  background: var(--bg-surface);
  color: var(--tenant-accent, var(--accent));
}

.footer-social-link svg {
  width: 1rem;
  height: 1rem;
}

.footer-social-link-text {
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  letter-spacing: 0.02em;
  line-height: 1;
}

/* 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;
  /*
   * auto-fit collapses unused tracks so 2–3 sections still span the full width
   * even if data-columns is missing (stale markup / CSS cache).
   * data-columns overrides pin exact equal tracks when present.
   */
  grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr));
  gap: var(--space-8);
}

.footer-grid[data-columns="1"] {
  grid-template-columns: minmax(0, 1fr);
}

.footer-grid[data-columns="2"] {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.footer-grid[data-columns="3"] {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.footer-grid[data-columns="4"] {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.footer-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  min-width: 0;
}

.footer-column-block {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-width: 0;
}

.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;
  }

  /* Tighter gap in the main header content row */
  .navbar-content {
    gap: var(--space-3);
  }

  /* Brand grows to fill available space on mobile */
  .navbar-brand {
    flex: 1 1 auto;
    min-width: 0;
  }

  /* Actions stay right-aligned, don't shrink */
  .navbar-actions {
    margin-left: auto;
    flex-shrink: 0;
  }

  /* Compact icon-only user menu trigger on mobile */
  .navbar-actions .user-menu-trigger {
    width: var(--control-height-md, 40px);
    min-width: var(--control-height-md, 40px);
    justify-content: center;
    padding: 0;
  }

  .navbar-nav-mobile {
    gap: var(--space-2);
  }

  /* One row recipe for root items (standalone links and group headers) */
  .navbar-nav-mobile > .nav-link,
  .nav-mobile-group-header .nav-link,
  .nav-mobile-group > .nav-link {
    min-height: 44px;
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-lg);
    background: color-mix(in srgb, var(--bg-elevated) 72%, transparent);
    font-weight: var(--font-medium);
  }

  .nav-mobile-group {
    gap: var(--space-1);
  }

  .nav-link-child {
    min-height: 44px;
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
  }

  .footer-grid,
  .footer-grid[data-columns="2"],
  .footer-grid[data-columns="3"],
  .footer-grid[data-columns="4"] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .footer-grid[data-columns="1"] {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 768px) {
  .footer-grid,
  .footer-grid[data-columns] {
    grid-template-columns: minmax(0, 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;
}

.opening-hours__time-slots {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-1, 4px);
}

.opening-hours__slot {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.opening-hours__slot-time {
  display: block;
}

.opening-hours__slot-note {
  display: block;
  font-size: var(--text-xs, 12px);
  color: var(--text-tertiary, #94a3b8);
  font-style: italic;
  font-weight: var(--font-normal, 400);
  line-height: var(--leading-snug, 1.375);
}

/* Exception / legacy schedule label under times */
.opening-hours__row-label {
  display: block;
  margin-top: var(--space-1, 4px);
  font-size: var(--text-xs, 12px);
  color: var(--text-tertiary, #94a3b8);
  font-style: italic;
  font-weight: var(--font-normal, 400);
  line-height: var(--leading-snug, 1.375);
}

/* 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;
  }

  .opening-hours__time {
    white-space: normal;
  }

  .opening-hours__row--today .opening-hours__row-label {
    color: var(--text-secondary);
  }
}

@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.
 * Card layout: logo centered above partner name, clean & minimal.
 */

.partners-page__header {
  margin-bottom: var(--space-8);
}

.partners-page__header .page-title {
  font-size: var(--page-title-size, 24px);
  font-weight: var(--page-title-weight, 600);
  margin: 0 0 var(--space-2);
}

.partners-page__header .page-subtitle {
  margin: 0;
  color: var(--text-secondary);
}

.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);
}

/* =================================================================
   GRID — Full page
   ================================================================= */

.partners-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-4);
  overflow: hidden;
}

/* =================================================================
   TIER GROUPS
   ================================================================= */

.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);
}

/* =================================================================
   CARD — Vertical layout: logo on top, name below
   ================================================================= */

.partners-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-4);
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  color: inherit;
  text-decoration: none;
  text-align: center;
  transition: transform var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.partners-card:hover {
  border-color: var(--accent-dim);
  box-shadow: var(--shadow-md);
}

/* Compact variant for slider */
.partners-card--compact {
  min-width: 142px;
  padding: var(--space-3);
  gap: var(--space-1);
}

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

.partners-card__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  inline-size: min(100%, 128px);
  block-size: 92px;
  overflow: hidden;
  border-radius: 12px;
  flex-shrink: 0;
}

.partners-card__logo--compact {
  inline-size: 88px;
  block-size: 56px;
  border-radius: 10px;
}

.partners-card__logo img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

.partners-card__logo-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-size: var(--text-2xl);
  font-weight: var(--font-semibold);
  color: var(--tenant-accent, var(--accent));
  background: var(--accent-dim);
  border-radius: inherit;
}

/* =================================================================
   CARD TEXT
   ================================================================= */

.partners-card__title {
  margin: 0;
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--text-primary);
  line-height: 1.3;
}

.partners-card__tier {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.5rem;
  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-xs);
  line-height: 1.5;
  max-width: 28ch;
}

.partners-card__link-icon {
  color: var(--text-muted);
  margin-top: auto;
}

/* =================================================================
   SECTION — Homepage slider wrapper
   ================================================================= */

.partners-section {
  position: relative;
  padding: var(--space-8) 0;
}

.partners-section__header {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}

.partners-section__header .section-title {
  margin: 0;
}

.partners-section__header .page-subtitle {
  margin: var(--space-1) 0 0;
  color: var(--text-secondary);
}

.partners-section__link {
  display: inline-flex;
  align-items: center;
  color: var(--tenant-accent, var(--accent));
  font-weight: var(--font-medium);
  font-size: var(--text-sm);
  text-decoration: none;
  white-space: nowrap;
}

/* =================================================================
   SLIDER — Marquee animation
   ================================================================= */

.partners-slider {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, black 6%, black 94%, transparent);
  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)));
  }
}

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

@media (max-width: 768px) {
  .partners-page__header {
    margin-bottom: var(--space-6);
  }

  .partners-grid {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: var(--space-4);
  }

  .partners-card,
  .partners-card--compact {
    min-width: 0;
  }

  .partners-section__header {
    flex-direction: column;
    align-items: flex-start;
  }

  .partners-slider {
    -webkit-mask-image: none;
    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);
}

.photo-upload__choose-actions,
.photo-upload__change-actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-3, 0.75rem);
}

/* 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); }
}

/* Public check-in verify (/check-in/verify) — layout + footer
 * Eén kolom, geen geneste scroll: body scrollt. Korte pagina: footer onderaan viewport (flex + margin-top: auto). */
.photo-upload.public-check-in-verify {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}

.public-check-in-verify__main {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.photo-upload__powered-by {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2, 0.5rem);
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  margin-top: auto;
  padding-top: var(--space-8, 2rem);
  padding-bottom: var(--space-6, 1.5rem);
  border-top: 1px solid var(--border, #e5e7eb);
  background: var(--bg-base, #f9fafb);
}

.photo-upload__powered-by-label {
  margin: 0;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--text-muted, #9ca3af);
  letter-spacing: 0.04em;
}

.photo-upload__logo--footer {
  margin-top: 0;
  margin-bottom: 0;
}

/* Public check-in verify (/check-in/verify) — dynamic field list */
.public-check-in-verify__page-title {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--text-primary, #111827);
  margin: 0 0 var(--space-2, 0.5rem) 0;
  text-align: center;
}

.public-check-in-verify__page-subtitle {
  font-size: 0.9375rem;
  color: var(--text-secondary, #6b7280);
  margin: 0 0 var(--space-2, 0.5rem) 0;
  text-align: center;
}

.public-check-in-verify__items {
  list-style: none;
  padding: 0;
  margin: var(--space-4, 1rem) 0 0;
  width: 100%;
  max-width: 420px;
  text-align: left;
}

.photo-upload.public-check-in-verify .public-check-in-verify__items {
  text-align: center;
}

.public-check-in-verify__item {
  display: flex;
  flex-direction: column;
  gap: var(--space-1, 0.25rem);
  margin-bottom: var(--space-3, 0.75rem);
  font-size: 0.9375rem;
}

.photo-upload.public-check-in-verify .public-check-in-verify__item {
  align-items: center;
}

.photo-upload.public-check-in-verify .public-check-in-verify__item-value {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.photo-upload.public-check-in-verify .public-check-in-verify__photo-wrap {
  margin-left: auto;
  margin-right: auto;
}

.public-check-in-verify__item-label {
  font-weight: 600;
  color: var(--text-primary, #111827);
}

.public-check-in-verify__item-value {
  color: var(--text-secondary, #6b7280);
  word-break: break-word;
}

.public-check-in-verify__photo-wrap {
  display: block;
  margin-top: var(--space-2, 0.5rem);
}

.public-check-in-verify__photo {
  display: block;
  border-radius: var(--radius-md, 8px);
  max-width: 100%;
  height: auto;
}

.photo-upload__status--error .public-check-in-verify__item-label {
  color: var(--text-primary, #111827);
}

.photo-upload__status--error .public-check-in-verify__item-value {
  color: var(--text-secondary, #6b7280);
}

.public-check-in-verify--admin-preview {
  margin-top: var(--space-4, 1rem);
  align-items: stretch;
}

.public-check-in-verify__valid-badge {
  font-weight: 600;
  margin: 0;
  color: var(--text-primary, #111827);
}

.photo-upload__status--success .public-check-in-verify__valid-badge {
  color: var(--success, #16a34a);
}

/* Mobile optimizations */
@media (max-width: 480px) {
  .photo-upload {
    padding: var(--space-4, 1rem);
  }

  .photo-upload__title {
    font-size: 1.25rem;
  }

  .photo-upload__choose-actions,
  .photo-upload__change-actions {
    gap: var(--space-2, 0.5rem);
  }

  .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--fit-contain {
  min-height: 0;
  display: block;
}

.pool-hero--fit-contain .pool-hero__image {
  position: static;
  width: 100%;
  height: auto;
  object-fit: contain;
  display: block;
}

.pool-hero--fit-contain .pool-hero__content {
  position: relative;
}

.pool-hero--fit-contain.pool-hero--with-image::before {
  display: none;
}

.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(--hero-cta-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;
}

/* Generiek hero wave — bruikbaar buiten pool-hero context */
.hero__wave {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 2;
  line-height: 0;
}

.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-booking-selector.css */
/* Legacy entry — V100 J ownership split */
/* inlined: contexts/webshop/booking/index.css */
/**
 * Appointment booking CSS — ownership split (V100 J).
 * Import order is cascade-sensitive; do not reorder without checking golden lane.
 *
 * Golden lane: appointment booking — solid primary, stepper, chips,
 * rolling day cards, and a footer confirmation bar. Accent = --booking-primary
 * (storefront tokens). Classes match AppointmentPlanner / BookingSlotSelector /
 * AppointmentBookingModal BEM. See GOLDEN-LANE.md + APPOINTMENT-PRIMITIVES.md.
 */

/* inlined: contexts/webshop/booking/booking-tokens.css */
/**
 * Booking visual aliases + geometry — map onto storefront tokens only (no hex).
 * Root selectors establish --booking-* for the appointment experience tree.
 */

.appointment-experience,
.appointment-planner,
.product-booking-selector,
.appointment-booking-checkout,
.modal--appointment-booking {
  /* Paint aliases resolve directly onto Storefront semantic truth. */
  --booking-surface: var(--storefront-surface-elevated);
  --booking-surface-muted: var(--storefront-surface-hover);
  --booking-surface-hover: var(--storefront-surface-hover);
  --booking-surface-selected: var(--storefront-surface-active);
  --booking-accent-subtle: var(--storefront-accent-subtle);
  --booking-text: var(--storefront-text-primary);
  --booking-text-muted: var(--storefront-text-secondary);
  --booking-text-disabled: var(--storefront-text-muted);
  --booking-border: var(--storefront-border);
  --booking-border-strong: var(--storefront-border-strong);
  --booking-primary: var(--storefront-accent);
  --booking-primary-text: var(--storefront-accent-contrast);
  --booking-focus: var(--storefront-focus-ring);
  --booking-accent: var(--storefront-accent);

  /* V100 I — semantic geometry → existing space/radius tokens */
  --booking-gap-xs: var(--space-1);
  --booking-gap-sm: var(--space-2);
  --booking-gap: var(--space-3);
  --booking-gap-lg: var(--space-4);
  --booking-panel-padding: var(--space-4);
  --booking-section-padding: var(--space-4);
  --booking-control-radius: var(--radius-md);
  --booking-panel-radius: var(--radius-lg, var(--radius-md));
  --booking-calendar-cell-min-height: 2.75rem;
  --booking-time-cell-min-height: 2.5rem;
}


/* inlined: contexts/webshop/booking/appointment-shell.css */
/**
 * Appointment shell — planner base, stepper, chips, service options.
 * Appearance shared across page + modal; surfaces only compose.
 */

.product-booking-selector {
  display: flex;
  flex-direction: column;
  gap: var(--booking-gap-lg);
  margin-top: var(--booking-gap-lg);
  padding: var(--booking-panel-padding);
  border: 1px solid var(--booking-border);
  border-radius: var(--booking-panel-radius);
  background: var(--booking-surface);
}

.product-booking-selector__header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2);
}

.product-booking-selector__header strong {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
}

.product-booking-selector__meta {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
}

.product-booking-selector__loading {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
}

/* Rolling flow: keep the open steps vertical, then present both choices as one pair. */
.product-booking-selector__rolling-steps {
  display: flex;
  flex-direction: column;
  gap: var(--booking-gap-lg);
  min-width: 0;
}

.product-booking-selector--rolling.product-booking-selector--time-selected
  .product-booking-selector__rolling-steps {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
}

.product-booking-selector--rolling.product-booking-selector--time-selected
  :is(.product-booking-selector__days--rolling, .product-booking-selector__times) {
  min-width: 0;
  height: 100%;
}

.product-booking-selector--rolling.product-booking-selector--time-selected
  .product-booking-selector__times {
  padding-top: 0;
}

.product-booking-selector--rolling.product-booking-selector--time-selected
  :is(.product-booking-selector__slots--times, .product-booking-selector__day--selected,
    .product-booking-selector__slot--selected) {
  height: 100%;
}

/* The completed date and time are equal controls, including their type contract. */
.product-booking-selector--rolling.product-booking-selector--time-selected
  :is(.product-booking-selector__day--selected, .product-booking-selector__slot--selected) {
  min-height: var(--booking-time-cell-min-height);
  font-family: var(--tenant-font-main, var(--font-sans));
}

.product-booking-selector--rolling.product-booking-selector--time-selected
  :is(.product-booking-selector__day-weekday, .product-booking-selector__slot-time) {
  font-family: var(--tenant-font-main, var(--font-sans));
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
  line-height: 1.25;
  text-transform: none;
}

/*
 * V100 primitives — appearance shared across page + modal; surfaces only compose.
 * Calendar/time cell styles must stay identical between modal and page.
 * See APPOINTMENT-PRIMITIVES.md
 */
.appointment-shell {
  /* inherits planner tokens; compose shell only */
}

.appointment-planner.appointment-shell {
  /* same visual contract as .appointment-planner alone */
}

.appointment-calendar {
  /* rolling days + week nav — shared cell appearance */
}

.appointment-time-grid {
  /* times section — shared cell appearance */
}

/* Chips stay as chips (.product-booking-selector__chips) — no primitive rename. */

.appointment-planner,
.appointment-shell {
  display: flex;
  flex-direction: column;
  gap: var(--booking-gap-lg);
}

.appointment-planner__scroll {
  display: flex;
  flex-direction: column;
  gap: var(--booking-gap-lg);
  min-height: 0;
}

/* Stepper */
.product-booking-selector__stepper {
  display: flex;
  align-items: center;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.product-booking-selector__step {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  flex: 1 1 0;
  min-width: 0;
}

.product-booking-selector__step-index {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  flex: none;
  border-radius: 999px;
  border: 1px solid var(--border-subtle, var(--border));
  background: var(--booking-surface);
  color: var(--booking-text-muted);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
}

.product-booking-selector__step-label {
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.product-booking-selector__step-connector {
  flex: 1 1 auto;
  height: 1px;
  margin-inline: var(--space-2);
  background: var(--border-subtle, var(--border));
  min-width: var(--space-4);
}

.product-booking-selector__step--active .product-booking-selector__step-index {
  background: var(--booking-accent);
  border-color: var(--booking-accent);
  color: var(--booking-primary-text);
}

.product-booking-selector__step--active .product-booking-selector__step-label {
  color: var(--text-primary);
  font-weight: var(--font-semibold);
}

.product-booking-selector__step--done .product-booking-selector__step-index {
  color: var(--booking-accent);
  border-color: var(--booking-border-strong);
  background: var(--booking-accent-subtle);
}

.product-booking-selector__step--done .product-booking-selector__step-label {
  color: var(--text-primary);
}

/* Summary chips */
.product-booking-selector__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.product-booking-selector__chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-3);
  border-radius: 999px;
  border: 1px solid var(--border-subtle, var(--border));
  background: var(--booking-surface-muted);
  color: var(--text-primary);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
}

/* Service selection (multiple offers) */
.product-booking-selector__service-options {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
  gap: var(--space-3);
}

.product-booking-selector__service-option {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: var(--space-3) var(--space-4);
  text-align: left;
  cursor: pointer;
  border: 1px solid var(--booking-border);
  border-radius: var(--radius-md);
  background: var(--booking-surface);
  transition:
    background-color 0.15s ease,
    border-color 0.15s ease;
}

.product-booking-selector__service-option:hover {
  border-color: var(--booking-border-strong);
  background: var(--booking-accent-subtle);
}

.product-booking-selector__service-option-name {
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
}

.product-booking-selector__service-option-meta {
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

@container appointment-shell (max-width: 27.999rem) {
  .product-booking-selector__step-label {
    display: none;
  }

  .product-booking-selector__step {
    flex: 0 0 auto;
  }

  .product-booking-selector__step-connector {
    min-width: var(--space-2);
  }
}


/* inlined: contexts/webshop/booking/appointment-calendar.css */
/**
 * Appointment calendar — days, month, week nav, rolling period.
 * Includes non-appointment NIGHTS/EVENT day/month selector rules (legacy shared).
 */

.product-booking-selector__slots {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
  gap: var(--space-3);
}

.product-booking-selector__week-navigation {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--space-3);
  padding-block: var(--space-1);
}

.product-booking-selector__week-button {
  width: max-content;
  min-width: 0;
  padding: var(--space-2) var(--space-3);
  color: var(--booking-text-muted);
  background: var(--booking-surface);
  border-color: var(--booking-border);
  box-shadow: none;
}

.product-booking-selector__week-button:hover {
  color: var(--text-primary);
  background: var(--booking-surface-muted);
  border-color: var(--border-subtle, var(--border));
}

.product-booking-selector__week-button:disabled {
  cursor: not-allowed;
  color: var(--booking-text-disabled);
  background: var(--booking-surface-muted);
  border-color: var(--border-subtle, var(--border));
  opacity: 1;
}

.product-booking-selector__week-button:last-child {
  justify-self: end;
}

.product-booking-selector__week-label {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
  white-space: nowrap;
}

.product-booking-selector__days {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(5.5rem, 1fr));
  gap: var(--space-2);
}

.product-booking-selector__day {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: 3.75rem;
  padding: var(--space-2);
  cursor: pointer;
  color: var(--booking-text);
  background: var(--booking-surface);
  border: 1px solid var(--booking-border);
  border-radius: var(--booking-control-radius);
  box-shadow: none;
  transition:
    background-color 0.15s ease,
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}

.product-booking-selector__day:hover:not(:disabled):not(.product-booking-selector__day--selected) {
  border-color: var(--booking-border-strong);
  background: var(--booking-accent-subtle);
}

.product-booking-selector__day:focus-visible {
  outline: 2px solid var(--booking-primary);
  outline-offset: 2px;
}

.product-booking-selector__day--selected {
  color: var(--booking-primary-text);
  border-color: var(--booking-primary);
  background: var(--booking-primary);
  box-shadow: none;
}

.product-booking-selector__day--selected .product-booking-selector__day-weekday {
  color: var(--booking-primary-text);
}

.product-booking-selector__day:disabled {
  cursor: not-allowed;
  color: var(--text-muted);
  background: var(--booking-surface-muted);
  opacity: 0.65;
}

.product-booking-selector__day-weekday {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  color: var(--text-secondary);
  text-transform: uppercase;
}

.product-booking-selector__day-date {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  line-height: 1.25;
}

.product-booking-selector__day-number {
  display: none;
}

.product-booking-selector__month-weekdays,
.product-booking-selector__month-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: var(--space-1);
}

.product-booking-selector__month-weekdays span {
  padding-block: var(--space-1);
  color: var(--text-secondary);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  text-align: center;
  text-transform: uppercase;
}

.product-booking-selector__month-day {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 3.25rem;
  padding: var(--space-2);
  color: var(--booking-text);
  font: inherit;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
  background: var(--booking-surface);
  border: 1px solid var(--booking-border);
  border-radius: var(--booking-control-radius);
  transition:
    background-color 0.15s ease,
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}

.product-booking-selector__month-day:hover:not(:disabled):not(.product-booking-selector__month-day--selected) {
  border-color: var(--booking-border-strong);
  background: var(--booking-accent-subtle);
}

.product-booking-selector__month-day:focus-visible {
  outline: 2px solid var(--booking-primary);
  outline-offset: 2px;
}

.product-booking-selector__month-day--selected {
  color: var(--booking-primary-text);
  border-color: var(--booking-primary);
  background: var(--booking-primary);
  box-shadow: none;
}

.product-booking-selector__month-day:disabled {
  cursor: not-allowed;
  color: var(--text-muted);
  background: var(--booking-surface-muted);
  opacity: 0.6;
}

.product-booking-selector__month-day--outside {
  visibility: hidden;
}

.product-booking-selector__month-day-selected-label {
  display: none;
}

@media (max-width: 640px) {
    .product-booking-selector__slots {
      grid-template-columns: 1fr;
    }

    .product-booking-selector__week-navigation {
      grid-template-columns: auto 1fr auto;
      gap: var(--space-2);
    }

    .product-booking-selector__week-button {
      padding-inline: var(--space-2);
      font-size: var(--font-size-xs);
    }

    .product-booking-selector__days {
      grid-template-columns: repeat(7, minmax(0, 1fr));
      gap: var(--space-1);
    }

    .product-booking-selector__day {
      min-height: 3.25rem;
      padding: var(--space-1) 2px;
      border-radius: var(--radius-sm, var(--radius-md));
    }

    .product-booking-selector__day-weekday {
      font-size: 0.6875rem;
    }

    .product-booking-selector__day-date {
      display: none;
    }

    .product-booking-selector__day-number {
      display: block;
      font-size: var(--font-size-sm);
      font-weight: var(--font-weight-semibold);
      line-height: 1.2;
    }

    .product-booking-selector__month-weekdays,
    .product-booking-selector__month-grid {
      gap: 3px;
    }

    .product-booking-selector__month-day {
      min-height: var(--booking-calendar-cell-min-height);
      padding: var(--booking-gap-xs);
      border-radius: var(--radius-sm, var(--booking-control-radius));
      font-size: var(--font-size-xs);
    }

    .product-booking-selector--month-has-selection
      .product-booking-selector__week-navigation,
    .product-booking-selector--month-has-selection
      .product-booking-selector__month-weekdays {
      display: none;
    }

    .product-booking-selector__month-grid--has-selection {
      grid-template-columns: 1fr;
    }

    .product-booking-selector__month-grid--has-selection
      .product-booking-selector__month-day:not(.product-booking-selector__month-day--selected) {
      display: none;
    }

    .product-booking-selector__month-grid--has-selection
      .product-booking-selector__month-day--selected {
      min-height: var(--booking-time-cell-min-height);
      padding: var(--booking-gap-sm) var(--booking-gap);
      color: var(--booking-primary-text);
      font-weight: var(--font-weight-medium);
      border-color: var(--booking-primary);
      border-radius: var(--booking-control-radius);
      background: var(--booking-primary);
      box-shadow: none;
    }

    .product-booking-selector__month-grid--has-selection
      .product-booking-selector__month-day-number {
      display: none;
    }

    .product-booking-selector__month-grid--has-selection
      .product-booking-selector__month-day-selected-label {
      display: inline;
    }

}

/* Rolling period navigation — equal side rails so the month sits on the true center */
/* .appointment-calendar composes week nav + days; cell styles unchanged page vs modal */
.appointment-calendar .product-booking-selector__week-navigation--rolling,
.product-booking-selector__week-navigation--rolling {
  grid-template-columns: 1fr auto 1fr;
  gap: var(--booking-gap);
}

.product-booking-selector__week-navigation--rolling
  > .product-booking-selector__week-button:first-child {
  justify-self: start;
}

.product-booking-selector__week-navigation--rolling
  > .product-booking-selector__week-button:last-child {
  justify-self: end;
}

/* Rolling appointment flow: chosen date becomes the compact, reopenable step. */
.product-booking-selector--rolling.product-booking-selector--day-selected
  .product-booking-selector__week-navigation--rolling {
  display: none;
}

.product-booking-selector--rolling.product-booking-selector--day-selected
  .product-booking-selector__days--rolling {
  grid-template-columns: 1fr;
}

.product-booking-selector--rolling.product-booking-selector--day-selected
  .product-booking-selector__day:not(.product-booking-selector__day--selected) {
  display: none;
}

.product-booking-selector--rolling.product-booking-selector--day-selected
  .product-booking-selector__day--selected {
  min-height: var(--booking-time-cell-min-height);
}

.product-booking-selector__week-navigation--rolling
  > .product-booking-selector__week-label {
  grid-column: 2;
  justify-self: center;
  text-align: center;
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
}

.product-booking-selector__week-button--icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  min-width: 2.25rem;
  padding: var(--space-2);
}

/* ISO week as 3-column rows (like time slots): Mon–Wed, Thu–Sat, Sun alone. */
.appointment-calendar .product-booking-selector__days--rolling,
.product-booking-selector__days--rolling {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--booking-gap-sm);
}

.product-booking-selector--rolling .product-booking-selector__day {
  gap: 0;
  min-height: 3.25rem;
  padding: var(--booking-gap) var(--booking-gap-sm);
  justify-content: center;
  border-radius: var(--booking-control-radius);
}

.product-booking-selector--rolling .product-booking-selector__day--past,
.product-booking-selector--rolling .product-booking-selector__day--past:disabled {
  color: var(--booking-text-disabled);
  background: var(--booking-surface-muted);
  border-color: var(--border-subtle, var(--border));
  opacity: 1;
  cursor: not-allowed;
}

.product-booking-selector--rolling
  .product-booking-selector__day--past
  .product-booking-selector__day-weekday {
  color: var(--booking-text-disabled);
}

.product-booking-selector--rolling .product-booking-selector__day-weekday {
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  text-transform: none;
}

.product-booking-selector__day-month {
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

/* Desktop selected day = solid primary (include :hover/:focus so sticky mobile hover cannot wash it out). */
.product-booking-selector--rolling
  .product-booking-selector__day--selected,
.product-booking-selector--rolling
  .product-booking-selector__day--selected:hover,
.product-booking-selector--rolling
  .product-booking-selector__day--selected:hover:not(:disabled),
.product-booking-selector--rolling
  .product-booking-selector__day--selected:focus,
.product-booking-selector--rolling
  .product-booking-selector__day--selected:focus:not(:disabled),
.product-booking-selector--rolling
  .product-booking-selector__day--selected:active,
.product-booking-selector--rolling
  .product-booking-selector__day--selected:active:not(:disabled) {
  color: var(--booking-primary-text);
  border-color: var(--booking-primary);
  background: var(--booking-primary);
  box-shadow: none;
}

.product-booking-selector--rolling
  .product-booking-selector__day--selected
  .product-booking-selector__day-weekday,
.product-booking-selector--rolling
  .product-booking-selector__day--selected:hover
  .product-booking-selector__day-weekday,
.product-booking-selector--rolling
  .product-booking-selector__day--selected:hover:not(:disabled)
  .product-booking-selector__day-weekday,
.product-booking-selector--rolling
  .product-booking-selector__day--selected:focus
  .product-booking-selector__day-weekday,
.product-booking-selector--rolling
  .product-booking-selector__day--selected:active
  .product-booking-selector__day-weekday {
  color: var(--booking-primary-text);
}

@container appointment-shell (max-width: 27.999rem) {
    .product-booking-selector__days--rolling {
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: var(--booking-gap-sm);
    }

    .product-booking-selector--rolling .product-booking-selector__day {
      min-height: var(--booking-time-cell-min-height);
      padding: var(--booking-gap-sm) var(--booking-gap);
      border: 1px solid var(--booking-border);
      border-radius: var(--booking-control-radius);
      background: var(--booking-surface);
      box-shadow: none;
    }

    .product-booking-selector--rolling
      .product-booking-selector__day:hover:not(:disabled):not(.product-booking-selector__day--selected) {
      border-color: var(--booking-border-strong);
      background: var(--booking-accent-subtle);
    }

    .product-booking-selector--rolling
      .product-booking-selector__day--past:hover:not(:disabled),
    .product-booking-selector--rolling
      .product-booking-selector__day--past:disabled:hover {
      border-color: var(--border-subtle, var(--border));
      background: var(--booking-surface-muted);
    }

    .product-booking-selector--rolling .product-booking-selector__day-weekday {
      font-size: var(--text-sm);
      font-weight: var(--font-medium);
    }

    .product-booking-selector--rolling
      .product-booking-selector__day--selected,
    .product-booking-selector--rolling
      .product-booking-selector__day--selected:hover,
    .product-booking-selector--rolling
      .product-booking-selector__day--selected:hover:not(:disabled),
    .product-booking-selector--rolling
      .product-booking-selector__day--selected:focus,
    .product-booking-selector--rolling
      .product-booking-selector__day--selected:focus:not(:disabled),
    .product-booking-selector--rolling
      .product-booking-selector__day--selected:active,
    .product-booking-selector--rolling
      .product-booking-selector__day--selected:active:not(:disabled) {
      color: var(--booking-primary-text);
      border-color: var(--booking-primary);
      background: var(--booking-primary);
    }

    .product-booking-selector--rolling
      .product-booking-selector__day--selected
      .product-booking-selector__day-weekday,
    .product-booking-selector--rolling
      .product-booking-selector__day--selected:hover
      .product-booking-selector__day-weekday,
    .product-booking-selector--rolling
      .product-booking-selector__day--selected:hover:not(:disabled)
      .product-booking-selector__day-weekday,
    .product-booking-selector--rolling
      .product-booking-selector__day--selected:focus
      .product-booking-selector__day-weekday,
    .product-booking-selector--rolling
      .product-booking-selector__day--selected:active
      .product-booking-selector__day-weekday {
      color: var(--booking-primary-text);
    }

}


/* inlined: contexts/webshop/booking/appointment-time-grid.css */
/**
 * Appointment time grid — times / slots (shared appearance page + modal).
 */

.product-booking-selector__slot {
  --booking-slot-accent: var(--booking-primary);
  --booking-slot-surface: var(--booking-accent-subtle);

  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-1);
  width: 100%;
  min-height: 3.75rem;
  padding: var(--space-3) var(--space-3) var(--space-3) calc(var(--space-3) + 2px);
  text-align: left;
  white-space: normal;
  cursor: pointer;
  border: 1px solid transparent;
  border-radius: var(--booking-control-radius);
  border-left: 3px solid var(--booking-slot-accent);
  background: var(--booking-slot-surface);
  color: var(--text-primary);
  font: inherit;
  box-shadow: none;
  transition:
    background-color 0.15s ease,
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}

.product-booking-selector__slot:hover:not(.product-booking-selector__slot--selected) {
  background: var(--booking-surface-hover);
}

.product-booking-selector__slot:focus-visible {
  outline: 2px solid var(--booking-slot-accent);
  outline-offset: 2px;
}

.product-booking-selector__slot--selected {
  color: var(--booking-primary-text);
  border-color: var(--booking-primary);
  background: var(--booking-primary);
  box-shadow: none;
}

.product-booking-selector__slot--selected .product-booking-selector__slot-date,
.product-booking-selector__slot--selected .product-booking-selector__slot-time,
.product-booking-selector__slot--selected .product-booking-selector__slot-meta {
  color: var(--booking-primary-text);
}

.product-booking-selector__times {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding-top: var(--space-1);
}

.product-booking-selector__times-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--border-subtle, var(--border));
}

.product-booking-selector__times-heading strong {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
}

.product-booking-selector__times-heading span {
  font-size: var(--font-size-xs);
  color: var(--text-secondary);
}

.product-booking-selector__times--upcoming:first-of-type
  .product-booking-selector__times-heading {
  padding-top: 0;
  border-top: 0;
}

.product-booking-selector__slots--times {
  grid-template-columns: repeat(auto-fill, minmax(6.5rem, 1fr));
  gap: var(--space-2);
}

.product-booking-selector__slot--time {
  align-items: center;
  justify-content: center;
  min-height: var(--booking-time-cell-min-height);
  padding: var(--booking-gap-sm) var(--booking-gap);
  text-align: center;
  border: 1px solid var(--booking-border);
  background: var(--booking-surface);
}

.product-booking-selector__slot--time:hover:not(.product-booking-selector__slot--selected) {
  border-color: var(--booking-border-strong);
  background: var(--booking-accent-subtle);
}

.product-booking-selector__slot--time.product-booking-selector__slot--selected {
  color: var(--booking-primary-text);
  border-color: var(--booking-primary);
  background: var(--booking-primary);
  box-shadow: none;
}

.product-booking-selector__slot--time .product-booking-selector__slot-time {
  font-weight: var(--font-weight-medium);
  color: var(--text-primary);
}

.product-booking-selector__slot-date {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  line-height: 1.35;
  color: var(--text-primary);
}

.product-booking-selector__slot-time {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-regular);
  line-height: 1.35;
  color: var(--text-secondary);
}

.product-booking-selector__slot-meta {
  font-size: var(--font-size-xs);
  color: var(--text-secondary);
  font-weight: var(--font-weight-regular);
}

.product-booking-selector__more {
  grid-column: 1 / -1;
  justify-self: start;
  margin-top: var(--space-1);
}

@media (max-width: 640px) {
    .product-booking-selector__slots--times {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    /* Collapse to the chosen slot only — not in rolling (golden-lane) appointment mode. */
    .product-booking-selector:not(.product-booking-selector--rolling)
      .product-booking-selector__slots--times.product-booking-selector__slots--has-selection {
      grid-template-columns: 1fr;
    }

    .product-booking-selector:not(.product-booking-selector--rolling)
      .product-booking-selector__times--has-selection {
      padding-top: 0;
    }

    .product-booking-selector:not(.product-booking-selector--rolling)
      .product-booking-selector__times--has-selection
      .product-booking-selector__times-heading {
      display: none;
    }

    .product-booking-selector:not(.product-booking-selector--rolling).product-booking-selector--slots-has-selection
      .product-booking-selector__times--upcoming:not(.product-booking-selector__times--selected-day) {
      display: none;
    }

    .product-booking-selector:not(.product-booking-selector--rolling).product-booking-selector--slots-has-selection
      .product-booking-selector__more {
      display: none;
    }

    .product-booking-selector:not(.product-booking-selector--rolling)
      .product-booking-selector__slots--has-selection
      .product-booking-selector__slot:not(.product-booking-selector__slot--selected) {
      display: none;
    }

}

/* Selected time = solid primary fill (confirm CTA stays accent). */
.product-booking-selector__slot--time.product-booking-selector__slot--selected {
  color: var(--booking-primary-text);
  border-color: var(--booking-primary);
  background: var(--booking-primary);
  box-shadow: none;
}

.product-booking-selector__slot--time.product-booking-selector__slot--selected:hover {
  background: var(--storefront-accent-hover, var(--booking-primary));
  border-color: var(--booking-primary);
}

.product-booking-selector__slot--time.product-booking-selector__slot--selected
  .product-booking-selector__slot-time {
  color: var(--booking-primary-text);
}

/* Rolling appointment flow: chosen time becomes the compact, reopenable step. */
.product-booking-selector--rolling.product-booking-selector--time-selected
  .product-booking-selector__times-heading {
  display: none;
}

.product-booking-selector--rolling.product-booking-selector--time-selected
  .product-booking-selector__slots--times {
  grid-template-columns: 1fr;
}

.product-booking-selector--rolling.product-booking-selector--time-selected
  .product-booking-selector__slot--time:not(.product-booking-selector__slot--selected) {
  display: none;
}

/* "Show more times" link */
.product-booking-selector__more--link {
  grid-column: 1 / -1;
  justify-self: center;
  margin-top: var(--space-2);
  padding: var(--space-1) var(--space-2);
  border: 0;
  background: transparent;
  color: var(--text-primary);
  font: inherit;
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  text-decoration: none;
  cursor: pointer;
}

.product-booking-selector__more--link:hover {
  text-decoration: underline;
}

/* Six time slots per row on wide shells; Compact/Medium override via @container (V100 E). */
.product-booking-selector--rolling .appointment-time-grid,
.product-booking-selector--rolling .product-booking-selector__slots--times {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.product-booking-selector--rolling .product-booking-selector__slot-time {
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--text-primary);
}

.product-booking-selector--rolling
  .product-booking-selector__slot--selected
  .product-booking-selector__slot-time {
  color: var(--booking-primary-text);
}

/* "Available times" heading + moment counter */
.product-booking-selector--rolling
  .product-booking-selector__times-heading
  strong {
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
}

.product-booking-selector--rolling
  .product-booking-selector__times-heading
  span {
  font-size: var(--text-sm);
}

@container appointment-shell (max-width: 27.999rem) {
    .product-booking-selector--rolling .appointment-time-grid,
    .product-booking-selector--rolling .product-booking-selector__slots--times {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }

}

@container appointment-shell (min-width: 28rem) and (max-width: 40rem) {
    .product-booking-selector--rolling .appointment-time-grid,
    .product-booking-selector--rolling .product-booking-selector__slots--times {
      grid-template-columns: repeat(5, minmax(0, 1fr));
    }

}

@container appointment-shell (min-width: 40rem) {
    .product-booking-selector--rolling .appointment-time-grid,
    .product-booking-selector--rolling .product-booking-selector__slots--times {
      grid-template-columns: repeat(6, minmax(0, 1fr));
    }

}


/* inlined: contexts/webshop/booking/appointment-selection.css */
/**
 * Selection summary + golden-lane checkout chrome (shared appearance).
 */

.product-booking-selector__summary {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding-top: var(--space-3);
  border-top: 1px solid var(--border-subtle, var(--border));
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
}

.product-booking-selector__summary strong {
  color: var(--text-primary);
  font-weight: var(--font-weight-semibold);
}

.product-booking-selector__stay-fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  gap: var(--space-3);
}

.appointment-booking-checkout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-3);
  padding: var(--space-3);
  border: 1px solid var(--booking-border);
  border-radius: var(--radius-md);
  background: var(--booking-surface);
}

.appointment-selection-summary,
.appointment-booking-checkout__selection {
  display: grid;
  gap: 2px;
  min-width: 0;
}

/* Never style all descendant spans — that collapsed Date+Time into "DateTime". */
.appointment-selection-summary > strong,
.appointment-booking-checkout__selection > strong {
  overflow: visible;
  color: var(--booking-text);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
  line-height: 1.35;
  white-space: normal;
  overflow-wrap: anywhere;
}

.appointment-confirm-action,
.appointment-booking-checkout > .add-to-cart.appointment-booking-checkout__action {
  display: block;
  width: auto;
}

.appointment-confirm-action .add-to-cart-btn,
.appointment-booking-checkout__action .add-to-cart-btn {
  display: inline-flex;
  flex: none;
  width: auto;
  min-width: 12rem;
}

@media (max-width: 640px) {
    .appointment-booking-checkout {
      grid-template-columns: 1fr;
    }

    .appointment-booking-checkout > .add-to-cart.appointment-booking-checkout__action,
    .appointment-booking-checkout__action .add-to-cart-btn {
      width: 100%;
    }

}

/* Enriched footer confirmation bar (golden lane) — CTA first, summary directly below. */
.appointment-booking-checkout--golden-lane {
  grid-template-columns: 1fr;
  grid-template-areas:
    "action"
    "selection";
  align-items: center;
  gap: var(--booking-gap);
  margin-top: var(--booking-gap-lg);
  padding: var(--booking-panel-padding);
  border: 1px solid var(--booking-border);
  border-radius: var(--booking-panel-radius);
  background: var(--booking-surface);
}

.appointment-booking-checkout--golden-lane .appointment-booking-checkout__selection {
  grid-area: selection;
  display: flex;
  align-items: stretch;
  gap: var(--booking-gap);
  min-width: 0;
}

/*
 * Prefixed with the variant class so these beat the generic
 * `.appointment-booking-checkout__selection span|strong` rules above.
 */
.appointment-booking-checkout--golden-lane
  .appointment-booking-checkout__selection-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  align-self: stretch;
  aspect-ratio: 1 / 1;
  width: auto;
  height: auto;
  min-width: 3.5rem;
  border-radius: var(--booking-control-radius);
  color: var(--text-primary);
  background: var(--booking-surface-muted);
  font-size: inherit;
  letter-spacing: normal;
  text-transform: none;
}

.appointment-booking-checkout--golden-lane
  .appointment-booking-checkout__selection-icon
  svg {
  width: 48%;
  height: 48%;
}

.appointment-booking-checkout--golden-lane
  .appointment-booking-checkout__selection-text {
  display: grid;
  gap: 2px;
  min-width: 0;
  font-size: inherit;
  letter-spacing: normal;
  text-transform: none;
}

.appointment-booking-checkout--golden-lane
  .appointment-booking-checkout__selection-label {
  color: var(--text-secondary);
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  letter-spacing: normal;
  text-transform: none;
}

.appointment-booking-checkout--golden-lane
  .appointment-booking-checkout__selection-value {
  display: grid;
  gap: 2px;
  overflow: visible;
  color: var(--text-primary);
  font-size: var(--text-lg);
  font-weight: var(--font-bold);
  line-height: 1.35;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: normal;
  hyphens: auto;
}

.appointment-booking-checkout--golden-lane
  .appointment-booking-checkout__selection-date,
.appointment-booking-checkout--golden-lane
  .appointment-booking-checkout__selection-time {
  display: block;
  min-width: 0;
  color: var(--booking-text);
  letter-spacing: normal;
  text-transform: none;
  font-size: inherit;
  font-weight: inherit;
}

.appointment-booking-checkout--golden-lane
  .appointment-booking-checkout__selection-time {
  color: var(--booking-text);
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
}

/* Empty state keeps date/time typography so the footer does not jump. */
.appointment-booking-checkout--golden-lane
  .appointment-booking-checkout__selection-value--empty {
  color: var(--booking-text);
  font-size: var(--text-lg);
  font-weight: var(--font-bold);
}

.appointment-booking-checkout--golden-lane
  .appointment-booking-checkout__selection-value--empty
  .appointment-booking-checkout__selection-date,
.appointment-booking-checkout--golden-lane
  .appointment-booking-checkout__selection-value--empty
  .appointment-booking-checkout__selection-time {
  color: var(--booking-text-muted);
}

.appointment-booking-checkout--golden-lane
  > .add-to-cart.appointment-booking-checkout__action {
  grid-area: action;
  display: block;
  width: 100%;
}

@container appointment-shell (max-width: 27.999rem) {
    .appointment-booking-checkout--golden-lane
      > .add-to-cart.appointment-booking-checkout__action,
    .appointment-confirm-action .add-to-cart-btn,
    .appointment-booking-checkout__action .add-to-cart-btn {
      width: 100%;
    }

}

@container appointment-shell (min-width: 28rem) and (max-width: 40rem) {
    .appointment-booking-checkout--golden-lane {
      grid-template-columns: 1fr;
      grid-template-areas:
        "action"
        "selection";
    }

}


/* inlined: contexts/webshop/booking/appointment-contact.css */
/**
 * Contact composition + express hierarchy (V100 F/H).
 * Control chrome lives in forms-storefront.css via .storefront-form-fields.
 */

/* Free appointment express book: contact + confirm without cart/checkout.
 * Always stacked — the selection card sits directly below the confirm CTA. */
.appointment-booking-checkout--express {
  grid-template-columns: 1fr;
  grid-template-areas:
    "contact"
    "action"
    "selection";
  align-items: stretch;
  gap: var(--booking-gap-lg);
  /* Outer express is a lane, not one crushed card. */
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 0;
  margin-top: var(--booking-gap-lg);
}

.appointment-planner--modal .appointment-booking-checkout--express,
.appointment-planner--page .appointment-booking-checkout--express {
  margin-inline: 0;
  margin-bottom: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: var(--booking-gap-lg) 0 0;
  border-top: 1px solid var(--booking-border);
}

.appointment-planner--modal .appointment-booking-checkout--express {
  /* Modal golden-lane footer strip — subtle accent wash (page stays white). */
  padding: var(--booking-panel-padding) var(--space-5)
    max(var(--booking-panel-padding), env(safe-area-inset-bottom));
  margin-inline: calc(-1 * var(--space-5));
  background: var(--booking-accent-subtle);
}

.appointment-planner--page .appointment-booking-checkout--express {
  /* Page: white lane — no permanent accent panel behind contact/CTA. */
  padding: var(--booking-gap-lg) 0 0;
  margin-inline: 0;
  margin-bottom: 0;
  background: transparent;
}

/* Selection is its own calm card; contact + action sit outside that card. */
.appointment-booking-checkout--express .appointment-selection-summary,
.appointment-booking-checkout--express .appointment-booking-checkout__selection {
  grid-area: selection;
  display: flex;
  align-items: stretch;
  gap: var(--booking-gap);
  min-width: 0;
  padding: var(--booking-panel-padding);
  border: 1px solid var(--booking-border);
  border-radius: var(--booking-panel-radius);
  background: var(--booking-surface);
}

/* Compact/Medium: contact fields single column; Wide unlocks first|last name row. */
.appointment-booking-checkout--express .storefront-form-fields__row,
.appointment-contact-form .storefront-form-fields__row {
  grid-template-columns: 1fr;
}

/*
 * V100 H — booking owns composition only (grid area + section spacing).
 * Control chrome (input / label / checkbox / error / heights / borders / fills)
 * lives exclusively in forms-storefront.css via `.storefront-form-fields`.
 */
.appointment-booking-checkout--express .appointment-contact-form,
.appointment-booking-checkout--express .appointment-booking-checkout__contact {
  grid-area: contact;
  min-width: 0;
}

.appointment-booking-checkout--express .appointment-confirm-action,
.appointment-booking-checkout--express .appointment-booking-checkout__action {
  grid-area: action;
  display: block;
  width: 100%;
}

.appointment-booking-checkout--express .appointment-confirm-action .add-to-cart-btn,
.appointment-booking-checkout--express
  .appointment-booking-checkout__action
  .add-to-cart-btn {
  width: 100%;
}

.appointment-booking-checkout--express-success {
  grid-template-areas: "selection";
  grid-template-columns: 1fr;
}

.appointment-booking-checkout__success {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  min-width: 0;
}

.appointment-booking-checkout__success-text {
  display: grid;
  gap: var(--space-1);
  min-width: 0;
}

.appointment-booking-checkout__success-title {
  color: var(--text-primary);
  font-size: var(--text-lg);
  font-weight: var(--font-bold);
  line-height: 1.35;
}

.appointment-booking-checkout__success-body,
.appointment-booking-checkout__success-note {
  margin: 0;
  color: var(--text-secondary);
  font-size: var(--text-sm);
  line-height: 1.45;
}

.appointment-booking-checkout__success-ref {
  margin: 0;
  color: var(--text-primary);
  font-size: var(--text-sm);
}

.appointment-booking-checkout__success-ref-value {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-weight: var(--font-semibold);
}

@container appointment-shell (min-width: 28rem) and (max-width: 40rem) {
    .appointment-booking-checkout--express {
      grid-template-columns: 1fr;
      grid-template-areas:
        "contact"
        "action"
        "selection";
    }

    .appointment-booking-checkout--express .storefront-form-fields__row,
    .appointment-contact-form .storefront-form-fields__row {
      grid-template-columns: 1fr;
    }

}

@container appointment-shell (min-width: 40rem) {
  /* Express stays stacked even on wide shells. */
    .appointment-booking-checkout--express {
      grid-template-columns: 1fr;
      grid-template-areas:
        "contact"
        "action"
        "selection";
    }

    .appointment-booking-checkout--express .storefront-form-fields__row,
    .appointment-contact-form .storefront-form-fields__row {
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }

}


/* inlined: contexts/webshop/booking/appointment-modal.css */
/**
 * Modal composition ONLY — width, scroll, sticky footer margins.
 * Do not redefine selected day/slot appearance here (purity / golden lane).
 */

.appointment-planner--modal {
  flex: 1 1 auto;
  min-height: 0;
  gap: 0;
}

.appointment-planner--modal.appointment-shell,
.appointment-experience.appointment-shell {
  container-type: inline-size;
  container-name: appointment-shell;
}

.appointment-planner--modal .appointment-planner__scroll {
  flex: 1 1 auto;
  overflow-y: auto;
  padding-bottom: var(--booking-section-padding);
  -webkit-overflow-scrolling: touch;
}

.modal.modal--appointment-booking {
  /* Visual golden lane width — do not diverge calendar/time cell colors from page. */
  width: calc(100% - var(--space-4));
  max-width: 52rem;
  max-height: calc(100dvh - var(--space-6));
  transition: none;
}

.modal--appointment-booking .modal__body {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  padding: var(--space-4) var(--space-5) 0;
}

.modal--appointment-booking .product-booking-selector {
  gap: var(--space-3);
  margin-top: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.appointment-planner--modal .appointment-booking-checkout--golden-lane {
  flex: none;
  margin-top: 0;
  margin-inline: calc(-1 * var(--space-5));
  border-radius: 0;
  border-left: 0;
  border-right: 0;
  border-bottom: 0;
  padding: var(--booking-panel-padding) var(--space-5)
    max(var(--booking-panel-padding), env(safe-area-inset-bottom));
  background: var(--booking-accent-subtle);
  border-top: 1px solid var(--booking-border);
}

/* Modal heading — icon tile, title, subtitle */
.modal--appointment-booking .modal__header .product-booking-selector__chips {
  min-width: 0;
  flex: 1 1 auto;
  align-items: center;
}

/* Match close control to chip height (chips use space-1 + text-sm). */
.modal--appointment-booking .modal__close {
  width: 1.875rem;
  height: 1.875rem;
  flex: 0 0 1.875rem;
  border-radius: var(--radius-sm, 0.375rem);
}

.modal--appointment-booking .modal__close svg {
  width: 0.875rem;
  height: 0.875rem;
}

.appointment-booking-modal__header-spacer {
  display: block;
  min-width: 0;
  flex: 1 1 auto;
}

@media (max-width: 640px) {
  .modal.modal--appointment-booking,
  .modal.modal--appointment-booking.is-open {
    inset: 0;
    width: 100%;
    height: 100dvh;
    max-width: none;
    max-height: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    transform: none;
  }

  .modal--appointment-booking .modal__header {
    padding-top: max(var(--space-4), env(safe-area-inset-top));
  }

  .modal--appointment-booking .modal__body {
    padding: var(--space-3) var(--space-4) 0;
  }

  /* Device chrome only — safe-area / modal edge insets (not width layout). */
  .appointment-planner--modal .appointment-booking-checkout--golden-lane {
    margin-inline: calc(-1 * var(--booking-panel-padding));
    padding-inline: var(--booking-panel-padding);
  }
}


/* inlined: contexts/webshop/booking/appointment-page.css */
/**
 * Page/lane composition ONLY — container, full-bleed, min-width.
 * Do not redefine selected day/slot appearance here (purity / golden lane).
 *
 * V100 correction: page is white canvas + calm borders — no permanent grey/blue panel.
 * Accent is for selection only, not page background.
 */

/*
 * Page sibling of modal golden lane — container-driven (V100 D/E).
 * Transparent page shell; calendar module + selection stay calm bordered whites.
 */
.appointment-planner--page,
.appointment-planner--page.appointment-shell {
  container-type: inline-size;
  container-name: appointment-shell;
  gap: var(--booking-gap-lg);
  padding: 0;
  border: 0;
  border-radius: 0;
  background: var(--booking-surface);
  min-width: min(100%, 22rem);
  color: var(--booking-text);
}

/* Optional layout hook when the page planner is forced full-bleed of the content area. */
.appointment-planner--page-full {
  min-width: 0;
  width: 100%;
}

/* Calendar/times module: one calm bordered surface (not a nested paint stack). */
.appointment-planner--page .product-booking-selector {
  gap: var(--booking-gap);
  margin-top: 0;
  padding: var(--booking-panel-padding);
  border: 1px solid var(--booking-border);
  border-radius: var(--booking-panel-radius);
  background: var(--booking-surface);
}

.appointment-planner--page .product-booking-selector__chips {
  margin-bottom: 0;
}

.appointment-planner--page > .product-booking-selector__chips,
.appointment-planner--page .appointment-planner__scroll > .product-booking-selector__chips {
  margin-bottom: var(--booking-gap);
}

.appointment-planner--page .appointment-planner__scroll {
  display: flex;
  flex-direction: column;
  gap: var(--booking-gap-lg);
  padding-bottom: 0;
  background: transparent;
}

/*
 * Paid page footer: one calm white selection+CTA card (no accent wash).
 * Express keeps transparent lane — its selection card is owned in contact.css.
 */
.appointment-planner--page
  .appointment-booking-checkout--golden-lane:not(.appointment-booking-checkout--express) {
  flex: none;
  margin: var(--booking-gap-lg) 0 0;
  padding: var(--booking-panel-padding);
  border: 1px solid var(--booking-border);
  border-radius: var(--booking-panel-radius);
  background: var(--booking-surface);
}

.appointment-planner--page .appointment-booking-checkout--express {
  flex: none;
  margin: var(--booking-gap-lg) 0 0;
  padding: var(--booking-gap-lg) 0 0;
  border: 0;
  border-radius: 0;
  border-top: 1px solid var(--booking-border);
  background: transparent;
}

@container appointment-shell (max-width: 27.999rem) {
  .appointment-planner--page .product-booking-selector {
    padding: var(--booking-gap);
  }

  .appointment-planner--page
    .appointment-booking-checkout--golden-lane:not(.appointment-booking-checkout--express) {
    margin-inline: 0;
    margin-bottom: 0;
  }
}





/* 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;
  /* Top spacing: tenant title/breadcrumb slot margins (not page padding). */
  padding: 0 var(--webshop-content-padding, var(--space-6)) var(--space-8);
}

.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;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  margin: 0;
}

.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;
}

/* Title slot wrappers (tenant column + alignment) */
.product-detail-title-slot {
  display: flex;
  width: 100%;
  /* Vertical margin: tenant productDetailTitleSpacingPx (inline on slot). */
}

.product-detail-title-slot.product-detail-title--align-left {
  justify-content: flex-start;
}

.product-detail-title-slot.product-detail-title--align-center {
  justify-content: center;
}

.product-detail-title-slot.product-detail-title--align-right {
  justify-content: flex-end;
}

.product-detail-title-slot .product-detail-title {
  width: auto;
  max-width: 100%;
  margin: 0;
}

/* Short description (above purchase stack; WooCommerce-style) */
.product-short-description-slot {
  display: flex;
  width: 100%;
}

.product-short-description-slot.product-short-description--align-left {
  justify-content: flex-start;
}

.product-short-description-slot.product-short-description--align-center {
  justify-content: center;
}

.product-short-description-slot.product-short-description--align-right {
  justify-content: flex-end;
}

.product-short-description {
  width: 100%;
  max-width: 100%;
  font-size: var(--font-size-base);
  line-height: 1.6;
  color: var(--text-secondary);
}

.product-short-description-slot.product-short-description--align-center .product-short-description,
.product-short-description-slot.product-short-description--align-right .product-short-description {
  width: auto;
  max-width: 100%;
}

.product-short-description p {
  margin: 0 0 var(--space-2);
}

.product-short-description p:last-child {
  margin-bottom: 0;
}

/* Breadcrumb slot wrappers (tenant placement + alignment) */
.product-detail-breadcrumb-slot {
  display: flex;
  width: 100%;
  /* Vertical margin: tenant productDetailBreadcrumbSpacingPx (inline on slot). */
}

.product-detail-breadcrumb-slot.product-detail-breadcrumb--align-left {
  justify-content: flex-start;
}

.product-detail-breadcrumb-slot.product-detail-breadcrumb--align-center {
  justify-content: center;
}

.product-detail-breadcrumb-slot.product-detail-breadcrumb--align-right {
  justify-content: flex-end;
}

.product-specifications--breadcrumb-only {
  margin-top: 0;
}

/* “Alles over dit product” — disclosure trigger matches variant select */
.product-detail-about-product {
  width: 100%;
  margin-top: var(--space-4);
}

.product-detail-about-product__breadcrumb {
  margin-bottom: var(--space-3);
}

.product-detail-about-product__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  width: 100%;
  min-height: 44px;
  box-sizing: border-box;
  margin: 0;
  padding: 0 var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background-color: var(--bg-surface, #fff);
  color: var(--text-primary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  line-height: 1.25;
  text-align: left;
  cursor: pointer;
  transition:
    border-color var(--transition-fast),
    box-shadow var(--transition-fast);
}

.product-detail-about-product__trigger:hover {
  border-color: var(--text-muted);
}

.product-detail-about-product__trigger:focus-visible {
  outline: none;
  border-color: var(--tenant-accent, var(--accent));
  box-shadow: 0 0 0 3px var(--accent-glow, rgb(37 99 235 / 0.15));
}

.product-detail-about-product--open .product-detail-about-product__trigger {
  border-color: var(--tenant-accent, var(--accent));
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  box-shadow: 0 0 0 3px var(--accent-glow, rgb(37 99 235 / 0.15));
}

.product-detail-about-product__label {
  flex: 1;
  min-width: 0;
}

.product-detail-about-product__chevron {
  flex-shrink: 0;
  color: var(--text-muted);
  transition: transform var(--transition-fast);
}

.product-detail-about-product--open .product-detail-about-product__chevron {
  transform: rotate(180deg);
}

.product-detail-about-product__panel {
  padding: var(--space-4);
  border: 1px solid var(--tenant-accent, var(--accent));
  border-top: 0;
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  background-color: var(--bg-surface, #fff);
}

/* Product questions — same PDP disclosure as about-product */
.product-purchase-questions {
  width: 100%;
}

.product-purchase-questions > summary {
  list-style: none;
}

.product-purchase-questions > summary::-webkit-details-marker {
  display: none;
}

.product-purchase-questions__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  width: 100%;
  min-height: 44px;
  box-sizing: border-box;
  margin: 0;
  padding: 0 var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background-color: var(--bg-surface, #fff);
  color: var(--text-primary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  line-height: 1.25;
  text-align: left;
  cursor: pointer;
  transition:
    border-color var(--transition-fast),
    box-shadow var(--transition-fast);
}

.product-purchase-questions__trigger:hover {
  border-color: var(--text-muted);
}

.product-purchase-questions__trigger:focus-visible {
  outline: none;
  border-color: var(--tenant-accent, var(--accent));
  box-shadow: 0 0 0 3px var(--accent-glow, rgb(37 99 235 / 0.15));
}

.product-purchase-questions[open] .product-purchase-questions__trigger {
  border-color: var(--tenant-accent, var(--accent));
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  box-shadow: 0 0 0 3px var(--accent-glow, rgb(37 99 235 / 0.15));
}

.product-purchase-questions__label {
  flex: 1;
  min-width: 0;
}

.product-purchase-questions__chevron {
  flex-shrink: 0;
  color: var(--text-muted);
  transition: transform var(--transition-fast);
}

.product-purchase-questions[open] .product-purchase-questions__chevron {
  transform: rotate(180deg);
}

.product-purchase-questions__panel {
  padding: var(--space-4);
  border: 1px solid var(--tenant-accent, var(--accent));
  border-top: 0;
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  background-color: var(--bg-surface, #fff);
}

.product-purchase-questions__intro {
  margin: 0 0 var(--space-4);
  color: var(--text-muted);
  font-size: var(--font-size-sm);
  line-height: 1.5;
}

.product-purchase-questions__fields {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.product-purchase-questions__fields > .form-group:last-child {
  margin-bottom: 0;
}

.product-purchase-questions fieldset.form-group {
  border: 0;
  margin: 0;
  padding: 0;
  min-inline-size: 0;
}

.product-purchase-questions legend.form-label {
  padding: 0;
  margin-bottom: var(--space-2);
  float: none;
}

.product-purchase-questions .form-radio-group,
.product-purchase-questions .form-checkbox-group {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
}

.product-purchase-questions .form-checkbox-wrapper {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

/* Panel content — Zalando-style fact rows (bold label + value, no wide columns) */
.product-about-product-section {
  margin: 0;
}

.product-about-product-section--divider {
  margin-top: var(--space-5);
  padding-top: var(--space-5);
  border-top: 1px solid var(--border-subtle, var(--border));
}

.product-about-product-section__heading {
  margin: 0 0 var(--space-3);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-snug, 1.35);
  color: var(--text-primary);
}

.product-about-product-facts {
  margin: 0;
  padding: 0;
}

.product-about-product-facts__row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 var(--space-1);
  margin: 0 0 var(--space-2);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-relaxed);
}

.product-about-product-facts__row:last-child {
  margin-bottom: 0;
}

.product-about-product-facts__row dt {
  margin: 0;
  font-weight: var(--font-weight-bold);
  color: var(--text-primary);
}

.product-about-product-facts__row dt::after {
  content: ":";
}

.product-about-product-facts__row dd {
  margin: 0;
  font-weight: var(--font-weight-normal);
  color: var(--text-primary);
}

/* Subtle breadcrumb on PDP — width:auto so slot flex alignment can push left/right */
.product-detail-breadcrumb-slot .product-detail-breadcrumb {
  width: auto;
  max-width: 100%;
  margin-bottom: 0;
}

.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--align-center .breadcrumb-list {
  justify-content: center;
}

.product-detail-breadcrumb--align-right .breadcrumb-list {
  justify-content: flex-end;
}

.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: 0;
}

.product-detail-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-6);
  margin-bottom: var(--space-2);
}

.product-detail-tag-link {
  text-decoration: none;
}

.product-detail-tag-link:hover {
  opacity: 0.9;
}

/* =================================================================
   PRODUCT DETAIL — 2-COLUMN + FULL-WIDTH OMSCHRIJVING
   ================================================================= */

.product-detail-layout {
  display: flex;
  flex-direction: column;
  gap: var(--space-10);
  width: 100%;
}

.product-detail {
  /*
   * A column never reserves space its content cannot use.
   * The gallery stage has a fixed ratio and a height limit (which keeps the
   * purchase block above the fold), so it can never be wider than
   * height-limit × ratio (+ a side thumbnail rail). The gallery column takes
   * the smaller of its share and that width; the content column takes the rest.
   * Inputs (set by the storefront per tenant setting):
   *   --pdp-gallery-share        0.35 | 0.5 | 0.65 (Smal / Gemiddeld / Breed)
   *   --pdp-gallery-stage-ratio  e.g. "2 / 3"; unset for natural (no height limit)
   * Mirrored verbatim in storefront `webshop-critical-css.ts` (it loads after this file).
   */
  --pdp-detail-gap: var(--space-8, 2rem);
  --pdp-gallery-stage-max-height: min(70vh, 560px);
  --pdp-gallery-column-width: min(
    calc((100% - var(--pdp-detail-gap)) * var(--pdp-gallery-share, 0.5)),
    calc(var(--pdp-gallery-stage-max-height) * var(--pdp-gallery-stage-ratio, 1000) + var(--pdp-gallery-rail-inline, 0px))
  );
  display: grid;
  grid-template-columns: minmax(0, var(--pdp-gallery-column-width)) minmax(0, 1fr);
  gap: var(--pdp-detail-gap);
  align-items: start;
  width: 100%;
}

/* Side thumbnail rail sits inside the gallery column next to the stage. */
.product-detail:has(.product-gallery--thumbs-left .product-gallery-thumbnails),
.product-detail:has(.product-gallery--thumbs-right .product-gallery-thumbnails) {
  --pdp-gallery-rail-inline: calc(var(--pdp-gallery-thumb-size, 72px) + var(--space-4));
}

/*
 * Appointment PDP (V100 D) — container-driven page composition.
 * `.product-detail-appointment-lane` wraps the page planner (sibling of the purchase
 * stack, still under product intro / before specs). Content column gets a usable
 * min width (≥22rem) so the planner is not crushed in a skinny aside. On stacked
 * viewports the lane is already full width under gallery + intro. The lane is a
 * size container for Compact/Medium/Wide @container modes (V100 E).
 */
.product-detail:has(.product-detail-appointment-lane) {
  grid-template-columns:
    minmax(0, var(--pdp-gallery-column-width))
    minmax(22rem, 1fr);
}

.product-detail-appointment-lane {
  container-type: inline-size;
  container-name: appointment-lane;
  width: 100%;
  min-width: 0;
  margin-top: var(--space-4);
}

.product-detail-content:has(.product-detail-appointment-lane) {
  min-width: 0;
}

/** Full-width block below the 2-column grid: long description (+ share) only. */
.product-detail-omschrijving {
  display: flex;
  flex-direction: column;
  gap: 0;
  width: 100%;
  min-width: 0;
}

.product-detail-content-blocks {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.product-detail-content-block {
  width: 100%;
}

.product-detail-omschrijving .product-specifications {
  margin-top: var(--space-6);
}

.product-detail-omschrijving .product-detail-content-blocks + .product-description {
  margin-top: var(--space-6);
}

.product-detail-omschrijving .product-description {
  margin-top: var(--space-6);
}

.product-detail-omschrijving .product-short-description-slot:first-child {
  margin-top: 0;
}

.product-detail-gallery-slot {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-width: 0;
}

.product-detail-gallery {
  position: sticky;
  top: var(--space-6);
  min-width: 0;
}

.product-detail-content {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* =================================================================
   PDP PURCHASE STACK (price, stock, variants, quantity, add-to-cart)
   ================================================================= */

.product-detail-purchase-stack {
  display: flex;
  flex-direction: column;
  gap: var(--pdp-purchase-stack-gap, var(--space-4));
  width: 100%;
}

.product-detail-purchase-block {
  order: var(--pdp-purchase-order, 0);
  width: 100%;
}

.product-detail-purchase-block[hidden] {
  display: none;
}

.product-detail-purchase-block .product-detail-price {
  margin-bottom: 0;
}

.product-detail-purchase-block .product-add-to-cart {
  margin-top: 0;
}

/* Quantity + add-to-cart on one row (Zalando-style) */
.product-detail-purchase-block--cart-actions .product-add-to-cart {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
}

.product-detail-purchase-block--cart-actions .add-to-cart-quantity {
  flex: 0 0 auto;
  width: auto;
}

.product-detail-purchase-block--cart-actions .add-to-cart-btn {
  flex: 1 1 auto;
  min-width: 0;
}

/* Tight spacing between breadcrumb slot and purchase stack */
.product-detail-breadcrumb-slot + .product-detail-purchase-stack,
.product-detail-header + .product-detail-purchase-stack,
.product-detail-title-slot + .product-detail-purchase-stack,
.product-short-description-slot + .product-detail-purchase-stack {
  margin-top: 0;
}

/* =================================================================
   PRODUCT GALLERY (ProductGallery.tsx)
   ================================================================= */

.product-gallery {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  min-width: 0;
}

.product-gallery--thumbs-left,
.product-gallery--thumbs-right {
  flex-direction: row;
  align-items: flex-start;
  gap: var(--space-4);
}

.product-gallery--thumbs-left .product-gallery-thumbnails,
.product-gallery--thumbs-right .product-gallery-thumbnails {
  flex: 0 0 auto;
  flex-direction: column;
  width: var(--pdp-gallery-thumb-size, 72px);
  min-width: var(--pdp-gallery-thumb-size, 72px);
  overflow-x: visible;
  overflow-y: auto;
  max-height: min(70vh, 520px);
  padding-bottom: 0;
  padding-right: var(--space-1);
}

.product-gallery--thumbs-right .product-gallery-thumbnails {
  order: 1;
}

.product-gallery--thumbs-left .product-gallery-main,
.product-gallery--thumbs-right .product-gallery-main {
  flex: 1 1 auto;
  min-width: 0;
}

.product-gallery--thumbs-left .product-gallery-thumbnails {
  order: -1;
}

.product-gallery--thumbs-above .product-gallery-thumbnails {
  order: -1;
}

/* Placeholder when no images */
.product-gallery-placeholder {
  aspect-ratio: var(--pdp-gallery-aspect-ratio, 1 / 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 — fixed aspect-ratio stage (tenant --pdp-gallery-aspect-ratio) */
.product-gallery-main {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: var(--pdp-gallery-aspect-ratio, 1 / 1);
  max-height: var(--pdp-gallery-stage-max-height, min(70vh, 560px));
  background: var(--bg-surface, var(--surface-secondary));
  border-radius: var(--radius-lg);
  overflow: hidden;
  cursor: zoom-in;
}

.product-gallery-main--bordered {
  border: 1px solid var(--border);
}

/*
 * Fixed-aspect stage: size the img to the stage so object-fit applies.
 * width/height:auto + max-* ignored object-fit and, with max-height on the
 * stage + overflow:hidden, cropped tall product photos (tips cut off).
 */
.product-gallery-main:not(.product-gallery-main--aspect-natural) .product-gallery-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: var(--pdp-gallery-object-fit, contain);
  object-position: center;
}

.product-gallery-main--fit-cover:not(.product-gallery-main--aspect-natural) .product-gallery-image {
  object-fit: cover;
}

.product-gallery-main--aspect-natural {
  aspect-ratio: auto;
  height: auto;
  max-height: none;
}

.product-gallery-main--aspect-natural .product-gallery-image {
  display: block;
  width: 100%;
  height: auto;
  max-height: none;
  max-width: 100%;
}

.product-gallery-main--aspect-natural.product-gallery-main--fit-cover .product-gallery-image {
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* 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,
.product-gallery-nav:focus-visible {
  opacity: 1;
}

/* Touch/coarse pointers (tablet, phone) have no hover — nav must stay usable. */
@media (max-width: 1024px), (pointer: coarse) {
  .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 */
/* Above .storefront-header-chrome--fixed (101) and nav dropdowns (200); portaled to body */
.product-lightbox {
  position: fixed;
  inset: 0;
  z-index: 1100;
  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);
}

.product-badge--backorder {
  background: var(--warning-bg, rgba(245, 158, 11, 0.1));
  color: var(--warning, #d97706);
}

/* 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) — Zalando-style dropdowns
   ================================================================= */

.product-variant-selector {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  column-gap: var(--space-3);
  row-gap: var(--space-4);
  align-items: center;
  width: 100%;
}

.product-purchase-panel .product-variant-selector {
  grid-template-columns: minmax(0, 1fr);
  row-gap: 20px;
  align-items: stretch;
}

.product-variant-field {
  display: contents;
}

.product-purchase-panel .product-variant-field {
  display: grid;
  gap: 8px;
  min-inline-size: 0;
}

.product-variant-choices {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.product-variant-choice {
  min-width: 2.75rem;
  min-height: 2.5rem;
  min-block-size: 2.5rem;
  padding: 0.45rem 0.75rem;
  border: 1px solid var(--color-border, #d1d5db);
  border-radius: var(--radius-md, 8px);
  background: var(--color-surface, #fff);
  color: inherit;
  font: inherit;
  cursor: pointer;
}

.product-purchase-panel .product-variant-choice {
  min-block-size: 44px;
}

.product-variant-choice:hover:not(:disabled),
.product-variant-choice:focus-visible {
  border-color: var(--color-primary, #2563eb);
}

.product-variant-choice.is-selected {
  border-color: var(--color-primary, #2563eb);
  box-shadow: 0 0 0 1px var(--color-primary, #2563eb);
}

.product-variant-choice.is-out-of-stock {
  background: var(--pg-ui-label-bg-danger, #fef3f2);
  color: var(--pg-ui-label-text-danger, #b42318);
  border-color: color-mix(
    in srgb,
    var(--pg-ui-label-text-danger, #b42318) 28%,
    var(--color-border, #d1d5db)
  );
}

.product-variant-choice.is-backorder {
  background: var(--warning-bg, rgba(245, 158, 11, 0.1));
  color: var(--warning, #d97706);
  border-color: color-mix(
    in srgb,
    var(--warning, #d97706) 28%,
    var(--color-border, #d1d5db)
  );
}

.product-variant-choice__meta {
  display: block;
  font-size: var(--font-size-xs, 0.75rem);
  font-weight: var(--font-weight-medium, 500);
  line-height: 1.2;
}

.product-variant-choice.is-out-of-stock:hover:not(:disabled),
.product-variant-choice.is-out-of-stock:focus-visible {
  border-color: color-mix(
    in srgb,
    var(--pg-ui-label-text-danger, #b42318) 45%,
    var(--color-border, #d1d5db)
  );
}

.product-variant-choice.is-out-of-stock:disabled {
  cursor: not-allowed;
  opacity: 1;
  text-decoration: none;
}

.product-variant-choice:disabled:not(.is-out-of-stock) {
  cursor: not-allowed;
  opacity: 0.45;
  text-decoration: line-through;
}

.product-variant-label {
  display: flex;
  align-items: center;
  min-height: 44px;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
  margin: 0;
  line-height: 1.25;
  white-space: nowrap;
}

.product-variant-select {
  width: 100%;
  min-width: 0;
  min-height: 44px;
  box-sizing: border-box;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background-color: var(--bg-surface, #fff);
  color: var(--text-primary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  line-height: 1.25;
  padding: 0 var(--space-10) 0 var(--space-3);
  transition:
    border-color var(--transition-fast),
    box-shadow var(--transition-fast);
}

.product-variant-select:hover:not(:disabled):not(:focus) {
  border-color: var(--text-muted);
}

.product-variant-select:focus {
  outline: none;
  border-color: var(--tenant-accent, var(--accent));
  box-shadow: 0 0 0 3px var(--accent-glow, rgb(37 99 235 / 0.15));
}

.product-variant-select:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* =================================================================
   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);
}

/* =================================================================
   PRODUCT SHARE / SOCIAL LINK BUTTONS (product page + top bar)
   ================================================================= */

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

.product-share-label {
  font-size: var(--text-sm, 0.875rem);
  font-weight: var(--font-medium, 500);
  color: var(--text-secondary, var(--text-muted));
}

.product-share-actions {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.product-share-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-md, 0.375rem);
  border: 1px solid var(--border-subtle, var(--border));
  background: var(--bg-surface);
  color: var(--text-primary);
  text-decoration: none;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.product-share-link:hover {
  background: var(--bg-elevated);
  border-color: var(--border);
}

.product-share-link svg {
  display: block;
  flex-shrink: 0;
}

.product-share--inline .product-share-actions {
  gap: var(--space-1);
}

.product-share--inline .product-share-link {
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  color: var(--text-secondary, var(--text-muted));
}

.product-share--inline .product-share-link:hover {
  color: var(--text-primary);
  background: var(--bg-elevated);
}

.product-share--below-description {
  margin-top: var(--space-4);
}

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

@media (max-width: 1024px) {
  .product-detail,
  .product-detail:has(.product-detail-appointment-lane) {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }

  .product-detail-gallery {
    position: static;
  }
}

@media (max-width: 768px) {
  .product-page {
    padding: 0 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);
  }
}

/* =================================================================
   BUY TOGETHER BUNDLE UPSELL (component PDP)
   ================================================================= */

.product-bundle-together {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  width: 100%;
  min-width: 0;
  margin-top: var(--space-8);
  padding-top: var(--space-6);
  border-top: 1px solid var(--border);
}

.product-bundle-together__title {
  margin: 0;
  text-align: center;
  font-size: var(--font-size-lg);
  font-weight: var(--font-bold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-primary);
}

.product-bundle-together__row {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4) var(--space-6);
  width: 100%;
  min-width: 0;
}

.product-bundle-together__items {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  justify-content: space-evenly;
  gap: var(--space-3) var(--space-4);
  min-width: 0;
  flex: 1 1 0;
}

.product-bundle-together__items-group {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-3) var(--space-4);
  min-width: 0;
  flex: 1 1 0;
}

.product-bundle-together__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  max-width: 11rem;
  text-align: center;
  min-width: 0;
}

.product-bundle-together__item--current {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
  border-radius: var(--radius-md);
  padding: var(--space-2);
}

.product-bundle-together__current-label {
  font-size: var(--font-size-xs);
  font-weight: var(--font-semibold);
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.product-bundle-together__thumb {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: var(--radius-md);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
}

.product-bundle-together__thumb img,
.product-bundle-together__thumb .product-image-placeholder {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.product-bundle-together__name {
  margin: 0;
  font-size: var(--font-size-sm);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  line-height: 1.3;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.product-bundle-together__separately {
  margin: 0;
  font-size: var(--font-size-xs);
  color: var(--text-secondary);
}

.product-bundle-together__plus {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  font-size: var(--font-size-xl);
  font-weight: var(--font-bold);
  color: var(--text-primary);
  line-height: 1;
}

.product-bundle-together__summary {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  flex: 0 0 auto;
  min-width: 9rem;
  max-width: 12rem;
  text-align: center;
}

.product-bundle-together__total-label {
  margin: 0;
  font-size: var(--font-size-xs);
  font-weight: var(--font-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.product-bundle-together__total-price {
  margin: 0;
  font-size: var(--font-size-3xl, 2rem);
  font-weight: var(--font-bold);
  color: var(--text-primary);
  line-height: 1.1;
}

.product-bundle-together__save {
  margin: 0;
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
}

.product-bundle-together__summary .add-to-cart {
  margin-top: var(--space-2);
  width: 100%;
}

.product-bundle-together__summary .add-to-cart-btn {
  width: 100%;
  justify-content: center;
}

/* Two components: wider tiles; summary stays on the right. */
.product-bundle-together__row--components-2 .product-bundle-together__item {
  max-width: 12rem;
}

/* Three components: smaller tiles; summary stays beside. */
.product-bundle-together__row--components-3 .product-bundle-together__item {
  max-width: 7.5rem;
}

/* Four or more: compact tiles; summary stays beside (full-width Description). */
.product-bundle-together__row--components-many .product-bundle-together__item {
  max-width: 6.75rem;
}

.product-bundle-together__row--components-many .product-bundle-together__items {
  flex-wrap: nowrap;
}

@media (max-width: 768px) {
  .product-bundle-together__row {
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: flex-start;
  }

  .product-bundle-together__items {
    max-width: 100%;
    overflow-x: auto;
    justify-content: flex-start;
    flex: 0 1 auto;
    width: 100%;
    padding-bottom: var(--space-2);
  }

  .product-bundle-together__items-group {
    flex: 0 0 auto;
  }

  .product-bundle-together__item {
    width: 6.5rem;
    max-width: 6.5rem;
  }

  .product-bundle-together__summary {
    width: 100%;
    max-width: 20rem;
  }
}

.product-variant-choice:disabled:not(.is-out-of-stock) {
  opacity: 0.55;
  cursor: not-allowed;
}

/* Purchase panel: keep selection chrome distinct from availability/loading. */
.product-purchase-panel .product-variant-choice:disabled:not(.is-out-of-stock) {
  text-decoration: none;
}

.product-purchase-panel .product-variant-choice.is-selected:disabled,
.product-purchase-panel .product-variant-choice.is-selected.is-out-of-stock {
  opacity: 1;
  border-color: var(--purchase-accent, var(--color-primary, #2563eb));
  box-shadow: 0 0 0 1px var(--purchase-accent, var(--color-primary, #2563eb));
}

.product-purchase-panel[aria-busy="true"] .product-variant-choice:not(:disabled) {
  opacity: 1;
}

/* =================================================================
   SHARED PDP PURCHASE PANEL + FOOTER (all product forms)
   ================================================================= */

.product-purchase-region {
  container: product-purchase / inline-size;
  min-inline-size: 0;
  inline-size: 100%;
}

.product-purchase-panel {
  --purchase-accent: var(--tenant-accent, var(--accent, var(--color-primary)));
  --purchase-surface: var(--color-surface, #ffffff);
  --purchase-text: var(--text-primary, var(--color-text-primary, #101828));
  --purchase-muted: var(--text-secondary, var(--color-text-secondary, #667085));
  --purchase-border: var(--border, var(--color-border, #e4e7ec));
  --purchase-tint: color-mix(in srgb, var(--purchase-accent) 3%, var(--purchase-surface));

  box-sizing: border-box;
  inline-size: 100%;
  min-inline-size: 0;
  padding: 24px;
  border: 1px solid var(--purchase-border);
  border-radius: 12px;
  background: var(--purchase-surface);
  color: var(--purchase-text);
  box-shadow: none;
}

.product-purchase-panel--unstyled {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.product-purchase-panel__header {
  margin-block-end: 18px;
}

.product-purchase-panel__title {
  margin: 0;
  font-size: 1.375rem;
  font-weight: 700;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.product-purchase-panel__hint {
  margin: 6px 0 0;
  font-size: 0.9375rem;
  line-height: 1.4;
  color: var(--purchase-muted);
}

.product-purchase-panel__choices {
  display: grid;
  gap: 20px;
  min-inline-size: 0;
}

.product-purchase-panel__field {
  display: grid;
  gap: 8px;
  min-inline-size: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.product-purchase-panel__label {
  margin: 0;
  padding: 0;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.3;
}

.product-purchase-panel .product-variant-choices {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.product-purchase-panel .product-variant-choice {
  min-block-size: 44px;
  max-inline-size: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
}

.product-purchase-panel .product-variant-choice:focus-visible {
  outline: 2px solid var(--purchase-accent);
  outline-offset: 2px;
}

.product-purchase-panel .product-variant-choice.is-selected {
  border-color: var(--purchase-accent);
  box-shadow: 0 0 0 1px var(--purchase-accent);
}

.product-purchase-panel__summary,
.product-purchase-panel .product-bundle-builder__summary {
  margin-block-start: 16px;
  padding: 14px;
  border: 1px solid color-mix(in srgb, var(--purchase-accent, var(--bundle-primary, currentColor)) 12%, var(--purchase-surface, var(--bundle-surface, transparent)));
  border-radius: 10px;
  background: var(--purchase-tint, var(--bundle-primary-tint));
  max-block-size: none;
}

.product-purchase-panel__summary-items,
.product-purchase-panel .product-bundle-builder__summary-items {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr));
  gap: 10px;
}

.product-purchase-panel .product-bundle-builder__summary-item {
  block-size: auto;
  max-block-size: none;
  align-items: start;
  background: var(--purchase-surface, var(--bundle-surface));
  border-color: color-mix(in srgb, var(--purchase-accent, var(--bundle-primary)) 8%, var(--purchase-surface, var(--bundle-surface)));
}

.product-purchase-panel .product-bundle-builder__summary-name,
.product-purchase-panel .product-bundle-builder__summary-value {
  overflow-wrap: anywhere;
}

.product-purchase-panel__secondary {
  margin-block-start: 12px;
}

.product-purchase-panel__choice-summary {
  margin: 12px 0 0;
  font-size: 0.9375rem;
  line-height: 1.4;
  color: var(--purchase-muted);
  overflow-wrap: anywhere;
}

.product-purchase-panel__footer-slot {
  container: purchase-footer / inline-size;
  min-inline-size: 0;
}

.product-purchase-footer {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  gap: 12px 18px;
  margin-block-start: 12px;
  padding: 12px 14px;
  min-inline-size: 0;
  min-block-size: 76px;
  block-size: auto;
  max-block-size: none;
  border: 1px solid var(--purchase-border, var(--border, #e4e7ec));
  border-radius: 10px;
  background: var(--purchase-surface, var(--color-surface, #fff));
}

.product-purchase-footer:first-child {
  margin-block-start: 0;
}

.product-purchase-footer > * {
  min-inline-size: 0;
}

.product-purchase-footer__price-stock {
  display: grid;
  gap: 4px;
  justify-items: start;
  text-align: start;
  overflow-wrap: anywhere;
}

.product-purchase-footer__stock {
  display: flex;
  align-items: center;
  min-inline-size: 0;
}

.product-purchase-footer__stock .product-info {
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  gap: 0.5rem;
}

.product-purchase-footer__stock .product-stock {
  margin: 0;
}

.product-purchase-price,
.product-purchase-footer__price {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-inline-size: 0;
}

.product-purchase-price__amounts {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem 0.75rem;
  min-inline-size: 0;
}

:where(
  .product-purchase-price__current,
  .product-purchase-price__sale,
  .product-purchase-footer__price-current
) {
  font-size: var(--pdp-purchase-price-size, 2.03125rem);
  font-weight: 700;
  line-height: 1.15;
  color: var(--purchase-text, inherit);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

:where(
  .product-purchase-price__compare,
  .product-purchase-footer__price-compare
) {
  font-size: var(--pdp-purchase-compare-size, 1.015625rem);
  color: var(--purchase-muted, inherit);
  text-decoration: line-through;
}

.product-purchase-price__pending {
  font-size: 0.9375rem;
  color: var(--purchase-muted, inherit);
}

.product-purchase-footer__quantity {
  display: grid;
  gap: 4px;
  justify-items: start;
}

.product-purchase-footer__quantity-label {
  display: block;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--purchase-muted, inherit);
}

.product-purchase-footer__submit,
.product-purchase-footer__submit .product-add-to-cart,
.product-purchase-footer__submit .add-to-cart {
  inline-size: 100%;
  min-inline-size: 0;
}

.product-purchase-footer__submit .add-to-cart-btn {
  inline-size: 100%;
  min-inline-size: 0;
}

/* Present slots only — container on footer-slot, not viewport alone. */
@container purchase-footer (min-width: 320px) {
  .product-purchase-footer[data-slots="quantity-price-submit"] {
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas:
      "price price"
      "quantity submit";
  }

  .product-purchase-footer[data-slots="quantity-price-submit"]
    > .product-purchase-footer__price-stock {
    grid-area: price;
  }

  .product-purchase-footer[data-slots="quantity-price-submit"]
    > .product-purchase-footer__quantity {
    grid-area: quantity;
  }

  .product-purchase-footer[data-slots="quantity-price-submit"]
    > .product-purchase-footer__submit {
    grid-area: submit;
  }
}

@container purchase-footer (min-width: 592px) {
  .product-purchase-footer[data-slots="quantity-price-submit"] {
    grid-template-columns: auto minmax(0, 1fr) minmax(12rem, 0.38fr);
    grid-template-areas: "quantity price submit";
  }

  .product-purchase-footer__price-stock {
    justify-items: center;
    text-align: center;
  }

  .product-purchase-footer[data-slots="price-submit"] {
    grid-template-columns: minmax(0, 1fr) minmax(12rem, 0.38fr);
  }

  .product-purchase-footer[data-slots="quantity-submit"] {
    grid-template-columns: auto minmax(0, 1fr);
  }
}

@container product-purchase (max-width: 680px) {
  .product-bundle-builder__item {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: 12px;
    min-block-size: 0;
  }

  .product-bundle-builder__options,
  .product-bundle-builder__select {
    inline-size: 100%;
    justify-self: stretch;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .product-purchase-panel {
    padding: 20px;
  }
}

@media (max-width: 767px) {
  .product-purchase-panel {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
  }

  .product-purchase-panel__title {
    font-size: 1.3125rem;
  }

  .product-purchase-panel__summary-items,
  .product-purchase-panel .product-bundle-builder__summary-items {
    grid-template-columns: minmax(0, 1fr);
  }

  .product-purchase-footer__submit .add-to-cart-btn,
  .product-purchase-footer .add-to-cart-quantity-btn {
    min-block-size: 48px;
  }

  .product-purchase-footer {
    padding-block-end: calc(12px + env(safe-area-inset-bottom, 0px));
  }
}

/* Configurable bundle — product-bundle-builder (V100 golden lane on shared panel). */
.product-bundle-builder {
  --bundle-primary: var(--purchase-accent, var(--tenant-accent, var(--accent, var(--color-primary, #465fff))));
  --bundle-primary-soft: color-mix(in srgb, var(--bundle-primary) 6%, var(--purchase-surface, var(--color-surface, #fff)));
  --bundle-primary-tint: color-mix(in srgb, var(--bundle-primary) 3%, var(--purchase-surface, var(--color-surface, #fff)));
  --bundle-text: var(--purchase-text, var(--text-primary, var(--color-text-primary, #101828)));
  --bundle-muted: var(--purchase-muted, var(--text-secondary, var(--color-text-secondary, #667085)));
  --bundle-border: var(--purchase-border, var(--border, var(--color-border, #e4e7ec)));
  --bundle-surface: var(--purchase-surface, var(--color-surface, #ffffff));
  --bundle-subtle: var(--color-surface-secondary, var(--surface-secondary, #f8fafc));
  --bundle-danger: var(--pg-ui-label-text-danger, #b42318);

  inline-size: 100%;
  max-inline-size: 70rem;
  color: var(--bundle-text);
  display: flex;
  flex-direction: column;
  gap: 0;
  box-sizing: border-box;
}

/* When bundle is also purchase panel, panel chrome owns border/padding. */
.product-purchase-panel.product-bundle-builder {
  /* panel rules already apply */
}

.product-bundle-builder:not(.product-purchase-panel) {
  border: 1px solid var(--bundle-border);
  border-radius: 12px;
  background: var(--bundle-surface);
  box-shadow: none;
  padding: 24px;
}

.product-bundle-builder--compact {
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
  max-inline-size: none;
  background: transparent;
}

.product-bundle-builder__header {
  margin-block-end: 18px;
}

.product-bundle-builder__title {
  margin: 0;
  font-size: 1.375rem; /* 22px */
  font-weight: 700;
  line-height: 1.25;
  color: var(--bundle-text);
}

.product-bundle-builder__subtitle {
  margin: 6px 0 0;
  font-size: 0.9375rem; /* 15px */
  line-height: 1.4;
  color: var(--bundle-muted);
}

.product-bundle-builder__items {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  border: 0;
  min-inline-size: 0;
}

.product-bundle-builder__item {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) minmax(360px, auto);
  align-items: center;
  gap: 20px;
  min-block-size: 96px;
  padding-block: 14px;
  margin: 0;
  border: 0;
  border-bottom: 1px solid var(--bundle-border);
  background: transparent;
  min-inline-size: 0;
}

.product-bundle-builder__item:last-of-type {
  border-bottom: 0;
}

.product-bundle-builder__product {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  min-inline-size: 0;
}

.product-bundle-builder__image {
  inline-size: 56px;
  block-size: 56px;
  border-radius: 9px;
  background: var(--bundle-subtle);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.product-bundle-builder__image img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: contain;
  display: block;
}

.product-bundle-builder__image .product-image-placeholder {
  inline-size: 100%;
  block-size: 100%;
}

.product-bundle-builder__image .product-image-placeholder-icon {
  width: 22px;
  height: 22px;
}

.product-bundle-builder__identity {
  min-inline-size: 0;
}

.product-bundle-builder__product-name {
  margin: 0;
  font-size: 1rem; /* 16px */
  font-weight: 600;
  line-height: 1.3;
  color: var(--bundle-text);
}

.product-bundle-builder__product-hint {
  margin: 2px 0 0;
  font-size: 0.875rem; /* 14px */
  line-height: 1.35;
  color: var(--bundle-muted);
}

/* Placement only — chip look = .product-variant-choice (golden lane SSoT). */
.product-bundle-builder__options {
  inline-size: min(100%, 560px);
  justify-self: end;
}

.product-bundle-builder__select {
  inline-size: min(100%, 560px);
  justify-self: end;
}

.product-bundle-builder__field-error {
  grid-column: 1 / -1;
  margin: 0;
  font-size: 0.8125rem;
  color: var(--bundle-danger);
}

.product-bundle-builder__summary {
  margin-block-start: 16px;
  padding: 14px;
  border: 1px solid color-mix(in srgb, var(--bundle-primary) 12%, white);
  border-radius: 10px;
  background: var(--bundle-primary-tint);
}

.product-bundle-builder__summary-title {
  margin: 0 0 10px;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--bundle-text);
}

.product-bundle-builder__summary-compact {
  display: none;
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.4;
  color: var(--bundle-text);
  font-weight: 500;
}

.product-bundle-builder__summary-items {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.product-bundle-builder__summary-item {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  gap: 8px;
  align-items: start;
  min-inline-size: 0;
  block-size: auto;
  max-block-size: none;
  padding: 8px;
  border-radius: 8px;
  background: var(--bundle-surface);
  border: 1px solid color-mix(in srgb, var(--bundle-primary) 8%, var(--bundle-surface));
}

.product-bundle-builder__summary-thumb {
  inline-size: 36px;
  block-size: 36px;
  border-radius: 6px;
  overflow: hidden;
  background: var(--bundle-subtle);
  display: flex;
  align-items: center;
  justify-content: center;
}

.product-bundle-builder__summary-thumb img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: contain;
}

.product-bundle-builder__summary-thumb .product-image-placeholder-icon {
  width: 16px;
  height: 16px;
}

.product-bundle-builder__summary-name {
  margin: 0;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--bundle-text);
  line-height: 1.25;
}

.product-bundle-builder__summary-value {
  margin: 1px 0 0;
  font-size: 0.6875rem;
  color: var(--bundle-muted);
  line-height: 1.3;
}

.product-bundle-builder__callout {
  margin-block-start: 12px;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid color-mix(in srgb, var(--bundle-primary) 16%, white);
  background: var(--bundle-primary-tint);
  color: var(--bundle-text);
  font-size: 0.8125rem;
}

.product-bundle-builder__purchase {
  /* Shared footer recipe; keep alias for SSR/tests. */
  margin-block-start: 12px;
  padding: 12px 14px;
  border: 1px solid var(--bundle-border);
  border-radius: 10px;
  background: var(--bundle-surface);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  gap: 12px 18px;
  min-block-size: 76px;
  max-block-size: none;
}

@container product-purchase (min-width: 640px) {
  .product-bundle-builder__purchase[data-slots="quantity-price-submit"],
  .product-purchase-footer.product-bundle-builder__purchase[data-slots="quantity-price-submit"] {
    grid-template-columns: auto minmax(0, 1fr) minmax(12rem, 0.38fr);
  }
}

.product-bundle-builder__quantity {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-inline-size: 0;
}

.product-bundle-builder__submit {
  min-inline-size: 0;
}

.product-bundle-builder__submit .product-add-to-cart,
.product-bundle-builder__submit .add-to-cart {
  display: flex;
  width: 100%;
}

.product-bundle-builder__submit .add-to-cart-btn {
  flex: 1 1 auto;
  width: 100%;
  min-inline-size: 0;
}

.product-bundle-builder__price-skeleton {
  inline-size: 6rem;
  block-size: 1.5rem;
  border-radius: 6px;
  background: linear-gradient(
    90deg,
    var(--bundle-subtle) 0%,
    color-mix(in srgb, var(--bundle-border) 55%, white) 50%,
    var(--bundle-subtle) 100%
  );
  background-size: 200% 100%;
  animation: product-bundle-builder-shimmer 1.2s ease-in-out infinite;
}

.product-bundle-builder__stock .product-badge--in-stock {
  color: var(--success, #16a34a);
  background: transparent;
  padding: 0;
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.8125rem;
  font-weight: 500;
}

.product-bundle-builder__purchase .add-to-cart-quantity {
  min-block-size: 44px;
}

.product-bundle-builder__purchase .add-to-cart-quantity-btn {
  min-block-size: 44px;
  min-inline-size: 44px;
}

.product-bundle-builder__submit .add-to-cart-btn,
.product-bundle-builder__purchase .add-to-cart-btn {
  inline-size: 100%;
  min-inline-size: 0;
}

.product-bundle-builder__status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8125rem;
  color: var(--bundle-muted);
}

.product-bundle-builder__error {
  margin: 10px 0 0;
  font-size: 0.8125rem;
  color: var(--bundle-danger);
}

@keyframes product-bundle-builder-shimmer {
  0% {
    background-position: 100% 0;
  }
  100% {
    background-position: -100% 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .product-bundle-builder__price-skeleton {
    animation: none;
  }
}

/* Tablet: 768–1023 */
@media (max-width: 1023px) and (min-width: 768px) {
  .product-bundle-builder {
    padding: 20px;
  }

  .product-bundle-builder__item {
    grid-template-columns: 1fr;
    gap: 12px;
    min-block-size: 0;
    align-items: start;
  }

  .product-bundle-builder__options,
  .product-bundle-builder__select {
    justify-self: stretch;
    inline-size: 100%;
  }

  .product-bundle-builder__summary-items {
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  }

  .product-bundle-builder__purchase {
    grid-template-columns: 1fr;
    max-block-size: none;
    gap: 12px;
  }
}

/* Mobile: ≤767 */
@media (max-width: 767px) {
  .product-bundle-builder {
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
    background: transparent;
  }

  .product-bundle-builder__header {
    margin-block-end: 14px;
  }

  .product-bundle-builder__title {
    font-size: 1.3125rem; /* 21px */
  }

  .product-bundle-builder__subtitle {
    font-size: 0.875rem; /* 14px */
  }

  .product-bundle-builder__item {
    display: block;
    padding: 12px;
    margin-block: 0 10px;
    border: 1px solid var(--bundle-border);
    border-radius: 12px;
    background: var(--bundle-surface);
    min-block-size: 0;
  }

  .product-bundle-builder__item:last-of-type {
    margin-block-end: 0;
  }

  .product-bundle-builder__product {
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 12px;
    margin-block-end: 10px;
  }

  .product-bundle-builder__image {
    inline-size: 48px;
    block-size: 48px;
    border-radius: 8px;
  }

  .product-bundle-builder__product-name {
    font-size: 1rem;
  }

  .product-bundle-builder__product-hint {
    font-size: 0.875rem;
  }

  .product-bundle-builder__options {
    inline-size: 100%;
    justify-self: stretch;
  }

  .product-bundle-builder__select {
    inline-size: 100%;
    justify-self: stretch;
  }

  .product-bundle-builder__summary {
    margin-block-start: 12px;
    padding: 12px 14px;
    max-block-size: none;
  }

  .product-bundle-builder__summary-title {
    margin-block-end: 6px;
  }

  .product-bundle-builder__summary-compact {
    display: block;
  }

  .product-bundle-builder__summary-items {
    display: none;
  }

  .product-bundle-builder__purchase,
  .product-purchase-footer.product-bundle-builder__purchase {
    position: static;
    margin-inline: 0;
    margin-block-start: 12px;
    padding: 10px 0 calc(10px + env(safe-area-inset-bottom, 0px));
    border: 0;
    border-top: 1px solid var(--bundle-border);
    border-radius: 0;
    background: var(--bundle-surface);
    box-shadow: none;
    max-block-size: none;
    min-block-size: 0;
    grid-template-columns: minmax(0, 1fr);
    gap: 8px 10px;
  }

  .product-bundle-builder__submit .add-to-cart-btn {
    min-block-size: 48px;
    max-block-size: none;
    width: 100%;
  }

  .product-bundle-builder__purchase .add-to-cart-quantity,
  .product-bundle-builder__purchase .add-to-cart-quantity-btn {
    min-block-size: 48px;
  }
}

@media (max-width: 480px) {
  .product-page {
    padding: 0 var(--space-3) var(--space-3);
  }

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

/* 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);
}

/*
 * Safety net: hydrateExact mismatch can nest a client .product-grid inside the
 * SSR grid. display:contents promotes cards into the outer grid columns so
 * cards are not squeezed to ~1/16 width.
 */
.product-grid > .product-grid {
  display: contents;
}

.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;
}

/* Split product hit-targets so brand/tag anchors are not nested in the card link. */
.product-card-media-link,
.product-card-details-link {
  text-decoration: none;
  color: inherit;
}

.product-card-details-link {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

/* Product Image */
.product-card-image {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  background: var(--bg-elevated);
}

/*
 * Product media presentation modifiers (SSoT: @pagayo/config/product-media-presentation).
 * Homepage product grids always apply an aspect + fit modifier so default
 * `contain` wins over the legacy global `object-fit: cover` below.
 * Surfaces without modifiers keep the safe defaults (square + cover).
 */
.product-card-image--aspect-square { aspect-ratio: 1 / 1; }
.product-card-image--aspect-portrait { aspect-ratio: 4 / 5; }
.product-card-image--aspect-tall { aspect-ratio: 2 / 3; }
.product-card-image--aspect-extraTall { aspect-ratio: 1 / 2; }
.product-card-image--aspect-landscape { aspect-ratio: 4 / 3; }
.product-card-image--aspect-wide { aspect-ratio: 16 / 9; }
.product-card-image--aspect-panoramic { aspect-ratio: 2 / 1; }

.product-card-image--fit-contain .product-image { object-fit: contain; }
.product-card-image--fit-cover .product-image { object-fit: cover; }

.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 {
  /* Richting volgt de inhoud: "-17%" blijft "-17%" in rechts-naar-links,
     een Arabisch woord blijft rechts-naar-links. */
  unicode-bidi: plaintext;
  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-badge--backorder {
  background: var(--warning-bg, rgba(245, 158, 11, 0.1));
  color: var(--warning, #d97706);
  border: 1px solid color-mix(in srgb, var(--warning, #d97706) 28%, var(--border));
}

.product-card--backorder {
  opacity: 1;
}

/* 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-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin-top: var(--space-1);
}

.product-card-tag-link {
  text-decoration: none;
}

.product-card-tag-link:hover {
  opacity: 0.9;
}

.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);
}

/* Category product-card variants (count / text / labels / images) */
.product-card {
  --product-card-variant-gap: var(--space-1);
  --product-card-variant-padding-block: var(--space-1);
  --product-card-variant-padding-inline: var(--space-2);
  --product-card-variant-border-width: 1px;
  --product-card-variant-border-color: var(--border);
  --product-card-variant-radius: var(--radius-sm);
  --product-card-variant-color: var(--text-primary);
  --product-card-variant-background: var(--bg-surface);
  --product-card-variant-thumb-size: var(--space-10);
}

.product-card-variants {
  min-inline-size: 0;
  margin-block-start: var(--product-card-variant-gap);
}

.product-card-variants__items {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--product-card-variant-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}

.product-card-variants__item,
.product-card-variants__more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  max-inline-size: 100%;
  min-inline-size: 0;
  font: inherit;
  line-height: inherit;
  overflow-wrap: anywhere;
}

.product-card-variants__item {
  padding-block: var(--product-card-variant-padding-block);
  padding-inline: var(--product-card-variant-padding-inline);
  border: var(--product-card-variant-border-width) solid
    var(--product-card-variant-border-color);
  border-radius: var(--product-card-variant-radius);
  color: var(--product-card-variant-color);
  background: var(--product-card-variant-background);
  text-decoration: none;
  font-size: var(--text-xs);
}

.product-card-variants__item:focus-visible,
.product-card-variants__more:focus-visible {
  outline: 2px solid var(--storefront-focus-ring, var(--focus-ring));
  outline-offset: 2px;
}

.product-card-variants__item--sold-out {
  background: var(--pg-ui-label-bg-danger, color-mix(in srgb, var(--status-error) 12%, var(--bg-surface)));
  color: var(--pg-ui-label-text-danger, var(--status-error));
  border-color: color-mix(
    in srgb,
    var(--pg-ui-label-text-danger, var(--status-error)) 28%,
    var(--product-card-variant-border-color)
  );
}

.product-card-variants__more {
  font-size: var(--text-xs);
  color: var(--text-muted);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.product-card-variants__image {
  display: block;
  inline-size: var(--product-card-variant-thumb-size);
  aspect-ratio: 1;
  object-fit: contain;
}

.product-card-variants[data-variant-display="count"] .product-variants-count,
.product-card-variants[data-variant-display="text"] .product-variants-count {
  margin-top: 0;
}

.product-card-variants[data-variant-display="text"] {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--product-card-variant-gap);
}

.product-card-variants[data-variant-display="dropdown"] {
  display: block;
}

.product-card-variants__select {
  box-sizing: border-box;
  inline-size: 100%;
  min-block-size: 2.75rem;
  padding-block: var(--space-2);
  padding-inline: var(--space-3);
  border: var(--product-card-variant-border-width) solid
    var(--product-card-variant-border-color);
  border-radius: var(--product-card-variant-radius);
  background: var(--product-card-variant-background);
  color: var(--product-card-variant-color);
  font: inherit;
  font-size: var(--text-sm);
  line-height: 1.3;
}

.product-card-variants__select:focus-visible {
  outline: 2px solid var(--storefront-focus-ring, var(--focus-ring));
  outline-offset: 2px;
}

/* Desktop/mobile split when presentation modes differ. */
.product-card-variants--viewport-mobile {
  display: none;
}

@media (max-width: 768px) {
  .product-card-variants--viewport-desktop {
    display: none;
  }

  .product-card-variants--viewport-mobile {
    display: block;
  }

  .product-card-variants--viewport-mobile[data-variant-display="text"] {
    display: flex;
  }
}

@media (hover: hover) and (pointer: fine) {
  .product-card[data-variant-reveal="hover"] .product-card-variants {
    opacity: 0;
    pointer-events: none;
  }

  .product-card[data-variant-reveal="hover"]:hover .product-card-variants,
  .product-card[data-variant-reveal="hover"]:focus-within .product-card-variants {
    opacity: 1;
    pointer-events: auto;
  }
}

/* Touch and hybrid devices keep direct access. */
@media (any-pointer: coarse) {
  .product-card[data-variant-reveal="hover"] .product-card-variants {
    opacity: 1;
    pointer-events: auto;
  }
}

/* Card purchase CTA — always visible in card flow (not hover-only). */
.product-card-actions {
  display: block;
  padding-block-start: var(--space-3);
  padding-inline: 0;
  margin-block-start: auto;
}

.product-card-actions .product-card-purchase-btn,
.product-card-purchase-btn {
  inline-size: 100%;
  min-inline-size: 0;
}

.product-card-purchase-btn .product-card-purchase-icon,
.product-quick-add-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  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) {
  /* Category mount (#products-mount) and homepage block grids (attr on grid root).
   * Double class on cols-* beats critical CSS (.product-grid--cols-N) which is
   * inlined after the full stylesheet with equal single-class specificity. */
  #products-mount[data-product-grid-mobile-columns="1"] .product-grid,
  .product-grid.product-grid[data-product-grid-mobile-columns="1"] {
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: var(--space-4);
  }

  #products-mount[data-product-grid-mobile-columns="2"] .product-grid,
  .product-grid.product-grid[data-product-grid-mobile-columns="2"] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4);
  }

  /* Homepage / block grids without an explicit attribute default to 2 columns */
  .product-grid.product-grid--cols-3,
  .product-grid.product-grid--cols-4,
  .product-grid.product-grid--cols-5 {
    grid-template-columns: repeat(2, minmax(0, 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;
}

/* Category + facet sidebar: sort + count rechts onderaan, vlak boven header-border */
.product-list-header--stacked-sort {
  padding-bottom: var(--space-3);
}

.product-list-header--stacked-sort .product-list-header-right--stacked-sort {
  align-self: flex-end;
  margin-top: auto;
}

.product-list-header-right--stacked-sort {
  align-items: flex-end;
  gap: var(--space-2);
}

.product-list-header-right--stacked-sort .product-filters-sort {
  min-width: 0;
  width: auto;
  flex-wrap: nowrap;
  justify-content: flex-end;
}

.product-list-header-right--stacked-sort .product-filters-sort .form-group {
  align-items: flex-end;
  margin: 0;
  width: auto;
}

.product-list-header-right--stacked-sort .product-filters-sort .form-select {
  width: auto;
  min-width: 11rem;
}

.product-list-header-right--stacked-sort .product-results-count {
  margin: 0;
  text-align: right;
}

.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;
}

.product-list-category-description-section {
  width: 100%;
  max-width: none;
  box-sizing: border-box;
}

.product-list-category-description-section--above {
  margin: 0 0 var(--space-6);
  padding-bottom: var(--space-6);
  border-bottom: 1px solid var(--border);
}

.product-list-category-description {
  margin: 0;
  width: 100%;
  max-width: none;
  color: var(--text-secondary);
  font-size: var(--text-base);
  line-height: 1.6;
}

.product-list-category-description.prose :first-child {
  margin-top: 0;
}

.product-list-category-description.prose :last-child {
  margin-bottom: 0;
}

.product-list-category-description-below {
  margin-top: var(--space-8);
  padding-top: var(--space-6);
  border-top: 1px solid var(--border);
}

.product-list-category-description--collapsible .product-list-category-description__preview {
  margin: 0;
  color: var(--text-secondary);
  line-height: 1.6;
  white-space: pre-wrap;
}

.product-list-category-description__toggle {
  margin-top: var(--space-2);
}

/* =================================================================
   FILTERS (inside header-right)
   ================================================================= */

/* Sort dropdown wrapper */
.product-filters-sort {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-3);
  flex-shrink: 0;
  min-width: 200px;
}

.product-list-tag-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 140px;
}

.product-list-tag-label {
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  color: var(--text-secondary);
}

.product-list-tag-input {
  min-width: 140px;
  max-width: 220px;
}

.product-filters-sort .form-select {
  background-color: var(--bg-surface);
}

/* =================================================================
   FACET SIDEBAR (Taak 15)
   ================================================================= */

.product-list-body {
  display: grid;
  grid-template-columns: minmax(200px, 260px) 1fr;
  gap: var(--space-8);
  align-items: start;
}

.product-list-body.product-list-body--no-facet-aside {
  grid-template-columns: 1fr;
}

.product-list-main {
  min-width: 0;
  width: 100%;
}

/*
 * Category content blocks (banner, etc.) live inside .product-list-main, which
 * is already padded by .product-list-container. Nested .container would add a
 * second horizontal inset and make the banner narrower than the product grid.
 *
 * Banner ↔ grid spacing must equal .product-grid gap (--space-6). Section /
 * spacingPreset padding is zeroed here so it does not stack on that gutter.
 */
.product-detail-content-blocks--category {
  width: 100%;
  margin-bottom: 0;
}

.product-list-main > .product-detail-content-blocks--category {
  margin-bottom: var(--space-6);
}

.product-list-main
  > [data-category-layout-section="category-product-card"]
  + .product-detail-content-blocks--category {
  margin-top: var(--space-6);
  margin-bottom: 0;
}

.product-detail-content-blocks--category > .section,
.product-detail-content-blocks--category > .full-width-image {
  padding-inline: 0;
  /* Beat .section / spacingPreset / inline presentation spacing in this zone */
  padding-block: 0 !important;
}

.product-detail-content-blocks--category .container {
  max-width: none;
  width: 100%;
  margin-inline: 0;
  padding-left: 0;
  padding-right: 0;
}

/* Split grids + between-row blocks: same gutter as .product-grid */
.product-list-main [data-category-layout-section="category-product-grid"] {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.product-list-facet-aside {
  position: sticky;
  top: var(--space-4);
}

/* Brand / tag / price — zelfde kaart-rhythm als .product-facet-group */
.product-list-facet-aside__filters {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
  padding-bottom: var(--space-6);
  border-bottom: 1px solid var(--border);
}

.product-facet-aside-filter {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  background: var(--bg-surface);
}

/* Labels + inputs: admin workspace chrome via .form-field-workspace (_workspace-field.css) */
.product-facet-aside-filter .form-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin: 0;
}

.product-facet-aside-filter .form-field-workspace,
.product-facet-aside-filter .product-list-tag-input.form-field-workspace {
  width: 100%;
  max-width: none;
}

.product-facet-aside-filter .product-list-tag-field {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-width: 0;
}

.product-facet-aside-filter .price-range-slider {
  width: 100%;
  max-width: none;
  margin-top: 0;
}

.product-facet-aside-filter .price-range-slider__header {
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-1);
  margin-bottom: var(--space-3);
}

/* Tag, Price, brand — zelfde titelstijl (geen admin muted-label op Tag) */
.product-facet-aside-filter .form-field-workspace-label,
.product-facet-aside-filter .form-label.form-field-workspace-label,
.product-facet-aside-filter .price-range-slider__title {
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  letter-spacing: normal;
  text-transform: none;
}

.product-facet-aside-filter .price-range-slider__values {
  font-size: var(--text-xs);
  font-weight: var(--font-normal);
  color: var(--text-secondary);
  white-space: normal;
}

.product-facet-aside-filter .price-range-slider__tracks {
  position: relative;
  height: 32px;
}

.product-facet-aside-filter .price-range-slider__tracks::before {
  content: "";
  position: absolute;
  left: 8px;
  right: 8px;
  top: 50%;
  height: 4px;
  margin-top: -2px;
  border-radius: var(--radius-full);
  background: var(--border);
  z-index: 0;
  pointer-events: none;
}

.product-facet-aside-filter .price-range-slider__input {
  z-index: 1;
}

.product-facet-aside-filter .product-price-filter-error {
  margin: 0 0 var(--space-2);
  text-align: left;
  max-width: none;
}

.product-facet-group {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  margin-bottom: var(--space-4);
}

.product-facet-group-title {
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  margin: 0 0 var(--space-3);
  padding: 0;
}

.product-facet-option {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--text-secondary);
  margin-bottom: var(--space-2);
  cursor: pointer;
}

.product-facet-option:last-child {
  margin-bottom: 0;
}

.product-facet-option input {
  flex-shrink: 0;
}

.product-facet-count {
  margin-left: auto;
  color: var(--text-muted);
  font-size: var(--text-xs);
}

.product-facet-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

.product-facet-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
}

/* =================================================================
   MOBILE FILTER DRAWER + TOOLBAR (≤768px)
   Desktop: hidden. Mobile: facet aside becomes an off-canvas drawer
   triggered by the "Filters" button in a compact toolbar row.
   ================================================================= */

.product-list-mobile-toolbar {
  display: none;
}

.product-list-facet-aside__drawer-header {
  display: none;
}

.product-filter-drawer-backdrop {
  display: none;
}

@media (max-width: 768px) {
  .product-list-body {
    grid-template-columns: 1fr;
  }

  .product-list-facet-aside {
    position: static;
  }

  /* Compact toolbar: Filters left, sort right, count below */
  .product-list-mobile-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    flex-wrap: wrap;
    margin-bottom: var(--space-4);
  }

  .product-list-mobile-toolbar__filters-button {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
  }

  .product-list-mobile-toolbar .product-filters-sort {
    min-width: 0;
    width: auto;
    flex: 0 1 auto;
    margin-left: auto;
  }

  .product-list-mobile-toolbar .product-filters-sort .form-select {
    width: auto;
    min-width: 9rem;
  }

  .product-list-mobile-toolbar__count {
    flex-basis: 100%;
    margin: 0;
  }

  .product-list-mobile-toolbar__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.25rem;
    height: 1.25rem;
    padding: 0 var(--space-1);
    border-radius: var(--radius-full);
    background: var(--color-primary, var(--text-primary));
    color: var(--bg-surface, #fff);
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    line-height: 1;
  }

  /* Desktop stacked sort/count is replaced by the toolbar */
  .product-list-header-right--stacked-sort {
    display: none;
  }

  /* Facet aside → off-canvas drawer */
  .product-list-facet-aside--drawer {
    position: fixed;
    top: 0;
    inset-inline-start: 0;
    bottom: 0;
    width: min(85vw, 360px);
    max-width: 100vw;
    z-index: 9998;
    margin: 0;
    padding: var(--space-4) var(--space-5) var(--space-6);
    overflow-y: auto;
    background: var(--bg-surface);
    box-shadow: var(--shadow-xl, calc(4px * var(--dir-sign, 1)) 0 24px rgba(0, 0, 0, 0.3));
    transform: translateX(calc(-100% * var(--dir-sign, 1)));
    transition: transform var(--transition-normal, 0.3s ease);
  }

  /* Higher specificity (two classes) so the open state wins even when the
     inline critical CSS (which redeclares the closed --drawer transform) is
     injected after this stylesheet in the document. */
  .product-list-facet-aside--drawer.product-list-facet-aside--drawer-open {
    transform: translateX(0);
  }

  .product-list-facet-aside__drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--border);
  }

  .product-list-facet-aside__drawer-title {
    font-size: var(--text-base);
    font-weight: var(--font-semibold);
    color: var(--text-primary);
  }

  .product-list-facet-aside__drawer-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    cursor: pointer;
  }

  .product-list-facet-aside__drawer-close:hover {
    color: var(--text-primary);
    border-color: var(--text-secondary);
  }

  .product-filter-drawer-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 9997;
    background: rgba(0, 0, 0, 0.5);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--transition-normal, 0.2s ease);
  }

  .product-filter-drawer-backdrop--open {
    opacity: 1;
    pointer-events: auto;
  }
}

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

/* =================================================================
   PRICE RANGE FILTER (Taak 10 — ProductList + PriceRangeSlider)
   ================================================================= */

.product-price-filter-error {
  font-size: var(--text-sm);
  color: var(--color-danger, var(--text-secondary));
  margin: 0;
  text-align: right;
  max-width: 280px;
}

.price-range-slider {
  width: 100%;
  max-width: 280px;
  margin-top: var(--space-2);
}

.price-range-slider__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-2);
}

.price-range-slider__title {
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
}

.price-range-slider__values {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  white-space: nowrap;
}

.price-range-slider__tracks {
  position: relative;
  height: 28px;
  display: flex;
  align-items: center;
}

.price-range-slider__input {
  position: absolute;
  left: 0;
  width: 100%;
  margin: 0;
  height: 28px;
  background: transparent;
  pointer-events: none;
  accent-color: var(--color-primary, var(--text-primary));
  -webkit-appearance: none;
  appearance: none;
}

.price-range-slider__input::-webkit-slider-thumb {
  pointer-events: auto;
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--bg-surface);
  border: 2px solid var(--border-strong, var(--border));
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.08);
  cursor: grab;
}

.price-range-slider__input::-moz-range-thumb {
  pointer-events: auto;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--bg-surface);
  border: 2px solid var(--border-strong, var(--border));
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.08);
  cursor: grab;
}

.price-range-slider__input--low {
  z-index: 2;
}

.price-range-slider__input--high {
  z-index: 3;
}

/* =================================================================
   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%;
  }

  .price-range-slider {
    max-width: none;
  }

  .product-price-filter-error {
    text-align: left;
    max-width: none;
  }

  .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;
}

/* Restore top padding when background color changes between adjacent sections */
.section-white + .section-muted,
.section-white + .section-accent,
.section-muted + .section-white,
.section-muted + .section-accent,
.section-accent + .section-white,
.section-accent + .section-muted {
  padding-top: var(--webshop-section-padding);
}

/* 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);
}

/* De pijl is van het ontwerp, niet van de tekst: een teken in een vertaling
   kan niet spiegelen. Rechts-naar-links wijst hij naar links. */
.section-link::after {
  content: "\2192";
  content: "\2192" / "";
}

[dir="rtl"] .section-link::after {
  content: "\2190";
  content: "\2190" / "";
}

[dir="rtl"] .section-link svg {
  transform: scaleX(-1);
}

.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);
}

/* =================================================================
   BLOCK SECTION STYLE PRESETS (website editor Style tab)
   Token values mirror storefront block-presentation-presets.ts
   ================================================================= */

:root {
  --block-spacing-none: var(--space-0);
  --block-spacing-compact: var(--space-4); /* 16px */
  --block-spacing-standard: var(--space-8); /* 32px */
  --block-spacing-spacious: var(--space-16); /* 64px */
  /* V100 space scale — semantic presentation tokens */
  --storefront-space-0: var(--space-0);
  --storefront-space-xs: var(--space-1); /* 4px */
  --storefront-space-sm: var(--space-2); /* 8px */
  --storefront-space-md: var(--space-4); /* 16px */
  --storefront-space-lg: var(--space-6); /* 24px */
  --storefront-space-xl: var(--space-8); /* 32px */
  --storefront-space-2xl: var(--space-12); /* 48px */
  --storefront-space-3xl: var(--space-16); /* 64px */
  --block-spacing-xs: var(--storefront-space-xs);
  --block-spacing-sm: var(--storefront-space-sm);
  --block-spacing-md: var(--storefront-space-md);
  --block-spacing-lg: var(--storefront-space-lg);
  --block-spacing-xl: var(--storefront-space-xl);
  --block-spacing-2xl: var(--storefront-space-2xl);
  --block-spacing-3xl: var(--storefront-space-3xl);
  --block-gap-compact: var(--space-2); /* 8px */
  --block-gap-standard: var(--space-4); /* 16px */
  --block-gap-spacious: var(--space-6); /* 24px */
  --storefront-tile-min-sm: 160px;
  --storefront-tile-min-md: 200px;
  --storefront-tile-min-lg: 240px;
  --storefront-content-width-narrow: 720px;
  --storefront-content-width-default: var(--webshop-content-max, 1400px);
  --storefront-content-width-wide: 1440px;
  --storefront-content-width-full: 100%;
  --storefront-media-padding-none: 0;
  --storefront-media-padding-sm: var(--storefront-space-sm);
  --storefront-media-padding-md: var(--storefront-space-md);
  --storefront-media-padding-lg: var(--storefront-space-lg);
  --storefront-media-padding-xl: var(--storefront-space-xl);
  --block-overlay-opacity-light: 0.25;
  --block-overlay-opacity-medium: 0.45;
  --block-overlay-opacity-strong: 0.65;
  --block-font-size-s: 0.875rem;
  --block-font-size-m: 1.125rem;
  --block-font-size-l: 1.5rem;
  --block-font-size-xl: 2rem;
}

.block-section--bg-transparent {
  background-color: transparent !important;
}

.block-section--bg-soft {
  background-color: color-mix(
    in srgb,
    var(--tenant-accent, var(--accent)) 12%,
    transparent
  );
}

.block-section--spacing-none {
  padding-block: var(--block-spacing-none);
}

.block-section--spacing-compact {
  padding-block: var(--block-spacing-compact);
}

.block-section--spacing-standard {
  padding-block: var(--block-spacing-standard);
}

.block-section--spacing-spacious {
  padding-block: var(--block-spacing-spacious);
}

.block-section--spacing-xs {
  padding-block: var(--block-spacing-xs);
}

.block-section--spacing-sm {
  padding-block: var(--block-spacing-sm);
}

.block-section--spacing-md {
  padding-block: var(--block-spacing-md);
}

.block-section--spacing-lg {
  padding-block: var(--block-spacing-lg);
}

.block-section--spacing-xl {
  padding-block: var(--block-spacing-xl);
}

.block-section--spacing-2xl {
  padding-block: var(--block-spacing-2xl);
}

.block-section--spacing-3xl {
  padding-block: var(--block-spacing-3xl);
}

.block-container--narrow {
  max-width: var(--storefront-content-width-narrow);
  margin-inline: auto;
  width: 100%;
}

.block-container--wide {
  max-width: var(--storefront-content-width-wide);
  margin-inline: auto;
  width: 100%;
}

.block-presentation--item-gap-none { --storefront-block-gap: var(--storefront-space-0); }
.block-presentation--item-gap-xs { --storefront-block-gap: var(--storefront-space-xs); }
.block-presentation--item-gap-sm { --storefront-block-gap: var(--storefront-space-sm); }
.block-presentation--item-gap-md { --storefront-block-gap: var(--storefront-space-md); }
.block-presentation--item-gap-lg { --storefront-block-gap: var(--storefront-space-lg); }
.block-presentation--item-gap-xl { --storefront-block-gap: var(--storefront-space-xl); }
.block-presentation--item-gap-2xl { --storefront-block-gap: var(--storefront-space-2xl); }
.block-presentation--item-gap-3xl { --storefront-block-gap: var(--storefront-space-3xl); }

.block-presentation--item-padding-none { --storefront-card-padding: var(--storefront-space-0); }
.block-presentation--item-padding-xs { --storefront-card-padding: var(--storefront-space-xs); }
.block-presentation--item-padding-sm { --storefront-card-padding: var(--storefront-space-sm); }
.block-presentation--item-padding-md { --storefront-card-padding: var(--storefront-space-md); }
.block-presentation--item-padding-lg { --storefront-card-padding: var(--storefront-space-lg); }
.block-presentation--item-padding-xl { --storefront-card-padding: var(--storefront-space-xl); }
.block-presentation--item-padding-2xl { --storefront-card-padding: var(--storefront-space-2xl); }
.block-presentation--item-padding-3xl { --storefront-card-padding: var(--storefront-space-3xl); }

.block-presentation--item-size-sm { --category-tile-min-width: var(--storefront-tile-min-sm); }
.block-presentation--item-size-md { --category-tile-min-width: var(--storefront-tile-min-md); }
.block-presentation--item-size-lg { --category-tile-min-width: var(--storefront-tile-min-lg); }

.block-presentation--media-padding-sm .storefront-media-frame,
.block-presentation--media-padding-sm .category-tile__media {
  padding: var(--storefront-media-padding-sm);
}
.block-presentation--media-padding-md .storefront-media-frame,
.block-presentation--media-padding-md .category-tile__media {
  padding: var(--storefront-media-padding-md);
}
.block-presentation--media-padding-lg .storefront-media-frame,
.block-presentation--media-padding-lg .category-tile__media {
  padding: var(--storefront-media-padding-lg);
}
.block-presentation--media-padding-xl .storefront-media-frame,
.block-presentation--media-padding-xl .category-tile__media {
  padding: var(--storefront-media-padding-xl);
}

.block-presentation--card-surface-flat .category-tile,
.block-presentation--card-surface-flat .block-card {
  background: var(--storefront-surface, var(--bg-surface));
  border: none;
  box-shadow: none;
}
.block-presentation--card-surface-soft .category-tile,
.block-presentation--card-surface-soft .block-card {
  background: var(--storefront-surface-subtle, var(--color-surface-subtle, var(--bg-deep)));
  border: none;
  box-shadow: none;
}
.block-presentation--card-surface-outlined .category-tile,
.block-presentation--card-surface-outlined .block-card {
  background: var(--storefront-surface, var(--bg-surface));
  border: 1px solid var(--storefront-border, var(--border-color));
  box-shadow: none;
}
.block-presentation--card-surface-elevated .category-tile,
.block-presentation--card-surface-elevated .block-card {
  background: var(--storefront-surface, var(--bg-surface));
  border: 1px solid var(--storefront-border, var(--border-color));
  box-shadow: var(--storefront-shadow-sm, var(--shadow-sm));
}

/* Category composition section modifiers (recipes own absolute positioning). */
.block-presentation--card-layout-media-fill .category-tile--layout-media-fill .category-tile__frame {
  min-height: var(--category-tile-fill-min-height, 14rem);
}

.block-presentation--item-size-lg.block-presentation--card-layout-media-fill
  .category-tile--layout-media-fill
  .category-tile__frame {
  min-height: var(--category-tile-fill-min-height-lg, 16rem);
}

.storefront-media-frame {
  display: grid;
  place-items: center;
  box-sizing: border-box;
}

.block-section--corners-rounded {
  border-radius: var(--radius-lg, 12px);
  overflow: hidden;
}

.block-section--corners-square {
  border-radius: 0;
}

.block-section--divider-wave,
.block-section--divider-slant {
  position: relative;
}

.block-section--divider-wave::after,
.block-section--divider-slant::after {
  content: "";
  display: block;
  width: 100%;
  height: 40px;
  pointer-events: none;
}

.block-section--divider-wave::after {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cpath d='M0,60 C300,120 900,0 1200,60 L1200,120 L0,120 Z' fill='%23ffffff'/%3E%3C/svg%3E")
    center bottom / 100% 40px no-repeat;
}

.block-section--divider-slant::after {
  background: linear-gradient(to bottom right, transparent 49%, var(--bg-surface) 50%);
}

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

/* storefront-recipes.css */
/**
 * Storefront visual recipes V100 (Wave F)
 *
 * Named appearance recipes — domain components compose; design owns appearance.
 * Do not invent category-card / booking-card / subscription-card paint forks.
 *
 * @layer contexts (included via webshop sections bundle)
 */

/* ----- Section ----- */
.storefront-recipe-section {
  background: var(--storefront-canvas);
  color: var(--storefront-text-primary);
}

/* ----- Card / Tile (same visual concept) ----- */
.storefront-recipe-card,
.storefront-recipe-tile {
  background: var(--storefront-surface);
  color: var(--storefront-text-primary);
  border: 1px solid var(--storefront-border);
  border-radius: var(--radius-lg, 12px);
}

.storefront-recipe-card--elevated,
.storefront-recipe-tile--elevated {
  background: var(--storefront-surface-elevated);
  box-shadow: var(--storefront-shadow-md, var(--shadow-md));
  border-color: transparent;
}

.storefront-recipe-card--soft,
.storefront-recipe-tile--soft {
  background: var(--storefront-surface-muted, var(--storefront-surface));
  border-color: transparent;
}

.storefront-recipe-card--outlined,
.storefront-recipe-tile--outlined {
  background: transparent;
  border-color: var(--storefront-border-strong);
}

.storefront-recipe-card--flat,
.storefront-recipe-tile--flat {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}

/* ----- MediaFrame ----- */
.storefront-recipe-media-frame {
  display: block;
  overflow: hidden;
  background: var(--storefront-surface-muted, var(--storefront-surface));
}

.storefront-recipe-media-frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: var(--storefront-media-fit, cover);
}

/* ----- Empty / Loading ----- */
.storefront-recipe-empty,
.storefront-recipe-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--storefront-space-md);
  padding: var(--storefront-space-2xl);
  color: var(--storefront-text-muted);
  background: var(--storefront-surface);
  border-radius: var(--radius-lg, 12px);
}

.storefront-recipe-loading {
  color: var(--storefront-text-secondary);
}

/* ----- Modal / Drawer overlay host ----- */
.storefront-recipe-overlay {
  background: color-mix(in srgb, var(--storefront-overlay) 50%, transparent);
}

/* ----- Grid ----- */
.storefront-recipe-grid {
  display: grid;
  gap: var(--storefront-block-gap, var(--storefront-space-md));
}

/* Domain aliases — same recipe, different host */
.category-tile.storefront-recipe-tile,
.block-card.storefront-recipe-card,
.booking-card.storefront-recipe-card,
.subscription-card.storefront-recipe-card {
  /* appearance inherited from recipe modifiers above */
}

/* 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);
}

.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-actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-2, 0.5rem);
}

.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-member__upload-actions {
    width: 100%;
  }

  .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-grid--square-corners .trust-item {
  border-radius: 0;
}

.trust-item--hover-none:hover {
  border-color: var(--border);
  transform: none;
  box-shadow: none;
}

.trust-item--hover-zoom:hover .trust-icon-wrapper {
  transform: scale(1.08);
}

.trust-item--hover-zoom .trust-icon-wrapper {
  transition: transform var(--transition-fast);
}

@media (prefers-reduced-motion: reduce) {
  .trust-item--hover-zoom:hover .trust-icon-wrapper {
    transform: none;
  }
}

/* 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-grid--square-corners .usp-item {
  border-radius: 0;
}

.usp-item--hover-none:hover {
  transform: none;
}

.usp-item--hover-zoom:hover .usp-icon {
  transform: scale(1.12);
}

.usp-item--hover-zoom .usp-icon {
  transition: transform var(--transition-fast);
}

@media (prefers-reduced-motion: reduce) {
  .usp-item--hover-zoom:hover .usp-icon {
    transform: none;
  }
}

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

/* website-editor.css */
/**
 * Website editor shell styling — merchant edit chrome on storefront (UX v2).
 * @context webshop
 */
.category-editor { display: grid; grid-template-columns: minmax(20rem, 22rem) minmax(0, 1fr); align-items: start; gap: var(--space-6); width: 100%; min-width: 0; }
.category-editor__controls,
.category-editor__content-controls { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; }
.category-editor__gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: max-content; align-items: start; gap: var(--space-2); }
.category-editor__preset { display: flex; flex-direction: column; align-self: start; gap: var(--space-2); min-height: 12.5rem; text-align: start; padding: var(--space-2); background: var(--pg-editor-color-surface); color: var(--pg-editor-color-text); border: 1px solid var(--pg-editor-color-border); border-radius: var(--radius-md); }
.category-editor__preset[aria-pressed="true"] { outline: 2px solid var(--pg-editor-color-brand-500); }
.category-editor__preset > span:last-child { font-size: var(--text-xs); }
.category-editor__miniature { display: block; width: 100%; height: 6.25rem; overflow: hidden; pointer-events: none; border-radius: var(--radius-sm); background: var(--pg-editor-color-bg); }
.category-editor__miniature > .category-composition-container { width: 900px; transform: scale(.2); transform-origin: top left; }
.category-editor__preview { min-width: 0; width: 100%; }
.category-editor__preview-tools { display: flex; gap: var(--space-2); margin-bottom: var(--space-3); }
/* Height follows the previewed content (set by the editor), so no tile is cut off. */
.category-editor__frame { display: block; width: 100%; min-height: 12rem; border: 0; outline: 1px solid var(--pg-editor-color-border); outline-offset: -1px; background: var(--storefront-surface); }
/* Phone width, aligned with the Desktop/Mobile switch above it (not floating mid-column). */
.category-editor__frame--mobile { width: 390px; max-width: 100%; margin-inline: 0; }
.category-editor__mobile-tabs { display: none; }
.category-editor__row-name { border: 0; background: transparent; color: inherit; text-align: start; padding: 0; cursor: pointer; overflow-wrap: anywhere; }
.category-editor .website-editor-product-selection__item[data-active="true"] { outline: 2px solid var(--pg-editor-color-brand-500); outline-offset: 2px; }
.category-editor__actions { display: inline-flex; align-items: center; justify-content: center; justify-self: end; width: 2.25rem; height: 2.25rem; padding: 0; cursor: pointer; border: 1px solid transparent; border-radius: var(--radius-md); background: transparent; color: var(--pg-editor-color-text-muted); }
.category-editor__actions:hover,
.category-editor__actions[aria-expanded="true"] { color: var(--pg-editor-color-text); background: var(--pg-editor-color-bg); border-color: var(--pg-editor-color-border); }
.category-editor__menu-backdrop { position: fixed; z-index: calc(var(--website-editor-z-menu) - 1); inset: 0; width: 100%; height: 100%; padding: 0; border: 0; background: transparent; cursor: default; }
.category-editor__action-menu { position: fixed; z-index: var(--website-editor-z-menu); display: flex; flex-direction: column; gap: 2px; width: 11rem; max-width: calc(100vw - 1rem); padding: 4px; border: 1px solid var(--pg-editor-color-border); border-radius: var(--radius-md); background: var(--pg-editor-color-surface); box-shadow: var(--shadow-lg); font-size: var(--text-sm); }
.category-editor__action-menu > button { display: flex; align-items: center; gap: var(--space-2); width: 100%; min-height: 2.25rem; padding: 6px 8px; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--pg-editor-color-text); font: inherit; text-align: start; white-space: nowrap; }
.category-editor__action-menu > button:not(:disabled):hover { background: var(--pg-editor-color-bg); }
.category-editor__action-menu > button:disabled { opacity: .45; }
.category-editor__picker { display: flex; flex-direction: column; gap: var(--space-3); max-height: 50dvh; overflow-y: auto; margin-block: var(--space-3); }
@media (max-width: 1023px) {
  .category-editor { grid-template-columns: minmax(0, 1fr); }
  .category-editor__mobile-tabs { display: flex; gap: var(--space-3); margin-bottom: var(--space-3); }
  .category-editor:not(.category-editor--preview) > .category-editor__preview,
  .category-editor--preview > .category-editor__controls { display: none; }
}
@media (max-width: 600px) {
  .category-editor__actions { grid-column: auto; }
}
:root {
  /*
   * Website-editor chrome geometry + z-index (local to storefront edit mode).
   * Color/surface tokens hang on admin-v2 via --pg-editor-* bridge when
   * body.website-editor-active is set (workspace-shell.css). Do not introduce
   * a third color token family here.
   */
  /*
   * Geometry + stacking only. Color/surface tokens use --pg-editor-* (bridge to
   * --admin-v2-*) — no third color family. Legacy --website-editor-* color names
   * below are thin aliases for existing selectors; prefer --pg-editor-* in new CSS.
   */
  --editor-workspace-sheet-height: calc(100dvh - var(--website-editor-chrome-height, 68px));
  --editor-workspace-nav-width: var(--pg-editor-left-rail-width, 202px);
  /* Deprecated pass-through aliases (geometry) — use --editor-workspace-* in new CSS. */
  --website-editor-sheet-height: var(--editor-workspace-sheet-height);
  --website-editor-workspace-nav-width: var(--editor-workspace-nav-width);
  /* Fallback until body.website-editor-active sets admin-v2 topbar height. */
  --website-editor-chrome-height: 68px;
  /* Same rhythm as admin topbar (control + chrome padding), not 4.5rem. */
  --website-editor-footer-height: 68px;
  --website-editor-z-shell: 1300;
  --website-editor-z-sheet: 1250;
  --website-editor-z-chrome: 1310;
  /* Products entity sheet covers general editor chrome when open */
  --website-editor-z-entity-sheet: 1400;
  /*
   * Portaled menus (EditorSelect → document.body) must sit above the entity
   * sheet; previously 1320 rendered behind the full-page sheet (1400).
   */
  --website-editor-z-menu: 1500;
  --website-editor-z-intent-menu: 1510;
  --website-editor-z-toast: 1520;
  --website-editor-z-error: 1530;
  --website-editor-z-dialog: 1600;
  /* Deprecated color aliases → --pg-editor-* → --admin-v2-* (SSoT). */
  --website-editor-surface: var(--pg-editor-color-surface, var(--bg-elevated, #ffffff));
  --website-editor-surface-muted: var(--pg-editor-color-surface-muted, var(--bg-surface, #f8fafc));
  --website-editor-surface-subtle: var(--pg-editor-color-bg, var(--bg-hover, #f1f5f9));
  --website-editor-border: var(--pg-editor-color-border, var(--border-subtle, #e2e8f0));
  --website-editor-border-strong: var(--pg-editor-color-border-strong, var(--border-medium, #cbd5e1));
  --website-editor-text: var(--pg-editor-color-text, var(--text-primary, #0f172a));
  --website-editor-text-muted: var(--pg-editor-color-text-muted, var(--text-secondary, #64748b));
  --website-editor-accent: var(--pg-editor-color-brand-500, var(--color-primary, var(--accent, #2563eb)));
}

/*
 * Lift editor chrome above storefront blocks (hero, sticky header).
 * Do NOT use isolation:isolate here — it makes backdrop-filter on the fixed
 * topbar/footer sample an empty group, so chrome-edge shadows render as an
 * opaque band (layout “gebied”) instead of overlaying preview content.
 * position+z-index already create the stacking context we need.
 */
#website-editor-root {
  position: relative;
  z-index: var(--website-editor-z-shell);
  pointer-events: none;
}

#website-editor-root > * {
  pointer-events: auto;
}

/*
 * Admin V2 tokens (space, type, chrome bar, controls, …) are the Products SSoT
 * from contexts/admin/_base.css :root — injected by build.js as
 * body.website-editor-active { … }. Do not re-declare those tokens here.
 *
 * This block only binds website-editor layout to those shared tokens.
 */
body.website-editor-active {
  /*
   * Match admin shell footer *rendered* height (padding + control ≈ topbar).
   * Do not use 4.5rem — webshop rem (16px) makes that taller than admin.
   */
  --admin-v2-shell-footer-min-height: var(--admin-v2-topbar-height);
  --admin-v2-shell-menu-max-height: calc(
    100dvh
    - var(--admin-v2-topbar-height)
    - var(--admin-v2-shell-footer-min-height)
    - var(--admin-v2-space-4)
  );
  --website-editor-chrome-height: var(--admin-v2-topbar-height);
  --website-editor-footer-height: var(--admin-v2-shell-footer-min-height);

  padding-top: var(--website-editor-chrome-height);
  padding-bottom: var(--website-editor-footer-height);
  scroll-padding-top: calc(var(--website-editor-chrome-height) + 8px);
  scroll-padding-bottom: calc(var(--website-editor-footer-height) + 16px);
  overscroll-behavior-y: none;
}

/*
 * Editor chrome only (not storefront preview): remap legacy --font-size-* /
 * --font-weight-* used in this file to admin Products / admin-v2 type tokens.
 */
body.website-editor-active :is(
  #website-editor-root,
  .admin-v2-entity-sheet-layer,
  .editor-workspace-dialog-layer,
  .website-editor-context-menu,
  .editor-select__menu,
  .editor-color-picker__panel,
  .editor-hint-tooltip
) {
  --font-size-xs: var(--pg-editor-font-size-xs, var(--admin-v2-font-size-meta, 12px));
  --font-size-sm: var(--pg-editor-font-size-sm, var(--admin-v2-font-size-body, 14px));
  --font-size-md: var(--pg-editor-font-size-md, var(--admin-v2-font-size-section-title, 16px));
  --font-size-lg: var(--pg-editor-font-size-xl, var(--admin-v2-font-size-page-title, 20px));
  --font-weight-medium: var(--pg-editor-font-weight-medium, var(--admin-v2-font-weight-medium, 500));
  --font-weight-semibold: var(--pg-editor-font-weight-semibold, var(--admin-v2-font-weight-semibold, 600));
  --font-weight-bold: var(--pg-editor-font-weight-bold, var(--admin-v2-font-weight-bold, 700));
}

/*
 * Section/structure editors use the Products entity sheet (own head/foot).
 * Raise above website-editor chrome and hide the general topbar/footer.
 */
body.website-editor-active.admin-v2-sheet-open .admin-v2-entity-sheet-layer {
  z-index: var(--website-editor-z-entity-sheet);
}

/*
 * Confirm dialogs portal to <body>. Keep them above the raised entity sheet
 * even when later admin-v2 entity-sheet rules redeclare .editor-workspace-dialog-layer.
 */
body.website-editor-active .editor-workspace-dialog-layer,
body.website-editor-active.admin-v2-sheet-open .editor-workspace-dialog-layer {
  z-index: var(--website-editor-z-dialog) !important;
}

/* AdminModal portals directly to body. Category image and conversion dialogs
 * must clear the entity sheet and its embedded preview iframe. */
body.website-editor-active.admin-v2-sheet-open > .modal-backdrop {
  z-index: calc(var(--website-editor-z-dialog) - 1) !important;
}

body.website-editor-active.admin-v2-sheet-open > .modal {
  z-index: var(--website-editor-z-dialog) !important;
}

body.website-editor-active.admin-v2-sheet-open #website-editor-root .admin-v2-topbar.admin-capability-action-bar,
body.website-editor-active.admin-v2-sheet-open #website-editor-root .admin-v2-shell-footer {
  display: none;
}

/*
 * Website-editor sheets host EditorWorkspacePane / section-list inside the
 * Products entity sheet. Admin Products scrolls the sheet body edge-to-edge;
 * a padded sheet-body + nested pane scrollport created a gray “frame”
 * (inset scrollbar, broken chrome-edge shadows). Collapse to one full-bleed
 * scrollport — same as admin workspaces.
 */
body.website-editor-active.admin-v2-sheet-open .admin-v2-entity-sheet__body:has(
  > :is(.editor-workspace-pane, .website-editor-pane, .website-editor-section-list, .editor-workspace-section-list)
) {
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-content: stretch;
  grid-template-columns: minmax(0, 1fr);
  background: var(--admin-v2-color-bg);
}

body.website-editor-active.admin-v2-sheet-open .admin-v2-entity-sheet__body .editor-workspace-pane,
body.website-editor-active.admin-v2-sheet-open .admin-v2-entity-sheet__body .website-editor-pane {
  flex: 1 1 auto;
  width: 100%;
  height: auto;
  min-height: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
}

body.website-editor-active.admin-v2-sheet-open .admin-v2-entity-sheet__body
  :is(.editor-workspace-pane__body, .website-editor-pane__body) {
  /* Content inset stays; scrollbar sits on the viewport edge. */
  padding: var(--admin-v2-space-5);
}

body.website-editor-active.admin-v2-sheet-open .admin-v2-entity-sheet__body .website-editor-section-list,
body.website-editor-active.admin-v2-sheet-open .admin-v2-entity-sheet__body .editor-workspace-section-list {
  flex: 1 1 auto;
  width: 100%;
  height: auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

html.website-editor-active.website-editor-sheet-open,
body.website-editor-active.website-editor-sheet-open,
html.website-editor-active.website-editor-structure-open,
body.website-editor-active.website-editor-structure-open {
  overflow: hidden;
  overscroll-behavior: none;
}

body.website-editor-active.website-editor-sheet-open {
  padding-bottom: 0;
  scroll-padding-bottom: 0;
}

/* Admin V2 shell chrome — fixed overlay on storefront preview */
body.website-editor-active #website-editor-root .admin-v2-topbar.admin-capability-action-bar {
  position: fixed;
  inset-inline: 0;
  top: 0;
  bottom: auto;
  z-index: var(--website-editor-z-chrome);
  width: 100%;
  max-width: none;
  box-sizing: border-box;
  overflow: visible;
}

body.website-editor-active #website-editor-root .admin-v2-shell-footer {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  top: auto;
  z-index: var(--website-editor-z-chrome);
  width: 100%;
  max-width: none;
  box-sizing: border-box;
  min-height: var(--admin-v2-topbar-height);
  height: var(--admin-v2-topbar-height);
  flex-wrap: nowrap;
}

body.website-editor-active.website-editor-sheet-open #website-editor-root .admin-v2-shell-footer {
  display: none;
}

body.website-editor-active :is(
  .announcement-bar,
  [data-storefront-topbar],
  [data-announcement-bar],
  header.site-header,
  header.header,
  .site-header,
  .storefront-header-chrome,
  nav.site-nav,
  nav.main-nav,
  .main-nav,
  .navbar-content
) {
  scroll-margin-top: calc(var(--website-editor-chrome-height) + var(--space-2));
}

body.website-editor-active.website-editor-preview-scrolled :is(
  header.site-header,
  header.header,
  .site-header,
  .storefront-header-chrome
) {
  top: var(--website-editor-chrome-height);
}

/* Intent menu anchored in shell footer tools zone */
.website-editor-shell-footer__intent {
  position: relative;
  z-index: var(--website-editor-z-menu);
}

.website-editor-shell-footer__intent-menu {
  position: absolute;
  bottom: calc(100% + var(--admin-v2-space-2, 8px));
  inset-inline-start: 50%;
  transform: translateX(-50%);
  width: min(260px, calc(100vw - 24px));
  z-index: var(--website-editor-z-intent-menu);
  pointer-events: auto;
}

/*
 * Editable targets on the live storefront (sections + other openable regions).
 * Role: website-editor-editable-hover — one hangpoint for all siblings that use
 * .website-editor-section--editable (Role Contract Test).
 *
 * Dashed edge uses ::after (not outline): outline paints under adjacent
 * image/gradient stacking contexts, so the top edge disappears. Raise
 * z-index while highlighted so the frame sits above the previous sibling.
 */
.website-editor-section--editable {
  position: relative;
  cursor: pointer;
  transition: box-shadow 160ms ease;
}

/*
 * Highlight only leaf hover targets. Nested editables (legacy <header> wrapping
 * nav) must not double-paint: :has() skips the parent while a child is hovered.
 * border-color transparent: chrome border-bottom must not sit outside the frame.
 */
.website-editor-section--editable:is(:hover, :focus-visible):not(
  :has(.website-editor-section--editable:is(:hover, :focus-visible))
),
.website-editor-section--active {
  z-index: 5;
  border-color: transparent;
  box-shadow: inset 0 0 0 9999px
    color-mix(in srgb, var(--admin-v2-label-bg-success, #ecfdf3) 72%, transparent);
}

.website-editor-section--editable:is(:hover, :focus-visible):not(
  :has(.website-editor-section--editable:is(:hover, :focus-visible))
)::after,
.website-editor-section--active::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  box-sizing: border-box;
  border: 4px dashed var(--pg-editor-color-success, var(--success, #12b76a));
  pointer-events: none;
}

body.website-editor-sheet-open .website-editor-section--editable:not(.website-editor-section--active) {
  opacity: 0.88;
}

/*
 * Preview section structure controls (position + delete).
 * Role: website-editor-section-toolbar — hangpoint for overlay controls on
 * .website-editor-section--editable siblings (Role Contract Test).
 * Position and delete are separate controls (no shared capsule chrome).
 */
.website-editor-section-toolbar-host {
  position: absolute;
  right: var(--space-2, 0.5rem);
  bottom: var(--space-2, 0.5rem);
  z-index: 6;
  pointer-events: none;
}

.website-editor-section-toolbar {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2, 0.5rem);
  pointer-events: auto;
}

.website-editor-section-toolbar__control {
  margin: 0;
}

.website-editor-section-toolbar__control--position {
  display: inline-flex;
}

.website-editor-section-toolbar__position-select.editor-select {
  min-width: 3.25rem;
}

/* Delete — Editor Form Language danger icon button (same as Structure remove). */
.website-editor-section-toolbar__control--delete.editor-action-button {
  flex: 0 0 auto;
}

/* Section context menu */
.website-editor-context-menu {
  position: fixed;
  z-index: var(--website-editor-z-menu);
  width: min(260px, calc(100vw - 24px));
  padding: var(--space-2);
  background: var(--website-editor-surface);
  border: 1px solid var(--website-editor-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}

.website-editor-context-menu__heading {
  margin: 0 0 var(--space-2);
  padding: var(--space-1) var(--space-2);
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-sm);
}

.website-editor-context-menu__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.website-editor-context-menu__item--sub {
  padding-inline-start: var(--space-5);
  font-size: var(--font-size-sm);
}

.website-editor-context-menu__group-label {
  display: block;
  padding: var(--space-2) var(--space-3) var(--space-1);
  font-size: var(--font-size-xs);
  color: var(--website-editor-text-muted);
}

/* Intent dropdown — must beat generic .website-editor-context-menu { position: fixed } */
.website-editor-context-menu.website-editor-shell-footer__intent-menu {
  position: absolute;
  bottom: calc(100% + var(--admin-v2-space-2, 8px));
  top: auto;
  inset-inline-start: 50%;
  inset-inline-end: auto;
  transform: translateX(-50%);
  width: min(260px, calc(100vw - 24px));
  max-width: calc(100vw - 24px);
  z-index: var(--website-editor-z-intent-menu);
  pointer-events: auto;
}

/* Full-page editor surface (below admin-aligned topbar) */
.website-editor-sheet {
  position: fixed;
  inset-inline: 0;
  top: var(--website-editor-chrome-height);
  bottom: 0;
  z-index: var(--website-editor-z-sheet);
  display: flex;
  flex-direction: column;
  height: auto;
  max-height: none;
  min-height: 0;
  background: var(--website-editor-surface);
  border: 0;
  border-radius: 0;
  box-shadow: none;
  animation: website-editor-sheet-in 220ms ease;
  isolation: isolate;
  overflow: hidden;
}

@keyframes website-editor-sheet-in {
  from {
    transform: translateY(100%);
  }

  to {
    transform: translateY(0);
  }
}

.website-editor-sheet__handle {
  display: none;
}

.website-editor-sheet__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
  flex-shrink: 0;
  padding: var(--space-3) var(--space-4) var(--space-2);
  background: var(--website-editor-surface);
  border-bottom: 1px solid var(--website-editor-surface-subtle);
}

.website-editor-sheet__heading {
  min-width: 0;
  flex: 1;
}

.website-editor-sheet__dirty {
  flex-shrink: 0;
  align-self: flex-start;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--color-warning, #f59e0b) 12%, var(--website-editor-surface));
  color: var(--color-warning, #b45309);
  border: 1px solid color-mix(in srgb, var(--color-warning, #f59e0b) 35%, var(--website-editor-border));
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  white-space: nowrap;
}

.website-editor-sheet__title {
  margin: 0;
  font-size: var(--font-size-lg);
}

.website-editor-sheet__subtitle {
  margin: var(--space-1) 0 0;
  font-size: var(--font-size-sm);
  color: var(--website-editor-text-muted);
}

.editor-workspace-sheet__tabs,
.website-editor-sheet__tabs {
  display: flex;
  flex-shrink: 0;
  gap: var(--space-2);
  padding: 0 var(--space-4) var(--space-2);
  background: var(--website-editor-surface);
  border-bottom: 1px solid var(--website-editor-border);
}

.editor-workspace-sheet__tab,
.website-editor-sheet__tab {
  appearance: none;
  border: 1px solid transparent;
  background: transparent;
  color: var(--website-editor-text-muted);
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-3);
  min-height: var(--webshop-touch-min);
  font: inherit;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
}

.editor-workspace-sheet__tab:hover:not(:disabled),
.website-editor-sheet__tab:hover:not(:disabled) {
  background: var(--website-editor-surface-subtle);
  color: var(--website-editor-text);
}

.editor-workspace-sheet__tab--active,
.website-editor-sheet__tab--active {
  background: var(--website-editor-surface-subtle);
  border-color: var(--website-editor-border-strong);
  color: var(--website-editor-text);
}

.editor-workspace-sheet__tab:disabled,
.website-editor-sheet__tab:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.editor-workspace-sheet__tab-panel,
.website-editor-sheet__tab-panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.editor-workspace-sheet__tab-panel[hidden],
.website-editor-sheet__tab-panel[hidden] {
  display: none;
}

.website-editor-sheet__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: var(--space-3) var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  background: var(--website-editor-surface);
}

.website-editor-sheet__footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
  flex-shrink: 0;
  padding: var(--space-3) var(--space-4);
  border-top: 1px solid var(--website-editor-border);
  background: var(--website-editor-surface);
  box-shadow: var(--admin-v2-chrome-footer-shadow);
}

.website-editor-sheet__btn {
  appearance: none;
  border: 1px solid var(--website-editor-border-strong);
  background: var(--website-editor-surface);
  color: var(--website-editor-text);
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-4);
  min-height: var(--webshop-touch-min);
  font: inherit;
  cursor: pointer;
}

.website-editor-sheet__btn--primary {
  background: var(--website-editor-text);
  border-color: var(--website-editor-text);
  color: var(--website-editor-surface);
}

.website-editor-sheet__btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.website-editor-sheet__status {
  margin: 0;
  color: var(--website-editor-text-muted);
}

.website-editor-sheet__status--stack {
  display: grid;
  gap: var(--space-3, 0.75rem);
}

.website-editor-section-list__swatch {
  display: inline-block;
  width: 1rem;
  height: 1rem;
  border-radius: 999px;
  border: 1px solid var(--border, var(--website-editor-border));
  background-color: var(--website-editor-swatch-color, var(--bg-deep));
}

.website-editor-sheet__error {
  margin: 0;
  color: var(--color-danger, #dc2626);
}

.website-editor-sheet__error--floating {
  position: fixed;
  top: calc(var(--website-editor-chrome-height) + 8px);
  inset-inline: var(--space-4);
  z-index: var(--website-editor-z-error);
  padding: var(--space-2) var(--space-3);
  background: color-mix(in srgb, var(--color-danger, #dc2626) 8%, var(--website-editor-surface));
  border-radius: var(--radius-md);
}

.editor-form-field,
.website-editor-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  flex-shrink: 0;
  width: 100%;
  min-width: 0;
}

.editor-form-field--checkbox,
.website-editor-field--checkbox {
  flex-direction: row;
  align-items: center;
  gap: var(--space-2);
}

.editor-form-field__label,
.website-editor-field__label {
  /* Type SSoT: v2/editor-workspace/workspace-shell.css → admin label tokens. */
  font-size: var(--pg-editor-font-size-label, var(--admin-font-size-label, 16px));
  font-weight: var(--pg-editor-font-weight-semibold, var(--admin-v2-font-weight-semibold, 600));
  color: var(--pg-editor-color-text, var(--website-editor-text));
}

.editor-form-field__input,
.website-editor-field__input {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  /* Height/padding SSoT: v2/editor-workspace/workspace-shell.css (admin field 36px). */
  border: 1px solid var(--website-editor-border-strong);
  border-radius: var(--radius-md);
  font: inherit;
  background: var(--website-editor-surface);
  color: var(--website-editor-text);
}

.editor-form-field__textarea,
.website-editor-field__textarea {
  resize: vertical;
  min-height: 72px;
}

.website-editor-sheet__advanced-toggle {
  appearance: none;
  border: none;
  background: transparent;
  padding: 0;
  font: inherit;
  color: var(--website-editor-text-muted);
  cursor: pointer;
  text-align: start;
}

.website-editor-sheet__advanced-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding-top: var(--space-2);
}

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

.website-editor-announcement {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3);
  border: 1px solid var(--website-editor-border);
  border-radius: var(--radius-lg);
  background: var(--website-editor-surface-muted);
}

.website-editor-announcement__title {
  margin: 0;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
}

.website-editor-announcement__schedule {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2);
}

.website-editor-product-selection {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.website-editor-product-selection__search {
  position: relative;
}

.website-editor-product-selection__results {
  position: absolute;
  z-index: 2;
  top: calc(100% + var(--space-1));
  left: 0;
  right: 0;
  max-height: 240px;
  overflow-y: auto;
  border: 1px solid var(--website-editor-border);
  border-radius: var(--radius-md);
  background: var(--website-editor-surface);
  box-shadow: var(--shadow-md, 0 8px 24px rgb(15 23 42 / 0.12));
}

.website-editor-product-selection__results-empty {
  display: flex;
  justify-content: center;
  padding: var(--space-3);
  margin: 0;
  color: var(--website-editor-text-muted);
  font-size: var(--font-size-sm);
}

.website-editor-product-selection__result {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  padding: var(--space-2) var(--space-3);
  border: 0;
  border-bottom: 1px solid var(--website-editor-border);
  background: transparent;
  color: var(--website-editor-text);
  text-align: start;
  cursor: pointer;
}

.website-editor-product-selection__result:last-child {
  border-bottom: 0;
}

.website-editor-product-selection__result:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.website-editor-product-selection__result:not(:disabled):hover {
  background: var(--website-editor-surface-subtle);
}

.website-editor-product-selection__thumb {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: var(--radius-md);
  object-fit: cover;
}

.website-editor-product-selection__thumb--placeholder {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--website-editor-surface-muted);
  color: var(--website-editor-text-muted);
}

.website-editor-product-selection__result-text,
.website-editor-product-selection__item-text {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--space-0-5, 2px);
  min-width: 0;
}

.website-editor-product-selection__result-title,
.website-editor-product-selection__item-title {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
}

.website-editor-product-selection__result-meta,
.website-editor-product-selection__item-meta {
  font-size: var(--font-size-xs);
  color: var(--website-editor-text-muted);
}

.website-editor-product-selection__result-badge {
  flex-shrink: 0;
  font-size: var(--font-size-xs);
  color: var(--website-editor-text-muted);
}

.website-editor-product-selection__loading {
  display: flex;
  justify-content: center;
  padding: var(--space-2);
}

.website-editor-product-selection__selected {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.website-editor-product-selection__item {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--website-editor-border);
  border-radius: var(--radius-lg);
  background: var(--website-editor-surface-muted);
}

.website-editor-product-selection__item--selected {
  grid-template-columns: auto 40px minmax(0, 1fr) auto;
}

.website-editor-product-selection__item-text {
  overflow-wrap: anywhere;
}

.website-editor-product-selection__item-actions {
  display: flex;
  flex-shrink: 0;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--space-1);
  min-width: 0;
}

.website-editor-product-selection__item-actions > button {
  white-space: nowrap;
}

.website-editor-product-selection__item-actions .website-editor-sheet__btn {
  min-width: 2rem;
  padding-inline: var(--space-2);
}

@media (max-width: 720px) {
  .website-editor-product-selection__item,
  .website-editor-product-selection__item--selected {
    grid-template-columns: auto 40px minmax(0, 1fr);
  }

  .website-editor-product-selection__item--top-level {
    grid-template-columns: 40px minmax(0, 1fr);
  }

  .website-editor-product-selection__item-actions {
    grid-column: 2 / -1;
  }
}

.website-editor-opening-hours {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.website-editor-opening-hours__heading {
  margin: 0;
}

.website-editor-opening-hours__days {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.website-editor-opening-hours__day {
  display: grid;
  grid-template-columns: minmax(6rem, 1fr) auto;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--website-editor-border);
  border-radius: var(--radius-lg);
  background: var(--website-editor-surface-muted);
}

.website-editor-opening-hours__day-label {
  grid-column: 1 / -1;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
}

.website-editor-opening-hours__closed {
  margin: 0;
}

.website-editor-opening-hours__times {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2);
}

.website-editor-opening-hours__time {
  margin: 0;
}

.website-editor-toast {
  position: fixed;
  bottom: calc(var(--website-editor-footer-height, 68px) + var(--space-4));
  left: 50%;
  transform: translateX(-50%);
  z-index: var(--website-editor-z-toast);
  padding: var(--space-2) var(--space-4);
  background: var(--website-editor-text);
  color: var(--website-editor-surface);
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-md);
  font-size: var(--font-size-sm);
}

body.website-editor-sheet-open .website-editor-toast {
  bottom: var(--space-4);
}

/* Hero image upload — shared editor upload panel inside website editor surfaces. */
:is(.website-editor-sheet, .editor-workspace-pane, .website-editor-pane, .editor-upload) .products-workspace-media-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  width: 100%;
  padding: var(--space-3);
  border: 1px solid var(--website-editor-border);
  border-radius: var(--radius-lg);
  background: var(--website-editor-surface-muted);
  box-sizing: border-box;
}

:is(.website-editor-sheet, .editor-workspace-pane, .website-editor-pane, .editor-upload) .products-workspace-media-panel--compact .products-workspace-gallery-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  width: 100%;
}

:is(.website-editor-sheet, .editor-workspace-pane, .website-editor-pane, .editor-upload) .products-workspace-media-panel--compact .products-workspace-gallery-item {
  width: 100%;
  padding: 0;
  border: none;
  background: transparent;
}

:is(.website-editor-sheet, .editor-workspace-pane, .website-editor-pane, .editor-upload) .products-workspace-media-panel--compact .products-workspace-gallery-item__select {
  display: block;
  width: 100%;
  padding: 0;
  border: 1px solid var(--website-editor-border-strong);
  border-radius: var(--radius-md);
  background: var(--website-editor-surface);
  overflow: hidden;
  cursor: pointer;
}

:is(.website-editor-sheet, .editor-workspace-pane, .website-editor-pane, .editor-upload) .products-workspace-media-panel--compact .products-workspace-gallery-item__image {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  min-height: 8rem;
  max-height: 12rem;
  object-fit: cover;
}

:is(.website-editor-sheet, .editor-workspace-pane, .website-editor-pane, .editor-upload) .products-workspace-gallery-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 8rem;
  aspect-ratio: 4 / 3;
  border: 1px dashed var(--website-editor-border-strong);
  border-radius: var(--radius-md);
  background: var(--website-editor-surface);
  color: var(--website-editor-surface-muted0);
}

:is(.website-editor-sheet, .editor-workspace-pane, .website-editor-pane, .editor-upload) .products-workspace-media-panel__input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

:is(.website-editor-sheet, .editor-workspace-pane, .website-editor-pane, .editor-upload) .products-workspace-media-panel__actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  width: 100%;
}

:is(.website-editor-sheet, .editor-workspace-pane, .website-editor-pane, .editor-upload) .products-workspace-media-panel__actions--stack .products-workspace-media-panel__btn,
:is(.website-editor-sheet, .editor-workspace-pane, .website-editor-pane, .editor-upload) .products-workspace-media-panel__actions .products-workspace-media-panel__btn {
  width: 100%;
}

:is(.website-editor-sheet, .editor-workspace-pane, .website-editor-pane, .editor-upload) .products-workspace-media-panel__btn {
  appearance: none;
  box-sizing: border-box;
  width: 100%;
  min-height: var(--webshop-touch-min);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--website-editor-border-strong);
  border-radius: var(--radius-md);
  background: var(--website-editor-surface);
  color: var(--website-editor-text);
  font: inherit;
  font-size: var(--font-size-sm);
  cursor: pointer;
}

:is(.website-editor-sheet, .editor-workspace-pane, .website-editor-pane, .editor-upload) .products-workspace-media-panel__btn:hover:not(:disabled) {
  background: var(--website-editor-surface-subtle);
}

:is(.website-editor-sheet, .editor-workspace-pane, .website-editor-pane, .editor-upload) .products-workspace-media-panel__btn--danger {
  color: var(--color-danger, #dc2626);
  border-color: color-mix(in srgb, var(--color-danger, #dc2626) 35%, var(--website-editor-border));
}

:is(.website-editor-sheet, .editor-workspace-pane, .website-editor-pane, .editor-upload) .products-workspace-media-panel__btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

:is(.website-editor-sheet, .editor-workspace-pane, .website-editor-pane, .editor-upload) .form-error {
  margin: 0;
  font-size: var(--font-size-sm);
  color: var(--color-danger, #dc2626);
}

/* Website Editor compatibility hooks for the shared Editor V2 dropdown primitive. */

:is(.website-editor-sheet, .editor-workspace-pane, .website-editor-pane) .products-workspace-typography-color-row .editor-select--auto {
  flex: 0 1 auto;
  min-width: 8rem;
  max-width: 14rem;
}

:is(.website-editor-sheet, .editor-workspace-pane, .website-editor-pane) .products-editor-field .editor-select--full {
  width: 100%;
}

/* Editor Workspace — full-page split (nav left, section pane right) */
.editor-workspace-sheet {
  position: fixed;
  inset-inline: 0;
  top: var(--website-editor-chrome-height);
  bottom: 0;
  z-index: var(--website-editor-z-sheet);
  display: flex;
  flex-direction: column;
  height: auto;
  max-height: none;
  min-height: 0;
  background: var(--website-editor-surface);
  border: 0;
  border-radius: 0;
  box-shadow: none;
  animation: website-editor-sheet-in 220ms ease;
  isolation: isolate;
  overflow: hidden;
}

.editor-workspace-sheet__handle {
  display: none;
}

.editor-workspace-sheet .editor-workspace--split {
  flex: 1;
  min-height: 0;
}

.editor-workspace--split {
  display: grid;
  grid-template-columns: var(--website-editor-workspace-nav-width) minmax(0, 1fr);
  height: 100%;
  min-height: 0;
}

.editor-workspace__navigation {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-height: 0;
  padding: var(--space-3) var(--space-2) calc(var(--webshop-touch-min) + var(--space-8));
  background: var(--website-editor-surface-muted);
  border-inline-end: 1px solid var(--website-editor-border);
  overflow-y: auto;
}

.editor-workspace__navigation-footer {
  position: sticky;
  bottom: 0;
  display: flex;
  gap: var(--space-2);
  margin-top: auto;
  padding-top: var(--space-3);
  background: var(--website-editor-surface-muted);
}

.editor-workspace__navigation-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.editor-workspace__navigation-group-label {
  margin: 0;
  padding: 0 var(--space-2);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--website-editor-text-muted);
}

.editor-workspace__navigation-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin: 0;
  padding: 0;
  list-style: none;
}

.editor-workspace__navigation-link {
  display: block;
  width: 100%;
  appearance: none;
  border: 1px solid transparent;
  background: transparent;
  color: var(--website-editor-text-muted);
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-3);
  min-height: var(--webshop-touch-min);
  font: inherit;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  text-align: start;
  text-decoration: none;
  cursor: pointer;
}

.editor-workspace__navigation-link:hover:not(:disabled) {
  background: var(--website-editor-surface-subtle);
  color: var(--website-editor-text);
}

.editor-workspace__navigation-link--active,
.editor-workspace__navigation-link[aria-current="page"] {
  background: var(--website-editor-surface);
  border-color: var(--website-editor-border-strong);
  color: var(--website-editor-text);
}

.editor-workspace__content {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

.editor-workspace__content-region {
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

.editor-workspace-dialog-layer {
  position: fixed;
  inset: 0;
  z-index: var(--website-editor-z-dialog);
  display: grid;
  place-items: center;
  padding: var(--space-4);
}

.editor-workspace-dialog-layer__backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  background: rgb(15 23 42 / 42%);
  cursor: pointer;
}

.editor-workspace-dialog {
  position: relative;
  z-index: 1;
  width: min(440px, calc(100vw - 32px));
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-4);
  border: 1px solid var(--website-editor-border);
  border-radius: var(--radius-lg);
  background: var(--website-editor-surface);
  box-shadow: 0 18px 48px rgb(15 23 42 / 20%);
}

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

.editor-workspace-dialog__title {
  margin: 0;
  font-size: var(--font-size-lg);
  color: var(--website-editor-text);
}

.editor-workspace-dialog__text {
  margin: 0;
  color: var(--website-editor-text-muted);
}

.editor-workspace-dialog__actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
}

/* Section pane — right column inside Editor Workspace */
.editor-workspace-pane,
.website-editor-pane {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  background: var(--website-editor-surface);
  overflow: hidden;
}

.editor-workspace-pane__header,
.website-editor-pane__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
  flex-shrink: 0;
  padding: var(--space-3) var(--space-4) var(--space-2);
  border-bottom: 1px solid var(--website-editor-surface-subtle);
}

.editor-workspace-pane__heading,
.website-editor-pane__heading {
  min-width: 0;
  flex: 1;
}

.editor-workspace-pane__dirty,
.website-editor-pane__dirty {
  flex-shrink: 0;
  align-self: flex-start;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--color-warning, #f59e0b) 12%, var(--website-editor-surface));
  color: var(--color-warning, #b45309);
  border: 1px solid color-mix(in srgb, var(--color-warning, #f59e0b) 35%, var(--website-editor-border));
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  white-space: nowrap;
}

.editor-workspace-pane__title,
.website-editor-pane__title {
  margin: 0;
  font-size: var(--font-size-lg);
}

.editor-workspace-pane__subtitle,
.website-editor-pane__subtitle {
  margin: var(--space-1) 0 0;
  font-size: var(--font-size-sm);
  color: var(--website-editor-text-muted);
}

.editor-workspace-pane__body,
.website-editor-pane__body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: var(--space-3) var(--space-4);
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
}

.editor-workspace-pane__footer,
.website-editor-pane__footer {
  position: absolute;
  inset-inline-start: 0;
  bottom: 0;
  z-index: 2;
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: flex-start;
  gap: var(--space-2);
  width: var(--website-editor-workspace-nav-width);
  padding: var(--space-3) var(--space-2);
  border-top: 1px solid var(--website-editor-border);
  border-inline-end: 1px solid var(--website-editor-border);
  background: var(--website-editor-surface-muted);
}

.editor-workspace-pane__save-state {
  flex: 1 1 auto;
  min-width: 0;
  font-size: var(--font-size-xs, 0.75rem);
  line-height: 1.25rem;
  color: var(--website-editor-text-muted);
}


.editor-workspace-sheet :is(.editor-workspace-pane__footer, .website-editor-pane__footer) {
  box-shadow: var(--admin-v2-chrome-footer-shadow);
}

@media (max-width: 640px) {
  :root {
    --editor-workspace-nav-width: 148px;
  }

  .website-editor-announcement__schedule {
    grid-template-columns: 1fr;
  }
}

/*
 * Narrow editor chrome (tablet/phone). Topbar and shell footer are fixed,
 * single-row bars (see body.website-editor-active rules above) — they must
 * compact rather than overflow so Structure/Save/Style stay reachable.
 */
@media (max-width: 640px) {
  body.website-editor-active #website-editor-root .admin-v2-topbar.admin-capability-action-bar {
    gap: var(--admin-v2-space-2);
    padding-inline: var(--admin-v2-space-3);
  }

  body.website-editor-active #website-editor-root .admin-capability-action-bar__trigger--context {
    min-width: 0;
    padding-inline: var(--admin-v2-space-2);
  }

  body.website-editor-active #website-editor-root .admin-capability-action-bar__slot--actions {
    gap: var(--admin-v2-space-1);
  }

  body.website-editor-active #website-editor-root .admin-capability-action-bar__slot--actions
    .admin-capability-action-bar__trigger {
    padding-inline: var(--admin-v2-space-2);
  }

  /* Icon-only actions on narrow chrome — icons already carry sr-only labels. */
  body.website-editor-active #website-editor-root .admin-capability-action-bar__slot--actions
    .admin-capability-action-bar__trigger span:not(.sr-only) {
    display: none;
  }

  body.website-editor-active #website-editor-root .admin-v2-shell-footer {
    padding-inline: var(--admin-v2-space-3);
    gap: var(--admin-v2-space-2);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  body.website-editor-active #website-editor-root .admin-v2-shell-footer__zone--tools {
    flex: 0 1 auto;
    justify-content: flex-start;
    min-width: 0;
  }

  body.website-editor-active #website-editor-root .admin-v2-shell-footer__action {
    padding-inline: var(--admin-v2-space-2);
    flex-shrink: 0;
  }
}

@media (max-width: 390px) {
  body.website-editor-active #website-editor-root .admin-v2-shell-footer {
    gap: var(--admin-v2-space-1);
    padding-inline: var(--admin-v2-space-2);
  }

  /* Empty reserved AI zone — drop it to reclaim width for Structure/Save. */
  body.website-editor-active #website-editor-root .admin-v2-shell-footer__zone--ai {
    display: none;
  }

  body.website-editor-active #website-editor-root .admin-capability-action-bar__context-copy strong {
    max-width: 6rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

/* Hero Slider — embedded website editor slide layout (content pane). */
.editor-hero-slider-slide-editor {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  width: 100%;
  max-width: none;
}

.editor-hero-slider-slide-editor .editor-form-grid--3 {
  width: 100%;
  max-width: none;
  grid-template-columns: minmax(12rem, 0.95fr) minmax(18rem, 1.45fr) minmax(14rem, 1fr);
  align-items: stretch;
}

.editor-hero-slider-slide-editor__media {
  min-width: 0;
  display: flex;
  align-self: stretch;
}

.editor-hero-slider-slide-editor__media .editor-upload {
  width: 100%;
  display: flex;
}

.editor-hero-slider-slide-editor__media .products-workspace-media-panel {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  justify-content: flex-start;
  align-self: stretch;
  min-height: 100%;
  padding: var(--space-2);
  gap: var(--space-2);
}

.editor-hero-slider-slide-editor__media
  .products-workspace-media-panel--compact
  .products-workspace-gallery-item__image {
  aspect-ratio: 16 / 9;
  min-height: 0;
  max-height: 5rem;
}

.editor-hero-slider-slide-editor__media .products-workspace-gallery-empty {
  aspect-ratio: 16 / 9;
  min-height: 0;
  max-height: 5rem;
}

.editor-hero-slider-slide-editor__fields,
.editor-hero-slider-slide-editor__settings {
  min-width: 0;
}

.editor-hero-slider-slide-editor .products-editor-field--full {
  grid-column: auto;
  width: 100%;
}

.editor-hero-slider-slide-editor .editor-form-section__body {
  gap: var(--space-2);
}

.editor-hero-slider-slide-editor .editor-form-field {
  gap: var(--space-1);
}

@media (max-width: 960px) {
  .editor-hero-slider-slide-editor .editor-form-grid--3 {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .editor-hero-slider-slide-editor__settings {
    grid-column: 1 / -1;
  }
}

@media (max-width: 720px) {
  .editor-hero-slider-slide-editor .editor-form-grid--3 {
    grid-template-columns: minmax(0, 1fr);
  }

  .editor-hero-slider-slide-editor__settings {
    grid-column: auto;
  }
}

/* Structure editor styling moved to v2/editor-workspace/workspace-shell.css. */

/* Menu editor columns, rows and preview are role-owned:
   v2/admin-v2/sheet-progression.css, v2/editor-workspace/workspace-shell.css
   and v2/editor-workspace/menu-preview.css. No website-editor overrides. */

/*
 * Device viewport preview (tablet/mobile): media-query-aware iframe.
 * Live storefront chrome is hidden; editor shell stays on the parent document.
 */
body.website-editor-device-preview :is(
  #header-mount,
  #footer-mount,
  header[data-ssr-header],
  footer,
  .storefront-footer
),
body.website-editor-device-preview #header-mount[hidden],
body.website-editor-device-preview #footer-mount[hidden] {
  display: none !important;
}

body.website-editor-device-preview main[hidden] {
  display: none !important;
}

body.website-editor-device-preview :is(
  .website-editor-section-toolbar-host,
  .website-editor-section-toolbar
) {
  display: none !important;
}

.website-editor-viewport-frame {
  display: flex;
  justify-content: center;
  box-sizing: border-box;
  width: 100%;
  margin: 0;
  padding-block: var(--space-3, 12px);
  min-height: calc(
    100dvh - var(--website-editor-chrome-height, 68px) - var(--website-editor-footer-height, 68px)
  );
  background: var(--website-editor-surface-muted, var(--bg-surface, #f8fafc));
}

.website-editor-viewport-iframe {
  display: block;
  flex: 0 0 auto;
  width: 100%;
  max-width: 100%;
  min-height: 70vh;
  height: calc(
    100dvh - var(--website-editor-chrome-height, 68px) - var(--website-editor-footer-height, 68px) - 24px
  );
  border: 1px solid var(--website-editor-border, var(--border-subtle, #e2e8f0));
  border-radius: var(--radius-md, 8px);
  background: var(--website-editor-surface, #ffffff);
  box-shadow: 0 8px 24px color-mix(in srgb, var(--website-editor-text, #0f172a) 8%, transparent);
}

body.website-editor-device-preview[data-website-editor-viewport="tablet"]
  .website-editor-viewport-iframe {
  width: 768px;
}

body.website-editor-device-preview[data-website-editor-viewport="mobile"]
  .website-editor-viewport-iframe {
  width: 390px;
}

/* =================================================================
   Style System V100 — Website Editor Style panel recipe
   Colors/radius/shadow via --pg-editor-* / --pg-ui-* only (theme purity).
   ================================================================= */

.website-editor-style {
  display: flex;
  flex-direction: column;
  gap: var(--pg-ui-space-6, var(--pg-editor-space-6, 24px));
}

.website-editor-style__presets {
  display: flex;
  flex-direction: column;
  gap: var(--pg-ui-space-2, var(--pg-editor-space-2, 8px));
}

.website-editor-style__presets-heading {
  margin: 0;
  font-size: var(--pg-editor-font-size-md, 1rem);
  font-weight: var(--pg-editor-font-weight-semibold, 600);
  color: var(--pg-editor-color-text, var(--admin-v2-text, inherit));
}

.website-editor-style__presets-gallery {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--pg-ui-space-5, var(--pg-editor-space-5, 20px));
}

.website-editor-style__preset-card {
  appearance: none;
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  text-align: left;
  overflow: hidden;
  border: 1px solid var(--pg-editor-color-border, var(--admin-v2-border, currentColor));
  border-radius: var(--pg-editor-radius-card, var(--pg-editor-radius-md, var(--pg-ui-radius-md, 8px)));
  background: var(--pg-editor-color-surface, var(--admin-v2-surface, transparent));
  color: var(--pg-editor-color-text, var(--admin-v2-text, inherit));
  padding: 0;
  cursor: pointer;
  transition:
    border-color var(--pg-ui-motion-fast, 0.15s) ease,
    box-shadow var(--pg-ui-motion-fast, 0.15s) ease,
    background-color var(--pg-ui-motion-fast, 0.15s) ease;
}

.website-editor-style__preset-card:hover:not(:disabled) {
  background: var(--pg-editor-color-surface-muted, var(--admin-v2-surface-muted, transparent));
  border-color: var(--pg-editor-color-border-strong, var(--admin-v2-border, currentColor));
}

.website-editor-style__preset-card:focus-visible {
  outline: none;
  box-shadow: var(
    --pg-editor-focus-ring,
    var(--admin-v2-focus-ring, 0 0 0 3px var(--admin-v2-focus-ring-color, currentColor))
  );
}

.website-editor-style__preset-card--active,
.website-editor-style__preset-card[aria-pressed='true'] {
  background: var(--pg-editor-color-primary-soft, var(--admin-v2-primary-soft, transparent));
  border-color: var(--pg-editor-color-primary, var(--admin-v2-primary, currentColor));
}

.website-editor-style__preset-card:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.website-editor-style__preset-card-preview {
  aspect-ratio: 16 / 9;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--pg-ui-space-4, 16px);
  background: var(--pg-editor-color-surface-muted, var(--admin-v2-surface-muted, transparent));
  border-bottom: 1px solid var(--pg-editor-color-border, var(--admin-v2-border, currentColor));
}

.website-editor-style__preset-card-body {
  display: flex;
  flex-direction: column;
  gap: var(--pg-ui-space-1, 4px);
  padding: var(--pg-ui-space-4, 16px);
}

.website-editor-style__preset-card-title {
  display: inline-flex;
  align-items: center;
  gap: var(--pg-ui-space-1, 4px);
  font-weight: var(--pg-editor-font-weight-semibold, 600);
  font-size: var(--pg-editor-font-size-sm, 0.875rem);
}

.website-editor-style__preset-card-desc {
  font-size: var(--pg-editor-font-size-xs, 0.8125rem);
  color: var(--pg-editor-color-text-muted, var(--admin-v2-text-muted, inherit));
  line-height: 1.35;
}

.website-editor-style__preset-card-badge {
  display: inline-flex;
  align-self: flex-start;
  margin-top: var(--pg-ui-space-1, 4px);
  padding: 0 var(--pg-ui-space-2, 8px);
  border-radius: var(--pg-editor-radius-full, 999px);
  background: var(--pg-editor-color-primary-soft, var(--admin-v2-primary-soft, transparent));
  color: var(--pg-editor-color-primary, var(--admin-v2-primary, inherit));
  font-size: var(--pg-editor-font-size-xs, 0.75rem);
  font-weight: var(--pg-editor-font-weight-semibold, 600);
  line-height: 1.5;
}

/* Abstract mini-previews (decorative) — grid density intent */
.website-editor-style__preset-mini {
  display: grid;
  width: 100%;
  height: 100%;
  gap: 3px;
  align-content: center;
  justify-content: center;
  justify-items: stretch;
}

/* Balanced: 3 + centered 2 */
.website-editor-style__preset-mini--clean-catalog {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  max-width: 5.5rem;
  margin-inline: auto;
}

/* Dense: 4×2 */
.website-editor-style__preset-mini--compact-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  max-width: 6.25rem;
  margin-inline: auto;
  gap: 2px;
}

/* Showcase: three wide */
.website-editor-style__preset-mini--product-focus {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  max-width: 6rem;
  margin-inline: auto;
  gap: 5px;
}

/* Editorial: airy 2+1 */
.website-editor-style__preset-mini--editorial {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 5.25rem;
  margin-inline: auto;
  row-gap: 8px;
  column-gap: 5px;
}

.website-editor-style__preset-mini--editorial .website-editor-style__preset-mini-card:nth-child(3) {
  grid-column: 1 / -1;
  max-width: 60%;
  justify-self: center;
}

/* Minimal: contained 2×2 */
.website-editor-style__preset-mini--minimal {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 4.25rem;
  margin-inline: auto;
  gap: 6px;
}

/* Image cards: 2×2 fill */
.website-editor-style__preset-mini--image-cards {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 5.5rem;
  margin-inline: auto;
  gap: 4px;
}

/* Campaign: two large */
.website-editor-style__preset-mini--campaign {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 5.75rem;
  margin-inline: auto;
  gap: 6px;
}

/* Hero bleed: full image + bottom-left copy + button */
.website-editor-style__preset-mini--hero-bleed {
  position: relative;
  display: block;
  width: 100%;
  max-width: 6.5rem;
  margin-inline: auto;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 4px;
  border: 1px solid var(--pg-editor-color-border, var(--admin-v2-border, currentColor));
}

.website-editor-style__preset-mini--hero-bleed .website-editor-style__preset-mini-hero-media {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    color-mix(in srgb, var(--pg-editor-color-text, currentColor) 45%, transparent),
    var(--pg-editor-color-border, var(--admin-v2-border, currentColor))
  );
  opacity: 0.9;
}

.website-editor-style__preset-mini--hero-bleed .website-editor-style__preset-mini-hero-copy {
  position: absolute;
  left: 5px;
  bottom: 5px;
  right: 35%;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-items: flex-start;
}

/* Hero split: text left / image right */
.website-editor-style__preset-mini--hero-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: 100%;
  max-width: 6.5rem;
  margin-inline: auto;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 4px;
  border: 1px solid var(--pg-editor-color-border, var(--admin-v2-border, currentColor));
  gap: 0;
}

.website-editor-style__preset-mini--hero-split .website-editor-style__preset-mini-hero-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  padding: 5px;
  background: var(--pg-editor-color-surface, var(--admin-v2-surface, transparent));
}

.website-editor-style__preset-mini--hero-split .website-editor-style__preset-mini-hero-media {
  background: var(--pg-editor-color-border, var(--admin-v2-border, currentColor));
  opacity: 0.85;
}

/* Hero panel: image with contrast text panel bottom-left */
.website-editor-style__preset-mini--hero-panel {
  position: relative;
  display: block;
  width: 100%;
  max-width: 6.5rem;
  margin-inline: auto;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 4px;
  border: 1px solid var(--pg-editor-color-border, var(--admin-v2-border, currentColor));
}

.website-editor-style__preset-mini--hero-panel .website-editor-style__preset-mini-hero-media {
  position: absolute;
  inset: 0;
  background: var(--pg-editor-color-border, var(--admin-v2-border, currentColor));
  opacity: 0.85;
}

.website-editor-style__preset-mini--hero-panel .website-editor-style__preset-mini-hero-panel {
  position: absolute;
  left: 4px;
  bottom: 4px;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-items: flex-start;
  max-width: 55%;
  padding: 4px 5px;
  border-radius: 3px;
  background: var(--pg-editor-color-surface, var(--admin-v2-surface, Canvas));
  box-shadow: 0 1px 2px color-mix(in srgb, var(--pg-editor-color-text, currentColor) 18%, transparent);
}

.website-editor-style__preset-mini-hero-line {
  display: block;
  width: 100%;
  height: 3px;
  border-radius: 2px;
  background: var(--pg-editor-color-text-muted, var(--admin-v2-text-muted, currentColor));
  opacity: 0.7;
}

.website-editor-style__preset-mini-hero-line--short {
  width: 65%;
}

.website-editor-style__preset-mini-hero-btn {
  display: block;
  width: 1.15rem;
  height: 5px;
  margin-top: 1px;
  border-radius: 2px;
  background: var(--pg-editor-color-text, var(--admin-v2-text, currentColor));
  opacity: 0.55;
}

.website-editor-style__presets-customized {
  margin: var(--pg-ui-space-2, 8px) 0 0;
  font-size: var(--pg-editor-font-size-xs, 0.75rem);
  font-weight: var(--pg-editor-font-weight-semibold, 600);
  color: var(--pg-editor-color-text-muted, var(--admin-v2-text-muted, inherit));
}

.website-editor-style__preset-mini-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 4px;
  border: 1px solid var(--pg-editor-color-border, var(--admin-v2-border, currentColor));
  background: var(--pg-editor-color-surface, var(--admin-v2-surface, transparent));
  min-width: 0;
}

.website-editor-style__preset-mini-media {
  aspect-ratio: 1;
  background: var(--pg-editor-color-border, var(--admin-v2-border, currentColor));
  opacity: 0.65;
}

.website-editor-style__preset-mini-media--circle {
  margin: 4px;
  border-radius: 999px;
  aspect-ratio: 1;
}

.website-editor-style__preset-mini-label {
  height: 4px;
  margin: 3px 4px 4px;
  border-radius: 2px;
  background: var(--pg-editor-color-text-muted, var(--admin-v2-text-muted, currentColor));
  opacity: 0.45;
}

.website-editor-style__preset-mini--product-focus .website-editor-style__preset-mini-card {
  min-height: 2.5rem;
}

.website-editor-style__preset-mini-card--fill,
.website-editor-style__preset-mini--image-cards .website-editor-style__preset-mini-card,
.website-editor-style__preset-mini--campaign .website-editor-style__preset-mini-card {
  position: relative;
  min-height: 2.75rem;
}

.website-editor-style__preset-mini--image-cards .website-editor-style__preset-mini-media,
.website-editor-style__preset-mini--campaign .website-editor-style__preset-mini-media {
  position: absolute;
  inset: 0;
  aspect-ratio: auto;
  margin: 0;
  border-radius: 0;
  opacity: 0.85;
}

.website-editor-style__preset-mini--image-cards .website-editor-style__preset-mini-label,
.website-editor-style__preset-mini--campaign .website-editor-style__preset-mini-label {
  position: absolute;
  left: 4px;
  right: 4px;
  bottom: 4px;
  z-index: 1;
  margin: 0;
  background: var(--pg-editor-color-surface, var(--admin-v2-surface, transparent));
  opacity: 0.9;
}

.website-editor-style__preset-mini--campaign .website-editor-style__preset-mini-media {
  opacity: 1;
  background: linear-gradient(
    to top,
    color-mix(in srgb, var(--pg-editor-color-text, currentColor) 55%, transparent),
    var(--pg-editor-color-border, var(--admin-v2-border, currentColor))
  );
}

.website-editor-style__preset-mini--minimal .website-editor-style__preset-mini-card {
  border: none;
  background: transparent;
}

.website-editor-style__preset-mini--editorial .website-editor-style__preset-mini-card {
  border: none;
  box-shadow: none;
  background: transparent;
}

@media (max-width: 1100px) {
  .website-editor-style__presets-gallery {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 680px) {
  .website-editor-style__presets-gallery {
    grid-template-columns: minmax(0, 1fr);
  }
}

.website-editor-style__fine-tune {
  display: flex;
  flex-direction: column;
  gap: var(--pg-ui-space-3, 12px);
}

.website-editor-style__power-label {
  margin: 0;
  font-size: var(--pg-editor-font-size-sm, 0.875rem);
  font-weight: var(--pg-editor-font-weight-semibold, 600);
  color: var(--pg-editor-color-text-muted, var(--admin-v2-text-muted, inherit));
}

.website-editor-style[data-field-surface='editor'] .website-editor-style__grid--power {
  opacity: 0.92;
}

.website-editor-style__presets-label {
  font-size: var(--pg-editor-font-size-label, var(--pg-ui-font-size-sm, 0.875rem));
  font-weight: var(--pg-editor-font-weight-semibold, 600);
  color: var(--pg-editor-color-text, var(--admin-v2-text, inherit));
}

.website-editor-style__presets-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pg-ui-space-2, var(--pg-editor-space-2, 8px));
}

.website-editor-style__preset-btn {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: var(--pg-ui-space-1, var(--pg-editor-space-1, 4px));
  border: 1px solid var(--pg-editor-color-border, var(--admin-v2-border, currentColor));
  border-radius: var(--pg-editor-radius-md, var(--pg-ui-radius-md, 8px));
  background: var(--pg-editor-color-surface, var(--admin-v2-surface, transparent));
  color: var(--pg-editor-color-text, var(--admin-v2-text, inherit));
  padding: var(--pg-ui-space-2, 8px) var(--pg-ui-space-3, 12px);
  font-size: var(--pg-editor-font-size-sm, 0.875rem);
  cursor: pointer;
}

.website-editor-style__preset-btn:hover:not(:disabled) {
  background: var(--pg-editor-color-surface-muted, var(--admin-v2-surface-muted, transparent));
}

.website-editor-style__preset-btn:focus-visible {
  outline: none;
  box-shadow: var(
    --pg-editor-focus-ring,
    var(--admin-v2-focus-ring, 0 0 0 3px var(--admin-v2-focus-ring-color, currentColor))
  );
}

.website-editor-style__preset-btn--active,
.website-editor-style__preset-btn[aria-pressed='true'] {
  background: var(--pg-editor-color-primary-soft, var(--admin-v2-primary-soft, transparent));
  border-color: var(--pg-editor-color-primary, var(--admin-v2-primary, currentColor));
  color: var(--pg-editor-color-primary, var(--admin-v2-primary, inherit));
}

.website-editor-style__preset-btn--active:hover:not(:disabled),
.website-editor-style__preset-btn[aria-pressed='true']:hover:not(:disabled) {
  background: var(--pg-editor-color-primary-soft, var(--admin-v2-primary-soft, transparent));
}

.website-editor-style__preset-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.website-editor-style__preset-btn-check {
  flex: 0 0 auto;
  width: 0.875rem;
  height: 0.875rem;
}

.website-editor-style__grid {
  display: block;
  min-width: 0;
}

.website-editor-style-card {
  min-width: 0;
}

.website-editor-style-card .editor-form-group {
  border: 1px solid var(--pg-editor-color-border, var(--admin-v2-border, currentColor));
  border-radius: var(--pg-editor-radius-lg, var(--pg-ui-radius-lg, 12px));
  background: var(--pg-editor-color-surface, var(--admin-v2-surface, transparent));
  box-shadow: var(--pg-editor-shadow-xs, none);
}

.website-editor-style-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--pg-ui-space-4, var(--pg-editor-space-4, 16px));
}

@media (max-width: 900px) {
  .website-editor-style .editor-form-grid--2 {
    grid-template-columns: 1fr;
  }
}

/* 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;
  }
}

/* SSoT: tokens/pg-ui-brand-product.css → body.website-editor-active */
/**
 * PAGAYO UI FOUNDATION — product brand group
 *
 * The Pagayo product brand (admin blue). Used by admin product surfaces.
 *
 * This file exists so the brand group can be re-asserted inside a
 * tenant-branded bundle. The website editor is an admin surface that runs
 * inside the storefront: without this, editor chrome would inherit the
 * merchant's shop colour instead of staying a recognisable Pagayo tool.
 *
 * Wave E: values must match `tokens/profiles/admin-light.css` (paint SSoT).
 * This file reasserts the product brand slice; it does not own a second Light.
 */

body.website-editor-active {
  --pg-ui-color-primary: #465fff;
  --pg-ui-color-primary-hover: #3641f5;
  --pg-ui-color-primary-soft: #eef4ff;
  --pg-ui-color-primary-contrast: #ffffff;
  --pg-ui-focus-ring: 0 0 0 3px rgba(70, 95, 255, 0.16);
  --pg-ui-font-family: Geist, var(--font-sans);
  --pg-ui-color-bg: #f9fafb;
  --pg-ui-color-app-bg: var(--pg-ui-color-bg);
  --pg-ui-color-surface: #ffffff;
  --pg-ui-color-surface-raised: #ffffff;
  --pg-ui-color-text: #101828;
  --pg-ui-color-text-muted: #667085;
}

/* SSoT: contexts/admin/_base.css :root → body.website-editor-active */
body.website-editor-active {
  /* Sidebar dimensions */
  --admin-sidebar-width: 260px;
  --admin-sidebar-collapsed: 64px;
  
  /* Header height */
  --admin-header-height: 64px;
  
  /* Content padding */
  --admin-content-padding: var(--space-6);
  
  /* Table row height — afgeleid van control sizing */
  --admin-table-row-height: var(--control-height-lg);

  /* ===== ADMIN CONTROL HEIGHTS ===== */
  --admin-control-compact: 36px;           /* toolbar actions, pills, compact buttons */
  /* Lucide (stroke icons) in icon-only workspace toolbar pills — align with toolbar label scale */
  --admin-toolbar-inline-icon-size: 16px;
  /* One rhythm: search + single-line fields match button height (multi-line textareas stay taller). */
  --admin-control-search: var(--admin-control-compact);
  --admin-control-filter: 38px;            /* filter dropdown buttons */
  --admin-control-field: var(--admin-control-compact); /* form inputs + selects */
  --admin-control-lg: 44px;               /* sidebar nav items, large actions */
  /* Horizontal padding inside inline workspace controls (inputs, tabs, chips) */
  --admin-control-inline-padding: 12px;

  /* ===== ADMIN SPACING ===== */
  --admin-card-padding-x: var(--space-5);  /* 20px — horizontal card padding */
  --admin-card-padding-y: var(--space-4);  /* 16px — vertical card padding */
  --admin-section-gap: var(--space-4);     /* 16px — gap between sections */
  /* Between stacked fields (input → next label). TailAdmin: clearly larger than label→control. */
  --admin-form-field-gap: var(--admin-v2-space-6);  /* 24px */
  --admin-toolbar-gap: 14px;              /* gap between toolbar items */
  --admin-list-row-padding-y: 12px;       /* vertical padding in list rows */
  --admin-list-row-padding-x: 14px;       /* horizontal padding in list rows */

  /* Workspace master-detail: linker lijstkolom (alle admin list/workspace-pagina's) */
  --admin-workspace-list-col-width: 300px;

  /*
   * Admin workspace modal shell (SSoT) — Assistent (#69), BlockEditModal, Pagayo ideas.
   * Class: .modal--admin-workspace in account-navigation.css.
   */
  --admin-workspace-modal-width: min(96vw, 1280px);
  --admin-workspace-modal-max-width: 1280px;
  --admin-workspace-modal-height: min(720px, calc(100vh - var(--space-8)));

  /*
   * ADMIN BORDERS & WASH (Wave E) — Light paint lives in
   * `tokens/profiles/admin-light.css` (--admin-border-* / --admin-bg-wash).
   * Do not reintroduce appearance literals here.
   */

  /* ===== ADMIN BORDER RADIUS ===== */
  --admin-radius-control: 10px;           /* buttons, inputs, toolbar actions */
  --admin-radius-card: 14px;              /* cards, panels, modals */
  --admin-radius-pill: 999px;             /* pill-shaped elements */
  --admin-radius-sm: 6px;                /* compact elements, badges, small controls */
  --admin-radius-md: 12px;               /* medium panels, dropdowns, modals */

  /* ===== ADMIN V2 LIGHT-SKIN TOKENS =====
   * Shared UI language lives in `src/tokens/pg-ui.css` as `--pg-ui-*` (SSoT).
   * The `--admin-v2-*` names below are aliases so existing admin CSS keeps working.
   * Contract direction: consumer → semantic token → theme profile (Admin Light).
   * Brand (primary / brand-gold) is separate from semantic state (danger ≠ gold).
   *
   * Admin-shell chrome geometry further down (zone menu widths, topbar heights)
   * is admin-only; shared colors must alias `--pg-ui-*`, not literals.
   */

  /* Surfaces */
  --admin-v2-color-bg: var(--pg-ui-color-bg);
  --admin-v2-color-app-bg: var(--pg-ui-color-app-bg);
  --admin-v2-color-surface: var(--pg-ui-color-surface);
  --admin-v2-color-surface-muted: var(--pg-ui-color-surface-muted);
  --admin-v2-color-surface-raised: var(--pg-ui-color-surface-raised);
  --admin-v2-color-surface-overlay: var(--pg-ui-color-surface-overlay);
  --admin-v2-color-surface-hover: var(--pg-ui-color-surface-hover);
  --admin-v2-color-surface-selected: var(--pg-ui-color-surface-selected);
  --admin-v2-color-surface-disabled: var(--pg-ui-color-surface-disabled);
  --admin-v2-color-text: var(--pg-ui-color-text);
  --admin-v2-color-text-muted: var(--pg-ui-color-text-muted);
  --admin-v2-color-text-soft: var(--pg-ui-color-text-soft);
  --admin-v2-color-text-inverse: var(--pg-ui-color-text-inverse);
  --admin-v2-color-text-disabled: var(--pg-ui-color-text-disabled);
  --admin-v2-color-text-link: var(--pg-ui-color-text-link);
  --admin-v2-color-primary: var(--pg-ui-color-primary);
  --admin-v2-color-primary-contrast: var(--pg-ui-color-primary-contrast);
  --admin-v2-color-primary-hover: var(--pg-ui-color-primary-hover);
  --admin-v2-color-primary-active: var(--pg-ui-color-primary-active);
  --admin-v2-color-primary-soft: var(--pg-ui-color-primary-soft);
  --admin-v2-color-accent: var(--pg-ui-color-accent);
  --admin-v2-color-success-border: var(--pg-ui-color-success-border);
  --admin-v2-color-success-text: var(--pg-ui-color-success-text);

  --admin-v2-color-danger: var(--admin-v2-state-danger-text);
  --admin-v2-color-focus: var(--admin-v2-color-primary);
  --admin-v2-primary: var(--admin-v2-color-primary);
  --admin-v2-color-danger-text: var(--pg-ui-color-danger-text);

  /* Borders and focus */
  --admin-v2-border-subtle: var(--pg-ui-border-subtle);
  --admin-v2-border-default: var(--pg-ui-border-default);
  --admin-v2-border-strong: var(--pg-ui-border-strong);
  --admin-v2-border-active: var(--pg-ui-border-active);
  --admin-v2-focus-ring: var(--pg-ui-focus-ring);

  /* Radius */
  --admin-v2-radius-xs: var(--pg-ui-radius-xs);
  --admin-v2-radius-sm: var(--pg-ui-radius-sm);
  --admin-v2-radius-md: var(--pg-ui-radius-md);
  --admin-v2-radius-lg: var(--pg-ui-radius-lg);
  --admin-v2-radius-xl: var(--pg-ui-radius-xl);
  --admin-v2-radius-pill: var(--pg-ui-radius-pill);
  --admin-v2-radius-control: var(--pg-ui-radius-control);
  --admin-v2-radius-card: var(--pg-ui-radius-card);
  --admin-v2-radius-panel: var(--pg-ui-radius-panel);
  --admin-v2-radius-sheet: var(--pg-ui-radius-sheet);
  --admin-v2-radius-badge: var(--pg-ui-radius-badge);
  --admin-v2-radius-interactive: var(--pg-ui-radius-interactive);
  --admin-v2-radius-label: var(--pg-ui-radius-label);

  /* Shell chrome — topbar/contextbar heights set after interactive-control tokens */
  --admin-v2-zone-menu-width: 240px;
  --admin-v2-zone-trigger-min-width: 186px;
  --admin-v2-command-button-min-width: 92px;
  --admin-v2-context-more-menu-width: 270px;
  --admin-v2-context-menu-width: 280px;
  --admin-v2-context-menu-flyout-width: 240px;
  --admin-v2-sheet-backdrop: var(--pg-ui-backdrop);
  --admin-v2-brand-mark-size: 34px;
  --admin-v2-avatar-bg: var(--pg-ui-avatar-bg);
  /*
   * Brand gold / partner footer bg (Wave E) — paint in profiles/admin-light.css.
   * Consumers keep the same --admin-v2-* names; values resolve from the profile.
   */
  --admin-v2-shell-footer-partner-fg: var(--admin-v2-color-text-inverse);
  --admin-v2-shell-footer-min-height: 4.5rem;
  --admin-v2-shell-menu-max-height: calc(
    100dvh
    - var(--admin-v2-topbar-height)
    - var(--admin-v2-shell-footer-min-height)
    - var(--admin-v2-space-4)
  );

  /* Entity sheet — offset derived after contextbar-height (below) */
  /*
   * Interactive control rhythm (buttons, tabs, icon buttons).
   * Hierarchy = color + placement, not size.
   * Same SSoT as --admin-control-compact (header, footer, sheet, fields).
   */
  --admin-v2-interactive-control-height: var(--admin-control-compact);
  --admin-v2-interactive-control-padding-x: var(--admin-v2-space-3);
  --admin-v2-interactive-control-font-size: var(--admin-v2-font-size-control);
  --admin-v2-interactive-control-line-height: var(--admin-v2-line-height-control);
  --admin-v2-interactive-control-icon-size: 14px;
  --admin-v2-relationship-strip-height: var(--admin-v2-interactive-control-height);
  /*
   * Chrome bars (admin topbar, contextbar, entity sheet head/foot):
   * same vertical padding as the entity-sheet footer (space-4).
   */
  --admin-v2-chrome-bar-padding-y: var(--admin-v2-space-4);
  --admin-v2-topbar-height: calc(
    var(--admin-v2-interactive-control-height) + 2 * var(--admin-v2-chrome-bar-padding-y)
  );
  --admin-v2-contextbar-height: calc(
    var(--admin-v2-interactive-control-height) + 2 * var(--admin-v2-chrome-bar-padding-y)
  );
  /* Sticky topbar + compact context bar (+ small breathing room). */
  /* Kept for legacy references; full-page entity sheet uses inset: 0. */
  --admin-v2-entity-sheet-offset-top: 0px;
  /*
   * Form field rhythm (inputs, selects, search) — same height as interactive buttons.
   * Multi-line textareas are excluded from the fixed height rules in entity-sheet.css.
   */
  --admin-v2-field-control-height: var(--admin-v2-interactive-control-height);
  --admin-v2-field-control-padding-x: var(--admin-v2-interactive-control-padding-x);
  --admin-v2-field-control-font-size: var(--admin-v2-interactive-control-font-size);
  --admin-v2-field-control-line-height: var(--admin-v2-interactive-control-line-height);
  --admin-v2-field-control-radius: var(--admin-v2-radius-control);
  /* Checkbox chrome — admin semantic colors on cross-surface tokens */
  --form-control-checkbox-border: var(--admin-v2-border-default);
  --form-control-checkbox-bg: var(--admin-v2-color-surface);
  --form-control-checkbox-checked-bg: var(--admin-v2-color-primary);
  --admin-v2-checkbox-size: var(--form-control-checkbox-size);
  --admin-v2-checkbox-radius: var(--form-control-checkbox-radius);
  --admin-v2-checkbox-border: var(--form-control-checkbox-border);
  --admin-v2-checkbox-bg: var(--form-control-checkbox-bg);
  --admin-v2-checkbox-checked-bg: var(--form-control-checkbox-checked-bg);
  --admin-v2-checkbox-disabled-check: var(--form-control-checkbox-disabled-check);
  /* Search field (icon inside, left) — same compact rhythm as fields/buttons */
  --admin-v2-search-height: var(--admin-v2-field-control-height);
  --admin-v2-search-radius: var(--admin-v2-field-control-radius);
  --admin-v2-search-icon-size: 16px;
  --admin-v2-search-padding-x: var(--admin-v2-field-control-padding-x);

  /* Spacing */
  --admin-v2-space-0: var(--pg-ui-space-0);
  --admin-v2-space-1: var(--pg-ui-space-1);
  --admin-v2-space-2: var(--pg-ui-space-2);
  --admin-v2-space-3: var(--pg-ui-space-3);
  --admin-v2-space-4: var(--pg-ui-space-4);
  --admin-v2-space-5: var(--pg-ui-space-5);
  --admin-v2-space-6: var(--pg-ui-space-6);
  --admin-v2-space-8: var(--pg-ui-space-8);
  /*
   * Shell chrome inline inset (topbar, footer, Tools strip).
   * Must match collection checkbox column: `.admin-v2-collection-table__select`
   * padding-left = space-4 — otherwise Catalog / AI sit inset relative to the list.
   */
  --admin-v2-app-gutter: var(--admin-v2-space-4);
  --admin-v2-section-gap: var(--pg-ui-section-gap);
  --admin-v2-panel-gap: var(--pg-ui-panel-gap);
  --admin-v2-card-padding-x: var(--pg-ui-card-padding-x);
  --admin-v2-card-padding-y: var(--pg-ui-card-padding-y);
  --admin-v2-toolbar-gap: var(--pg-ui-toolbar-gap);
  --admin-v2-table-row-padding-x: var(--admin-v2-space-4);
  --admin-v2-table-row-padding-y: var(--admin-v2-space-4);

  /* Typography */
  --admin-v2-font-family: var(--pg-ui-font-family);
  --admin-v2-font-size-page-title: var(--pg-ui-font-size-page-title);
  --admin-v2-line-height-page-title: var(--pg-ui-line-height-page-title);
  --admin-v2-font-size-section-title: var(--pg-ui-font-size-section-title);
  --admin-v2-line-height-section-title: var(--pg-ui-line-height-section-title);
  --admin-v2-font-size-heading-sm: var(--pg-ui-font-size-heading-sm);
  --admin-v2-line-height-heading-sm: var(--pg-ui-line-height-heading-sm);
  --admin-v2-font-size-card-title: var(--pg-ui-font-size-card-title);
  --admin-v2-line-height-card-title: var(--pg-ui-line-height-card-title);
  --admin-v2-font-size-list-item-title: var(--pg-ui-font-size-list-item-title);
  --admin-v2-line-height-list-item-title: var(--pg-ui-line-height-list-item-title);
  --admin-v2-font-size-body: var(--pg-ui-font-size-body);
  --admin-v2-line-height-body: var(--pg-ui-line-height-body);
  --admin-v2-font-size-meta: var(--pg-ui-font-size-meta);
  --admin-v2-line-height-meta: var(--pg-ui-line-height-meta);
  --admin-v2-font-size-control: var(--pg-ui-font-size-control);
  --admin-v2-line-height-control: var(--pg-ui-line-height-control);
  --admin-v2-font-size-badge: var(--pg-ui-font-size-badge);
  --admin-v2-line-height-badge: var(--pg-ui-line-height-badge);
  --admin-v2-font-weight-normal: var(--pg-ui-font-weight-normal);
  --admin-v2-font-weight-medium: var(--pg-ui-font-weight-medium);
  --admin-v2-font-weight-semibold: var(--pg-ui-font-weight-semibold);
  --admin-v2-font-weight-bold: var(--pg-ui-font-weight-bold);
  --admin-v2-letter-spacing: var(--pg-ui-letter-spacing);

  /* Controls */
  --admin-v2-control-height-sm: var(--pg-ui-control-height-sm);
  --admin-v2-control-height-md: var(--pg-ui-control-height-md);
  --admin-v2-control-height-lg: var(--pg-ui-control-height-lg);
  --admin-v2-control-padding-x-sm: var(--pg-ui-control-padding-x-sm);
  --admin-v2-control-padding-x-md: var(--pg-ui-control-padding-x-md);
  --admin-v2-control-padding-x-lg: var(--pg-ui-control-padding-x-lg);
  --admin-v2-icon-size-sm: var(--pg-ui-icon-size-sm);
  --admin-v2-icon-size-md: var(--pg-ui-icon-size-md);
  --admin-v2-icon-size-lg: var(--pg-ui-icon-size-lg);
  --admin-v2-icon-size-xl: var(--pg-ui-icon-size-xl);
  --admin-v2-icon-stroke-strong: var(--pg-ui-icon-stroke-strong);
  --admin-v2-icon-button-size-sm: var(--pg-ui-icon-button-size-sm);
  --admin-v2-icon-button-size-md: var(--pg-ui-icon-button-size-md);
  --admin-v2-icon-button-size-lg: var(--pg-ui-icon-button-size-lg);

  /* Buttons */
  --admin-v2-button-primary-bg: var(--pg-ui-button-primary-bg);
  --admin-v2-button-primary-bg-hover: var(--pg-ui-button-primary-bg-hover);
  --admin-v2-button-primary-text: var(--pg-ui-button-primary-text);
  --admin-v2-button-height-md: var(--pg-ui-button-height-md);
  --admin-v2-button-height-lg: var(--pg-ui-button-height-lg);
  --admin-v2-button-gap: var(--pg-ui-button-gap);
  --admin-v2-button-secondary-bg: var(--pg-ui-button-secondary-bg);
  --admin-v2-button-secondary-bg-hover: var(--pg-ui-button-secondary-bg-hover);
  --admin-v2-button-secondary-text: var(--pg-ui-button-secondary-text);
  --admin-v2-button-secondary-border: var(--pg-ui-button-secondary-border);

  /* Labels, badges and counters */
  --admin-v2-badge-height: var(--pg-ui-badge-height);
  --admin-v2-badge-padding-x: var(--pg-ui-badge-padding-x);
  --admin-v2-badge-padding-y: var(--pg-ui-badge-padding-y);
  --admin-v2-counter-size: var(--pg-ui-counter-size);
  --admin-v2-counter-bg: var(--pg-ui-counter-bg);
  --admin-v2-counter-text: var(--pg-ui-counter-text);
  --admin-v2-label-bg-neutral: var(--pg-ui-label-bg-neutral);
  --admin-v2-label-text-neutral: var(--pg-ui-label-text-neutral);
  --admin-v2-label-bg-success: var(--pg-ui-label-bg-success);
  --admin-v2-label-text-success: var(--pg-ui-label-text-success);
  --admin-v2-label-bg-warning: var(--pg-ui-label-bg-warning);
  --admin-v2-label-text-warning: var(--pg-ui-label-text-warning);
  --admin-v2-label-bg-info: var(--pg-ui-label-bg-info);
  --admin-v2-label-text-info: var(--pg-ui-label-text-info);
  --admin-v2-label-bg-danger: var(--pg-ui-label-bg-danger);
  --admin-v2-label-text-danger: var(--pg-ui-label-text-danger);

  /* Collections */
  --admin-v2-collection-toolbar-height: 64px;
  --admin-v2-collection-row-min-height: 64px;
  --admin-v2-collection-card-min-height: 104px;
  --admin-v2-collection-cell-gap: var(--admin-v2-space-5);
  --admin-v2-collection-header-bg: var(--admin-v2-color-surface);
  --admin-v2-collection-item-bg: var(--admin-v2-color-surface);
  --admin-v2-collection-item-bg-hover: var(--pg-ui-color-surface-hover);
  --admin-v2-collection-item-bg-selected: var(--pg-ui-color-surface-selected);
  --admin-v2-table-heading-bg: var(--pg-ui-color-surface-hover);

  /* Forms — single-line inputs match interactive/button height */
  --admin-v2-input-height: var(--admin-v2-field-control-height);
  --admin-v2-input-padding-x: var(--admin-v2-field-control-padding-x);
  --admin-v2-input-padding-x-with-icon: var(--pg-ui-input-padding-x-with-icon);
  --admin-v2-input-bg: var(--pg-ui-input-bg);
  --admin-v2-input-text: var(--pg-ui-input-text);
  --admin-v2-input-placeholder: var(--pg-ui-input-placeholder);
  --admin-v2-input-bg-disabled: var(--pg-ui-input-bg-disabled);
  --admin-v2-input-disabled-bg: var(--pg-ui-input-disabled-bg);
  --admin-v2-input-disabled-text: var(--pg-ui-input-disabled-text);
  --admin-v2-input-border: var(--pg-ui-input-border);
  --admin-v2-input-border-focus: var(--pg-ui-input-border-focus);
  --admin-v2-helper-text-color: var(--pg-ui-helper-text-color);
  --admin-v2-label-color: var(--pg-ui-label-color);
  /* Label → control only (tight). Must stay much smaller than --admin-form-field-gap. */
  --admin-v2-label-gap: var(--pg-ui-label-gap);

  /* States */
  --admin-v2-state-loading-bg: var(--pg-ui-state-loading-bg);
  --admin-v2-state-saving-bg: var(--pg-ui-state-saving-bg);
  --admin-v2-state-dirty-bg: var(--pg-ui-state-dirty-bg);
  --admin-v2-state-saved-bg: var(--pg-ui-state-saved-bg);
  --admin-v2-state-setup-bg: var(--pg-ui-state-setup-bg);
  --admin-v2-state-unavailable-bg: var(--pg-ui-state-unavailable-bg);
  --admin-v2-state-warning-bg: var(--pg-ui-state-warning-bg);
  --admin-v2-state-danger-bg: var(--pg-ui-state-danger-bg);
  --admin-v2-state-success-bg: var(--pg-ui-state-success-bg);
  --admin-v2-state-information-bg: var(--pg-ui-state-information-bg);
  --admin-v2-state-error-bg: var(--pg-ui-state-error-bg);
  --admin-v2-state-info-bg: var(--pg-ui-state-info-bg);
  --admin-v2-state-loading-text: var(--pg-ui-state-loading-text);
  --admin-v2-state-saving-text: var(--pg-ui-state-saving-text);
  --admin-v2-state-dirty-text: var(--pg-ui-state-dirty-text);
  --admin-v2-state-saved-text: var(--pg-ui-state-saved-text);
  --admin-v2-state-setup-text: var(--pg-ui-state-setup-text);
  --admin-v2-state-unavailable-text: var(--pg-ui-state-unavailable-text);
  --admin-v2-state-warning-text: var(--pg-ui-state-warning-text);
  --admin-v2-state-danger-text: var(--pg-ui-state-danger-text);
  --admin-v2-state-success-text: var(--pg-ui-state-success-text);
  --admin-v2-state-information-text: var(--pg-ui-state-information-text);
  --admin-v2-state-error-text: var(--pg-ui-state-error-text);
  --admin-v2-state-info-text: var(--pg-ui-state-info-text);

  /* Shadows / elevation */
  --admin-v2-shadow-xs: var(--pg-ui-shadow-xs);
  --admin-v2-shadow-sm: var(--pg-ui-shadow-sm);
  --admin-v2-shadow-md: var(--pg-ui-shadow-md);
  --admin-v2-shadow-lg: var(--pg-ui-shadow-lg);
  --admin-v2-shadow-floating: var(--pg-ui-shadow-floating);
  --admin-v2-backdrop: var(--pg-ui-backdrop);
  /*
   * Admin shell chrome edge shadows (topbar / Tools toolbar / shell footer).
   * One pair to tune size/color for white-on-white separation across admin + website editor.
   * Hang point shared with entity-sheet head/foot (Role Contract).
   */
  --admin-v2-chrome-header-shadow: var(--pg-ui-chrome-header-shadow);
  --admin-v2-chrome-footer-shadow: var(--pg-ui-chrome-footer-shadow);

  /* Navigation */
  --admin-v2-nav-text: var(--pg-ui-nav-text);
  --admin-v2-nav-text-active: var(--pg-ui-nav-text-active);
  --admin-v2-nav-surface-hover: var(--pg-ui-nav-surface-hover);
  --admin-v2-nav-surface-active: var(--pg-ui-nav-surface-active);
  --admin-v2-nav-role-daily: var(--pg-ui-nav-role-daily);
  --admin-v2-nav-role-order: var(--pg-ui-nav-role-order);
  --admin-v2-nav-role-return: var(--pg-ui-nav-role-return);
  --admin-v2-nav-role-commerce: var(--pg-ui-nav-role-commerce);
  --admin-v2-nav-role-subscription: var(--pg-ui-nav-role-subscription);
  --admin-v2-nav-role-content: var(--pg-ui-nav-role-content);
  --admin-v2-nav-role-insight: var(--pg-ui-nav-role-insight);

  /* Chart / data */
  --admin-v2-chart-compare-current: var(--pg-ui-chart-compare-current);
  --admin-v2-chart-compare-previous: var(--pg-ui-chart-compare-previous);
  --admin-v2-chart-series-1: var(--pg-ui-chart-series-1);
  --admin-v2-chart-series-2: var(--pg-ui-chart-series-2);
  --admin-v2-chart-series-3: var(--pg-ui-chart-series-3);
  --admin-v2-chart-series-4: var(--pg-ui-chart-series-4);
  --admin-v2-chart-series-5: var(--pg-ui-chart-series-5);
  --admin-v2-chart-series-6: var(--pg-ui-chart-series-6);


  /* Select / icon glyphs — theme-owned data-URIs */
  --admin-v2-icon-color: var(--pg-ui-icon-color);
  --admin-v2-select-chevron: var(--pg-ui-select-chevron);
  --admin-v2-select-chevron-muted: var(--pg-ui-select-chevron-muted);
  --admin-v2-icon-check-on-primary: var(--pg-ui-icon-check-on-primary);

  /* Bridge aliases for existing V2 editor tokens — not a second color SSoT. */
  --pg-editor-color-bg: var(--admin-v2-color-bg);
  --pg-editor-color-surface: var(--admin-v2-color-surface);
  --pg-editor-color-surface-muted: var(--admin-v2-color-surface-muted);
  --pg-editor-color-surface-overlay: var(--admin-v2-color-surface-overlay);
  --pg-editor-color-border: var(--admin-v2-border-default);
  --pg-editor-color-border-strong: var(--admin-v2-border-strong);
  --pg-editor-color-text: var(--admin-v2-color-text);
  --pg-editor-color-text-muted: var(--admin-v2-color-text-muted);
  --pg-editor-color-text-inverse: var(--admin-v2-color-text-inverse);
  --pg-editor-color-brand-500: var(--admin-v2-color-primary);
  --pg-editor-color-brand-600: var(--admin-v2-color-primary-hover);
  --pg-editor-backdrop: var(--admin-v2-backdrop);
}
/* v2/foundations/editor-rhythm.css */
/**
 * Pagayo Design V2 — Editor Workspace foundation tokens (RC-1-B).
 *
 * Pagayo-owned scale inspired by admin/editor rhythm (Tailwind-like spacing).
 * Scoped to editor surfaces only — legacy admin CSS is unchanged.
 */
:root {
  /* Spacing */
  --pg-editor-space-0: 0;
  --pg-editor-space-0-5: 2px;
  --pg-editor-space-1: 4px;
  --pg-editor-space-1-5: 6px;
  --pg-editor-space-2: 8px;
  --pg-editor-space-2-5: 10px;
  --pg-editor-space-3: 12px;
  --pg-editor-space-3-5: 14px;
  --pg-editor-space-4: 16px;
  --pg-editor-space-5: 20px;
  --pg-editor-space-6: 24px;
  --pg-editor-space-7: 28px;
  --pg-editor-space-8: 32px;
  --pg-editor-space-10: 40px;
  --pg-editor-space-12: 48px;
  --pg-editor-space-16: 64px;

  /* Radius */
  --pg-editor-radius-sm: var(--admin-v2-radius-xs, 4px);
  --pg-editor-radius-md: var(--admin-v2-radius-sm, 6px);
  --pg-editor-radius-lg: var(--admin-v2-radius-md, 8px);
  --pg-editor-radius-xl: var(--admin-v2-radius-lg, 12px);
  --pg-editor-radius-2xl: var(--admin-v2-radius-xl, 16px);

  /* Typography — admin Products / admin-v2 SSoT (no parallel 18px scale) */
  --pg-editor-font-size-xs: var(--admin-v2-font-size-meta, 12px);
  --pg-editor-font-size-sm: var(--admin-v2-font-size-body, var(--admin-font-size-base, 14px));
  --pg-editor-font-size-md: var(--admin-v2-font-size-section-title, var(--admin-font-size-label, 16px));
  --pg-editor-font-size-lg: var(--admin-v2-font-size-section-title, var(--admin-font-size-label, 16px));
  --pg-editor-font-size-xl: var(--admin-v2-font-size-page-title, 20px);
  /* Field labels: same as .products-editor-label */
  --pg-editor-font-size-label: var(--admin-font-size-label, calc(var(--admin-font-size-base, 14px) + 2px));

  --pg-editor-line-height-xs: var(--admin-v2-line-height-meta, 18px);
  --pg-editor-line-height-sm: var(--admin-v2-line-height-body, 20px);
  --pg-editor-line-height-md: var(--admin-v2-line-height-section-title, 24px);
  --pg-editor-line-height-lg: var(--admin-v2-line-height-section-title, 24px);
  --pg-editor-line-height-xl: var(--admin-v2-line-height-page-title, 28px);

  --pg-editor-font-weight-normal: var(--admin-v2-font-weight-normal, 400);
  --pg-editor-font-weight-medium: var(--admin-v2-font-weight-medium, 500);
  --pg-editor-font-weight-semibold: var(--admin-v2-font-weight-semibold, 600);
  --pg-editor-font-weight-bold: var(--admin-v2-font-weight-bold, 700);

  /* Colors */
  --pg-editor-color-bg: var(--admin-v2-color-bg);
  --pg-editor-color-surface: var(--admin-v2-color-surface);
  --pg-editor-color-surface-muted: var(--admin-v2-color-surface-muted);
  --pg-editor-color-border: var(--admin-v2-border-default);
  --pg-editor-color-border-strong: var(--admin-v2-border-strong);
  --pg-editor-color-text: var(--admin-v2-color-text);
  --pg-editor-color-text-muted: var(--admin-v2-color-text-muted);
  --pg-editor-color-text-soft: var(--admin-v2-color-text-soft);

  /* Brand */
  --pg-editor-color-brand-50: #ecf3ff;
  --pg-editor-color-brand-100: #dde9ff;
  --pg-editor-color-brand-500: var(--admin-v2-color-primary);
  --pg-editor-color-brand-600: var(--admin-v2-color-primary-hover);
  --pg-editor-color-brand-800: #252dae;

  /* States */
  --pg-editor-color-danger: #d92d20;
  --pg-editor-color-danger-soft: #fef3f2;
  --pg-editor-color-success: #12b76a;
  --pg-editor-color-success-soft: #ecfdf3;

  /* Controls & layout — field/interactive SSoT = admin compact 36px (Products lane) */
  --pg-editor-control-height-sm: var(--admin-v2-field-control-height, var(--admin-control-field, 36px));
  --pg-editor-control-height-md: var(--admin-v2-field-control-height, var(--admin-control-field, 36px));
  --pg-editor-control-height-lg: var(--admin-v2-field-control-height, var(--admin-control-field, 36px));
  --pg-editor-icon-button-size: var(--admin-v2-interactive-control-height, var(--admin-control-compact, 36px));
  --pg-editor-left-rail-width: 202px;

  --pg-editor-field-gap: var(--pg-editor-space-4);
  --pg-editor-field-group-gap: var(--pg-editor-space-5);
  --pg-editor-pane-padding-block-start: var(--pg-editor-space-5);
  --pg-editor-pane-padding-inline: var(--pg-editor-space-6);
  --pg-editor-pane-padding-block-end: var(--pg-editor-space-6);

  /* Shadows */
  --pg-editor-shadow-xs: 0 1px 2px rgba(16, 24, 40, 0.05);
  --pg-editor-shadow-sm: 0 1px 3px rgba(16, 24, 40, 0.10), 0 1px 2px rgba(16, 24, 40, 0.06);

  /* Motion */
  --pg-editor-transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);

  /* Legacy V2 aliases (bridge for existing rules) */
  --pg-v2-space-0: var(--pg-editor-space-0);
  --pg-v2-space-1: var(--pg-editor-space-1);
  --pg-v2-space-2: var(--pg-editor-space-2);
  --pg-v2-space-3: var(--pg-editor-space-3);
  --pg-v2-space-4: var(--pg-editor-space-4);
  --pg-v2-space-5: var(--pg-editor-space-5);
  --pg-v2-space-6: var(--pg-editor-space-6);
  --pg-v2-space-8: var(--pg-editor-space-8);
  --pg-v2-space-10: var(--pg-editor-space-10);
  --pg-v2-space-12: var(--pg-editor-space-12);
  --pg-v2-space-16: var(--pg-editor-space-16);
  --pg-v2-control-height: var(--pg-editor-control-height-lg);
  --pg-v2-action-size: var(--pg-editor-icon-button-size);
  --pg-v2-radius-sm: var(--pg-editor-radius-lg);
  --pg-v2-radius-md: var(--pg-editor-radius-xl);
  --pg-v2-radius-lg: var(--pg-editor-radius-2xl);
  --pg-v2-radius-sheet: var(--pg-editor-radius-2xl);
  --pg-v2-workspace-nav-width: var(--pg-editor-left-rail-width);
  --pg-v2-panel-padding: var(--pg-editor-pane-padding-inline);
  --pg-v2-field-gap: var(--pg-editor-field-gap);
  --pg-v2-section-gap: var(--pg-editor-space-6);
  --pg-v2-motion-fast: var(--pg-editor-transition-fast);
}

/* v2/interaction/editor-interaction-language.css */
/**
 * Pagayo Design V2 — interaction language.
 *
 * Generic editor behavior tokens. User-facing copy remains in i18n.
 */
:root {
  --pg-v2-notification-duration: 2000ms;
  --pg-v2-dialog-width: 440px;
  --pg-v2-backdrop: rgb(16 24 40 / 42%);

  --pg-editor-dialog-width: var(--pg-v2-dialog-width);
  --pg-editor-backdrop: var(--pg-v2-backdrop);
  --pg-editor-context-menu-width: 240px;
}

/* v2/editor-workspace/rich-text.css */
/**
 * Pagayo Design V2 — Rich text (TipTap) skins SSoT.
 *
 * Workspace Chrome Contract / Role Contract:
 * - One TipTap engine in storefront (`RichTextEditor.tsx`).
 * - Compact skin (`.editor-rich-text--compact` + `.products-description-editor`)
 *   is the workspace default (Products, website editor sections).
 * - Full skin (`.editor-rich-text` / `.rich-editor` without compact) is for
 *   long-form content only (Pages, Blog, FAQ, e-mail templates).
 * - Dual class names stay as deprecated aliases until callers emit a single family.
 *
 * All TipTap surface / toolbar / content rules live HERE. Do not reintroduce
 * parallel families in products.css or workspace-shell.css.
 */

/* Compact workspace-default surface (entity sheets + SoftPanels). */
.editor-rich-text--compact,
.products-description-editor {
  width: 100%;
  min-height: 66px;
  border: 1px solid var(--admin-v2-border-strong, var(--admin-border-strong));
  border-radius: var(--admin-v2-radius-card, var(--admin-radius-card));
  background: var(--admin-v2-color-surface);
  overflow: hidden;
  transition:
    border-color var(--transition-fast, 150ms ease),
    box-shadow var(--transition-fast, 150ms ease);
}

.editor-rich-text--compact:focus-within,
.products-description-editor:focus-within {
  border-color: var(--admin-v2-color-primary, var(--tenant-accent, var(--accent)));
  box-shadow: 0 0 0 3px color-mix(
    in srgb,
    var(--admin-v2-color-primary, var(--tenant-accent, var(--accent))) 18%,
    transparent
  );
}

:is(.website-editor-sheet, .editor-workspace-pane, .website-editor-pane) .editor-rich-text,
:is(.website-editor-sheet, .editor-workspace-pane, .website-editor-pane) .rich-editor {
  border: 1px solid var(--pg-editor-color-border-strong);
  border-radius: var(--pg-editor-radius-xl);
  overflow: hidden;
  background-color: var(--pg-editor-color-surface);
  container-type: inline-size;
  container-name: rich-editor;
  transition:
    border-color var(--pg-editor-transition-fast),
    box-shadow var(--pg-editor-transition-fast);
}

:is(.website-editor-sheet, .editor-workspace-pane, .website-editor-pane) .editor-rich-text:focus-within,
:is(.website-editor-sheet, .editor-workspace-pane, .website-editor-pane) .rich-editor:focus-within {
  border-color: var(--pg-editor-color-brand-500);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--pg-editor-color-brand-500) 18%, transparent);
}

:is(.website-editor-sheet, .editor-workspace-pane, .website-editor-pane) .editor-rich-text--compact,
:is(.website-editor-sheet, .editor-workspace-pane, .website-editor-pane) .products-description-editor {
  width: 100%;
  min-height: 132px;
  border-radius: var(--admin-radius-card);
  background: var(--admin-v2-color-surface);
}

/* Toolbar layout must apply in every surface (entity sheet, create columns, website editor). */
.editor-rich-text__toolbar,
.rich-editor-toolbar {
  display: flex;
  gap: var(--pg-editor-space-1);
  flex-wrap: wrap;
  align-items: center;
  width: 100%;
  padding: var(--pg-editor-space-2);
  background-color: var(--pg-editor-color-surface-muted);
  border-bottom: 1px solid var(--pg-editor-color-border);
  --rich-editor-toolbar-btn-size: var(--pg-editor-control-height-lg);
  --rich-editor-toolbar-icon-size: 18px;
}

/* Compact product/admin description editors: single dense toolbar row. */
.editor-rich-text--compact .editor-rich-text__toolbar,
.editor-rich-text--compact .rich-editor-toolbar,
.products-description-editor .editor-rich-text__toolbar,
.products-description-editor .rich-editor-toolbar,
.admin-v2-entity-sheet .editor-rich-text__toolbar,
.admin-v2-entity-sheet .rich-editor-toolbar {
  --rich-editor-toolbar-btn-size: 21px;
  --rich-editor-toolbar-icon-size: 14px;
  flex-wrap: nowrap;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
  gap: 0;
  padding: 2px 4px;
}

.editor-rich-text--compact .editor-rich-text__toolbar-separator,
.editor-rich-text--compact .rich-editor-toolbar-separator,
.products-description-editor .editor-rich-text__toolbar-separator,
.products-description-editor .rich-editor-toolbar-separator,
.admin-v2-entity-sheet .editor-rich-text__toolbar-separator,
.admin-v2-entity-sheet .rich-editor-toolbar-separator {
  margin: 0 2px;
  flex-shrink: 0;
}

.editor-rich-text--compact .editor-rich-text__toolbar-group,
.editor-rich-text--compact .rich-editor-toolbar-group,
.products-description-editor .editor-rich-text__toolbar-group,
.products-description-editor .rich-editor-toolbar-group,
.admin-v2-entity-sheet .editor-rich-text__toolbar-group,
.admin-v2-entity-sheet .rich-editor-toolbar-group {
  gap: 0;
}

.editor-rich-text--compact .editor-rich-text__toolbar-trailing,
.editor-rich-text--compact .rich-editor-toolbar-trailing,
.products-description-editor .editor-rich-text__toolbar-trailing,
.products-description-editor .rich-editor-toolbar-trailing,
.admin-v2-entity-sheet .editor-rich-text__toolbar-trailing,
.admin-v2-entity-sheet .rich-editor-toolbar-trailing {
  margin-left: 2px;
}

.editor-rich-text__toolbar-spacer,
.rich-editor-toolbar-spacer {
  flex: 1;
  min-width: var(--pg-editor-space-2);
}

.editor-rich-text__toolbar-trailing,
.rich-editor-toolbar-trailing {
  display: flex;
  align-items: center;
  gap: var(--pg-editor-space-1);
  margin-left: auto;
  flex-shrink: 0;
}

.editor-rich-text__body,
.rich-editor-content-wrap {
  position: relative;
}

.editor-rich-text__body--assistant .editor-rich-text__editor,
.editor-rich-text__body--assistant .editor-rich-text__preview,
.editor-rich-text__body--assistant .rich-editor-content,
.rich-editor-content-wrap--assistant .rich-editor-content,
.rich-editor-content-wrap--assistant .products-description-editor__content {
  padding-bottom: calc(var(--pg-editor-space-4) + 36px);
  padding-right: calc(var(--pg-editor-space-4) + 36px);
}

.editor-rich-text__body--assistant .editor-rich-text__editor--compact,
.editor-rich-text__body--assistant .products-description-editor__content,
.rich-editor-content-wrap--assistant .products-description-editor__content,
.rich-editor-content-wrap--assistant .products-description-editor .ProseMirror {
  padding-bottom: calc(12px + 36px);
  padding-right: calc(12px + 36px);
}

.editor-rich-text__assistant-button,
.rich-editor-content-assistant-btn {
  --admin-assistant-gold: var(--admin-v2-color-brand-gold);
  --admin-assistant-gold-hover: var(--admin-v2-color-brand-gold);
  position: absolute;
  right: var(--pg-editor-space-2);
  bottom: var(--pg-editor-space-2);
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: var(--pg-editor-control-height-lg);
  padding: 0;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: var(--admin-assistant-gold);
  cursor: pointer;
  box-shadow: none;
  transition: color var(--pg-editor-transition-fast);
}

.editor-rich-text__assistant-button:hover:not(:disabled),
.rich-editor-content-assistant-btn:hover:not(:disabled) {
  color: var(--admin-assistant-gold-hover);
  box-shadow: none;
}

.editor-rich-text__assistant-button:focus-visible,
.rich-editor-content-assistant-btn:focus-visible {
  outline: 2px solid var(--admin-assistant-gold);
  outline-offset: 2px;
}

.editor-rich-text__toolbar-group,
.rich-editor-toolbar-group {
  display: flex;
  gap: 2px;
}

.editor-rich-text__toolbar-separator,
.rich-editor-toolbar-separator {
  width: 1px;
  margin: 0 var(--pg-editor-space-2);
  background-color: var(--pg-editor-color-border);
}

.editor-rich-text__button,
.rich-editor-toolbar-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--rich-editor-toolbar-btn-size);
  height: var(--rich-editor-toolbar-btn-size);
  padding: 0;
  border: none;
  border-radius: var(--pg-editor-radius-md);
  background-color: transparent;
  color: var(--pg-editor-color-text-muted);
  cursor: pointer;
  transition:
    background-color var(--pg-editor-transition-fast),
    color var(--pg-editor-transition-fast);
  flex-shrink: 0;
}

.editor-rich-text__button svg,
.rich-editor-toolbar-btn svg {
  width: var(--rich-editor-toolbar-icon-size);
  height: var(--rich-editor-toolbar-icon-size);
  flex-shrink: 0;
}

@container rich-editor (max-width: 42rem) {
  .editor-rich-text__toolbar,
  .rich-editor-toolbar {
    --rich-editor-toolbar-btn-size: 26px;
    --rich-editor-toolbar-icon-size: 15px;
    flex-wrap: nowrap;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: thin;
    gap: 1px;
    padding: 6px 8px;
  }

  .editor-rich-text__toolbar-separator,
  .rich-editor-toolbar-separator {
    margin: 0 3px;
    flex-shrink: 0;
  }

  .editor-rich-text__toolbar-trailing,
  .rich-editor-toolbar-trailing {
    margin-left: auto;
  }
}

@container rich-editor (max-width: 28rem) {
  .editor-rich-text__toolbar,
  .rich-editor-toolbar {
    --rich-editor-toolbar-btn-size: 24px;
    --rich-editor-toolbar-icon-size: 14px;
    padding: 4px 6px;
  }

  .editor-rich-text__toolbar-separator,
  .rich-editor-toolbar-separator {
    margin: 0 2px;
  }
}

.order-create-column .editor-rich-text__toolbar,
.order-create-column .products-description-editor .rich-editor-toolbar,
.order-create-column .rich-editor-toolbar {
  --rich-editor-toolbar-btn-size: 26px;
  --rich-editor-toolbar-icon-size: 15px;
  flex-wrap: nowrap;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
  gap: 1px;
  padding: 6px 8px;
}

.order-create-column .editor-rich-text__toolbar-separator,
.order-create-column .products-description-editor .rich-editor-toolbar-separator,
.order-create-column .rich-editor-toolbar-separator {
  margin: 0 3px;
  flex-shrink: 0;
}

.order-create-column .editor-rich-text__toolbar-trailing,
.order-create-column .products-description-editor .rich-editor-toolbar-trailing,
.order-create-column .rich-editor-toolbar-trailing {
  margin-left: auto;
  flex-shrink: 0;
}

.editor-rich-text__button:hover:not(:disabled),
.rich-editor-toolbar-btn:hover:not(:disabled) {
  background-color: var(--pg-editor-color-bg);
  color: var(--pg-editor-color-text);
}

.editor-rich-text__button--active,
.rich-editor-toolbar-btn--active {
  background-color: var(--pg-editor-color-brand-100);
  color: var(--pg-editor-color-brand-600);
}

.editor-rich-text__button:disabled,
.rich-editor-toolbar-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.editor-rich-text__toolbar-assistant-button {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: var(--rich-editor-toolbar-btn-size);
  height: var(--rich-editor-toolbar-btn-size);
  padding: 0;
  border: 0;
  border-radius: var(--pg-editor-radius-md);
  background: transparent;
  color: var(--admin-v2-color-brand-gold);
  cursor: pointer;
}

.editor-rich-text__toolbar-assistant-button:hover,
.editor-rich-text__toolbar-assistant-button:focus-visible {
  color: var(--admin-v2-color-brand-gold);
  background: color-mix(in srgb, var(--admin-v2-color-brand-gold) 12%, transparent);
}

.editor-rich-text__toolbar-assistant-button:focus-visible {
  outline: 2px solid var(--admin-v2-color-brand-gold);
  outline-offset: 2px;
}

.editor-rich-text__editor,
.editor-rich-text__preview,
.rich-editor-content {
  padding: var(--pg-editor-space-4);
  font-size: var(--pg-editor-font-size-md);
  line-height: var(--pg-editor-line-height-md);
  color: var(--pg-editor-color-text);
}

.editor-rich-text__editor--compact,
.products-description-editor__content,
.products-description-editor .ProseMirror {
  min-height: 132px;
  padding: 12px;
  font-size: var(--admin-workspace-detail-font);
  line-height: 1.55;
}

.editor-rich-text__editor.ProseMirror,
.editor-rich-text__preview.ProseMirror,
.rich-editor-content.ProseMirror {
  outline: none;
  min-height: inherit;
}

.editor-rich-text__editor .ProseMirror-selectednode,
.editor-rich-text__editor.ProseMirror .ProseMirror-selectednode,
.editor-rich-text__preview .ProseMirror-selectednode,
.editor-rich-text__preview.ProseMirror .ProseMirror-selectednode,
.products-description-editor .ProseMirror-selectednode,
.products-description-editor__content .ProseMirror-selectednode,
.rich-editor-content .ProseMirror-selectednode,
.rich-editor-content.ProseMirror .ProseMirror-selectednode {
  outline: none;
}

.editor-rich-text__editor p,
.editor-rich-text__preview p,
.rich-editor-content p {
  margin: 0 0 1em 0;
}

.editor-rich-text__editor p:last-child,
.editor-rich-text__preview p:last-child,
.rich-editor-content p:last-child {
  margin-bottom: 0;
}

.editor-rich-text__editor--compact p,
.products-description-editor__content p,
.products-description-editor .ProseMirror p {
  margin: 0;
}

.editor-rich-text__editor--compact p + p,
.products-description-editor__content p + p,
.products-description-editor .ProseMirror p + p {
  margin-top: 0.75em;
}

.editor-rich-text__editor h1,
.editor-rich-text__editor h2,
.editor-rich-text__editor h3,
.editor-rich-text__preview h1,
.editor-rich-text__preview h2,
.editor-rich-text__preview h3,
.rich-editor-content h1,
.rich-editor-content h2,
.rich-editor-content h3 {
  margin: 1em 0 0.35em 0;
  line-height: 1.25;
  color: var(--pg-editor-color-text);
}

.editor-rich-text__editor--compact h1,
.editor-rich-text__editor--compact h2,
.editor-rich-text__editor--compact h3,
.products-description-editor__content h1,
.products-description-editor__content h2,
.products-description-editor__content h3,
.products-description-editor .ProseMirror h1,
.products-description-editor .ProseMirror h2,
.products-description-editor .ProseMirror h3 {
  margin-top: 0.75em;
  margin-bottom: 0.35em;
}

.editor-rich-text__editor h1:first-child,
.editor-rich-text__editor h2:first-child,
.editor-rich-text__editor h3:first-child,
.editor-rich-text__preview h1:first-child,
.editor-rich-text__preview h2:first-child,
.editor-rich-text__preview h3:first-child,
.rich-editor-content h1:first-child,
.rich-editor-content h2:first-child,
.rich-editor-content h3:first-child,
.editor-rich-text__editor--compact h1:first-child,
.editor-rich-text__editor--compact h2:first-child,
.editor-rich-text__editor--compact h3:first-child,
.products-description-editor__content h1:first-child,
.products-description-editor__content h2:first-child,
.products-description-editor__content h3:first-child,
.products-description-editor .ProseMirror h1:first-child,
.products-description-editor .ProseMirror h2:first-child,
.products-description-editor .ProseMirror h3:first-child {
  margin-top: 0;
}

.editor-rich-text__editor h1,
.editor-rich-text__preview h1,
.rich-editor-content h1 {
  font-size: 1.625em;
  font-weight: var(--pg-editor-font-weight-bold);
  letter-spacing: -0.02em;
}

.editor-rich-text__editor h2,
.editor-rich-text__preview h2,
.rich-editor-content h2 {
  font-size: 1.375em;
  font-weight: var(--pg-editor-font-weight-bold);
  letter-spacing: -0.015em;
}

.editor-rich-text__editor h3,
.editor-rich-text__preview h3,
.rich-editor-content h3 {
  font-size: 1.125em;
  font-weight: var(--pg-editor-font-weight-semibold);
}

.editor-rich-text__editor ul,
.editor-rich-text__editor ol,
.editor-rich-text__preview ul,
.editor-rich-text__preview ol,
.rich-editor-content ul,
.rich-editor-content ol {
  margin: 0 0 1em 0;
  padding-left: 1.5em;
}

.editor-rich-text__editor ul,
.editor-rich-text__preview ul,
.rich-editor-content ul {
  list-style: disc;
}

.editor-rich-text__editor ol,
.editor-rich-text__preview ol,
.rich-editor-content ol {
  list-style: decimal;
}

.editor-rich-text__editor li,
.editor-rich-text__preview li,
.rich-editor-content li {
  margin-bottom: 0.25em;
}

.editor-rich-text__editor blockquote,
.editor-rich-text__preview blockquote,
.rich-editor-content blockquote {
  margin: 0 0 1em 0;
  padding: 0.4em 0.9em;
  border-left: 3px solid var(--pg-editor-color-brand-500);
  color: var(--pg-editor-color-text-muted);
  background-color: color-mix(in srgb, var(--pg-editor-color-brand-500) 6%, transparent);
}

.editor-rich-text__editor a,
.editor-rich-text__preview a,
.rich-editor-content a {
  color: var(--pg-editor-color-brand-600);
  text-decoration: underline;
}

.editor-rich-text__editor strong,
.editor-rich-text__preview strong,
.rich-editor-content strong {
  font-weight: var(--pg-editor-font-weight-semibold);
}

.editor-rich-text__editor em,
.editor-rich-text__preview em,
.rich-editor-content em {
  font-style: italic;
}

.editor-rich-text__editor code,
.editor-rich-text__preview code,
.rich-editor-content code {
  font-family: var(--font-mono);
  font-size: 0.95em;
  padding: 0.1em 0.35em;
  border-radius: var(--pg-editor-radius-sm);
  background-color: color-mix(in srgb, var(--pg-editor-color-text) 8%, transparent);
}

.editor-rich-text__editor pre,
.editor-rich-text__preview pre,
.rich-editor-content pre {
  margin: 0 0 1em 0;
  padding: 0.8em 1em;
  border-radius: var(--pg-editor-radius-md);
  overflow-x: auto;
  background-color: color-mix(in srgb, var(--pg-editor-color-text) 9%, transparent);
}

.editor-rich-text__editor pre code,
.editor-rich-text__preview pre code,
.rich-editor-content pre code {
  padding: 0;
  border-radius: 0;
  background: transparent;
}

.editor-rich-text__editor hr,
.editor-rich-text__preview hr,
.rich-editor-content hr {
  border: 0;
  border-top: 1px solid var(--pg-editor-color-border);
  margin: 1.1em 0;
}

.editor-rich-text__editor p.is-editor-empty:first-child::before,
.editor-rich-text__preview p.is-editor-empty:first-child::before,
.rich-editor-content p.is-editor-empty:first-child::before,
.editor-rich-text__editor--compact.ProseMirror p.is-editor-empty:first-child::before,
.products-description-editor__content.ProseMirror p.is-editor-empty:first-child::before,
.products-description-editor .ProseMirror p.is-editor-empty:first-child::before {
  content: attr(data-placeholder);
  float: left;
  color: var(--pg-editor-color-text-muted);
  pointer-events: none;
  height: 0;
}

.editor-rich-text__status,
.rich-editor-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--pg-editor-space-8);
  color: var(--pg-editor-color-text-muted);
}

.editor-rich-text--readonly .editor-rich-text__editor,
.editor-rich-text--readonly .editor-rich-text__preview,
.rich-editor--readonly .rich-editor-content {
  border: 1px solid var(--pg-editor-color-border);
  border-radius: var(--pg-editor-radius-xl);
  background: var(--pg-editor-color-surface-muted);
}

.editor-rich-text--readonly .ProseMirror,
.rich-editor--readonly .ProseMirror {
  cursor: default;
  outline: none;
}


/* v2/editor-workspace/workspace-shell.css */
/**
 * Pagayo Design V2 — Editor Workspace shell normalization (RC-1-B).
 *
 * Applies RC-1-B tokens to Website Editor / Editor Workspace surfaces only.
 */

body.website-editor-active,
body.editor-workspace-active {
  /* Geometry only — color tokens hang on :root bridge in website-editor.css → --pg-editor-* → --admin-v2-*. */
  --editor-workspace-nav-width: var(--pg-editor-left-rail-width);
  --editor-workspace-sheet-height: calc(100dvh - var(--website-editor-chrome-height, 68px));
  --website-editor-workspace-nav-width: var(--editor-workspace-nav-width);
  --website-editor-sheet-height: var(--editor-workspace-sheet-height);
}

/* Full-page sheet / pane surfaces (admin entity-sheet parity on website editor) */
.editor-workspace-sheet,
.website-editor-sheet {
  background: var(--pg-editor-color-surface);
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.editor-workspace-sheet__handle,
.website-editor-sheet__handle {
  display: none;
}

/* Left rail */
.editor-workspace__navigation {
  gap: var(--pg-editor-space-2);
  padding: var(--pg-editor-space-4) var(--pg-editor-space-2)
    calc(var(--pg-editor-icon-button-size) + var(--pg-editor-space-8));
  background: var(--pg-editor-color-surface-muted);
  border-inline-end-color: var(--pg-editor-color-border);
}

.editor-workspace__navigation-footer {
  gap: var(--pg-editor-space-2);
  padding-top: var(--pg-editor-space-3);
  background: var(--pg-editor-color-surface-muted);
}

.editor-workspace__navigation-list {
  gap: var(--pg-editor-space-2);
}

.editor-workspace__navigation-link {
  min-height: var(--pg-editor-control-height-lg);
  padding: var(--pg-editor-space-3) var(--pg-editor-space-4);
  border-radius: var(--pg-editor-radius-lg);
  font-size: var(--pg-editor-font-size-sm);
  line-height: var(--pg-editor-line-height-sm);
  font-weight: var(--pg-editor-font-weight-medium);
  color: var(--pg-editor-color-text-muted);
  transition: background-color var(--pg-editor-transition-fast),
    border-color var(--pg-editor-transition-fast),
    color var(--pg-editor-transition-fast);
}

.editor-workspace__navigation-link:hover:not(:disabled) {
  background: var(--pg-editor-color-bg);
  color: var(--pg-editor-color-text);
}

.editor-workspace__navigation-link--active,
.editor-workspace__navigation-link[aria-current="page"] {
  background: var(--pg-editor-color-surface);
  border-color: var(--pg-editor-color-border-strong);
  color: var(--pg-editor-color-text);
  box-shadow: var(--pg-editor-shadow-xs);
}

.editor-workspace__navigation-link:focus-visible,
.editor-workspace-sheet__tab:focus-visible,
.website-editor-sheet__tab:focus-visible,
.website-editor-content-tabs__tab:focus-visible,
.website-editor-content-tabs__add:focus-visible {
  outline: 2px solid var(--pg-editor-color-brand-500);
  outline-offset: 2px;
}

/* Icon action buttons — Editor Form Language + workspace navigation */
.editor-workspace__navigation-action,
.editor-action-button,
.website-editor-action-button {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--pg-editor-icon-button-size);
  height: var(--pg-editor-icon-button-size);
  min-height: var(--pg-editor-icon-button-size);
  padding: 0;
  border: 1px solid var(--pg-editor-color-border-strong);
  border-radius: var(--pg-editor-radius-lg);
  background: var(--pg-editor-color-surface);
  color: var(--pg-editor-color-text);
  cursor: pointer;
  transition: background-color var(--pg-editor-transition-fast),
    border-color var(--pg-editor-transition-fast),
    color var(--pg-editor-transition-fast);
}

.editor-workspace__navigation-action:hover:not(:disabled),
.editor-action-button:hover:not(:disabled),
.website-editor-action-button:hover:not(:disabled) {
  background: var(--pg-editor-color-bg);
}

.editor-workspace__navigation-action:focus-visible,
.editor-action-button:focus-visible,
.website-editor-action-button:focus-visible {
  outline: 2px solid var(--pg-editor-color-brand-500);
  outline-offset: 2px;
}

.editor-action-button--secondary,
.website-editor-action-button--secondary {
  background: var(--pg-editor-color-surface);
  border-color: var(--pg-editor-color-border-strong);
  color: var(--pg-editor-color-text);
}

.editor-action-button--primary,
.website-editor-action-button--primary {
  background: var(--pg-editor-color-text);
  border-color: var(--pg-editor-color-text);
  color: var(--pg-editor-color-surface);
}

.editor-action-button--primary:hover:not(:disabled),
.website-editor-action-button--primary:hover:not(:disabled) {
  background: color-mix(in srgb, var(--pg-editor-color-text) 92%, var(--pg-editor-color-surface));
}

.editor-action-button--danger,
.website-editor-action-button--danger {
  color: var(--pg-editor-color-danger);
  border-color: color-mix(in srgb, var(--pg-editor-color-danger) 35%, var(--pg-editor-color-border-strong));
}

.editor-action-button--danger:hover:not(:disabled),
.website-editor-action-button--danger:hover:not(:disabled) {
  background: color-mix(in srgb, var(--pg-editor-color-danger) 8%, var(--pg-editor-color-surface));
}

.editor-workspace__navigation-action:disabled,
.editor-action-button:disabled,
.website-editor-action-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Content pane */
.editor-workspace-pane__header,
.website-editor-pane__header {
  padding: var(--pg-editor-space-4) var(--pg-editor-pane-padding-inline)
    var(--pg-editor-space-3);
  border-bottom-color: var(--pg-editor-color-border);
}

.editor-workspace-pane__body,
.website-editor-pane__body,
.website-editor-sheet__body {
  gap: var(--pg-editor-field-gap);
  padding: var(--pg-editor-pane-padding-block-start) var(--pg-editor-pane-padding-inline)
    var(--pg-editor-pane-padding-block-end);
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
}

.editor-workspace__content-region {
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

.editor-workspace-pane__title,
.website-editor-pane__title,
.website-editor-sheet__title {
  font-size: var(--pg-editor-font-size-xl);
  line-height: var(--pg-editor-line-height-xl, var(--pg-editor-line-height-lg));
  font-weight: var(--pg-editor-font-weight-semibold);
}

.editor-workspace-pane__subtitle,
.website-editor-pane__subtitle,
.website-editor-sheet__subtitle {
  font-size: var(--pg-editor-font-size-sm);
  line-height: var(--pg-editor-line-height-sm);
  color: var(--pg-editor-color-text-muted);
}

.editor-workspace-pane__footer,
.website-editor-pane__footer {
  padding: var(--pg-editor-space-3) var(--pg-editor-space-2);
  border-top-color: var(--pg-editor-color-border);
  border-inline-end-color: var(--pg-editor-color-border);
  background: var(--pg-editor-color-surface-muted);
}

.editor-workspace-pane__save-state {
  flex: 1 1 auto;
  min-width: 0;
  font-size: var(--pg-editor-font-size-xs, var(--pg-editor-font-size-sm));
  line-height: var(--pg-editor-line-height-sm);
  color: var(--pg-editor-color-text-muted);
}

/* Tabs */
.editor-workspace-sheet__tabs,
.website-editor-sheet__tabs {
  gap: var(--pg-editor-space-2);
  padding: 0 var(--pg-editor-pane-padding-inline) var(--pg-editor-space-3);
  border-bottom-color: var(--pg-editor-color-border);
}

.editor-workspace-sheet__tab,
.website-editor-sheet__tab {
  min-height: var(--pg-editor-control-height-md);
  padding: var(--pg-editor-space-2) var(--pg-editor-space-3);
  border-radius: var(--pg-editor-radius-lg);
  font-size: var(--pg-editor-font-size-sm);
  line-height: var(--pg-editor-line-height-sm);
  font-weight: var(--pg-editor-font-weight-medium);
  color: var(--pg-editor-color-text-muted);
  transition: background-color var(--pg-editor-transition-fast),
    border-color var(--pg-editor-transition-fast);
}

.editor-workspace-sheet__tab--active,
.website-editor-sheet__tab--active {
  background: var(--pg-editor-color-surface-muted);
  border-color: var(--pg-editor-color-border-strong);
  color: var(--pg-editor-color-text);
}

.editor-workspace-sheet__tab-panel,
.website-editor-sheet__tab-panel {
  gap: var(--pg-editor-field-gap);
}

/* Fields */
.editor-form-field,
.website-editor-field {
  gap: var(--pg-editor-space-2);
}

/* Field / subgroup visibility toggle (replaces Advanced-tab show/hide). */
.editor-form-field__header,
.editor-form-section__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--pg-editor-space-3);
  min-width: 0;
}

.editor-form-field__header-main {
  min-width: 0;
  flex: 1 1 auto;
}

.editor-form-visibility {
  display: inline-flex;
  align-items: center;
  gap: var(--pg-editor-space-2);
  flex: 0 0 auto;
  margin: 0;
  cursor: pointer;
  user-select: none;
}

.editor-form-visibility__label {
  font-size: var(--pg-editor-font-size-xs, 12px);
  line-height: var(--pg-editor-line-height-sm, 1.3);
  font-weight: var(--pg-editor-font-weight-medium, 500);
  color: var(--pg-editor-color-text-muted);
  white-space: nowrap;
}

.editor-form-visibility--off .editor-form-visibility__label {
  color: var(--pg-editor-color-text-muted);
}

.editor-form-field--hidden > :not(.editor-form-field__header),
.editor-form-section--hidden > .editor-form-section__body {
  opacity: 0.45;
  pointer-events: none;
}

/*
 * Bounded sub-card variant — stacked repeatable sub-sections inside an editor
 * card (e.g. footer column blocks). Gives each unit its own visual container
 * so header actions read as belonging to that unit.
 */
.editor-form-section--card {
  padding: var(--pg-editor-space-3) var(--pg-editor-space-4);
  border: 1px solid var(--pg-editor-color-border);
  border-radius: var(--pg-editor-radius-lg);
  background: var(--pg-editor-color-surface-muted);
}

.editor-form-section--card > .editor-form-section__header {
  padding-block-end: var(--pg-editor-space-2);
  border-block-end: 1px solid var(--pg-editor-color-border);
}

.editor-form-field__label,
.website-editor-field__label {
  font-size: var(--pg-editor-font-size-label, var(--admin-font-size-label, 16px));
  line-height: var(--pg-editor-line-height-md);
  font-weight: var(--pg-editor-font-weight-semibold);
  color: var(--pg-editor-color-text);
  letter-spacing: var(--admin-v2-letter-spacing, 0);
}

.editor-form-field__input:not([type='color']),
.editor-form-field__textarea,
.editor-form-field select,
.website-editor-field__input:not([type='color']),
.website-editor-field__textarea,
.website-editor-field select {
  box-sizing: border-box;
  min-height: var(--pg-editor-control-height-lg);
  padding: 0 var(--pg-editor-space-3);
  border: 1px solid var(--pg-editor-color-border-strong);
  border-radius: var(--pg-editor-radius-lg);
  background: var(--pg-editor-color-surface);
  color: var(--pg-editor-color-text);
  font-size: var(--pg-editor-font-size-sm);
  line-height: var(--pg-editor-control-height-lg);
  transition: border-color var(--pg-editor-transition-fast),
    box-shadow var(--pg-editor-transition-fast);
}

.editor-form-field__input:not([type='color']):not(textarea),
.editor-form-field select,
.website-editor-field__input:not([type='color']):not(textarea),
.website-editor-field select {
  height: var(--pg-editor-control-height-lg);
  max-height: var(--pg-editor-control-height-lg);
}

.editor-form-field__input:focus-visible,
.editor-form-field__textarea:focus-visible,
.editor-form-field select:focus-visible,
.website-editor-field__input:focus-visible,
.website-editor-field__textarea:focus-visible,
.website-editor-field select:focus-visible {
  outline: 2px solid var(--pg-editor-color-brand-100);
  outline-offset: 0;
  border-color: var(--pg-editor-color-brand-500);
}

.editor-form-field__textarea,
.website-editor-field__textarea {
  height: auto;
  max-height: none;
  min-height: calc(var(--pg-editor-control-height-lg) * 2);
  padding-block: var(--pg-editor-space-2);
  line-height: var(--pg-editor-line-height-sm);
}

/* TipTap / rich-text rules moved to v2/editor-workspace/rich-text.css (SSoT). */

:is(.website-editor-sheet, .editor-workspace-pane, .website-editor-pane) .form-hint,
:is(.website-editor-sheet, .editor-workspace-pane, .website-editor-pane) .editor-form-field__hint,
:is(.website-editor-sheet, .editor-workspace-pane, .website-editor-pane) .website-editor-field__hint {
  font-size: var(--pg-editor-font-size-xs);
  line-height: var(--pg-editor-line-height-xs);
  font-weight: var(--pg-editor-font-weight-normal);
  color: var(--pg-editor-color-text-muted);
}

/*
 * OWNERSHIP (website editor + Admin V2 entity sheets):
 * Color swatch chrome and editor field labels live HERE (and entity-sheet.css
 * for sheet-scoped overrides). contexts/admin/products.css may keep
 * compatibility aliases only — do not add competing swatch sizing there.
 */
.editor-color-field {
  display: flex;
  flex-direction: column;
  gap: var(--pg-editor-space-2);
  min-width: 0;
}

/*
 * Visible swatch surface — always a square control.
 * Role: EditorColorPicker / EditorColorField trigger (settings, entity sheet, website editor).
 * Do not gate square geometry on website-editor panes only — siblings (e.g. Stock settings)
 * must get the same affordance without surface-specific overrides.
 */
.editor-color-swatch {
  position: relative;
  display: block;
  box-sizing: border-box;
  width: var(--pg-editor-control-height-lg);
  max-width: var(--pg-editor-control-height-lg);
  height: var(--pg-editor-control-height-lg);
  min-height: var(--pg-editor-control-height-lg);
  aspect-ratio: 1;
  border: 1px solid var(--pg-editor-color-border-strong);
  border-radius: var(--pg-editor-radius-lg);
  overflow: hidden;
  flex: 0 0 auto;
  align-self: flex-start;
}

.editor-color-swatch[data-disabled='true'] {
  opacity: 0.55;
  cursor: not-allowed;
}

.editor-color-swatch__input,
.editor-color-swatch .editor-color-field__input,
.editor-color-swatch input[type='color'].products-workspace-field--color {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  max-width: none;
  margin: 0;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0;
  background: transparent !important;
  opacity: 0;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.editor-color-swatch[data-disabled='true'] .editor-color-swatch__input,
.editor-color-swatch[data-disabled='true'] .editor-color-field__input,
.editor-color-swatch[data-disabled='true'] input[type='color'].products-workspace-field--color {
  cursor: not-allowed;
  pointer-events: none;
}

.editor-color-field__label {
  font-size: var(--pg-editor-font-size-sm);
  line-height: var(--pg-editor-line-height-sm);
  font-weight: var(--pg-editor-font-weight-medium);
  color: var(--pg-editor-color-text);
}

.editor-color-field__theme-swatches {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pg-editor-space-2);
  margin-bottom: var(--pg-editor-space-2);
}

.editor-color-field__theme-swatch {
  width: 1.75rem;
  height: 1.75rem;
  border-radius: var(--pg-editor-radius-md, 6px);
  border: 1px solid var(--pg-editor-color-border-strong);
  padding: 0;
  cursor: pointer;
  background-clip: padding-box;
}

.editor-color-field__theme-swatch--active {
  outline: 2px solid var(--pg-editor-color-accent, var(--accent));
  outline-offset: 2px;
}

.editor-color-field__theme-swatch:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.editor-color-row,
.products-workspace-typography-color-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--pg-editor-space-2);
}

.editor-color-field__input,
input[type='color'].products-workspace-field--color {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  min-height: var(--pg-editor-control-height-lg);
  padding: 0 !important;
  box-sizing: border-box;
  cursor: pointer;
  background: transparent !important;
  border: 1px solid var(--pg-editor-color-border-strong) !important;
  border-radius: var(--pg-editor-radius-lg);
  overflow: hidden;
  -webkit-appearance: none;
  appearance: none;
}

/* Editor workspace — compact square swatch (matches lg control height). */
:is(.editor-workspace-pane, .website-editor-pane, .website-editor-sheet, .editor-workspace-pane__body, .website-editor-pane__body)
  .editor-color-field__input,
:is(.editor-workspace-pane, .website-editor-pane, .website-editor-sheet, .editor-workspace-pane__body, .website-editor-pane__body)
  input[type='color'].products-workspace-field--color {
  width: var(--pg-editor-control-height-lg);
  max-width: var(--pg-editor-control-height-lg);
  height: var(--pg-editor-control-height-lg);
  min-height: var(--pg-editor-control-height-lg);
  flex: 0 0 auto;
  align-self: flex-start;
  aspect-ratio: 1;
}

:is(.editor-workspace-pane, .website-editor-pane, .website-editor-sheet, .editor-workspace-pane__body, .website-editor-pane__body)
  .editor-form-field__input[type='color'] {
  width: var(--pg-editor-control-height-lg);
  max-width: var(--pg-editor-control-height-lg);
  height: var(--pg-editor-control-height-lg);
  min-height: var(--pg-editor-control-height-lg);
  padding: 0 !important;
  flex: 0 0 auto;
  align-self: flex-start;
  aspect-ratio: 1;
}

.editor-color-field__input:focus-visible,
input[type='color'].products-workspace-field--color:focus-visible {
  outline: 2px solid var(--pg-editor-color-brand-100);
  outline-offset: 0;
  border-color: var(--pg-editor-color-brand-500) !important;
}

.editor-color-field__input::-webkit-color-swatch-wrapper,
input[type='color'].products-workspace-field--color::-webkit-color-swatch-wrapper,
.editor-form-field__input[type='color']::-webkit-color-swatch-wrapper {
  padding: 0;
  margin: 0;
  border: none;
  width: 100%;
  height: 100%;
}

.editor-color-field__input::-webkit-color-swatch,
input[type='color'].products-workspace-field--color::-webkit-color-swatch,
.editor-form-field__input[type='color']::-webkit-color-swatch {
  border: none;
  border-radius: calc(var(--pg-editor-radius-lg) - 1px);
  width: 100%;
  height: 100%;
}

.editor-color-field__input::-moz-color-swatch,
input[type='color'].products-workspace-field--color::-moz-color-swatch,
.editor-form-field__input[type='color']::-moz-color-swatch {
  border: none;
  border-radius: calc(var(--pg-editor-radius-lg) - 1px);
  width: 100%;
  height: 100%;
}

.editor-color-row .editor-color-field,
.products-workspace-typography-color-row .editor-color-field {
  flex: 0 1 auto;
  width: min(100%, 10rem);
  min-width: 6rem;
}

:is(.editor-workspace-pane, .website-editor-pane, .website-editor-sheet, .editor-workspace-pane__body, .website-editor-pane__body)
  .editor-color-row
  .editor-color-field,
:is(.editor-workspace-pane, .website-editor-pane, .website-editor-sheet, .editor-workspace-pane__body, .website-editor-pane__body)
  .products-workspace-typography-color-row
  .editor-color-field {
  width: auto;
  min-width: 0;
}

.editor-form-label.editor-form-label--with-info {
  display: inline-flex;
  align-items: center;
  gap: var(--pg-editor-space-1-5, 6px);
  width: fit-content;
  max-width: 100%;
  margin-bottom: 0;
}

.editor-form-label--with-info .editor-form-label__text {
  min-width: 0;
}

.editor-label-info,
.products-editor-label-info {
  position: relative;
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  color: var(--pg-editor-color-text-muted, var(--admin-v2-color-text-muted, var(--admin-v2-color-text-muted)));
  cursor: help;
  line-height: 0;
}

/* Legacy CSS pseudo-tooltip (non-portaled hints only). Prefer the portaled EditorHintIcon path. */
.editor-label-info:not(.editor-label-info--portaled)::before,
.products-editor-label-info:not(.products-editor-label-info--portaled)::before {
  content: attr(data-hint);
  position: absolute;
  left: 0;
  bottom: calc(100% + 8px);
  transform: none;
  width: max-content;
  max-width: min(240px, calc(100vw - 16px));
  padding: 6px 10px;
  border-radius: var(--pg-editor-radius-lg);
  background: var(--pg-editor-color-text, var(--admin-v2-color-text));
  color: var(--pg-editor-color-surface);
  font-size: var(--pg-editor-font-size-xs);
  font-weight: var(--pg-editor-font-weight-regular);
  line-height: 1.45;
  letter-spacing: normal;
  text-transform: none;
  white-space: normal;
  box-shadow: 0 8px 20px var(--admin-v2-backdrop);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--pg-editor-transition-fast), visibility var(--pg-editor-transition-fast);
  pointer-events: none;
  z-index: var(--z-tooltip, 70);
}

.editor-label-info:not(.editor-label-info--portaled):hover::before,
.editor-label-info:not(.editor-label-info--portaled):focus-visible::before,
.products-editor-label-info:not(.products-editor-label-info--portaled):hover::before,
.products-editor-label-info:not(.products-editor-label-info--portaled):focus-visible::before {
  opacity: 1;
  visibility: visible;
}

.editor-label-info--portaled::before,
.products-editor-label-info--portaled::before {
  content: none;
  display: none;
}

.editor-tooltip,
.editor-hint-tooltip {
  position: fixed;
  /*
   * Same stacking as editor-select__menu: above website-editor sheet (1250–1400).
   * Admin fallback: just above --z-modal when --website-editor-z-menu is unset.
   */
  z-index: var(--website-editor-z-menu, calc(var(--z-modal, 260) + 1));
  width: max-content;
  max-width: min(240px, calc(100vw - 16px));
  padding: 6px 10px;
  border-radius: var(--pg-editor-radius-lg);
  background: var(--pg-editor-color-text, var(--admin-v2-color-text));
  color: var(--pg-editor-color-surface);
  font-size: var(--pg-editor-font-size-xs);
  font-weight: var(--pg-editor-font-weight-regular);
  line-height: 1.45;
  letter-spacing: normal;
  text-transform: none;
  white-space: normal;
  box-shadow: 0 8px 20px var(--admin-v2-backdrop);
  pointer-events: none;
}

.editor-tooltip--measuring,
.editor-hint-tooltip--measuring {
  visibility: hidden;
}

.editor-label-info:hover,
.editor-label-info:focus-visible,
.products-editor-label-info:hover,
.products-editor-label-info:focus-visible {
  color: var(--text-secondary, var(--pg-editor-color-text-muted));
  outline: none;
}

.editor-label-info--information,
.products-editor-label-info--information {
  color: var(--warning);
}

.editor-label-info--information:hover,
.editor-label-info--information:focus-visible,
.products-editor-label-info--information:hover,
.products-editor-label-info--information:focus-visible {
  color: var(--warning-light, var(--warning));
  outline: none;
}

/*
 * Checkbox chips — Products/admin SSoT for editor surfaces.
 * Webshop does not load forms-admin.css / products.css; without these rules
 * native .form-checkbox sits flush against the label (no flex gap).
 */
:is(
  .editor-workspace-pane,
  .website-editor-pane,
  .website-editor-sheet,
  .editor-workspace-pane__body,
  .website-editor-pane__body,
  .admin-v2-entity-sheet
)
  .form-checkbox-wrapper,
:is(
  .editor-workspace-pane,
  .website-editor-pane,
  .website-editor-sheet,
  .editor-workspace-pane__body,
  .website-editor-pane__body,
  .admin-v2-entity-sheet
)
  .products-workspace-checkbox-chip {
  display: flex;
  align-items: center;
  gap: var(--pg-editor-space-3, var(--space-3, 0.75rem));
  width: 100%;
  box-sizing: border-box;
  min-height: calc(var(--pg-editor-control-height, var(--admin-control-field, 36px)) / 2);
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  cursor: pointer;
}

:is(
  .editor-workspace-pane,
  .website-editor-pane,
  .website-editor-sheet,
  .editor-workspace-pane__body,
  .website-editor-pane__body,
  .admin-v2-entity-sheet
)
  .form-checkbox-wrapper:has(input[type='checkbox']:disabled),
:is(
  .editor-workspace-pane,
  .website-editor-pane,
  .website-editor-sheet,
  .editor-workspace-pane__body,
  .website-editor-pane__body,
  .admin-v2-entity-sheet
)
  .form-checkbox-wrapper:has(input[type='checkbox']:disabled)
  .form-checkbox-label {
  color: var(--pg-editor-color-text-muted, var(--admin-v2-color-text-muted, var(--text-secondary)));
  cursor: not-allowed;
}

:is(
  .editor-workspace-pane,
  .website-editor-pane,
  .website-editor-sheet,
  .editor-workspace-pane__body,
  .website-editor-pane__body,
  .admin-v2-entity-sheet
)
  .products-workspace-checkbox-chip
  .form-checkbox-label,
:is(
  .editor-workspace-pane,
  .website-editor-pane,
  .website-editor-sheet,
  .editor-workspace-pane__body,
  .website-editor-pane__body,
  .admin-v2-entity-sheet
)
  .form-checkbox-wrapper
  .form-checkbox-label {
  flex: 1 1 auto;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: var(--pg-editor-space-2, var(--space-2, 0.5rem));
  font-size: var(--pg-editor-font-size-sm, var(--text-sm));
  line-height: var(--form-control-checkbox-label-line-height, var(--pg-editor-line-height-sm, 1.4));
  font-weight: var(--form-control-checkbox-label-font-weight, var(--pg-editor-font-weight-normal, 400));
  color: var(--pg-editor-color-text, var(--admin-v2-color-text, var(--text-primary)));
  cursor: pointer;
  user-select: none;
}

:is(
  .editor-workspace-pane,
  .website-editor-pane,
  .website-editor-sheet,
  .editor-workspace-pane__body,
  .website-editor-pane__body,
  .admin-v2-entity-sheet
)
  .products-workspace-checkbox-column {
  display: flex;
  flex-direction: column;
  gap: var(--pg-editor-space-3, var(--space-3, 0.75rem));
  min-width: 0;
}

/* Dropdowns */
.editor-select {
  position: relative;
  display: block;
  min-width: 0;
}

.editor-select--full {
  width: 100%;
}

.editor-select--auto {
  width: auto;
  max-width: 100%;
  align-self: flex-start;
}

.editor-select__trigger {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--pg-editor-space-2);
  width: 100%;
  min-width: 0;
  height: var(--pg-editor-control-height-lg);
  min-height: var(--pg-editor-control-height-lg);
  max-height: var(--pg-editor-control-height-lg);
  margin: 0;
  padding: 0 var(--pg-editor-space-3);
  border: 1px solid var(--pg-editor-color-border-strong);
  border-radius: var(--pg-editor-radius-lg);
  font-family: inherit;
  font-size: var(--pg-editor-font-size-sm);
  line-height: var(--pg-editor-control-height-lg);
  font-weight: var(--pg-editor-font-weight-normal);
  text-align: start;
  background: var(--pg-editor-color-surface);
  color: var(--pg-editor-color-text);
  cursor: pointer;
  transition: border-color var(--pg-editor-transition-fast),
    box-shadow var(--pg-editor-transition-fast);
}

.editor-select__trigger:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.editor-select__trigger:focus-visible {
  outline: 2px solid var(--pg-editor-color-brand-100);
  outline-offset: 0;
  border-color: var(--pg-editor-color-brand-500);
}

.editor-select__value {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: inherit;
  line-height: inherit;
}

.editor-select__chevron {
  flex: 0 0 auto;
  width: 1rem;
  height: 1rem;
  background: currentColor;
  opacity: 0.55;
  clip-path: polygon(20% 35%, 50% 65%, 80% 35%, 72% 27%, 50% 49%, 28% 27%);
  transform: translateY(1px);
}

.editor-select__menu {
  position: fixed;
  /* Above website-editor entity sheet (1400); fallback when token unset (admin). */
  z-index: var(--website-editor-z-menu, 1500);
  box-sizing: border-box;
  margin: 0;
  padding: var(--pg-editor-space-1);
  list-style: none;
  border: 1px solid var(--pg-editor-color-border-strong);
  border-radius: var(--pg-editor-radius-lg);
  background: var(--pg-editor-color-surface);
  box-shadow: var(--pg-editor-shadow-sm);
  max-height: min(16rem, 50vh);
  overflow-y: auto;
}

.editor-select__option {
  padding: var(--pg-editor-space-2) var(--pg-editor-space-3);
  border-radius: calc(var(--pg-editor-radius-lg) - 2px);
  font-size: var(--pg-editor-font-size-sm);
  color: var(--pg-editor-color-text);
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.editor-select__option:hover:not(.is-disabled),
.editor-select__option.is-selected,
.editor-select__option.is-active {
  background: color-mix(in srgb, var(--pg-editor-color-brand-600) 10%, var(--pg-editor-color-surface));
}

.editor-select__option.is-disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* In-DOM color picker (portaled popover — mirrors editor-select__menu stacking). */
.editor-color-picker {
  display: block;
  min-width: 0;
}

/*
 * Trigger shares the .editor-color-swatch element — keep swatch border/size;
 * only reset button chrome that would fight the color fill.
 */
.editor-color-picker__trigger {
  margin: 0;
  padding: 0;
  cursor: pointer;
  background-clip: padding-box;
}

.editor-color-picker__trigger:focus-visible {
  outline: 2px solid var(--pg-editor-color-brand-500, var(--admin-v2-color-primary));
  outline-offset: 2px;
}

.editor-color-picker__panel {
  position: fixed;
  /* Above website-editor entity sheet (1400); fallback when token unset (admin). */
  z-index: var(--website-editor-z-menu, 1500);
  box-sizing: border-box;
  margin: 0;
  padding: var(--pg-editor-space-3, 0.75rem);
  border: 1px solid var(--pg-editor-color-border-strong, var(--admin-v2-border-default));
  border-radius: var(--pg-editor-radius-lg, 8px);
  background: var(--pg-editor-color-surface);
  box-shadow: var(--pg-editor-shadow-sm, var(--admin-v2-shadow-lg));
  max-height: min(24rem, 70vh);
  overflow-x: hidden;
  overflow-y: auto;
  color: var(--pg-editor-color-text, var(--admin-v2-color-text));
}

.editor-color-picker__section {
  display: flex;
  flex-direction: column;
  gap: var(--pg-editor-space-2, 0.5rem);
}

.editor-color-picker__section + .editor-color-picker__section {
  margin-top: var(--pg-editor-space-3, 0.75rem);
  padding-top: var(--pg-editor-space-3, 0.75rem);
  border-top: 1px solid var(--pg-editor-color-border, var(--admin-v2-border-default));
}

.editor-color-picker__section-label {
  font-size: var(--pg-editor-font-size-xs, 12px);
  line-height: var(--pg-editor-line-height-sm, 1.35);
  font-weight: var(--pg-editor-font-weight-semibold, 600);
  color: var(--pg-editor-color-text-muted, var(--admin-v2-color-text-muted));
}

.editor-color-picker__swatches {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pg-editor-space-2, 0.5rem);
}

.editor-color-picker__swatch {
  width: 1.75rem;
  height: 1.75rem;
  padding: 0;
  border: 1px solid var(--pg-editor-color-border-strong, var(--admin-v2-border-default));
  border-radius: var(--pg-editor-radius-md, 6px);
  cursor: pointer;
  background-clip: padding-box;
}

.editor-color-picker__swatch--active {
  outline: 2px solid var(--pg-editor-color-accent, var(--pg-editor-color-brand-500));
  outline-offset: 2px;
}

.editor-color-picker__swatch:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.editor-color-picker__theme-default {
  width: 100%;
  justify-content: center;
}

.editor-color-picker__disclosure {
  appearance: none;
  display: flex;
  align-items: center;
  gap: var(--pg-editor-space-2, 0.5rem);
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--pg-editor-color-text, var(--admin-v2-color-text));
  font-size: var(--pg-editor-font-size-sm, 14px);
  font-weight: var(--pg-editor-font-weight-medium, 500);
  line-height: var(--pg-editor-line-height-sm, 1.35);
  text-align: start;
  cursor: pointer;
}

.editor-color-picker__disclosure-chevron {
  flex: 0 0 auto;
  width: 0.75rem;
  height: 0.75rem;
  background: currentColor;
  opacity: 0.55;
  clip-path: polygon(20% 35%, 50% 65%, 80% 35%, 72% 27%, 50% 49%, 28% 27%);
  transition: transform var(--pg-editor-transition-fast, 120ms ease);
}

.editor-color-picker__disclosure-chevron--open {
  transform: rotate(180deg);
}

.editor-color-picker__custom {
  display: flex;
  flex-direction: column;
  gap: var(--pg-editor-space-2, 0.5rem);
  margin-top: var(--pg-editor-space-2, 0.5rem);
}

.editor-color-picker__field-label {
  font-size: var(--pg-editor-font-size-xs, 12px);
  line-height: var(--pg-editor-line-height-sm, 1.35);
  font-weight: var(--pg-editor-font-weight-medium, 500);
  color: var(--pg-editor-color-text-muted, var(--admin-v2-color-text-muted));
}

.editor-color-picker__hex {
  width: 100%;
  min-width: 0;
}

.editor-color-picker__slider {
  width: 100%;
  margin: 0;
  accent-color: var(--pg-editor-color-brand-600, var(--admin-v2-color-primary));
}

.editor-color-picker__slider--hue {
  background: linear-gradient(
    to right,
    /* theme-literal-exception: color-picker-spectrum */ #ff0000,
    /* theme-literal-exception: color-picker-spectrum — HSV content, not Admin chrome */
  /* theme-literal-exception: color-picker-spectrum */ #ffff00,
    /* theme-literal-exception: color-picker-spectrum */ #00ff00,
    /* theme-literal-exception: color-picker-spectrum */ #00ffff,
    /* theme-literal-exception: color-picker-spectrum */ #0000ff,
    /* theme-literal-exception: color-picker-spectrum */ #ff00ff,
    /* theme-literal-exception: color-picker-spectrum */ #ff0000
  );
  border-radius: 999px;
  height: 0.5rem;
}

/* Context menu */
.website-editor-context-menu {
  width: min(var(--pg-editor-context-menu-width), calc(100vw - var(--pg-editor-space-6)));
  padding: var(--pg-editor-space-2);
  background: var(--pg-editor-color-surface);
  border-color: var(--pg-editor-color-border);
  border-radius: var(--pg-editor-radius-xl);
  box-shadow: var(--pg-editor-shadow-sm);
}

.website-editor-context-menu__heading {
  font-size: var(--pg-editor-font-size-sm);
  line-height: var(--pg-editor-line-height-sm);
  font-weight: var(--pg-editor-font-weight-semibold);
  color: var(--pg-editor-color-text);
}

.website-editor-context-menu__item {
  appearance: none;
  display: block;
  width: 100%;
  text-align: start;
  border: none;
  background: transparent;
  cursor: pointer;
  min-height: var(--pg-editor-control-height-md);
  padding: var(--pg-editor-space-2) var(--pg-editor-space-3);
  border-radius: var(--pg-editor-radius-lg);
  font-size: var(--pg-editor-font-size-sm);
  line-height: var(--pg-editor-line-height-sm);
  color: var(--pg-editor-color-text);
}

.website-editor-context-menu__item:hover {
  background: var(--pg-editor-color-surface-muted);
}

.website-editor-context-menu__item:focus-visible {
  outline: 2px solid var(--pg-editor-color-brand-500);
  outline-offset: 2px;
}

.website-editor-context-menu__item--danger {
  color: var(--pg-editor-color-danger);
}

/* Structure panel — Website Editor page structure (V2 SSoT) */
.editor-workspace-section-list,
.website-editor-section-list {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  min-height: 0;
  height: 100%;
  color: var(--pg-editor-color-text);
}

.editor-workspace-section-list__columns, .website-editor-section-list__columns {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(15rem, 1fr);
  min-height: 0;
  overflow: hidden;
  overscroll-behavior: contain;
}

.editor-workspace-section-list__columns--order, .website-editor-section-list__columns--order,
.editor-workspace-section-list__columns--add, .website-editor-section-list__columns--add {
  grid-template-columns: minmax(0, 1fr);
}

.editor-workspace-section-list__columns--add, .website-editor-section-list__columns--add > .editor-workspace-section-list__add, .website-editor-section-list__add {
  border-left: none;
}


:is(.editor-workspace-section-list__columns, .website-editor-section-list__columns)
  > :is(
    .editor-workspace-section-list__body,
    .website-editor-section-list__body,
    .editor-workspace-section-list__add,
    .website-editor-section-list__add
  ) {
  min-height: 0;
  max-height: 100%;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.editor-workspace-section-list__header, .website-editor-section-list__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--pg-editor-space-4);
  padding: var(--pg-editor-space-4) var(--pg-editor-pane-padding-inline)
    var(--pg-editor-space-3);
  border-bottom: 1px solid var(--pg-editor-color-border);
}

.editor-workspace-section-list__title, .website-editor-section-list__title,
.editor-workspace-section-list__subtitle, .website-editor-section-list__subtitle {
  margin: 0;
  color: var(--pg-editor-color-text);
}

.editor-workspace-section-list__title, .website-editor-section-list__title {
  font-size: var(--pg-editor-font-size-lg);
  line-height: var(--pg-editor-line-height-lg);
  font-weight: var(--pg-editor-font-weight-semibold);
}

.editor-workspace-section-list__subtitle, .website-editor-section-list__subtitle {
  font-size: var(--pg-editor-font-size-sm);
  line-height: var(--pg-editor-line-height-sm);
}

.editor-workspace-section-list__body, .website-editor-section-list__body {
  padding: var(--pg-editor-space-3) var(--pg-editor-pane-padding-inline);
  border-right: 1px solid var(--pg-editor-color-border);
}

.editor-workspace-section-list__items, .website-editor-section-list__items {
  display: flex;
  flex-direction: column;
  gap: var(--pg-editor-space-1);
  margin: 0;
  padding: 0;
  list-style: none;
}

.editor-workspace-section-list__row, .website-editor-section-list__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--pg-editor-space-2);
  align-items: center;
  padding: 0;
  border: none;
  border-bottom: 1px solid var(--pg-editor-color-border);
  border-radius: 0;
  background: transparent;
}

:is(.editor-workspace-section-list__row, .website-editor-section-list__row):last-child {
  border-bottom: none;
}

.editor-workspace-section-list__item, .website-editor-section-list__item {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: var(--pg-editor-space-2);
  min-width: 0;
  width: 100%;
  min-height: var(--pg-editor-control-height-lg);
  padding: var(--pg-editor-space-2);
  border: 1px solid transparent;
  border-radius: var(--pg-editor-radius-lg);
  background: transparent;
  color: var(--pg-editor-color-text);
  font: inherit;
  font-size: var(--pg-editor-font-size-sm);
  line-height: var(--pg-editor-line-height-sm);
  font-weight: var(--pg-editor-font-weight-medium);
  text-align: start;
  cursor: pointer;
}

:is(.editor-workspace-section-list__item, .website-editor-section-list__item):hover,
:is(.editor-workspace-section-list__item--active, .website-editor-section-list__item--active),
:is(.editor-workspace-section-list__item, .website-editor-section-list__item)[aria-current="true"] {
  background: var(--pg-editor-color-surface-muted);
  border-color: var(--pg-editor-color-border);
}

:is(.editor-workspace-section-list__item, .website-editor-section-list__item):focus-visible {
  outline: 2px solid var(--pg-editor-color-brand-500);
  outline-offset: 2px;
}

.editor-workspace-section-list__actions, .website-editor-section-list__actions {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--pg-editor-space-1);
  max-width: 100%;
}

.editor-workspace-section-list__add, .website-editor-section-list__add {
  padding: var(--pg-editor-space-4) var(--pg-editor-pane-padding-inline);
  background: var(--pg-editor-color-surface-muted);
  border-left: 1px solid var(--pg-editor-color-border);
}

.editor-workspace-section-list__item-label, .website-editor-section-list__item-label {
  display: inline-flex;
  align-items: center;
  gap: var(--pg-editor-space-2);
  min-width: 0;
}

.editor-workspace-section-list__item--disabled, .website-editor-section-list__item--disabled {
  opacity: 0.72;
}

.editor-workspace-section-list__status-badge, .website-editor-section-list__status-badge {
  flex-shrink: 0;
  padding: 0 var(--pg-editor-space-2);
  border-radius: var(--pg-editor-radius-md);
  background: var(--pg-editor-color-surface-muted);
  color: var(--pg-editor-color-text-muted);
  font-size: var(--pg-editor-font-size-xs);
  line-height: var(--pg-editor-line-height-xs);
  font-weight: var(--pg-editor-font-weight-medium);
}

/*
 * Panel-embedded variant of the orderable list role.
 * Used when the list lives inside an admin-v2 SoftPanel instead of a full-bleed
 * editor pane: no pane inset, header/footer align with the card padding.
 */
.editor-workspace-section-list--panel {
  container: editor-section-list / inline-size;
  display: grid;
  gap: var(--pg-editor-space-3);
  min-width: 0;
}

.editor-workspace-section-list__header--panel {
  padding: 0 0 var(--pg-editor-space-2);
  gap: var(--pg-editor-space-2);
  align-items: center;
}

.editor-workspace-section-list--panel .editor-workspace-section-list__row {
  padding-block: var(--pg-editor-space-1);
}

.editor-workspace-section-list--panel .editor-workspace-section-list__actions {
  --pg-editor-icon-button-size: 32px;
}

/* Narrow panel column: actions move under the item instead of squeezing the label. */
@container editor-section-list (max-width: 24rem) {
  .editor-workspace-section-list__row {
    grid-template-columns: minmax(0, 1fr);
    row-gap: var(--pg-editor-space-1);
    padding-block: var(--pg-editor-space-2);
  }

  .editor-workspace-section-list__actions {
    justify-content: flex-start;
    padding-inline-start: var(--pg-editor-space-2);
  }
}

.editor-workspace-section-list__heading {
  display: inline-flex;
  align-items: baseline;
  gap: var(--pg-editor-space-2);
  min-width: 0;
  margin: 0;
  color: var(--pg-editor-color-text);
  font-size: var(--pg-editor-font-size-sm);
  line-height: var(--pg-editor-line-height-sm);
  font-weight: var(--pg-editor-font-weight-semibold);
}

.editor-workspace-section-list__count {
  color: var(--pg-editor-color-text-muted);
  font-size: var(--pg-editor-font-size-xs);
  line-height: var(--pg-editor-line-height-xs);
  font-weight: var(--pg-editor-font-weight-normal);
}

.editor-workspace-section-list__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--pg-editor-space-2);
  padding-top: var(--pg-editor-space-2);
  border-top: 1px solid var(--pg-editor-color-border);
}

/* Stacked label: title line plus a muted meta line under it. */
.editor-workspace-section-list__item-label--stacked {
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  flex: 1 1 auto;
}

.editor-workspace-section-list__item-title {
  display: inline-flex;
  align-items: center;
  gap: var(--pg-editor-space-1);
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
}

.editor-workspace-section-list__meta {
  color: var(--pg-editor-color-text-muted);
  font-size: var(--pg-editor-font-size-xs);
  line-height: var(--pg-editor-line-height-xs);
  font-weight: var(--pg-editor-font-weight-normal);
  overflow-wrap: anywhere;
}

/* Nested (submenu) entries stay readable without a second list level. */
.editor-workspace-section-list__item--child {
  margin-inline-start: var(--pg-editor-space-4);
  border-inline-start: 2px solid var(--pg-editor-color-border);
  border-start-start-radius: 0;
  border-end-start-radius: 0;
}

/* Broken reference: visible, not silent. */
.editor-workspace-section-list__item--warning,
.editor-workspace-section-list__item--warning:hover {
  border-color: var(--pg-editor-color-danger);
  background: var(--pg-editor-color-danger-soft);
}

.editor-workspace-section-list__warning-icon {
  display: inline-flex;
  align-items: center;
  color: var(--pg-editor-color-danger);
}

.editor-workspace-section-list__error, .website-editor-section-list__error {
  margin: 0;
  padding: 0 var(--pg-editor-pane-padding-inline) var(--pg-editor-space-3);
  color: var(--pg-editor-color-danger);
  font-size: var(--pg-editor-font-size-sm);
  line-height: var(--pg-editor-line-height-sm);
}

.editor-workspace-section-list__add-grid, .website-editor-section-list__add-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 9.5rem), 1fr));
  gap: var(--pg-editor-space-2);
  margin-top: var(--pg-editor-space-2);
}

.editor-workspace-section-list__add-button, .website-editor-section-list__add-button {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--pg-editor-space-2);
  min-height: var(--pg-editor-control-height-md);
  padding: var(--pg-editor-space-2) var(--pg-editor-space-3);
  border: 1px solid var(--pg-editor-color-border);
  border-radius: var(--pg-editor-radius-lg);
  background: var(--pg-editor-color-surface-muted);
  color: var(--pg-editor-color-text);
  font: inherit;
  font-size: var(--pg-editor-font-size-sm);
  line-height: var(--pg-editor-line-height-sm);
  text-align: start;
  cursor: pointer;
}

.editor-workspace-section-list__add-button, .website-editor-section-list__add-button:hover {
  background: var(--pg-editor-color-bg);
  border-color: var(--pg-editor-color-border-strong);
}

.editor-workspace-section-list__add-button, .website-editor-section-list__add-button:focus-visible {
  outline: 2px solid var(--pg-editor-color-brand-500);
  outline-offset: 2px;
}

/* Dialogs */
.editor-workspace-dialog {
  width: min(var(--pg-editor-dialog-width), calc(100vw - var(--pg-editor-space-8)));
  gap: var(--pg-editor-space-4);
  padding: var(--pg-editor-space-5);
  border-color: var(--pg-editor-color-border);
  border-radius: var(--pg-editor-radius-xl);
  background: var(--pg-editor-color-surface);
  box-shadow: var(--pg-editor-shadow-sm);
}

.editor-workspace-dialog__title {
  font-size: var(--pg-editor-font-size-lg);
  line-height: var(--pg-editor-line-height-lg);
  font-weight: var(--pg-editor-font-weight-semibold);
}

.editor-workspace-dialog__text {
  font-size: var(--pg-editor-font-size-sm);
  line-height: var(--pg-editor-line-height-sm);
  color: var(--pg-editor-color-text-muted);
}

.editor-workspace-dialog__button {
  appearance: none;
  border: 1px solid var(--pg-editor-color-border-strong);
  background: var(--pg-editor-color-surface);
  color: var(--pg-editor-color-text);
  cursor: pointer;
  min-height: var(--pg-editor-control-height-md);
  padding: var(--pg-editor-space-2) var(--pg-editor-space-4);
  border-radius: var(--pg-editor-radius-lg);
  font-size: var(--pg-editor-font-size-sm);
  line-height: var(--pg-editor-line-height-sm);
  font-weight: var(--pg-editor-font-weight-medium);
}

.editor-workspace-dialog__button:focus-visible {
  outline: 2px solid var(--pg-editor-color-brand-500);
  outline-offset: 2px;
}

.editor-workspace-dialog__button--primary {
  background: var(--pg-editor-color-brand-500);
  border-color: var(--pg-editor-color-brand-500);
  color: var(--pg-editor-color-surface);
}

.editor-workspace-dialog__button--primary:hover:not(:disabled) {
  background: var(--pg-editor-color-brand-600);
  border-color: var(--pg-editor-color-brand-600);
}

.editor-workspace-dialog__button--danger {
  background: var(--pg-editor-color-danger);
  border-color: var(--pg-editor-color-danger);
  color: var(--pg-editor-color-surface);
}

.editor-workspace-dialog-layer__backdrop {
  background: var(--pg-editor-backdrop);
}

/* Primary sheet buttons inside editor workspace */
.editor-workspace-sheet .website-editor-sheet__btn--primary,
:is(.editor-workspace-pane, .website-editor-pane) .website-editor-sheet__btn--primary {
  min-height: var(--pg-editor-control-height-md);
  border-radius: var(--pg-editor-radius-lg);
  font-size: var(--pg-editor-font-size-sm);
  font-weight: var(--pg-editor-font-weight-medium);
}

/* Opening hours & grouped fields — consistent rhythm, lighter containers */
.website-editor-opening-hours,
.website-editor-opening-hours__days {
  gap: var(--pg-editor-field-gap);
}

.website-editor-announcements {
  gap: var(--pg-editor-field-group-gap);
}

.website-editor-announcement {
  gap: var(--pg-editor-field-gap);
  padding: var(--pg-editor-space-4);
  border: 1px solid var(--pg-editor-color-border);
  border-radius: var(--pg-editor-radius-lg);
  background: var(--pg-editor-color-surface);
}

.website-editor-product-selection {
  gap: var(--pg-editor-field-gap);
}

.website-editor-content-tabs {
  margin-block-end: var(--pg-editor-space-4);
}

.website-editor-content-tabs__list {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: var(--pg-editor-space-2);
  overflow-x: auto;
  max-width: 100%;
}

.website-editor-content-tabs__tab {
  flex: 0 0 auto;
  min-height: var(--pg-editor-control-height-md);
  max-width: 12rem;
  padding: var(--pg-editor-space-2) var(--pg-editor-space-3);
  border: 1px solid var(--pg-editor-color-border);
  border-radius: var(--pg-editor-radius-md);
  background: var(--pg-editor-color-surface);
  color: var(--pg-editor-color-text-muted);
  font-size: var(--pg-editor-font-size-sm);
  font-weight: var(--pg-editor-font-weight-medium);
  line-height: var(--pg-editor-line-height-sm);
  cursor: pointer;
  transition: background-color var(--pg-editor-transition-fast),
    border-color var(--pg-editor-transition-fast),
    color var(--pg-editor-transition-fast);
}

.website-editor-content-tabs__tab-inner {
  display: inline-flex;
  align-items: center;
  gap: var(--pg-editor-space-2);
  min-width: 0;
  max-width: 100%;
}

.website-editor-content-tabs__thumb {
  flex: 0 0 auto;
  display: inline-flex;
  width: var(--pg-editor-space-5);
  height: var(--pg-editor-space-5);
  overflow: hidden;
  border-radius: var(--pg-editor-radius-sm, 4px);
  background: var(--pg-editor-color-bg);
}

.website-editor-content-tabs__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.website-editor-content-tabs__label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.website-editor-content-tabs__status {
  flex: 0 0 auto;
  color: var(--pg-editor-color-text-muted);
  font-size: var(--pg-editor-font-size-xs, 0.75rem);
}

.website-editor-content-tabs__tab:hover:not(:disabled) {
  background: var(--pg-editor-color-bg);
  color: var(--pg-editor-color-text);
}

.website-editor-content-tabs__tab--active,
.website-editor-content-tabs__tab[aria-selected="true"] {
  border-color: var(--pg-editor-color-border-strong);
  background: var(--pg-editor-color-surface-muted);
  color: var(--pg-editor-color-text);
}

.website-editor-content-tabs__add {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: var(--pg-editor-control-height-md);
  min-height: var(--pg-editor-control-height-md);
  padding: 0;
  border: 1px dashed var(--pg-editor-color-border-strong);
  border-radius: var(--pg-editor-radius-md);
  background: transparent;
  color: var(--pg-editor-color-text-muted);
  cursor: pointer;
}

.website-editor-content-tabs__add:hover:not(:disabled) {
  border-color: var(--pg-editor-color-brand-600);
  color: var(--pg-editor-color-brand-600);
  background: var(--pg-editor-color-bg);
}

/* Content groups — natural height (opt-in; Style tiles keep stretch). */
.editor-form-grid--content-natural {
  align-items: start;
}

.editor-form-grid--content-natural > .editor-form-group {
  height: auto;
}

.editor-form-grid--content-natural > .editor-form-group > .editor-form-group__body {
  flex: initial;
}

/* Visual focus-point primitive */
.editor-image-focus {
  display: grid;
  gap: var(--pg-editor-field-gap);
}

.editor-image-focus__panel {
  display: grid;
  gap: var(--pg-editor-space-3);
}

.editor-image-focus__stage {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 1px solid var(--pg-editor-color-border);
  border-radius: var(--pg-editor-radius-md);
  background: var(--pg-editor-color-bg);
  cursor: crosshair;
  outline: none;
}

.editor-image-focus__stage:focus-visible {
  box-shadow: 0 0 0 2px var(--pg-editor-color-brand-600);
}

.editor-image-focus__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
}

.editor-image-focus__marker {
  position: absolute;
  width: 12px;
  height: 12px;
  margin: -6px 0 0 -6px;
  border: 2px solid var(--pg-editor-color-surface);
  border-radius: 999px;
  background: var(--pg-editor-color-brand-600);
  box-shadow: 0 0 0 1px var(--pg-editor-color-border-strong);
  pointer-events: none;
}

.editor-image-focus__sliders {
  display: grid;
  gap: var(--pg-editor-space-2);
}

.editor-image-focus__slider {
  display: grid;
  gap: var(--pg-editor-space-1);
  font-size: var(--pg-editor-font-size-sm);
  color: var(--pg-editor-color-text);
}

.editor-image-focus__slider input[type='range'] {
  width: 100%;
}

/*
 * Legacy class names (pre–EditorContentTabs). Kept as aliases so any leftover
 * markup still gets the same V100 tab chrome — do not use for new UI.
 * Canonical: .website-editor-content-tabs*
 */
.editor-form-item-nav {
  margin-block-end: var(--pg-editor-space-4);
}

.editor-form-item-nav__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--pg-editor-space-2);
  list-style: none;
  margin: 0;
  padding: 0;
}

.editor-form-item-nav__item {
  display: inline-flex;
}

.editor-form-item-nav__button {
  min-height: var(--pg-editor-control-height-md);
  padding: var(--pg-editor-space-2) var(--pg-editor-space-3);
  border: 1px solid var(--pg-editor-color-border);
  border-radius: var(--pg-editor-radius-lg);
  background: var(--pg-editor-color-surface);
  color: var(--pg-editor-color-text-muted);
  font-size: var(--pg-editor-font-size-sm);
  font-weight: var(--pg-editor-font-weight-medium);
  line-height: var(--pg-editor-line-height-sm);
  cursor: pointer;
}

.editor-form-item-nav__button:hover:not(:disabled) {
  background: var(--pg-editor-color-bg);
  color: var(--pg-editor-color-text);
}

.editor-form-item-nav__button--active,
.editor-form-item-nav__button[aria-selected="true"],
.editor-form-item-nav__button[aria-current="true"] {
  border-color: var(--pg-editor-color-border-strong);
  background: var(--pg-editor-color-surface-muted);
  color: var(--pg-editor-color-text);
}

.editor-form-item-nav__add {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--pg-editor-control-height-md);
  min-height: var(--pg-editor-control-height-md);
  padding: 0;
  border: 1px dashed var(--pg-editor-color-border-strong);
  border-radius: var(--pg-editor-radius-lg);
  background: transparent;
  color: var(--pg-editor-color-text-muted);
  cursor: pointer;
}

.website-editor-opening-hours__day-panel {
  display: flex;
  flex-direction: column;
  gap: var(--pg-editor-field-gap);
}

/*
 * Editor Form Language — groups (EditorGroup).
 * Role: editor card title/chrome — same SoftPanel hangpoint as admin entity sheets
 * (.admin-v2-soft-panel / .admin-v2-soft-panel__title). No grey title strip.
 */
:is(.editor-workspace-pane, .website-editor-pane, .website-editor-sheet, .editor-workspace-pane__body, .website-editor-pane__body) .editor-form-group {
  display: grid;
  gap: var(--admin-v2-space-4, var(--pg-editor-space-4));
  padding: var(--admin-v2-card-padding-y, var(--pg-editor-space-4))
    var(--admin-v2-card-padding-x, var(--pg-editor-space-4));
  border: 1px solid var(--admin-v2-border-default, var(--pg-editor-color-border));
  border-radius: var(--admin-v2-radius-card, var(--pg-editor-radius-lg));
  background: var(--admin-v2-color-surface, var(--pg-editor-color-surface));
  box-shadow: var(--admin-v2-shadow-xs, none);
  overflow: hidden;
  min-width: 0;
  max-width: 100%;
}

/*
 * Group titles — SoftPanel title SSoT (sheet-progression.css).
 * Kill legacy grey-bar / orange-strip chrome on these selectors.
 */
:is(.editor-workspace-pane, .website-editor-pane, .website-editor-sheet, .editor-workspace-pane__body, .website-editor-pane__body, .admin-v2-entity-sheet)
  .editor-form-group
  > .admin-v2-soft-panel__title,
:is(.editor-workspace-pane, .website-editor-pane, .website-editor-sheet, .editor-workspace-pane__body, .website-editor-pane__body, .admin-v2-entity-sheet)
  .editor-form-heading__title,
:is(.editor-workspace-pane, .website-editor-pane, .website-editor-sheet, .editor-workspace-pane__body, .website-editor-pane__body, .admin-v2-entity-sheet)
  .products-workspace-section__title.editor-form-heading__title,
:is(.editor-workspace-pane, .website-editor-pane, .website-editor-sheet, .editor-workspace-pane__body, .website-editor-pane__body, .admin-v2-entity-sheet)
  .block-edit-modal__typography-group
  > .products-workspace-section__title {
  display: flex;
  align-items: center;
  gap: var(--admin-v2-space-2, var(--pg-editor-space-2));
  box-sizing: border-box;
  width: auto;
  min-height: 0;
  margin: 0;
  padding: 0;
  font-family: var(--admin-v2-font-family, inherit);
  font-size: calc(var(--admin-v2-font-size-section-title, 16px) + 4px);
  font-weight: var(--admin-v2-font-weight-semibold, 600);
  line-height: calc(var(--admin-v2-line-height-section-title, 24px) + 4px);
  letter-spacing: var(--admin-v2-letter-spacing, 0);
  text-transform: none;
  color: var(--admin-v2-color-text, var(--pg-editor-color-text));
  background: transparent;
  border-bottom: none;
}

/* Panel tile grids — SoftPanel chrome. Style uses equal 2-col CSS grid
 * (EditorGrid panel-tiles); Typography keeps 1/3–2/3 weighted grid.
 * Other equal groups (no --2/--3/--4) stay stacked column. */
:is(.editor-workspace-pane, .website-editor-pane, .website-editor-sheet, .editor-workspace-pane__body, .website-editor-pane__body, .admin-v2-entity-sheet)
  .block-edit-modal__typography-groups:not(.editor-form-grid--weights-one-third-two-thirds):not(.editor-form-grid--2):not(.editor-form-grid--3):not(.editor-form-grid--4) {
  display: flex;
  flex-direction: column;
  gap: var(--admin-v2-space-5, var(--pg-editor-space-5));
  max-width: none;
  width: 100%;
}

:is(.editor-workspace-pane, .website-editor-pane, .website-editor-sheet, .editor-workspace-pane__body, .website-editor-pane__body, .admin-v2-entity-sheet)
  .block-edit-modal__typography-groups.editor-form-grid--2,
:is(.editor-workspace-pane, .website-editor-pane, .website-editor-sheet, .editor-workspace-pane__body, .website-editor-pane__body, .admin-v2-entity-sheet)
  .block-edit-modal__typography-groups.editor-form-grid--3,
:is(.editor-workspace-pane, .website-editor-pane, .website-editor-sheet, .editor-workspace-pane__body, .website-editor-pane__body, .admin-v2-entity-sheet)
  .block-edit-modal__typography-groups.editor-form-grid--4 {
  display: grid;
  gap: var(--admin-v2-space-5, var(--pg-editor-space-5));
  max-width: none;
  width: 100%;
  align-items: stretch;
}

:is(.editor-workspace-pane, .website-editor-pane, .website-editor-sheet, .editor-workspace-pane__body, .website-editor-pane__body, .admin-v2-entity-sheet)
  .block-edit-modal__typography-groups.editor-form-grid--2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

:is(.editor-workspace-pane, .website-editor-pane, .website-editor-sheet, .editor-workspace-pane__body, .website-editor-pane__body, .admin-v2-entity-sheet)
  .block-edit-modal__typography-groups.editor-form-grid--weights-one-third-two-thirds {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: var(--admin-v2-space-5, var(--pg-editor-space-5));
  max-width: none;
  width: 100%;
  align-items: stretch;
}

/* Typography tab — settings column + larger sample preview (webshop + admin panes) */
:is(.editor-workspace-pane, .website-editor-pane, .website-editor-sheet, .editor-workspace-pane__body, .website-editor-pane__body)
  .block-edit-modal__typography-settings {
  display: flex;
  flex-direction: column;
  gap: var(--admin-v2-space-5, var(--pg-editor-space-5));
  min-width: 0;
}

/*
 * SoftPanel form SSoT inside editor panes (Role Contract):
 * labels / field stack / controls / hints / typography preview
 * hang on the same admin-v2 tokens as entity-sheet SoftPanel.
 */
:is(.editor-workspace-pane, .website-editor-pane, .website-editor-sheet, .editor-workspace-pane__body, .website-editor-pane__body)
  .editor-form-field,
:is(.editor-workspace-pane, .website-editor-pane, .website-editor-sheet, .editor-workspace-pane__body, .website-editor-pane__body)
  .products-editor-field,
:is(.editor-workspace-pane, .website-editor-pane, .website-editor-sheet, .editor-workspace-pane__body, .website-editor-pane__body)
  .products-workspace-typography-field {
  display: flex;
  flex-direction: column;
  gap: 0;
  row-gap: 0;
  min-width: 0;
}

:is(.editor-workspace-pane, .website-editor-pane, .website-editor-sheet, .editor-workspace-pane__body, .website-editor-pane__body)
  .editor-form-label,
:is(.editor-workspace-pane, .website-editor-pane, .website-editor-sheet, .editor-workspace-pane__body, .website-editor-pane__body)
  .editor-form-field__label,
:is(.editor-workspace-pane, .website-editor-pane, .website-editor-sheet, .editor-workspace-pane__body, .website-editor-pane__body)
  .products-editor-label {
  display: block;
  margin: 0 0 var(--admin-v2-label-gap, 6px);
  font-family: var(--admin-v2-font-family, inherit);
  font-size: var(--admin-field-label-font-size, var(--admin-font-size-label, calc(var(--admin-font-size-base, 14px) + 2px)));
  font-weight: var(--admin-field-label-font-weight, var(--admin-v2-font-weight-semibold, 600));
  line-height: var(--admin-v2-line-height-section-title, 24px);
  letter-spacing: var(--admin-v2-letter-spacing, 0);
  color: var(--admin-v2-color-text, var(--pg-editor-color-text));
}

:is(.editor-workspace-pane, .website-editor-pane, .website-editor-sheet, .editor-workspace-pane__body, .website-editor-pane__body)
  .editor-form-field__hint,
:is(.editor-workspace-pane, .website-editor-pane, .website-editor-sheet, .editor-workspace-pane__body, .website-editor-pane__body)
  .products-editor-hint {
  margin: 0;
  margin-top: var(--admin-v2-label-gap, 6px);
  font-size: var(--admin-v2-font-size-meta, 12px);
  font-weight: var(--admin-v2-font-weight-normal, 400);
  line-height: var(--admin-v2-line-height-meta, 18px);
  color: var(--admin-v2-color-text-muted, var(--pg-editor-color-text-muted));
}

:is(.editor-workspace-pane, .website-editor-pane, .website-editor-sheet, .editor-workspace-pane__body, .website-editor-pane__body)
  .editor-select__trigger,
:is(.editor-workspace-pane, .website-editor-pane, .website-editor-sheet, .editor-workspace-pane__body, .website-editor-pane__body)
  .editor-form-field__input:not([type='color']):not(textarea),
:is(.editor-workspace-pane, .website-editor-pane, .website-editor-sheet, .editor-workspace-pane__body, .website-editor-pane__body)
  input.form-input.products-workspace-field:not(.products-workspace-field--range):not(.products-workspace-field--color):not(.products-workspace-search-field__input),
:is(.editor-workspace-pane, .website-editor-pane, .website-editor-sheet, .editor-workspace-pane__body, .website-editor-pane__body)
  .form-select.products-workspace-field {
  box-sizing: border-box;
  width: 100%;
  height: var(--admin-v2-field-control-height, 36px);
  min-height: var(--admin-v2-field-control-height, 36px);
  max-height: var(--admin-v2-field-control-height, 36px);
  padding: 0 var(--admin-v2-field-control-padding-x, 12px);
  border: 1.5px solid var(--admin-v2-border-default, var(--pg-editor-color-border));
  border-radius: var(--admin-v2-field-control-radius, 8px);
  background: var(--admin-v2-color-surface, var(--pg-editor-color-surface));
  color: var(--admin-v2-color-text, var(--pg-editor-color-text));
  font-family: var(--admin-v2-font-family, inherit);
  font-size: var(--admin-v2-field-control-font-size, 14px);
  line-height: var(--admin-v2-field-control-line-height, 20px);
  font-weight: var(--admin-v2-font-weight-medium, 500);
  box-shadow: none;
}

:is(.editor-workspace-pane, .website-editor-pane, .website-editor-sheet, .editor-workspace-pane__body, .website-editor-pane__body)
  .form-select.products-workspace-field {
  padding-right: calc(var(--admin-v2-field-control-padding-x, 12px) + var(--admin-v2-space-6, 24px));
}

:is(.editor-workspace-pane, .website-editor-pane, .website-editor-sheet, .editor-workspace-pane__body, .website-editor-pane__body)
  .editor-select__trigger:hover:not(:disabled),
:is(.editor-workspace-pane, .website-editor-pane, .website-editor-sheet, .editor-workspace-pane__body, .website-editor-pane__body)
  .editor-form-field__input:hover:not(:disabled):not(:focus-visible):not([type='color']),
:is(.editor-workspace-pane, .website-editor-pane, .website-editor-sheet, .editor-workspace-pane__body, .website-editor-pane__body)
  input.form-input.products-workspace-field:hover:not(:disabled):not(:focus):not(.products-workspace-field--color),
:is(.editor-workspace-pane, .website-editor-pane, .website-editor-sheet, .editor-workspace-pane__body, .website-editor-pane__body)
  .form-select.products-workspace-field:hover:not(:disabled):not(:focus) {
  border-color: var(--admin-v2-border-strong, var(--pg-editor-color-border-strong));
}

:is(.editor-workspace-pane, .website-editor-pane, .website-editor-sheet, .editor-workspace-pane__body, .website-editor-pane__body)
  .editor-select__trigger:focus-visible,
:is(.editor-workspace-pane, .website-editor-pane, .website-editor-sheet, .editor-workspace-pane__body, .website-editor-pane__body)
  .editor-form-field__input:focus-visible:not([type='color']),
:is(.editor-workspace-pane, .website-editor-pane, .website-editor-sheet, .editor-workspace-pane__body, .website-editor-pane__body)
  input.form-input.products-workspace-field:focus:not(.products-workspace-field--color),
:is(.editor-workspace-pane, .website-editor-pane, .website-editor-sheet, .editor-workspace-pane__body, .website-editor-pane__body)
  .form-select.products-workspace-field:focus {
  outline: none;
  border-color: var(--admin-v2-color-primary, var(--pg-editor-color-brand-500));
  box-shadow: 0 0 0 3px var(--admin-v2-color-primary-soft, var(--pg-editor-color-brand-100));
}

/* Preview — SoftPanel card surface (white), not muted grey.
 * Include .admin-v2-entity-sheet — same hangpoint as typography SoftPanel groups. */
:is(.editor-workspace-pane, .website-editor-pane, .website-editor-sheet, .editor-workspace-pane__body, .website-editor-pane__body, .admin-v2-entity-sheet)
  .block-edit-modal__typography-preview {
  margin: 0;
  min-height: 100%;
  padding: var(--admin-v2-card-padding-y, var(--admin-v2-space-5, 20px))
    var(--admin-v2-card-padding-x, var(--admin-v2-space-5, 20px));
  border: 1px solid var(--admin-v2-border-default, var(--pg-editor-color-border));
  border-radius: var(--admin-v2-radius-card, var(--pg-editor-radius-lg));
  background: var(--admin-v2-color-surface, var(--pg-editor-color-surface));
  box-shadow: var(--admin-v2-shadow-xs, none);
  box-sizing: border-box;
}

:is(.editor-workspace-pane, .website-editor-pane, .website-editor-sheet, .editor-workspace-pane__body, .website-editor-pane__body, .admin-v2-entity-sheet)
  .block-edit-modal__typography-preview
  .design-typography-preview__heading {
  margin: 0 0 var(--admin-v2-space-4, var(--pg-editor-space-4));
  font-family: var(
    --block-heading-font,
    var(--tenant-font-heading, var(--tenant-font-main, var(--font-sans)))
  );
  font-size: var(--block-heading-size, var(--text-2xl, 1.5rem));
  font-weight: var(--block-heading-weight, var(--admin-v2-font-weight-semibold, 600));
  line-height: 1.2;
  color: var(--block-heading-color, var(--admin-v2-color-text, var(--pg-editor-color-text)));
}

:is(.editor-workspace-pane, .website-editor-pane, .website-editor-sheet, .editor-workspace-pane__body, .website-editor-pane__body, .admin-v2-entity-sheet)
  .block-edit-modal__typography-preview
  .design-typography-preview__body {
  margin: 0;
  font-family: var(--block-body-font, var(--tenant-font-main, var(--font-sans)));
  font-size: var(--block-body-size, var(--text-lg, 1.125rem));
  font-weight: var(--block-body-weight, var(--admin-v2-font-weight-normal, 400));
  line-height: 1.65;
  color: var(--block-body-color, var(--admin-v2-color-text, var(--pg-editor-color-text)));
}

:is(.editor-workspace-pane, .website-editor-pane, .website-editor-sheet, .editor-workspace-pane__body, .website-editor-pane__body, .admin-v2-entity-sheet)
  .block-edit-modal__typography-group {
  display: grid;
  gap: var(--admin-v2-space-4, var(--pg-editor-space-4));
  padding: var(--admin-v2-card-padding-y, var(--pg-editor-space-4))
    var(--admin-v2-card-padding-x, var(--pg-editor-space-4));
  border: 1px solid var(--admin-v2-border-default, var(--pg-editor-color-border));
  border-radius: var(--admin-v2-radius-card, var(--pg-editor-radius-lg));
  background: var(--admin-v2-color-surface, var(--pg-editor-color-surface));
  box-shadow: var(--admin-v2-shadow-xs, none);
  overflow: hidden;
  min-width: 0;
  max-width: 100%;
}

:is(.editor-workspace-pane, .website-editor-pane, .website-editor-sheet, .editor-workspace-pane__body, .website-editor-pane__body, .admin-v2-entity-sheet)
  .block-edit-modal__typography-group-fields,
:is(.editor-workspace-pane, .website-editor-pane, .website-editor-sheet, .editor-workspace-pane__body, .website-editor-pane__body)
  .editor-form-group__body {
  display: flex;
  flex-direction: column;
  gap: var(--admin-form-field-gap, var(--admin-v2-space-6, 24px));
  padding: 0;
  min-width: 0;
}

:is(.editor-workspace-pane, .website-editor-pane, .website-editor-sheet, .editor-workspace-pane__body, .website-editor-pane__body) .editor-form-group__description {
  margin: 0;
  padding: 0 var(--pg-editor-space-4) var(--pg-editor-space-2);
  font-size: var(--pg-editor-font-size-xs);
  line-height: var(--pg-editor-line-height-xs);
  font-weight: var(--pg-editor-font-weight-normal);
  color: var(--pg-editor-color-text-muted);
}

:is(.editor-workspace-pane, .website-editor-pane, .website-editor-sheet, .editor-workspace-pane__body, .website-editor-pane__body) .editor-form-section {
  display: flex;
  flex-direction: column;
  gap: var(--pg-editor-space-3);
  min-width: 0;
}

:is(.editor-workspace-pane, .website-editor-pane, .website-editor-sheet, .editor-workspace-pane__body, .website-editor-pane__body) .editor-form-section__title {
  margin: 0;
  font-size: var(--pg-editor-font-size-label, var(--admin-font-size-label, 16px));
  font-weight: var(--pg-editor-font-weight-semibold);
  line-height: var(--pg-editor-line-height-md);
  color: var(--pg-editor-color-text);
}

:is(.editor-workspace-pane, .website-editor-pane, .website-editor-sheet, .editor-workspace-pane__body, .website-editor-pane__body) .editor-form-section__body {
  display: flex;
  flex-direction: column;
  gap: var(--pg-editor-field-gap);
  min-width: 0;
}

/* Editor Form Language — grids (EditorGrid / EditorField layout) */
:is(.editor-workspace-pane, .website-editor-pane, .website-editor-sheet, .editor-workspace-pane__body, .website-editor-pane__body) .editor-form-grid {
  display: grid;
  gap: var(--pg-editor-space-5);
  min-width: 0;
}

:is(.editor-workspace-pane, .website-editor-pane, .website-editor-sheet, .editor-workspace-pane__body, .website-editor-pane__body) .editor-form-grid--panel-tiles {
  align-items: stretch;
  max-width: none;
  width: 100%;
}

:is(.editor-workspace-pane, .website-editor-pane, .website-editor-sheet, .editor-workspace-pane__body, .website-editor-pane__body)
  .editor-form-grid--panel-tiles:not(.editor-form-grid--3):not(.editor-form-grid--4) {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

:is(.editor-workspace-pane, .website-editor-pane, .website-editor-sheet, .editor-workspace-pane__body, .website-editor-pane__body) .editor-form-grid--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
  max-width: none;
  width: 100%;
}

:is(.editor-workspace-pane, .website-editor-pane, .website-editor-sheet, .editor-workspace-pane__body, .website-editor-pane__body) .editor-form-grid--4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: stretch;
  max-width: none;
  width: 100%;
}

/*
 * Style panel tiles — equal card height per row (Website Editor + admin modal).
 * Empty tile bodies stay top-aligned; filled bodies grow with the card.
 */
:is(
    .editor-workspace-pane,
    .website-editor-pane,
    .website-editor-sheet,
    .editor-workspace-pane__body,
    .website-editor-pane__body,
    .modal--block-edit
  )
  :is(.editor-form-grid--2, .editor-form-grid--3, .editor-form-grid--4)
  > .editor-form-group {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-content: stretch;
}

:is(
    .editor-workspace-pane,
    .website-editor-pane,
    .website-editor-sheet,
    .editor-workspace-pane__body,
    .website-editor-pane__body,
    .modal--block-edit
  )
  :is(.editor-form-grid--2, .editor-form-grid--3, .editor-form-grid--4)
  > .editor-form-group
  > .editor-form-group__body {
  flex: 1 1 auto;
  min-height: 0;
}

:is(
    .editor-workspace-pane,
    .website-editor-pane,
    .website-editor-sheet,
    .editor-workspace-pane__body,
    .website-editor-pane__body,
    .modal--block-edit
  )
  .editor-form-group__body.block-style-tile__body--empty {
  justify-content: flex-start;
}

/* Opt-in content layout — natural card height (hero / golden-lane content groups). */
:is(
    .editor-workspace-pane,
    .website-editor-pane,
    .website-editor-sheet,
    .editor-workspace-pane__body,
    .website-editor-pane__body,
    .modal--block-edit
  )
  .editor-form-grid--content-natural {
  align-items: start;
}

:is(
    .editor-workspace-pane,
    .website-editor-pane,
    .website-editor-sheet,
    .editor-workspace-pane__body,
    .website-editor-pane__body,
    .modal--block-edit
  )
  .editor-form-grid--content-natural
  > .editor-form-group {
  height: auto;
}

:is(
    .editor-workspace-pane,
    .website-editor-pane,
    .website-editor-sheet,
    .editor-workspace-pane__body,
    .website-editor-pane__body,
    .modal--block-edit
  )
  .editor-form-grid--content-natural
  > .editor-form-group
  > .editor-form-group__body {
  flex: initial;
}

:is(.editor-workspace-pane, .website-editor-pane, .website-editor-sheet, .editor-workspace-pane__body, .website-editor-pane__body) .editor-form-grid--weights-one-third-two-thirds {
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  max-width: none;
  width: 100%;
}

@media (max-width: 960px) {
  :is(.editor-workspace-pane, .website-editor-pane, .website-editor-sheet, .editor-workspace-pane__body, .website-editor-pane__body) .editor-form-grid--3,
  :is(.editor-workspace-pane, .website-editor-pane, .website-editor-sheet, .editor-workspace-pane__body, .website-editor-pane__body) .editor-form-grid--4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  :is(.editor-workspace-pane, .website-editor-pane, .website-editor-sheet, .editor-workspace-pane__body, .website-editor-pane__body)
    .editor-form-grid--panel-tiles:not(.editor-form-grid--3):not(.editor-form-grid--4),
  :is(.editor-workspace-pane, .website-editor-pane, .website-editor-sheet, .editor-workspace-pane__body, .website-editor-pane__body) .editor-form-grid--weights-one-third-two-thirds,
  :is(.editor-workspace-pane, .website-editor-pane, .website-editor-sheet, .editor-workspace-pane__body, .website-editor-pane__body) .editor-form-grid--3,
  :is(.editor-workspace-pane, .website-editor-pane, .website-editor-sheet, .editor-workspace-pane__body, .website-editor-pane__body) .editor-form-grid--4 {
    grid-template-columns: minmax(0, 1fr);
  }
}

:is(.editor-workspace-pane, .website-editor-pane, .website-editor-sheet, .editor-workspace-pane__body, .website-editor-pane__body) .editor-form-grid__column {
  display: flex;
  flex-direction: column;
  gap: var(--pg-editor-field-gap);
  min-width: 0;
}

:is(.editor-workspace-pane, .website-editor-pane, .website-editor-sheet, .editor-workspace-pane__body, .website-editor-pane__body) .editor-form-grid--spacing {
  grid-template-columns: repeat(2, max-content);
  column-gap: var(--pg-editor-space-3);
  row-gap: var(--pg-editor-space-2);
  width: max-content;
  max-width: 100%;
}

:is(.editor-workspace-pane, .website-editor-pane, .website-editor-sheet, .editor-workspace-pane__body, .website-editor-pane__body) .editor-form-grid--spacing > .editor-form-field {
  gap: var(--pg-editor-space-1);
}

:is(.editor-workspace-pane, .website-editor-pane, .website-editor-sheet, .editor-workspace-pane__body, .website-editor-pane__body) .editor-form-grid--spacing .form-input.products-workspace-field {
  width: 5rem;
  min-width: 4.5rem;
  field-sizing: fixed;
}

@media (max-width: 720px) {
  :is(.editor-workspace-pane, .website-editor-pane, .website-editor-sheet, .editor-workspace-pane__body, .website-editor-pane__body) .editor-form-group__body.block-edit-modal__typography-group-fields--cols-2 {
    grid-template-columns: minmax(0, 1fr);
  }
}

:is(.editor-workspace-pane, .website-editor-pane, .website-editor-sheet, .editor-workspace-pane__body, .website-editor-pane__body) .editor-form-group__body.block-edit-modal__typography-group-fields--cols-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--pg-editor-space-4);
  align-items: start;
}

:is(.editor-workspace-pane, .website-editor-pane, .website-editor-sheet, .editor-workspace-pane__body, .website-editor-pane__body) .editor-advanced {
  border-top: 1px solid var(--pg-editor-color-border);
}

:is(.editor-workspace-pane, .website-editor-pane, .website-editor-sheet, .editor-workspace-pane__body, .website-editor-pane__body) .editor-advanced__summary {
  display: flex;
  min-height: var(--pg-editor-control-height-lg);
  align-items: center;
  justify-content: flex-start;
  gap: var(--pg-editor-space-2);
  padding: var(--pg-editor-space-3) 0;
  cursor: pointer;
  font-size: var(--pg-editor-font-size-sm);
  font-weight: var(--pg-editor-font-weight-medium);
  line-height: var(--pg-editor-line-height-sm);
  color: var(--pg-editor-color-text);
  list-style: none;
}

:is(.editor-workspace-pane, .website-editor-pane, .website-editor-sheet, .editor-workspace-pane__body, .website-editor-pane__body) .editor-advanced__chevron {
  flex-shrink: 0;
  color: var(--pg-editor-color-text-muted);
  transition: transform var(--pg-editor-transition-fast), color var(--pg-editor-transition-fast);
}

:is(.editor-workspace-pane, .website-editor-pane, .website-editor-sheet, .editor-workspace-pane__body, .website-editor-pane__body) .editor-advanced__summary:hover .editor-advanced__chevron {
  color: var(--pg-editor-color-text);
}

:is(.editor-workspace-pane, .website-editor-pane, .website-editor-sheet, .editor-workspace-pane__body, .website-editor-pane__body) .editor-advanced[open] .editor-advanced__chevron {
  transform: rotate(90deg);
}

:is(.editor-workspace-pane, .website-editor-pane, .website-editor-sheet, .editor-workspace-pane__body, .website-editor-pane__body) .editor-advanced__summary:focus-visible {
  outline: 2px solid var(--pg-editor-color-brand-500);
  outline-offset: 2px;
  border-radius: var(--pg-editor-radius-md);
}

:is(.editor-workspace-pane, .website-editor-pane, .website-editor-sheet, .editor-workspace-pane__body, .website-editor-pane__body) .editor-advanced__title {
  min-width: 0;
}

:is(.editor-workspace-pane, .website-editor-pane, .website-editor-sheet, .editor-workspace-pane__body, .website-editor-pane__body) .editor-advanced__summary::-webkit-details-marker {
  display: none;
}

:is(.editor-workspace-pane, .website-editor-pane, .website-editor-sheet, .editor-workspace-pane__body, .website-editor-pane__body) .editor-advanced__body {
  display: flex;
  flex-direction: column;
  gap: var(--pg-editor-field-gap);
  padding-bottom: var(--pg-editor-space-4);
}

:is(.editor-workspace-pane__body, .website-editor-pane__body) > :first-child {
  margin-block-start: 0;
}

@media (max-width: 640px) {
  body.website-editor-active {
    --editor-workspace-nav-width: 156px;
  }

  .editor-workspace-section-list__columns, .website-editor-section-list__columns {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) auto;
    overflow-y: auto;
  }

  .editor-workspace-section-list__body, .website-editor-section-list__body {
    border-right: none;
    border-bottom: 1px solid var(--pg-editor-color-border);
  }

  .editor-workspace-section-list__row, .website-editor-section-list__row {
    grid-template-columns: minmax(0, 1fr);
    row-gap: var(--pg-editor-space-2);
  }

  .editor-workspace-section-list__actions, .website-editor-section-list__actions {
    justify-content: flex-start;
    width: 100%;
  }
}

/* Page authoring — sidebar + canvas (Pages V100) */
.page-authoring {
  display: grid;
  grid-template-columns: var(--editor-workspace-nav-width) minmax(0, 1fr);
  min-block-size: 0;
  overflow: hidden;
  background: var(--pg-editor-color-surface);
}
.page-authoring__panel {
  min-inline-size: 0;
  min-block-size: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--pg-editor-pane-padding-block-start)
           var(--pg-editor-pane-padding-inline);
  border-inline-end: 1px solid var(--pg-editor-color-border);
}
.page-authoring__canvas {
  min-inline-size: 0;
  min-block-size: 0;
  overflow: auto;
}
.page-authoring__section-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--pg-editor-space-2);
}
.page-authoring__section-row--drop-target {
  box-shadow: inset 0 2px 0 0 var(--pg-editor-color-border-strong,
                                var(--pg-editor-color-border));
}
.page-authoring__grip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--pg-editor-color-text-muted);
  cursor: grab;
}
.page-authoring__grip:active {
  cursor: grabbing;
}

/* Page authoring sidebar as fixed overlay on the live storefront canvas */
.page-authoring__panel {
  position: fixed;
  inset-block: 0;
  inset-inline-start: 0;
  inline-size: var(--editor-workspace-nav-width);
  z-index: var(--pg-editor-z-pane, 40);
  background: var(--pg-editor-color-surface);
  box-shadow: var(--pg-editor-shadow-pane, 0 0 0 1px var(--pg-editor-color-border));
}
body.website-editor-active[data-website-editor-surface="page"] {
  padding-inline-start: var(--editor-workspace-nav-width);
}

/* v2/editor-workspace/menu-preview.css */
/* =================================================================
   EDITOR MENU PREVIEW — storefront navigation preview role
   Used by the navigation menu editor in both the tenant admin
   (Header/Footer page) and the Website Editor chrome sheet, so the
   rules live in the shared editor-workspace layer instead of the
   admin-only context bundle.

   Inline custom properties set by the editor:
   --storefront-menu-bg, --storefront-menu-hover-bg,
   --storefront-submenu-bg, --storefront-submenu-hover-bg
   ================================================================= */

.editor-menu-preview {
  border: 1px solid var(--pg-editor-color-border);
  border-radius: var(--pg-editor-radius-lg);
  background: var(--pg-editor-color-surface);
  overflow: visible;
}

.editor-menu-preview__nav {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--pg-editor-space-1);
  padding: var(--pg-editor-space-3) var(--pg-editor-space-4);
  border-radius: inherit;
}

/*
 * Reserve room for the hovered dropdown so the panel does not jump.
 * Row count comes from the editor as a data attribute.
 */
.editor-menu-preview__nav--dropdown-space-reserved[data-preview-dropdown-rows='1'] {
  padding-bottom: calc(var(--pg-editor-space-3) + 58px);
}

.editor-menu-preview__nav--dropdown-space-reserved[data-preview-dropdown-rows='2'] {
  padding-bottom: calc(var(--pg-editor-space-3) + 96px);
}

.editor-menu-preview__nav--dropdown-space-reserved[data-preview-dropdown-rows='3'] {
  padding-bottom: calc(var(--pg-editor-space-3) + 134px);
}

.editor-menu-preview__nav--dropdown-space-reserved[data-preview-dropdown-rows='4'] {
  padding-bottom: calc(var(--pg-editor-space-3) + 172px);
}

.editor-menu-preview__nav--dropdown-space-reserved[data-preview-dropdown-rows='5'] {
  padding-bottom: calc(var(--pg-editor-space-3) + 210px);
}

.editor-menu-preview__nav--dropdown-space-reserved[data-preview-dropdown-rows='6'] {
  padding-bottom: calc(var(--pg-editor-space-3) + 248px);
}

.editor-menu-preview__nav--dropdown-space-reserved[data-preview-dropdown-rows='7'] {
  padding-bottom: calc(var(--pg-editor-space-3) + 286px);
}

.editor-menu-preview__nav--dropdown-space-reserved[data-preview-dropdown-rows='8'] {
  padding-bottom: calc(var(--pg-editor-space-3) + 324px);
}

.editor-menu-preview__item {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.editor-menu-preview__link {
  display: inline-flex;
  align-items: center;
  gap: var(--pg-editor-space-1);
  padding: var(--pg-editor-space-2) var(--pg-editor-space-3);
  border-radius: var(--pg-editor-radius-md);
  background: transparent;
  color: var(--pg-editor-color-text-muted);
  font-size: var(--pg-editor-font-size-sm);
  line-height: var(--pg-editor-line-height-sm);
  font-weight: var(--pg-editor-font-weight-medium);
}

.editor-menu-preview__link--parent {
  color: var(--pg-editor-color-text);
}

.editor-menu-preview__link:hover,
.editor-menu-preview__link--open {
  background: var(--storefront-menu-hover-bg, var(--pg-editor-color-surface-muted));
  color: var(--pg-editor-color-text);
}

.editor-menu-preview__caret {
  font-size: var(--pg-editor-font-size-xs);
  line-height: 1;
  color: var(--pg-editor-color-text-soft);
}

.editor-menu-preview__dropdown-menu {
  position: absolute;
  top: calc(100% + var(--pg-editor-space-2));
  left: 0;
  z-index: 2;
  display: inline-flex;
  flex-direction: column;
  min-width: 220px;
  padding: var(--pg-editor-space-2);
  border: 1px solid var(--pg-editor-color-border);
  border-radius: var(--pg-editor-radius-xl);
  background: var(--storefront-submenu-bg, var(--pg-editor-color-surface));
  box-shadow: var(--pg-editor-shadow-sm);
}

.editor-menu-preview__dropdown-link {
  display: flex;
  align-items: center;
  min-height: var(--pg-editor-control-height-sm);
  padding: 0 var(--pg-editor-space-3);
  border-radius: var(--pg-editor-radius-md);
  background: transparent;
  color: var(--pg-editor-color-text-muted);
  font-size: var(--pg-editor-font-size-sm);
  line-height: var(--pg-editor-line-height-sm);
  white-space: nowrap;
}

.editor-menu-preview__dropdown-link:hover {
  background: var(--storefront-submenu-hover-bg, var(--pg-editor-color-surface-muted));
  color: var(--pg-editor-color-text);
}

.editor-menu-preview__empty {
  margin: 0;
  padding: var(--pg-editor-space-4);
  color: var(--pg-editor-color-text-muted);
  font-size: var(--pg-editor-font-size-sm);
  line-height: var(--pg-editor-line-height-sm);
}

@media (max-width: 640px) {
  .editor-menu-preview__nav {
    padding: var(--pg-editor-space-3);
  }
}

/* v2/admin-v2/chrome-edge.css */
/**
 * Pagayo Design V2 — Admin chrome edge shadows (SSoT).
 *
 * One place to tune content-edge shadows for shell chrome AND entity-sheet
 * editor chrome. Tokens live in contexts/admin/_base.css.
 *
 * Role Contract Test: shell topbar/footer AND entity-sheet head/foot share
 * this hangpoint. Entity-sheet chrome stacks above the scrolling body so the
 * shadow overlays content — never a gray spacer band between chrome and body.
 */

.admin-v2-topbar,
.admin-v2-entity-sheet__head {
  box-shadow: var(--admin-v2-chrome-header-shadow);
}

.admin-v2-shell-footer,
.admin-v2-entity-sheet__foot,
.admin-v2-entity-sheet__actions,
.admin-v2-settings-stack__foot {
  box-shadow: var(--admin-v2-chrome-footer-shadow);
}

/* Paint chrome above the sheet body scrollport (sibling stacking). */
.admin-v2-entity-sheet__head,
.admin-v2-entity-sheet__foot,
.admin-v2-entity-sheet__actions {
  position: relative;
  z-index: 1;
}

.admin-v2-entity-sheet__body {
  position: relative;
  z-index: 0;
}

/* v2/admin-v2/shell-chrome.css */
/**
 * Pagayo Design V2 — Admin shell chrome (topbar, contextbar, zone switcher).
 *
 * Sticky global navigation above workspace content. Interactive controls use
 * --admin-v2-radius-interactive; passive status labels use --admin-v2-radius-label.
 */

.admin-v2-topbar {
  min-height: var(--admin-v2-topbar-height);
  border-bottom: 1px solid var(--admin-v2-border-default);
  background: var(--admin-v2-color-surface-overlay);
  backdrop-filter: blur(18px);
  /* Content-edge shadow: chrome-edge.css (shared with entity-sheet head). */
  display: flex;
  align-items: center;
  gap: var(--admin-v2-space-4);
  padding: 0 var(--admin-v2-app-gutter);
  position: sticky;
  top: 0;
  z-index: 10;
}

/* When Tools toolbar is open, content-edge shadow moves to the sticky toolbar. */
.admin-shell--v2:has(.admin-v2-workspace-toolbar[data-toolbar-open="true"]) .admin-v2-topbar,
body:has(.admin-v2-workspace-toolbar[data-toolbar-open="true"]) .admin-v2-topbar {
  box-shadow: none;
}

.admin-v2-contextbar {
  min-height: var(--admin-v2-contextbar-height);
  border-bottom: 1px solid var(--admin-v2-border-default);
  background: var(--admin-v2-color-surface-overlay);
  backdrop-filter: blur(18px);
  display: flex;
  align-items: center;
  gap: var(--admin-v2-space-2);
  padding: 0 var(--admin-v2-app-gutter);
  position: sticky;
  top: var(--admin-v2-topbar-height);
  z-index: 9;
}

/* Shell zone nav lives in the topbar trailing slot (not a second sticky row). */
.admin-v2-contextbar--topbar {
  min-height: 0;
  border-bottom: 0;
  background: transparent;
  backdrop-filter: none;
  padding: 0;
  position: static;
  top: auto;
  z-index: 20;
  flex: 0 1 auto;
  justify-content: flex-end;
  max-width: min(100%, 46rem);
  /* Must stay visible — overflow-x:auto clips the More dropdown below the bar. */
  overflow: visible;
}

.admin-capability-action-bar__slot--trailing {
  flex: 0 1 auto;
  min-width: 0;
  justify-content: flex-end;
  overflow: visible;
}

.admin-v2-topbar.admin-capability-action-bar {
  overflow: visible;
}

.admin-v2-topbar-leading {
  display: inline-flex;
  align-items: center;
  gap: var(--admin-v2-space-4);
  min-width: 0;
}

.admin-v2-zone-switcher {
  position: relative;
}

/* Hover-bridge: gap tussen trigger en menu blijft binnen switcher-hitarea. */
.admin-v2-zone-switcher::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: var(--admin-v2-space-2);
  display: none;
  pointer-events: auto;
}

.admin-v2-zone-switcher[data-open="true"]::after {
  display: block;
}

.admin-v2-zone-trigger {
  min-width: var(--admin-v2-zone-trigger-min-width);
  min-height: var(--admin-v2-button-height-lg);
  border: 1px solid var(--admin-v2-border-default);
  border-radius: var(--admin-v2-radius-interactive);
  background: var(--admin-v2-color-surface);
  color: var(--admin-v2-color-text);
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--admin-v2-space-2);
  padding: 0 var(--admin-v2-control-padding-x-lg);
  font-family: var(--admin-v2-font-family);
  font-size: var(--admin-v2-font-size-control);
  line-height: var(--admin-v2-line-height-control);
  font-weight: var(--admin-v2-font-weight-medium);
  white-space: nowrap;
  box-shadow: var(--admin-v2-shadow-xs);
  cursor: pointer;
}

.admin-v2-zone-trigger__label {
  color: var(--admin-v2-color-text);
}

.admin-v2-zone-trigger__chevron {
  color: var(--admin-v2-color-text-muted);
  flex-shrink: 0;
}

.admin-v2-zone-trigger:hover,
.admin-v2-zone-trigger[aria-expanded="true"] {
  border-color: var(--admin-v2-border-active);
  background: var(--admin-v2-color-primary-soft);
  color: var(--admin-v2-color-primary);
}

.admin-v2-zone-trigger:hover .admin-v2-zone-trigger__label,
.admin-v2-zone-trigger[aria-expanded="true"] .admin-v2-zone-trigger__label,
.admin-v2-zone-trigger:hover .admin-v2-zone-trigger__chevron,
.admin-v2-zone-trigger[aria-expanded="true"] .admin-v2-zone-trigger__chevron {
  color: var(--admin-v2-color-primary);
}

.admin-v2-zone-menu {
  position: absolute;
  top: calc(100% + var(--admin-v2-space-2));
  left: 0;
  z-index: 40;
  width: var(--admin-v2-zone-menu-width);
  max-height: var(--admin-v2-shell-menu-max-height, calc(100dvh - var(--admin-v2-topbar-height) - var(--admin-v2-space-4)));
  border: 1px solid var(--admin-v2-border-default);
  border-radius: var(--admin-v2-radius-panel);
  background: var(--admin-v2-color-surface);
  box-shadow: var(--admin-v2-shadow-floating);
  padding: var(--admin-v2-space-2);
  display: none;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.admin-v2-zone-switcher[data-open="true"] .admin-v2-zone-menu {
  display: grid;
  gap: var(--admin-v2-space-1);
}

.admin-v2-zone-option {
  min-height: var(--admin-v2-control-height-lg);
  border-radius: var(--admin-v2-radius-interactive);
  display: grid;
  grid-template-columns: var(--admin-v2-icon-size-md) minmax(0, 1fr);
  gap: var(--admin-v2-space-3);
  align-items: center;
  padding: var(--admin-v2-space-2) var(--admin-v2-space-3);
  color: var(--admin-v2-color-text-muted);
  cursor: pointer;
}

.admin-v2-zone-option__icon {
  width: var(--admin-v2-icon-size-md);
  height: var(--admin-v2-icon-size-md);
  border-radius: var(--admin-v2-radius-interactive);
  background: var(--admin-v2-color-surface-muted);
  color: var(--admin-v2-color-text-muted);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.admin-v2-zone-option__copy {
  display: grid;
  gap: var(--admin-v2-space-1);
  min-width: 0;
}

.admin-v2-zone-option strong {
  display: block;
  color: var(--admin-v2-color-text);
  font-size: var(--admin-v2-font-size-body);
  line-height: var(--admin-v2-line-height-body);
}

.admin-v2-zone-option__copy > span {
  display: block;
  font-size: var(--admin-v2-font-size-meta);
  line-height: var(--admin-v2-line-height-meta);
  color: var(--admin-v2-color-text-muted);
}

.admin-v2-zone-option:hover .admin-v2-zone-option__copy > span,
.admin-v2-zone-option[aria-current="true"] .admin-v2-zone-option__copy > span,
.admin-v2-zone-option.active .admin-v2-zone-option__copy > span {
  color: var(--admin-v2-color-primary);
}

.admin-v2-zone-option:hover,
.admin-v2-zone-option[aria-current="true"],
.admin-v2-zone-option.active {
  background: var(--admin-v2-color-primary-soft);
  color: var(--admin-v2-color-primary);
}

.admin-v2-zone-option:hover .admin-v2-zone-option__icon,
.admin-v2-zone-option[aria-current="true"] .admin-v2-zone-option__icon,
.admin-v2-zone-option.active .admin-v2-zone-option__icon {
  background: var(--admin-v2-color-surface-overlay);
  color: var(--admin-v2-color-primary);
}

.admin-v2-brand-mark {
  width: var(--admin-v2-brand-mark-size);
  height: var(--admin-v2-brand-mark-size);
  border-radius: var(--admin-v2-radius-interactive);
  background: var(--admin-v2-color-primary);
  color: var(--admin-v2-color-text-inverse);
  display: grid;
  place-items: center;
  box-shadow: var(--admin-v2-shadow-xs);
  flex-shrink: 0;
  font-size: var(--admin-v2-font-size-control);
  font-weight: var(--admin-v2-font-weight-bold);
}

.admin-v2-context-link {
  height: var(--admin-v2-interactive-control-height);
  min-height: var(--admin-v2-interactive-control-height);
  border: 1px solid transparent;
  border-radius: var(--admin-v2-radius-interactive);
  background: transparent;
  color: var(--admin-v2-color-text-muted);
  display: inline-flex;
  align-items: center;
  gap: var(--admin-v2-space-2);
  padding: 0 var(--admin-v2-interactive-control-padding-x);
  font-family: var(--admin-v2-font-family);
  font-size: var(--admin-v2-interactive-control-font-size);
  line-height: var(--admin-v2-interactive-control-line-height);
  font-weight: var(--admin-v2-font-weight-medium);
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none;
}

.admin-v2-context-link:hover,
.admin-v2-context-link[aria-current="page"],
.admin-v2-context-link.active {
  background: var(--admin-v2-color-primary-soft);
  color: var(--admin-v2-color-primary);
}

.admin-v2-context-link:focus-visible {
  outline: none;
  box-shadow: var(--admin-v2-focus-ring);
}

.admin-v2-context-more {
  position: relative;
  z-index: 30;
}

.admin-v2-context-more-menu {
  position: absolute;
  top: calc(100% + var(--admin-v2-space-2));
  right: 0;
  z-index: 40;
  width: var(--admin-v2-context-more-menu-width);
  max-height: var(--admin-v2-shell-menu-max-height, calc(100dvh - var(--admin-v2-topbar-height) - var(--admin-v2-space-4)));
  border: 1px solid var(--admin-v2-border-default);
  border-radius: var(--admin-v2-radius-panel);
  background: var(--admin-v2-color-surface);
  box-shadow: var(--admin-v2-shadow-floating);
  padding: var(--admin-v2-space-2);
  display: none;
  gap: var(--admin-v2-space-1);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* Hover/focus open stays for row placement; topbar uses data-open (click) only. */
.admin-v2-context-more:focus-within .admin-v2-context-more-menu,
.admin-v2-contextbar:not(.admin-v2-contextbar--topbar) .admin-v2-context-more:hover .admin-v2-context-more-menu,
.admin-v2-context-more[data-open="true"] .admin-v2-context-more-menu {
  display: grid;
}

.admin-v2-context-more-menu[hidden] {
  display: none !important;
}

.admin-v2-context-more-menu a,
.admin-v2-context-more-menu button {
  min-height: var(--admin-v2-control-height-md);
  border: 0;
  border-radius: var(--admin-v2-radius-interactive);
  background: transparent;
  display: flex;
  align-items: center;
  gap: var(--admin-v2-space-3);
  padding: var(--admin-v2-space-2) var(--admin-v2-space-3);
  color: var(--admin-v2-color-text-muted);
  font-family: var(--admin-v2-font-family);
  font-size: var(--admin-v2-font-size-control);
  font-weight: var(--admin-v2-font-weight-medium);
  cursor: pointer;
  text-decoration: none;
}

.admin-v2-context-more-button {
  height: var(--admin-v2-interactive-control-height);
  min-height: var(--admin-v2-interactive-control-height);
  border: 1px solid transparent;
  border-radius: var(--admin-v2-radius-interactive);
  background: transparent;
  color: var(--admin-v2-color-text-muted);
  display: inline-flex;
  align-items: center;
  gap: var(--admin-v2-space-2);
  padding: 0 var(--admin-v2-interactive-control-padding-x);
  font-family: var(--admin-v2-font-family);
  font-size: var(--admin-v2-interactive-control-font-size);
  line-height: var(--admin-v2-interactive-control-line-height);
  font-weight: var(--admin-v2-font-weight-medium);
  cursor: pointer;
}

.admin-v2-contextbar__trailing {
  margin-left: auto;
}

.admin-v2-context-more-link {
  min-height: var(--admin-v2-control-height-md);
  border-radius: var(--admin-v2-radius-interactive);
  display: flex;
  align-items: center;
  padding: var(--admin-v2-space-2) var(--admin-v2-space-3);
  color: var(--admin-v2-color-text-muted);
  text-decoration: none;
}

.admin-v2-context-more-link:hover {
  background: var(--admin-v2-color-surface-muted);
  color: var(--admin-v2-color-text);
}

.admin-v2-topbar-brand-block {
  display: inline-flex;
  align-items: center;
  gap: var(--admin-v2-space-2);
  min-width: 0;
  text-decoration: none;
  color: inherit;
}

.admin-v2-topbar-brand-text {
  color: var(--admin-v2-color-text);
  font-size: var(--admin-v2-font-size-body);
  font-weight: var(--admin-v2-font-weight-bold);
  line-height: var(--admin-v2-line-height-control);
}

.admin-v2-topbar-spacer {
  flex: 1 1 auto;
}

.admin-v2-topbar-actions {
  display: inline-flex;
  align-items: center;
  gap: var(--admin-v2-space-2);
}

.admin-v2-topbar-util {
  width: var(--admin-v2-icon-button-size-lg);
  min-height: var(--admin-v2-button-height-lg);
  min-width: var(--admin-v2-icon-button-size-lg);
  border: 1px solid var(--admin-v2-border-default);
  border-radius: var(--admin-v2-radius-interactive);
  background: var(--admin-v2-color-surface);
  color: var(--admin-v2-color-text-muted);
  display: inline-grid;
  place-items: center;
  padding: 0;
  box-shadow: var(--admin-v2-shadow-xs);
  cursor: pointer;
}

.admin-v2-topbar-util:hover:not(:disabled),
.admin-v2-topbar-util:focus-visible {
  border-color: var(--admin-v2-border-active);
  background: var(--admin-v2-color-primary-soft);
  color: var(--admin-v2-color-primary);
}

.admin-v2-topbar-util:disabled {
  opacity: 1;
  cursor: not-allowed;
}

.admin-v2-topbar-ai {
  min-height: var(--admin-v2-button-height-lg);
  border: 1px solid var(--admin-v2-border-default);
  border-radius: var(--admin-v2-radius-interactive);
  background: var(--admin-v2-color-surface);
  color: var(--admin-v2-color-text-muted);
  display: inline-flex;
  align-items: center;
  gap: var(--admin-v2-space-2);
  padding: 0 var(--admin-v2-control-padding-x-lg);
  font-family: var(--admin-v2-font-family);
  font-size: var(--admin-v2-font-size-control);
  line-height: var(--admin-v2-line-height-control);
  font-weight: var(--admin-v2-font-weight-medium);
  box-shadow: var(--admin-v2-shadow-xs);
  cursor: pointer;
}

.admin-v2-topbar-ai__label {
  color: var(--admin-v2-color-text-muted);
}

.admin-v2-topbar-ai:hover,
.admin-v2-topbar-ai:focus-visible {
  border-color: var(--admin-v2-border-active);
  background: var(--admin-v2-color-primary-soft);
  color: var(--admin-v2-color-primary);
}

.admin-v2-topbar-ai:hover .admin-v2-topbar-ai__label,
.admin-v2-topbar-ai:focus-visible .admin-v2-topbar-ai__label {
  color: var(--admin-v2-color-primary);
}

.admin-v2-topbar-search {
  min-width: var(--admin-v2-command-button-min-width);
  min-height: var(--admin-v2-button-height-lg);
  border: 1px solid var(--admin-v2-border-default);
  border-radius: var(--admin-v2-radius-interactive);
  background: var(--admin-v2-color-surface);
  color: var(--admin-v2-color-text-muted);
  display: inline-flex;
  align-items: center;
  gap: var(--admin-v2-space-2);
  padding: 0 var(--admin-v2-control-padding-x-lg);
  font-family: var(--admin-v2-font-family);
  font-size: var(--admin-v2-font-size-control);
  line-height: var(--admin-v2-line-height-control);
  font-weight: var(--admin-v2-font-weight-medium);
  box-shadow: var(--admin-v2-shadow-xs);
  cursor: pointer;
}

.admin-v2-topbar-search__label {
  color: var(--admin-v2-color-text-muted);
}

.admin-v2-topbar-search__shortcut {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2rem;
  height: 1.375rem;
  padding: 0 var(--admin-v2-space-2);
  border: 1px solid var(--admin-v2-border-default);
  border-radius: var(--admin-v2-radius-label);
  background: var(--admin-v2-color-surface-muted);
  color: var(--admin-v2-color-text-muted);
  font-family: inherit;
  font-size: var(--admin-v2-font-size-meta);
  line-height: var(--admin-v2-line-height-meta);
  font-weight: var(--admin-v2-font-weight-medium);
}

.admin-v2-topbar-search:hover:not(:disabled),
.admin-v2-topbar-search:focus-visible {
  border-color: var(--admin-v2-border-active);
  background: var(--admin-v2-color-primary-soft);
  color: var(--admin-v2-color-primary);
}

.admin-v2-topbar-search:hover:not(:disabled) .admin-v2-topbar-search__label,
.admin-v2-topbar-search:focus-visible .admin-v2-topbar-search__label {
  color: var(--admin-v2-color-primary);
}

.admin-v2-topbar-search:disabled {
  opacity: 1;
  cursor: not-allowed;
}

.admin-v2-topbar-avatar {
  width: var(--admin-v2-icon-button-size-md);
  height: var(--admin-v2-icon-button-size-md);
  min-width: var(--admin-v2-icon-button-size-md);
  border: 1px solid var(--admin-v2-border-default);
  border-radius: 999px;
  background: var(--admin-v2-avatar-bg);
  color: var(--admin-v2-color-primary);
  display: inline-grid;
  place-items: center;
  font-family: var(--admin-v2-font-family);
  font-size: var(--admin-v2-font-size-meta);
  font-weight: var(--admin-v2-font-weight-semibold);
  line-height: 1;
  cursor: pointer;
}

.admin-v2-topbar-avatar:hover,
.admin-v2-topbar-avatar:focus-visible {
  box-shadow: var(--admin-v2-focus-ring);
}

.admin-v2-zone-trigger:focus-visible,
.admin-v2-zone-option:focus-visible,
.admin-v2-context-more-button:focus-visible,
.admin-v2-topbar-brand-block:focus-visible,
.admin-v2-topbar-util:focus-visible,
.admin-v2-topbar-ai:focus-visible,
.admin-v2-topbar-search:focus-visible,
.admin-v2-topbar-avatar:focus-visible {
  outline: none;
  box-shadow: var(--admin-v2-focus-ring);
}

.admin-v2-zone-option {
  width: 100%;
  border: 0;
  background: transparent;
  text-align: left;
  font: inherit;
}

/*
 * Sidebarless Admin V2 shell — always-visible chrome + one scrollport.
 * DOM: topbar → main → footer (siblings). Flex column + 100dvh keeps chrome
 * pinned; ONLY .admin-main scrolls. Nested page locks (products/orders) must
 * not set overflow:hidden on main/page or the scrollbar becomes a dead trap.
 */
.admin-shell--v2 {
  --admin-shell-sidebar-width: 0px;
  /* Reserve footer chrome so topbar dropdowns scroll above AI/Tools, not under it. */
  --admin-v2-shell-footer-min-height: 4.5rem;
  --admin-v2-shell-menu-max-height: calc(
    100dvh
    - var(--admin-v2-topbar-height)
    - var(--admin-v2-shell-footer-min-height)
    - var(--admin-v2-space-4)
  );
  display: flex;
  flex-direction: column;
  height: 100dvh;
  min-height: 0;
  overflow: hidden;
  background: var(--admin-v2-color-app-bg);
}

.admin-shell--v2 .admin-account-nav {
  display: none;
}

.admin-shell--v2 .admin-main {
  flex: 1 1 auto;
  min-height: 0;
  margin-left: 0;
  width: 100%;
  max-width: none;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior-y: contain;
}

.admin-shell--v2 .admin-v2-topbar,
.admin-shell--v2 .admin-v2-shell-footer {
  flex: 0 0 auto;
  align-self: stretch;
  width: 100%;
  max-width: none;
  box-sizing: border-box;
  position: relative;
  top: auto;
  bottom: auto;
}

/* Topbar must stack above footer — equal z-index lets footer (later sibling) cover menus. */
.admin-shell--v2 .admin-v2-topbar {
  z-index: 30;
}

.admin-shell--v2 .admin-v2-shell-footer {
  z-index: 20;
}

.admin-v2-zone-landing {
  max-width: 960px;
  margin: 0 auto;
  padding: var(--admin-v2-space-8) var(--admin-v2-app-gutter);
}

.admin-v2-zone-landing__header {
  margin-bottom: var(--admin-v2-section-gap);
}

.admin-v2-zone-landing__title {
  margin: 0;
  font-family: var(--admin-v2-font-family);
  font-size: var(--admin-v2-font-size-page-title);
  line-height: var(--admin-v2-line-height-page-title);
  font-weight: var(--admin-v2-font-weight-semibold);
  color: var(--admin-v2-color-text);
}

.admin-v2-zone-landing__subtitle {
  margin: var(--admin-v2-space-2) 0 0;
  font-family: var(--admin-v2-font-family);
  font-size: var(--admin-v2-font-size-body);
  line-height: var(--admin-v2-line-height-body);
  color: var(--admin-v2-color-text-muted);
}

.admin-v2-zone-landing__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--admin-v2-space-4);
  list-style: none;
  margin: 0;
  padding: 0;
}

.admin-v2-zone-landing__grid > li {
  min-width: 0;
  display: grid;
}

.admin-v2-zone-landing__card {
  display: grid;
  grid-template-columns: var(--admin-v2-brand-mark-size) minmax(0, 1fr);
  gap: var(--admin-v2-space-4);
  align-items: start;
  width: 100%;
  min-width: 0;
  min-height: var(--admin-v2-collection-card-min-height);
  padding: var(--admin-v2-card-padding-y) var(--admin-v2-card-padding-x);
  border: 1px solid var(--admin-v2-border-default);
  border-radius: var(--admin-v2-radius-card);
  background: var(--admin-v2-color-surface);
  box-shadow: var(--admin-v2-shadow-xs);
  text-align: left;
  cursor: pointer;
}

.admin-v2-zone-landing__card-icon {
  width: var(--admin-v2-brand-mark-size);
  height: var(--admin-v2-brand-mark-size);
  border-radius: var(--admin-v2-radius-interactive);
  background: var(--admin-v2-color-surface-muted);
  color: var(--admin-v2-color-text-muted);
  display: grid;
  place-items: center;
}

.admin-v2-zone-landing__card:hover,
.admin-v2-zone-landing__card:focus-visible {
  border-color: var(--admin-v2-border-active);
  box-shadow: var(--admin-v2-focus-ring);
}

.admin-v2-zone-landing__card-copy {
  display: grid;
  gap: var(--admin-v2-space-1);
}

.admin-v2-zone-landing__card-copy strong {
  font-size: var(--admin-v2-font-size-section-title);
  line-height: var(--admin-v2-line-height-section-title);
  color: var(--admin-v2-color-text);
}

.admin-v2-zone-landing__card-copy span {
  font-size: var(--admin-v2-font-size-meta);
  line-height: var(--admin-v2-line-height-meta);
  color: var(--admin-v2-color-text-muted);
}


/* Admin Shell V3 — radical four-control command header. */
.admin-shell-v3-topbar {
  min-height: 58px;
  display: flex;
  align-items: center;
  gap: var(--admin-v2-space-3);
  padding: 0 var(--admin-v2-app-gutter);
  background: var(--admin-v2-color-surface-overlay);
  border-bottom: 1px solid var(--admin-v2-border-default);
  box-shadow: 0 1px 0 color-mix(in srgb, var(--admin-v2-color-text) 3%, transparent);
}

.admin-shell-v3-topbar .admin-v2-topbar-leading,
.admin-shell-v3-topbar .admin-v2-topbar-brand-block,
.admin-shell-v3-topbar .admin-v2-topbar-actions,
.admin-shell-v3-topbar .admin-v2-topbar-spacer {
  display: none;
}

.admin-shell-v3-control {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.admin-shell-v3-spacer {
  flex: 1 1 auto;
}

.admin-shell-v3-trigger,
.admin-shell-v3-primary {
  min-height: 38px;
  border: 1px solid var(--admin-v2-border-default);
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--admin-v2-space-2);
  padding: 0 var(--admin-v2-space-4);
  font-family: var(--admin-v2-font-family);
  font-size: var(--admin-v2-font-size-control);
  line-height: var(--admin-v2-line-height-control);
  font-weight: var(--admin-v2-font-weight-semibold);
  white-space: nowrap;
  cursor: pointer;
  transition: border-color 150ms ease, background 150ms ease, color 150ms ease, box-shadow 150ms ease;
}

.admin-shell-v3-trigger {
  background: var(--admin-v2-color-surface);
  color: var(--admin-v2-color-text);
  box-shadow: var(--admin-v2-shadow-xs);
}

.admin-shell-v3-trigger:hover,
.admin-shell-v3-trigger[aria-expanded='true'] {
  border-color: var(--admin-v2-border-active);
  background: var(--admin-v2-color-primary-soft);
  color: var(--admin-v2-color-primary);
}

.admin-shell-v3-trigger:focus-visible,
.admin-shell-v3-primary:focus-visible,
.admin-shell-v3-menu button:focus-visible {
  outline: none;
  box-shadow: var(--admin-v2-focus-ring);
}

.admin-shell-v3-trigger--module {
  min-width: 154px;
  justify-content: flex-start;
}

.admin-shell-v3-trigger--ai {
  min-width: 76px;
}

.admin-shell-v3-trigger--tools {
  min-width: 102px;
}

.admin-shell-v3-primary {
  border-color: var(--admin-v2-color-primary);
  background: var(--admin-v2-color-primary);
  color: var(--admin-v2-color-text-inverse);
  box-shadow: var(--admin-v2-shadow-sm);
}

.admin-shell-v3-primary:hover {
  filter: brightness(0.98);
  transform: translateY(-1px);
}

.admin-shell-v3-menu {
  position: absolute;
  top: calc(100% + var(--admin-v2-space-2));
  border: 1px solid var(--admin-v2-border-default);
  border-radius: var(--admin-v2-radius-panel);
  background: var(--admin-v2-color-surface);
  box-shadow: var(--admin-v2-shadow-floating);
  padding: var(--admin-v2-space-3);
  z-index: 40;
}

.admin-shell-v3-menu--modules {
  left: 0;
  width: min(360px, calc(100vw - 32px));
}

.admin-shell-v3-menu--tools {
  right: 0;
  width: min(720px, calc(100vw - 32px));
}

.admin-shell-v3-menu__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--admin-v2-space-3);
  padding: 0 var(--admin-v2-space-1) var(--admin-v2-space-2);
  color: var(--admin-v2-color-text-muted);
  font-size: var(--admin-v2-font-size-meta);
  line-height: var(--admin-v2-line-height-meta);
  font-weight: var(--admin-v2-font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.admin-shell-v3-menu__header button {
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--admin-v2-color-text-muted);
  display: grid;
  place-items: center;
  cursor: pointer;
}

.admin-shell-v3-menu__header button:hover {
  background: var(--admin-v2-color-surface-muted);
  color: var(--admin-v2-color-text);
}

.admin-shell-v3-menu__items {
  display: grid;
  gap: var(--admin-v2-space-1);
}

.admin-shell-v3-menu__item {
  min-height: 38px;
  border: 0;
  border-radius: var(--admin-v2-radius-interactive);
  background: transparent;
  color: var(--admin-v2-color-text);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--admin-v2-space-3);
  padding: 0 var(--admin-v2-space-3);
  font: inherit;
  font-size: var(--admin-v2-font-size-control);
  font-weight: var(--admin-v2-font-weight-medium);
  text-align: left;
  cursor: pointer;
}

.admin-shell-v3-menu__item:hover,
.admin-shell-v3-menu__item[aria-current='page'] {
  background: var(--admin-v2-color-primary-soft);
  color: var(--admin-v2-color-primary);
}

.admin-shell-v3-menu__item:disabled {
  cursor: default;
  opacity: 0.54;
}

.admin-shell-v3-menu__item:disabled:hover {
  background: transparent;
  color: var(--admin-v2-color-text);
}

.admin-shell-v3-menu__zones {
  border-top: 1px solid var(--admin-v2-border-default);
  margin-top: var(--admin-v2-space-3);
  padding-top: var(--admin-v2-space-3);
  display: flex;
  flex-wrap: wrap;
  gap: var(--admin-v2-space-2);
}

.admin-shell-v3-zone-pill {
  min-height: 30px;
  border: 1px solid var(--admin-v2-border-default);
  border-radius: 999px;
  background: var(--admin-v2-color-surface-muted);
  color: var(--admin-v2-color-text-muted);
  padding: 0 var(--admin-v2-space-3);
  font-size: var(--admin-v2-font-size-meta);
  font-weight: var(--admin-v2-font-weight-semibold);
  cursor: pointer;
}

.admin-shell-v3-zone-pill:hover,
.admin-shell-v3-zone-pill[aria-current='true'] {
  border-color: var(--admin-v2-border-active);
  background: var(--admin-v2-color-primary-soft);
  color: var(--admin-v2-color-primary);
}

.admin-shell-v3-tools-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--admin-v2-space-3);
}

.admin-shell-v3-tools-group {
  min-width: 0;
  border: 1px solid var(--admin-v2-border-subtle, var(--admin-v2-border-default));
  border-radius: var(--admin-v2-radius-panel);
  background: var(--admin-v2-color-surface-muted);
  padding: var(--admin-v2-space-2);
}

.admin-shell-v3-tools-group h2 {
  margin: 0 0 var(--admin-v2-space-2);
  padding: 0 var(--admin-v2-space-1);
  color: var(--admin-v2-color-text-muted);
  font-size: var(--admin-v2-font-size-meta);
  line-height: var(--admin-v2-line-height-meta);
  font-weight: var(--admin-v2-font-weight-semibold);
}

@media (max-width: 760px) {
  .admin-shell-v3-topbar {
    gap: var(--admin-v2-space-2);
    padding-inline: var(--admin-v2-space-3);
    overflow-x: auto;
  }

  .admin-shell-v3-trigger,
  .admin-shell-v3-primary {
    min-height: var(--admin-control-compact);
    padding-inline: var(--admin-v2-space-3);
  }

  .admin-shell-v3-trigger--module,
  .admin-shell-v3-trigger--tools,
  .admin-shell-v3-trigger--ai {
    min-width: auto;
  }

  .admin-shell-v3-menu--tools {
    right: auto;
    left: 50%;
    transform: translateX(-50%);
  }

  .admin-shell-v3-tools-grid {
    grid-template-columns: 1fr;
  }
}

/* Admin Shell V4 — Capability Action Bar */
.admin-capability-action-bar {
  min-height: var(--admin-v2-topbar-height);
  border-bottom: 1px solid var(--admin-v2-border-default);
  background: var(--admin-v2-color-surface-overlay);
  backdrop-filter: blur(18px);
  display: flex;
  align-items: center;
  gap: var(--admin-v2-space-2);
  padding: 0 var(--admin-v2-app-gutter);
  position: sticky;
  top: 0;
  z-index: 20;
}

.admin-capability-action-bar__slot {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.admin-capability-action-bar__spacer {
  flex: 1 1 auto;
}

.admin-capability-action-bar__trigger,
.admin-capability-action-bar__primary {
  box-sizing: border-box;
  height: var(--admin-v2-interactive-control-height);
  min-height: var(--admin-v2-interactive-control-height);
  max-height: var(--admin-v2-interactive-control-height);
  border: 1px solid var(--admin-v2-border-default);
  border-radius: var(--admin-v2-radius-interactive);
  background: var(--admin-v2-color-surface);
  color: var(--admin-v2-color-text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--admin-v2-space-2);
  padding: 0 var(--admin-v2-interactive-control-padding-x);
  font-family: var(--admin-v2-font-family);
  font-size: var(--admin-v2-interactive-control-font-size);
  line-height: var(--admin-v2-interactive-control-line-height);
  font-weight: var(--admin-v2-font-weight-medium);
  white-space: nowrap;
  box-shadow: var(--admin-v2-shadow-xs);
  cursor: pointer;
}

.admin-capability-action-bar__trigger svg,
.admin-capability-action-bar__trigger .lucide,
.admin-capability-action-bar__primary svg,
.admin-capability-action-bar__primary .lucide {
  width: var(--admin-v2-interactive-control-icon-size);
  height: var(--admin-v2-interactive-control-icon-size);
  flex-shrink: 0;
}

.admin-capability-action-bar__trigger:hover,
.admin-capability-action-bar__trigger[aria-expanded="true"] {
  border-color: var(--admin-v2-border-active);
  background: var(--admin-v2-color-primary-soft);
  color: var(--admin-v2-color-primary);
}

.admin-capability-action-bar__trigger:focus-visible,
.admin-capability-action-bar__primary:focus-visible,
.admin-capability-action-bar__item:focus-visible,
.admin-capability-action-bar__capability:focus-visible,
.admin-capability-action-bar__menu-header button:focus-visible {
  outline: none;
  box-shadow: var(--admin-v2-focus-ring);
}

.admin-capability-action-bar__trigger--context {
  min-width: 188px;
  justify-content: flex-start;
}

.admin-capability-action-bar__context-copy {
  min-width: 0;
  display: inline-flex;
  align-items: baseline;
  gap: var(--admin-v2-space-1);
  text-align: left;
}

.admin-capability-action-bar__context-copy strong,
.admin-capability-action-bar__context-copy small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--admin-v2-interactive-control-font-size);
  line-height: var(--admin-v2-interactive-control-line-height);
}

.admin-capability-action-bar__context-copy strong {
  color: inherit;
}

.admin-capability-action-bar__context-copy small {
  color: var(--admin-v2-color-text-muted);
  font-weight: var(--admin-v2-font-weight-medium);
}

.admin-capability-action-bar__trigger--ai {
  border-color: color-mix(in srgb, var(--admin-v2-color-primary) 24%, var(--admin-v2-border-default));
}

.admin-capability-action-bar__primary {
  border-color: var(--admin-v2-color-primary);
  background: var(--admin-v2-color-primary);
  color: var(--admin-v2-color-text-inverse);
}

.admin-capability-action-bar__primary:hover {
  filter: brightness(0.98);
  transform: translateY(-1px);
}

.admin-capability-action-bar__primary--publish {
  min-width: 112px;
}

.admin-capability-action-bar__menu {
  position: absolute;
  top: calc(100% + var(--admin-v2-space-2));
  max-height: var(--admin-v2-shell-menu-max-height, calc(100dvh - var(--admin-v2-topbar-height) - var(--admin-v2-space-4)));
  border: 1px solid var(--admin-v2-border-default);
  border-radius: var(--admin-v2-radius-panel);
  background: var(--admin-v2-color-surface);
  box-shadow: var(--admin-v2-shadow-floating);
  padding: var(--admin-v2-space-3);
  z-index: 40;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.admin-capability-action-bar__menu--context {
  left: 0;
  width: min(var(--admin-v2-context-menu-width), calc(100vw - (var(--admin-v2-app-gutter) * 2)));
  padding: var(--admin-v2-space-2);
  /* Flyouts render outside the panel — must not clip */
  overflow: visible;
}

/* Keep hover alive while moving from trigger into the panel */
.admin-capability-action-bar__menu--context::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: var(--admin-v2-space-2);
}

.admin-capability-action-bar__menu--mode {
  right: 0;
  width: min(560px, calc(100vw - (var(--admin-v2-app-gutter) * 2)));
}

/* Work-place rows with hover flyout to the right */
.admin-v2-context-menu__places {
  display: grid;
  gap: var(--admin-v2-space-1);
}

.admin-v2-context-menu__place {
  position: relative;
  border-radius: var(--admin-v2-radius-interactive);
}

.admin-v2-context-menu__place-toggle,
.admin-v2-context-menu__place-link {
  width: 100%;
  min-height: var(--admin-v2-control-height-lg);
  border: 1px solid transparent;
  border-radius: var(--admin-v2-radius-interactive);
  background: transparent;
  color: var(--admin-v2-color-text);
  display: flex;
  align-items: center;
  gap: var(--admin-v2-space-3);
  padding: var(--admin-v2-space-2) var(--admin-v2-space-3);
  font-family: var(--admin-v2-font-family);
  font-size: var(--admin-v2-font-size-body);
  line-height: var(--admin-v2-line-height-body);
  font-weight: var(--admin-v2-font-weight-medium);
  text-align: left;
  cursor: pointer;
}

.admin-v2-context-menu__place-toggle:hover,
.admin-v2-context-menu__place-link:hover,
.admin-v2-context-menu__place:hover > .admin-v2-context-menu__place-toggle,
.admin-v2-context-menu__place:focus-within > .admin-v2-context-menu__place-toggle,
.admin-v2-context-menu__place--open > .admin-v2-context-menu__place-toggle,
.admin-v2-context-menu__place-link[aria-current="page"],
.admin-v2-context-menu__destination:hover,
.admin-v2-context-menu__destination[aria-current="page"] {
  background: var(--admin-v2-color-primary-soft);
  color: var(--admin-v2-color-primary);
}

.admin-v2-context-menu__place-toggle:focus-visible,
.admin-v2-context-menu__place-link:focus-visible,
.admin-v2-context-menu__destination:focus-visible,
.admin-capability-action-bar__item--manage:focus-visible {
  outline: none;
  box-shadow: var(--admin-v2-focus-ring);
}

.admin-v2-context-menu__place-icon {
  width: var(--admin-v2-icon-size-md);
  height: var(--admin-v2-icon-size-md);
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: inherit;
}

.admin-v2-context-menu__place-icon svg,
.admin-v2-context-menu__place-icon .lucide {
  width: var(--admin-v2-icon-size-sm);
  height: var(--admin-v2-icon-size-sm);
}

.admin-v2-context-menu__place-label {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-v2-context-menu__place-chevron {
  flex-shrink: 0;
  color: var(--admin-v2-color-text-muted);
}

.admin-capability-action-bar__slot--trailing {
  display: flex;
  align-items: center;
  gap: var(--admin-v2-space-2);
  min-width: 0;
}

/*
 * CONTEXT menu footer icon rail — Manage (optional) + Appearance (3) + Logout.
 * Equal grid slots. Appearance uses display:contents so radios are peer cells.
 * Role: admin chrome context-menu footer only (not entity-sheet footer).
 */
.admin-capability-action-bar__menu-footer-icons {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: center;
  gap: var(--admin-v2-space-1);
  width: 100%;
  margin: 0;
  padding: var(--admin-v2-space-1);
  box-sizing: border-box;
  border-radius: var(--admin-v2-radius-interactive);
  background: var(--admin-v2-color-surface-muted);
}

.admin-capability-action-bar__menu-footer-icons[data-footer-icons="5"] {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.admin-v2-context-menu__appearance {
  display: contents;
}

.admin-v2-context-menu__appearance-btn,
.admin-v2-context-menu__footer-icon-btn {
  display: grid;
  place-items: center;
  width: 100%;
  min-width: 0;
  height: var(--admin-v2-interactive-control-height);
  margin: 0;
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--admin-v2-radius-interactive);
  background: transparent;
  color: var(--admin-v2-color-text-muted);
  cursor: pointer;
}

.admin-v2-context-menu__appearance-btn:hover,
.admin-v2-context-menu__footer-icon-btn:hover {
  color: var(--admin-v2-color-text);
  background: var(--admin-v2-color-surface);
}

.admin-v2-context-menu__appearance-btn:focus-visible,
.admin-v2-context-menu__footer-icon-btn:focus-visible {
  outline: 2px solid var(--admin-v2-color-primary);
  outline-offset: 2px;
}

.admin-v2-context-menu__footer-icon-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.admin-v2-context-menu__appearance-btn--selected {
  color: var(--admin-v2-color-text);
  border-color: var(--admin-v2-border-default);
  background: var(--admin-v2-color-surface);
}

.admin-v2-context-menu__appearance-btn--selected[data-appearance="revolutionary"] {
  color: var(--pg-ui-color-primary);
  border-color: color-mix(in srgb, var(--pg-ui-color-primary) 45%, transparent);
}

.admin-v2-context-menu__appearance-btn svg,
.admin-v2-context-menu__appearance-btn .lucide,
.admin-v2-context-menu__footer-icon-btn svg,
.admin-v2-context-menu__footer-icon-btn .lucide {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.admin-v2-context-menu__place:hover > .admin-v2-context-menu__place-toggle .admin-v2-context-menu__place-chevron,
.admin-v2-context-menu__place:focus-within > .admin-v2-context-menu__place-toggle .admin-v2-context-menu__place-chevron,
.admin-v2-context-menu__place--open > .admin-v2-context-menu__place-toggle .admin-v2-context-menu__place-chevron {
  color: var(--admin-v2-color-primary);
}

.admin-v2-context-menu__destinations {
  position: absolute;
  /* Default: align with the zone row and grow downward (CapabilityActionBar
     may shift `top` up when a long list would cross the shell footer).
     Flush to the place edge so pointer transit cannot fall through a gap. */
  top: 0;
  bottom: auto;
  left: 100%;
  z-index: 50;
  display: grid;
  gap: var(--admin-v2-space-1);
  width: min(var(--admin-v2-context-menu-flyout-width), calc(100vw - (var(--admin-v2-app-gutter) * 2)));
  margin: 0;
  padding: var(--admin-v2-space-1);
  border-radius: var(--admin-v2-radius-panel);
  background: var(--admin-v2-color-surface);
  border: 1px solid var(--admin-v2-border-default);
  box-shadow: var(--admin-v2-shadow-floating);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}

/* Hover bridge: covers diagonal transit + any sub-pixel gap into the flyout */
.admin-v2-context-menu__destinations::before {
  content: "";
  position: absolute;
  top: calc(var(--admin-v2-space-3) * -1);
  bottom: calc(var(--admin-v2-space-3) * -1);
  right: 100%;
  width: var(--admin-v2-space-3);
  height: auto;
}

.admin-v2-context-menu__place:hover > .admin-v2-context-menu__destinations,
.admin-v2-context-menu__place:focus-within > .admin-v2-context-menu__destinations,
.admin-v2-context-menu__place--open > .admin-v2-context-menu__destinations {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}

.admin-v2-context-menu__destination {
  width: 100%;
  min-height: var(--admin-v2-interactive-control-height);
  border: 1px solid transparent;
  border-radius: var(--admin-v2-radius-interactive);
  background: transparent;
  color: var(--admin-v2-color-text);
  display: flex;
  align-items: center;
  padding: 0 var(--admin-v2-space-3);
  font-family: var(--admin-v2-font-family);
  font-size: var(--admin-v2-font-size-control);
  line-height: var(--admin-v2-line-height-control);
  font-weight: var(--admin-v2-font-weight-medium);
  text-align: left;
  cursor: pointer;
}

.admin-capability-action-bar__menu-footer {
  display: grid;
  gap: var(--admin-v2-space-1);
  margin-top: var(--admin-v2-space-2);
  padding-top: var(--admin-v2-space-2);
  border-top: 1px solid var(--admin-v2-border-default);
}


.admin-capability-action-bar__menu-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--admin-v2-space-3);
  padding: var(--admin-v2-space-1) var(--admin-v2-space-1) var(--admin-v2-space-3);
}

.admin-capability-action-bar__menu-header div {
  display: grid;
  gap: var(--admin-v2-space-1);
}

.admin-capability-action-bar__menu-header span,
.admin-capability-action-bar__section-label {
  color: var(--admin-v2-color-text-muted);
  font-size: var(--admin-v2-font-size-meta);
  line-height: var(--admin-v2-line-height-meta);
  font-weight: var(--admin-v2-font-weight-medium);
  text-transform: uppercase;
  letter-spacing: .04em;
}

.admin-capability-action-bar__menu-header strong {
  color: var(--admin-v2-color-text);
  font-size: var(--admin-v2-font-size-heading-sm);
  line-height: var(--admin-v2-line-height-heading-sm);
}

.admin-capability-action-bar__menu-header button {
  width: var(--admin-v2-control-height-sm);
  height: var(--admin-v2-control-height-sm);
  border: 1px solid transparent;
  border-radius: var(--admin-v2-radius-interactive);
  background: transparent;
  color: var(--admin-v2-color-text-muted);
  display: grid;
  place-items: center;
  cursor: pointer;
}

.admin-capability-action-bar__menu-header button:hover {
  background: var(--admin-v2-color-surface-muted);
  color: var(--admin-v2-color-text);
}

.admin-capability-action-bar__capability-list,
.admin-capability-action-bar__module-list {
  display: grid;
  gap: var(--admin-v2-space-1);
}

.admin-capability-action-bar__capability-list {
  margin-bottom: var(--admin-v2-space-4);
}

.admin-capability-action-bar__capability,
.admin-capability-action-bar__item {
  width: 100%;
  min-height: var(--admin-v2-control-height-lg);
  border: 1px solid transparent;
  border-radius: var(--admin-v2-radius-interactive);
  background: transparent;
  color: var(--admin-v2-color-text);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--admin-v2-space-3);
  padding: var(--admin-v2-space-2) var(--admin-v2-space-3);
  font-family: var(--admin-v2-font-family);
  font-size: var(--admin-v2-font-size-control);
  text-align: left;
  cursor: pointer;
}

/* Context footer rows: icon + label flush left (same rhythm as place rows) */
.admin-capability-action-bar__menu-footer .admin-capability-action-bar__item,
.admin-capability-action-bar__item--manage {
  justify-content: flex-start;
  text-align: left;
  color: var(--admin-v2-color-text-muted);
  font-weight: var(--admin-v2-font-weight-medium);
}

.admin-capability-action-bar__menu-footer .admin-capability-action-bar__item:hover,
.admin-capability-action-bar__item--manage:hover {
  color: var(--admin-v2-color-primary);
}

.admin-capability-action-bar__menu-footer .admin-capability-action-bar__item svg,
.admin-capability-action-bar__menu-footer .admin-capability-action-bar__item .lucide {
  width: var(--admin-v2-icon-size-sm);
  height: var(--admin-v2-icon-size-sm);
  flex-shrink: 0;
}

.admin-capability-action-bar__capability {
  display: grid;
  align-items: start;
  justify-content: stretch;
}

.admin-capability-action-bar__capability strong {
  font-size: var(--admin-v2-font-size-body);
  line-height: var(--admin-v2-line-height-body);
}

.admin-capability-action-bar__capability span,
.admin-capability-action-bar__item small {
  color: var(--admin-v2-color-text-muted);
  font-size: var(--admin-v2-font-size-meta);
  line-height: var(--admin-v2-line-height-meta);
}

.admin-capability-action-bar__capability:hover,
.admin-capability-action-bar__capability[aria-current="true"],
.admin-capability-action-bar__item:hover,
.admin-capability-action-bar__item[aria-current="page"] {
  background: var(--admin-v2-color-primary-soft);
  color: var(--admin-v2-color-primary);
}

.admin-capability-action-bar__item:disabled {
  cursor: not-allowed;
  opacity: .52;
}

.admin-capability-action-bar__item:disabled:hover {
  background: transparent;
  color: var(--admin-v2-color-text);
}

.admin-capability-action-bar__menu-section {
  display: grid;
  gap: var(--admin-v2-space-2);
  padding-top: var(--admin-v2-space-3);
  border-top: 1px solid var(--admin-v2-border-default);
}

.admin-capability-action-bar__launcher {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--admin-v2-space-3);
}

.admin-capability-action-bar__launcher-group {
  min-width: 0;
  border: 1px solid var(--admin-v2-border-default);
  border-radius: var(--admin-v2-radius-card);
  background: var(--admin-v2-color-surface-muted);
  padding: var(--admin-v2-space-2);
}

.admin-capability-action-bar__launcher-group h2 {
  margin: 0 0 var(--admin-v2-space-2);
  padding: 0 var(--admin-v2-space-1);
  color: var(--admin-v2-color-text-muted);
  font-size: var(--admin-v2-font-size-meta);
  line-height: var(--admin-v2-line-height-meta);
  font-weight: var(--admin-v2-font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: .04em;
}

@media (max-width: 860px) {
  .admin-capability-action-bar {
    gap: var(--admin-v2-space-2);
  }

  .admin-capability-action-bar__trigger--context {
    min-width: 0;
  }

  .admin-capability-action-bar__context-copy small {
    display: none;
  }

  .admin-capability-action-bar__launcher {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .admin-capability-action-bar__trigger--ai span,
  .admin-capability-action-bar__trigger--mode span,
  .admin-capability-action-bar__primary span {
    display: none;
  }

  .admin-capability-action-bar__trigger,
  .admin-capability-action-bar__primary {
    padding: 0 var(--admin-v2-space-3);
  }
}
/* Pagayo UI Framework additions: launcher engine + capability grammar */
.admin-capability-action-bar__menu--mode {
  width: min(840px, calc(100vw - 32px));
  max-height: min(680px, calc(100vh - 92px));
  overflow: hidden;
}

.pagayo-launcher {
  display: grid;
  grid-template-columns: minmax(260px, 330px) minmax(300px, 1fr);
  gap: 14px;
  min-height: 440px;
  padding: 12px;
  background: color-mix(in srgb, var(--admin-v2-color-surface) 88%, var(--admin-v2-color-surface-hover));
}

.pagayo-launcher__index {
  display: flex;
  flex-direction: column;
  gap: 14px;
  overflow: auto;
  padding-right: 4px;
}

.pagayo-launcher__section {
  display: grid;
  gap: 8px;
}

.pagayo-launcher__section-heading {
  display: grid;
  gap: 2px;
  padding: 0 4px;
}

.pagayo-launcher__section-heading h2 {
  margin: 0;
  color: var(--admin-v2-color-text-muted);
  font-size: 11px;
  font-weight: 750;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.pagayo-launcher__section-heading p {
  margin: 0;
  color: var(--admin-v2-color-text-soft);
  font-size: 12px;
  line-height: 1.35;
}

.pagayo-launcher__items,
.pagayo-launcher__options {
  display: grid;
  gap: 6px;
}

.pagayo-launcher__item,
.pagayo-launcher__option {
  width: 100%;
  border: 1px solid transparent;
  border-radius: 14px;
  background: transparent;
  color: var(--admin-v2-color-text);
  cursor: pointer;
  font: inherit;
  text-align: left;
  transition: background 160ms ease, border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.pagayo-launcher__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 10px 11px;
}

.pagayo-launcher__item > span,
.pagayo-launcher__option > span {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.pagayo-launcher__item strong,
.pagayo-launcher__option span {
  font-size: 13px;
  font-weight: 680;
  line-height: 1.25;
}

.pagayo-launcher__item small,
.pagayo-launcher__option small {
  color: var(--admin-v2-color-text-muted);
  font-size: 11.5px;
  line-height: 1.25;
}

.pagayo-launcher__item:hover,
.pagayo-launcher__item[aria-current="true"],
.pagayo-launcher__option:hover,
.pagayo-launcher__option[aria-pressed="true"] {
  border-color: color-mix(in srgb, var(--admin-v2-color-primary) 22%, transparent);
  background: color-mix(in srgb, var(--admin-v2-color-primary) 8%, var(--admin-v2-color-surface));
  box-shadow: 0 1px 0 color-mix(in srgb, var(--admin-v2-color-text) 4%, transparent);
}

.pagayo-launcher__item:focus-visible,
.pagayo-launcher__option:focus-visible,
.pagayo-launcher__search input:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--admin-v2-color-primary) 55%, transparent);
  outline-offset: 2px;
}

.pagayo-launcher__item:disabled,
.pagayo-launcher__option:disabled {
  cursor: not-allowed;
  opacity: 0.48;
}

.pagayo-launcher__panel {
  display: grid;
  align-content: start;
  gap: 14px;
  min-height: 100%;
  padding: 16px;
  border: 1px solid var(--admin-v2-border-default);
  border-radius: 20px;
  background: var(--admin-v2-color-surface);
  box-shadow: var(--admin-v2-shadow-lg);
}

.pagayo-launcher__panel--empty {
  place-content: center;
  text-align: center;
  color: var(--admin-v2-color-text-muted);
}

.pagayo-launcher__panel-heading {
  display: grid;
  gap: 4px;
}

.pagayo-launcher__panel-heading strong {
  color: var(--admin-v2-color-text);
  font-size: 15px;
  font-weight: 760;
}

.pagayo-launcher__panel-heading span {
  color: var(--admin-v2-color-text-muted);
  font-size: 12.5px;
  line-height: 1.45;
}

.pagayo-launcher__search {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--admin-v2-space-2, 10px);
  height: var(--admin-v2-search-height, var(--admin-v2-field-control-height, 36px));
  min-height: var(--admin-v2-search-height, var(--admin-v2-field-control-height, 36px));
  padding: 0 var(--admin-v2-search-padding-x, 1.25rem);
  border: 1.5px solid var(--admin-v2-border-default, var(--admin-v2-border-default));
  border-radius: var(--admin-v2-search-radius, var(--admin-v2-radius-md, 8px));
  background: var(--admin-v2-color-surface);
  color: var(--admin-v2-color-text-muted, var(--admin-v2-color-text-muted));
  box-sizing: border-box;
}

.pagayo-launcher__search > svg,
.pagayo-launcher__search .lucide {
  flex-shrink: 0;
  width: var(--admin-v2-search-icon-size, 18px);
  height: var(--admin-v2-search-icon-size, 18px);
}

.pagayo-launcher__search:focus-within {
  border-color: var(--admin-v2-color-primary, var(--admin-v2-color-primary));
  box-shadow: 0 0 0 3px var(--admin-v2-color-primary-soft, color-mix(in srgb, var(--admin-v2-color-primary) 16%, transparent));
}

.pagayo-launcher__search input {
  width: 100%;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--admin-v2-color-text, var(--admin-v2-color-text));
  font: inherit;
  font-size: var(--admin-v2-field-control-font-size, 14px);
  font-weight: var(--admin-v2-font-weight-medium, 500);
}

.pagayo-launcher__search input::placeholder {
  color: var(--admin-v2-color-text-muted, var(--admin-v2-color-text-muted));
}

.pagayo-launcher__option {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 10px;
  min-height: 40px;
  padding: 9px 11px;
}

@media (max-width: 820px) {
  .admin-capability-action-bar__menu--mode {
    width: calc(100vw - 20px);
  }

  .pagayo-launcher {
    grid-template-columns: 1fr;
    max-height: calc(100vh - 120px);
    overflow: auto;
  }

  .pagayo-launcher__panel {
    min-height: auto;
  }
}

/* Launcher Runtime -------------------------------------------------------- */
.pagayo-launcher__panel-actions {
  align-items: center;
  border-top: 1px solid var(--admin-v2-border-subtle);
  display: flex;
  gap: 0.5rem;
  justify-content: flex-end;
  margin-top: 1rem;
  padding-top: 0.75rem;
}

.pagayo-launcher__clear,
.pagayo-launcher__apply {
  align-items: center;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--admin-v2-color-text) 10%, transparent);
  display: inline-flex;
  font-size: 0.8125rem;
  font-weight: 650;
  gap: 0.375rem;
  min-height: 2rem;
  padding: 0 0.75rem;
}

.pagayo-launcher__clear {
  background: var(--admin-v2-color-surface-overlay);
  color: var(--admin-v2-color-text-muted);
}

.pagayo-launcher__apply {
  background: var(--admin-v2-color-text);
  color: var(--admin-v2-color-text-inverse);
}

.pagayo-launcher__option[aria-pressed='true'] {
  border-color: color-mix(in srgb, var(--admin-v2-color-primary) 35%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--admin-v2-color-primary) 12%, transparent), var(--admin-v2-shadow-lg);
}

/* v2/admin-v2/shell-footer.css */
/**
 * Admin shell footer — collection / list chrome.
 * Fixed zones: AI (left) · list tools (center) · New/primary (right).
 * Hidden while an entity sheet is open (sheet owns its own foot).
 */

.admin-v2-shell-footer {
  box-sizing: border-box;
  min-height: var(--admin-v2-shell-footer-min-height);
  border-top: 1px solid var(--admin-v2-border-default);
  background: var(--admin-v2-color-surface-overlay);
  backdrop-filter: blur(18px);
  /* Content-edge shadow: chrome-edge.css (shared with entity-sheet foot). */
  padding: var(--admin-v2-chrome-bar-padding-y, var(--admin-v2-space-4)) var(--admin-v2-app-gutter);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--admin-v2-space-3);
  position: sticky;
  bottom: 0;
  z-index: 19;
}

body.admin-v2-sheet-open .admin-v2-shell-footer {
  display: none;
}

.admin-v2-shell-footer__zone {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--admin-v2-space-2);
  min-width: 0;
}

.admin-v2-shell-footer__zone--ai {
  flex: 0 0 auto;
}

.admin-v2-shell-footer__zone--tools {
  flex: 1 1 12rem;
  justify-content: center;
}

.admin-v2-shell-footer__zone--primary {
  flex: 0 0 auto;
  margin-left: auto;
}

.admin-v2-shell-footer__action {
  box-sizing: border-box;
  height: var(--admin-v2-interactive-control-height);
  min-height: var(--admin-v2-interactive-control-height);
  max-height: var(--admin-v2-interactive-control-height);
  border: 1px solid var(--admin-v2-border-default);
  border-radius: var(--admin-v2-radius-interactive);
  background: var(--admin-v2-color-surface);
  color: var(--admin-v2-color-text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--admin-v2-space-2);
  padding: 0 var(--admin-v2-interactive-control-padding-x);
  font-family: var(--admin-v2-font-family);
  font-size: var(--admin-v2-interactive-control-font-size);
  line-height: var(--admin-v2-interactive-control-line-height);
  font-weight: var(--admin-v2-font-weight-medium);
  white-space: nowrap;
  box-shadow: var(--admin-v2-shadow-xs);
  cursor: pointer;
}

.admin-v2-shell-footer__action:hover:not(:disabled) {
  border-color: var(--admin-v2-border-active);
  background: var(--admin-v2-color-primary-soft);
}

.admin-v2-shell-footer__action:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.admin-v2-shell-footer__action--danger {
  color: var(--admin-v2-color-danger);
}

.admin-v2-shell-footer__action--ai {
  border-color: color-mix(in srgb, var(--admin-v2-color-primary) 24%, var(--admin-v2-border-default));
}

/* Tools off = inviting success cue to open the toolbar; on = quiet neutral. */
.admin-v2-shell-footer__action--tools {
  border-color: color-mix(
    in srgb,
    var(--admin-v2-label-text-success) 28%,
    var(--admin-v2-border-default)
  );
  background: var(--admin-v2-label-bg-success);
  color: var(--admin-v2-label-text-success);
}

.admin-v2-shell-footer__action--tools-active {
  border-color: var(--admin-v2-border-default);
  background: var(--admin-v2-color-surface);
  color: var(--admin-v2-color-text);
}

.admin-v2-shell-footer__action--primary {
  border-color: var(--admin-v2-color-primary);
  background: var(--admin-v2-color-primary);
  color: var(--admin-v2-color-text-inverse);
}

.admin-v2-shell-footer__action--primary:hover:not(:disabled) {
  filter: brightness(0.98);
  transform: translateY(-1px);
  background: var(--admin-v2-color-primary);
  color: var(--admin-v2-color-text-inverse);
}

/**
 * Partner / shipping-provider CTA (e.g. Sendcloud connect on shipping hub).
 * Brand fill is intentional partner chrome — not Pagayo primary.
 * Specificity beats the default footer action hover soft-fill.
 */
.admin-v2-shell-footer__action.admin-v2-shell-footer__action--partner {
  border-color: var(--admin-v2-shell-footer-partner-bg);
  background-color: var(--admin-v2-shell-footer-partner-bg);
  background-image: none;
  color: var(--admin-v2-shell-footer-partner-fg);
}

.admin-v2-shell-footer__action.admin-v2-shell-footer__action--partner:hover:not(:disabled) {
  filter: brightness(1.08);
  border-color: var(--admin-v2-shell-footer-partner-bg);
  background-color: var(--admin-v2-shell-footer-partner-bg);
  background-image: none;
  color: var(--admin-v2-shell-footer-partner-fg);
  transform: none;
}

.admin-v2-shell-footer__action--primary.admin-v2-shell-footer__action--publish {
  min-width: 112px;
}

.admin-v2-shell-footer__action svg,
.admin-v2-shell-footer__action .lucide {
  width: var(--admin-v2-interactive-control-icon-size);
  height: var(--admin-v2-interactive-control-icon-size);
  flex-shrink: 0;
}

.admin-v2-shell-footer__lang-switch {
  position: relative;
  flex: 0 0 auto;
}

.admin-v2-shell-footer__lang-switch-trigger {
  max-width: min(20rem, 42vw);
  justify-content: flex-start;
}

.admin-v2-shell-footer__lang-switch-copy {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.admin-v2-shell-footer__lang-switch-flag {
  width: 1.25rem;
  height: 0.875rem;
  flex: 0 0 auto;
  border: 1px solid var(--admin-v2-border-default);
  border-radius: var(--admin-v2-radius-xs);
  box-shadow: var(--admin-v2-shadow-xs);
}

.admin-v2-shell-footer__lang-menu {
  box-sizing: border-box;
  position: absolute;
  inset-inline-start: 0;
  inset-block-end: calc(100% + var(--admin-v2-space-2));
  z-index: 30;
  width: max-content;
  min-width: 17rem;
  max-width: min(
    24rem,
    calc(100vw - var(--admin-v2-app-gutter) - var(--admin-v2-app-gutter))
  );
  max-height: min(24rem, calc(100vh - 8rem));
  overflow-y: auto;
  padding: var(--admin-v2-space-2);
  border: 1px solid var(--admin-v2-border-default);
  border-radius: var(--admin-v2-radius-interactive);
  background: var(--admin-v2-color-surface);
  box-shadow: var(--admin-v2-shadow-floating);
}

.admin-v2-shell-footer__lang-menu-list {
  display: grid;
  gap: var(--admin-v2-space-1);
  margin: 0;
  padding: 0;
  list-style: none;
}

.admin-v2-shell-footer__lang-menu-item {
  box-sizing: border-box;
  width: 100%;
  min-height: var(--admin-v2-interactive-control-height);
  border: 1px solid transparent;
  border-radius: var(--admin-v2-radius-interactive);
  background: transparent;
  color: var(--admin-v2-color-text);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: var(--admin-v2-space-2);
  padding: var(--admin-v2-space-2) var(--admin-v2-space-3);
  font: inherit;
  text-align: start;
  cursor: pointer;
}

.admin-v2-shell-footer__lang-menu-item:hover,
.admin-v2-shell-footer__lang-menu-item:focus-visible {
  border-color: var(--admin-v2-border-active);
  background: var(--admin-v2-color-primary-soft);
  outline: none;
}

.admin-v2-shell-footer__lang-menu-item[aria-current="true"] {
  border-color: var(--admin-v2-border-active);
  background: var(--admin-v2-color-primary-soft);
}

.admin-v2-shell-footer__lang-menu-copy {
  min-width: 0;
}

.admin-v2-shell-footer__lang-menu-name,
.admin-v2-shell-footer__lang-menu-locale {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-v2-shell-footer__lang-menu-name {
  font-weight: var(--admin-v2-font-weight-semibold);
}

.admin-v2-shell-footer__lang-menu-locale {
  color: var(--admin-v2-color-text-muted);
  font-size: var(--admin-v2-font-size-meta);
}

.admin-v2-shell-footer__lang-menu-badge {
  border-radius: var(--admin-v2-radius-label);
  background: var(--admin-v2-label-bg-info);
  color: var(--admin-v2-label-text-info);
  padding: var(--admin-v2-space-1) var(--admin-v2-space-2);
  font-size: var(--admin-v2-font-size-badge);
  font-weight: var(--admin-v2-font-weight-medium);
  white-space: nowrap;
}

.admin-v2-shell-footer__lang-menu-check {
  width: var(--admin-v2-interactive-control-icon-size);
  height: var(--admin-v2-interactive-control-icon-size);
  color: var(--admin-v2-color-primary);
}

/* Splitsknop (opdracht 188, stuk 2): de hoofdactie plus een pijltje met de andere keuzes.
 * Het menu gebruikt dezelfde vorm als het taalmenu. */
.admin-v2-shell-footer__split {
  position: relative;
  display: inline-flex;
  align-items: stretch;
}

.admin-v2-shell-footer__split > .admin-v2-shell-footer__action:first-child {
  border-start-end-radius: 0;
  border-end-end-radius: 0;
}

/* Beide helften bewegen samen, zodat de naad niet verspringt. */
.admin-v2-shell-footer__split > .admin-v2-shell-footer__action:hover:not(:disabled) {
  transform: none;
}

.admin-v2-shell-footer__split-toggle {
  border-start-start-radius: 0;
  border-end-start-radius: 0;
  border-inline-start: 1px solid color-mix(in srgb, var(--admin-v2-color-surface) 35%, transparent);
  padding: 0 var(--admin-v2-space-2);
}

.admin-v2-shell-footer__split-menu {
  box-sizing: border-box;
  position: absolute;
  inset-inline-end: 0;
  inset-block-end: calc(100% + var(--admin-v2-space-2));
  z-index: 30;
  display: grid;
  gap: var(--admin-v2-space-1);
  width: max-content;
  min-width: 14rem;
  max-width: min(
    24rem,
    calc(100vw - var(--admin-v2-app-gutter) - var(--admin-v2-app-gutter))
  );
  padding: var(--admin-v2-space-2);
  border: 1px solid var(--admin-v2-border-default);
  border-radius: var(--admin-v2-radius-interactive);
  background: var(--admin-v2-color-surface);
  box-shadow: var(--admin-v2-shadow-floating);
}

.admin-v2-shell-footer__split-menu-item {
  box-sizing: border-box;
  width: 100%;
  min-height: var(--admin-v2-interactive-control-height);
  border: 1px solid transparent;
  border-radius: var(--admin-v2-radius-interactive);
  background: transparent;
  color: var(--admin-v2-color-text);
  padding: var(--admin-v2-space-2) var(--admin-v2-space-3);
  font: inherit;
  text-align: start;
  cursor: pointer;
}

.admin-v2-shell-footer__split-menu-item:hover,
.admin-v2-shell-footer__split-menu-item:focus-visible {
  border-color: var(--admin-v2-border-active);
  background: var(--admin-v2-color-primary-soft);
  outline: none;
}

@media (max-width: 720px) {
  .admin-v2-shell-footer__action--ai span,
  .admin-v2-shell-footer__action--tools span,
  .admin-v2-shell-footer__action--primary span,
  .admin-v2-shell-footer__action--partner span {
    display: none;
  }

  .admin-v2-shell-footer__action--ai,
  .admin-v2-shell-footer__action--tools,
  .admin-v2-shell-footer__action--primary,
  .admin-v2-shell-footer__action.admin-v2-shell-footer__action--partner {
    padding: 0 var(--admin-v2-space-3);
  }

  .admin-v2-shell-footer__lang-switch-trigger {
    max-width: min(14rem, 60vw);
  }

  .admin-v2-shell-footer__lang-menu {
    min-width: min(
      18rem,
      calc(100vw - var(--admin-v2-app-gutter) - var(--admin-v2-app-gutter))
    );
  }

  .admin-v2-shell-footer__action--primary.admin-v2-shell-footer__split-toggle {
    padding: 0 var(--admin-v2-space-2);
  }
}

/* v2/admin-v2/collection-shell.css */
/**
 * Pagayo Design V2 — Collection shell (list/grid workspace).
 *
 * Toolbar, filters, body surface and row selection for entity List Pages.
 */

.admin-v2-collection-shell {
  min-height: 610px;
  border: 1px solid var(--admin-v2-border-default);
  border-radius: var(--admin-v2-radius-panel);
  background: var(--admin-v2-color-surface);
  box-shadow: var(--admin-v2-shadow-sm);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  overflow: hidden;
}

.admin-v2-collection-toolbar {
  min-height: var(--admin-v2-collection-toolbar-height);
  border-bottom: 1px solid var(--admin-v2-border-default);
  background: var(--admin-v2-collection-header-bg);
  display: grid;
  grid-template-columns: minmax(180px, 240px) minmax(280px, 1fr) auto;
  align-items: center;
  gap: var(--admin-v2-toolbar-gap);
  padding: var(--admin-v2-space-4);
}

/* Compact search/filter strip (footer Tools toggle) — no double underline. */
.admin-v2-workspace-toolbar {
  padding: var(--admin-v2-space-2) var(--admin-v2-app-gutter, var(--admin-v2-space-4));
  border-bottom: 1px solid color-mix(in srgb, var(--admin-v2-border-default) 62%, transparent);
  background: transparent;
}

/*
 * Tools open: sticky at the top of .admin-main (the only scrollport).
 * Admin V2 pins topbar/footer as flex siblings outside main — so sticky
 * `top` is relative to main, not the viewport. Using topbar-height here
 * incorrectly reserved a blank band equal to the topbar.
 */
.admin-v2-workspace-toolbar[data-toolbar-open="true"] {
  position: sticky;
  top: 0;
  z-index: 9;
  background: var(--admin-v2-color-surface-overlay);
  backdrop-filter: blur(18px);
  box-shadow: var(--admin-v2-chrome-header-shadow);
}

.admin-v2-workspace-toolbar .admin-v2-collection-toolbar,
.admin-v2-workspace-toolbar__row {
  min-height: 0;
  border-bottom: 0;
  background: transparent;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  grid-template-columns: none;
  gap: var(--admin-v2-space-2);
  padding: 0;
  width: 100%;
}

.admin-v2-collection-page-toolbar__inner {
  border-bottom: 0;
  min-height: auto;
  grid-template-columns: minmax(168px, 220px) minmax(0, 1fr);
}

.admin-v2-collection-page-toolbar {
  border: 1px solid var(--admin-v2-border-default);
  border-radius: var(--admin-v2-radius-panel);
  background: var(--admin-v2-color-surface);
  box-shadow: var(--admin-v2-shadow-xs);
  margin-bottom: var(--admin-v2-space-4);
}

.admin-v2-collection-toolbar__controls {
  display: flex;
  align-items: center;
  gap: var(--admin-v2-space-2);
  min-width: 0;
}

.admin-v2-collection-toolbar__intro {
  display: grid;
  gap: var(--admin-v2-space-1);
  min-width: 0;
}

.admin-v2-collection-toolbar__title {
  margin: 0;
  font-family: var(--admin-v2-font-family);
  font-size: var(--admin-v2-font-size-section-title);
  line-height: var(--admin-v2-line-height-section-title);
  font-weight: var(--admin-v2-font-weight-semibold);
  color: var(--admin-v2-color-text);
}

.admin-v2-collection-toolbar__subtitle {
  margin: 0;
  font-family: var(--admin-v2-font-family);
  font-size: var(--admin-v2-font-size-meta);
  line-height: var(--admin-v2-line-height-meta);
  color: var(--admin-v2-color-text-muted);
}

.admin-v2-collection-toolbar__filter {
  flex: 1 1 0;
  min-width: 8rem;
  height: var(--admin-v2-control-height-lg);
  min-height: var(--admin-v2-control-height-lg);
  border: 1px solid var(--admin-v2-border-default);
  border-radius: var(--admin-v2-radius-interactive);
  background: var(--admin-v2-color-surface);
  color: var(--admin-v2-color-text-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--admin-v2-space-2);
  padding: 0 var(--admin-v2-space-4);
  font-family: var(--admin-v2-font-family);
  font-size: var(--admin-v2-font-size-control);
  line-height: var(--admin-v2-line-height-control);
  font-weight: var(--admin-v2-font-weight-medium);
  cursor: pointer;
  box-sizing: border-box;
  box-shadow: var(--admin-v2-shadow-xs);
}

.admin-v2-collection-toolbar__filter:hover,
.admin-v2-collection-toolbar__filter[aria-pressed="true"] {
  border-color: var(--admin-v2-border-active);
  background: var(--admin-v2-color-primary-soft);
  color: var(--admin-v2-color-primary);
}

.admin-v2-collection-toolbar__actions {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--admin-v2-space-2);
}

.admin-v2-collection-toolbar__action {
  flex-shrink: 0;
  height: var(--admin-v2-control-height-lg);
  min-height: var(--admin-v2-control-height-lg);
  border: 1px solid var(--admin-v2-border-default);
  border-radius: var(--admin-v2-radius-interactive);
  background: var(--admin-v2-color-surface);
  color: var(--admin-v2-color-text-muted);
  display: inline-flex;
  align-items: center;
  gap: var(--admin-v2-space-2);
  padding: 0 var(--admin-v2-space-3);
  font-family: var(--admin-v2-font-family);
  font-size: var(--admin-v2-font-size-control);
  line-height: var(--admin-v2-line-height-control);
  font-weight: var(--admin-v2-font-weight-medium);
  white-space: nowrap;
  cursor: pointer;
  box-sizing: border-box;
  box-shadow: var(--admin-v2-shadow-xs);
}

.admin-v2-collection-toolbar__action:hover:not(:disabled),
.admin-v2-collection-toolbar__action--active {
  border-color: var(--admin-v2-border-active);
  background: var(--admin-v2-color-primary-soft);
  color: var(--admin-v2-color-primary);
}

.admin-v2-collection-toolbar__action:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.admin-v2-collection-toolbar__create {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: var(--admin-v2-space-2);
  white-space: nowrap;
  height: var(--admin-v2-control-height-lg);
  min-height: var(--admin-v2-control-height-lg);
  max-height: var(--admin-v2-control-height-lg);
  padding: 0 var(--admin-v2-space-4);
  border-radius: var(--admin-v2-radius-interactive);
  font-family: var(--admin-v2-font-family);
  font-size: var(--admin-v2-font-size-control);
  font-weight: var(--admin-v2-font-weight-medium);
  line-height: 1;
  box-sizing: border-box;
  box-shadow: var(--admin-v2-shadow-xs);
}

.admin-v2-collection-toolbar__view-toggle {
  flex-shrink: 0;
}

.admin-v2-collection-toolbar__filter:focus-visible,
.admin-v2-collection-toolbar__action:focus-visible,
.admin-v2-collection-toolbar__create:focus-visible {
  outline: none;
  box-shadow: var(--admin-v2-focus-ring);
}

.admin-v2-collection-shell--embedded-toolbar .products-card-header--controls {
  display: none;
}

.admin-v2-collection-context-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--admin-v2-space-4);
  border-bottom: 1px solid var(--admin-v2-border-default);
  padding: 0 var(--admin-v2-space-4);
  min-height: 52px;
  background: var(--admin-v2-color-surface);
}

.admin-v2-collection-context-bar__tabs {
  display: flex;
  align-items: center;
  gap: var(--admin-v2-space-1);
  flex-wrap: wrap;
  min-width: 0;
}

.admin-v2-collection-tab {
  border: 0;
  background: transparent;
  display: inline-flex;
  align-items: center;
  gap: var(--admin-v2-space-2);
  min-height: var(--admin-control-compact);
  border-radius: var(--admin-v2-radius-interactive);
  padding: 0 var(--admin-v2-space-3);
  font-family: var(--admin-v2-font-family);
  font-size: var(--admin-v2-font-size-control);
  line-height: var(--admin-v2-line-height-control);
  font-weight: var(--admin-v2-font-weight-medium);
  color: var(--admin-v2-color-text-muted);
  cursor: pointer;
  white-space: nowrap;
}

.admin-v2-collection-tab:hover {
  color: var(--admin-v2-color-text);
}

.admin-v2-collection-tab[aria-selected="true"] {
  background: var(--admin-v2-color-primary-soft);
  color: var(--admin-v2-color-primary);
  font-weight: var(--admin-v2-font-weight-semibold);
}

.admin-v2-collection-tab__count {
  min-width: 22px;
  height: 22px;
  border-radius: var(--admin-v2-radius-label);
  background: var(--admin-v2-color-primary-soft);
  color: var(--admin-v2-color-primary);
  font-size: var(--admin-v2-font-size-badge);
  line-height: 1;
  font-weight: var(--admin-v2-font-weight-medium);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 var(--admin-v2-space-2);
}

.admin-v2-collection-context-bar__hint {
  margin: 0;
  font-family: var(--admin-v2-font-family);
  font-size: var(--admin-v2-font-size-meta);
  line-height: var(--admin-v2-line-height-meta);
  color: var(--admin-v2-color-text-muted);
  text-align: right;
  flex: 0 0 auto;
  white-space: nowrap;
}

.admin-v2-collection-table-wrap {
  overflow: auto;
}

.admin-v2-collection-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--admin-v2-font-family);
}

.admin-v2-collection-table thead {
  background: var(--admin-v2-table-heading-bg);
}

/* Golden lane (Orders): fixed heading band + calm meta titles — every CollectionTable. */
.admin-v2-collection-table__heading {
  padding: var(--admin-v2-space-3) var(--admin-v2-table-row-padding-x);
  text-align: left;
  height: 48px;
  box-sizing: border-box;
  font-size: var(--admin-v2-font-size-meta);
  line-height: var(--admin-v2-line-height-meta);
  font-weight: var(--admin-v2-font-weight-medium);
  letter-spacing: var(--admin-v2-letter-spacing);
  color: var(--admin-v2-color-text-muted);
  border-bottom: 1px solid var(--admin-v2-border-default);
  white-space: nowrap;
  background: var(--admin-v2-table-heading-bg);
}

.admin-v2-collection-table__heading--end,
.admin-v2-collection-table__cell--end {
  text-align: right;
}

.admin-v2-collection-table__row {
  background: var(--admin-v2-collection-item-bg);
  cursor: pointer;
}

.admin-v2-collection-table__row:hover {
  background: var(--admin-v2-collection-item-bg-hover);
}

.admin-v2-collection-table__row--active {
  background: var(--admin-v2-color-primary-soft);
}

/* Attention row — e.g. multi-scan visit highlights (Role Contract: collection table). */
.admin-v2-collection-table__row--attention {
  background: color-mix(in srgb, var(--admin-v2-state-warning-text) 8%, transparent);
}

.admin-v2-collection-table__row--attention:hover {
  background: color-mix(in srgb, var(--admin-v2-state-warning-text) 14%, transparent);
}

.admin-v2-collection-table__cell {
  padding: var(--admin-v2-table-row-padding-y) var(--admin-v2-table-row-padding-x);
  height: var(--admin-v2-collection-row-min-height);
  box-sizing: border-box;
  border-bottom: 1px solid var(--admin-v2-border-default);
  vertical-align: middle;
  font-size: var(--admin-v2-font-size-body);
  line-height: var(--admin-v2-line-height-body);
  color: var(--admin-v2-color-text);
}

.admin-v2-collection-table__select {
  width: 44px;
  padding-left: var(--admin-v2-space-4);
  padding-right: var(--admin-v2-space-2);
  border-bottom: 1px solid var(--admin-v2-border-default);
  vertical-align: middle;
  box-sizing: border-box;
}

.admin-v2-collection-table thead .admin-v2-collection-table__select {
  height: 48px;
  background: var(--admin-v2-table-heading-bg);
}

.admin-v2-collection-table tbody .admin-v2-collection-table__select {
  height: var(--admin-v2-collection-row-min-height);
}

.admin-v2-collection-table__checkbox {
  /* Size/chrome: admin TailAdmin SSoT in forms-admin.css */
  cursor: pointer;
}

.admin-v2-collection-table__primary {
  font-size: var(--admin-v2-font-size-list-item-title);
  line-height: var(--admin-v2-line-height-list-item-title);
  font-weight: var(--admin-v2-font-weight-semibold);
  color: var(--admin-v2-color-text);
}

.admin-v2-collection-table__secondary {
  margin-top: var(--admin-v2-space-1);
  font-size: var(--admin-v2-font-size-meta);
  line-height: var(--admin-v2-line-height-meta);
  color: var(--admin-v2-color-text-muted);
}

.admin-v2-collection-table__total {
  font-variant-numeric: tabular-nums;
  font-weight: var(--admin-v2-font-weight-semibold);
  white-space: nowrap;
}

.admin-v2-collection-selection-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--admin-v2-space-4);
  background: transparent;
  padding: var(--admin-v2-space-3) var(--admin-v2-space-4);
  margin-bottom: var(--admin-v2-space-4);
}

.admin-v2-collection-selection-bar__count {
  font-family: var(--admin-v2-font-family);
  font-size: var(--admin-v2-font-size-control);
  font-weight: var(--admin-v2-font-weight-semibold);
  color: var(--admin-v2-color-text);
}

.admin-v2-collection-selection-bar__select {
  height: var(--admin-v2-control-height-lg);
  min-width: 180px;
  border: 1px solid var(--admin-v2-border-default);
  border-radius: var(--admin-v2-radius-interactive);
  background: var(--admin-v2-color-surface);
  padding: 0 var(--admin-v2-space-3);
  font-family: var(--admin-v2-font-family);
  font-size: var(--admin-v2-font-size-control);
  color: var(--admin-v2-color-text);
}

.admin-v2-collection-body {
  min-height: 0;
  overflow: auto;
}

.admin-v2-filter-chip {
  height: 38px;
  border: 0;
  border-radius: var(--admin-v2-radius-interactive);
  background: transparent;
  color: var(--admin-v2-color-text-muted);
  display: inline-flex;
  align-items: center;
  padding: 0 var(--admin-v2-space-3);
  font-family: var(--admin-v2-font-family);
  font-size: var(--admin-v2-font-size-control);
  font-weight: var(--admin-v2-font-weight-medium);
  white-space: nowrap;
  cursor: pointer;
}

.admin-v2-filter-chip:hover,
.admin-v2-filter-chip[aria-pressed="true"],
.admin-v2-filter-chip.active {
  background: var(--admin-v2-color-primary-soft);
  color: var(--admin-v2-color-primary);
}

.admin-v2-filter-chip:focus-visible,
.admin-v2-view-toggle button:focus-visible {
  outline: none;
  box-shadow: var(--admin-v2-focus-ring);
}

.admin-v2-view-toggle {
  height: var(--admin-v2-control-height-lg);
  border: 1px solid var(--admin-v2-border-default);
  border-radius: var(--admin-v2-radius-interactive);
  background: var(--admin-v2-color-surface-muted);
  padding: var(--admin-v2-space-1);
  display: flex;
  gap: var(--admin-v2-space-1);
  box-shadow: var(--admin-v2-shadow-xs);
}

.admin-v2-view-toggle button {
  min-height: 34px;
  border: 0;
  border-radius: var(--admin-v2-radius-interactive);
  background: transparent;
  color: var(--admin-v2-color-text-muted);
  padding: 0 var(--admin-v2-space-3);
  font-family: var(--admin-v2-font-family);
  font-size: var(--admin-v2-font-size-control);
  font-weight: var(--admin-v2-font-weight-medium);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: var(--admin-v2-space-2);
  white-space: nowrap;
}

.admin-v2-view-toggle button:hover {
  color: var(--admin-v2-color-text);
}

.admin-v2-view-toggle button[aria-pressed="true"],
.admin-v2-view-toggle button.active {
  background: var(--admin-v2-color-surface);
  color: var(--admin-v2-color-text);
  box-shadow: var(--admin-v2-shadow-xs);
}

.admin-v2-collection-row--selected {
  background: var(--admin-v2-collection-item-bg-selected);
}

.admin-v2-collection-row--selected td:first-child,
.admin-v2-collection-row--selected::before {
  box-shadow: inset 3px 0 0 var(--admin-v2-color-primary);
}

/* Passive status badges — pill radius only */
.admin-v2-badge {
  min-height: var(--admin-v2-badge-height);
  border-radius: var(--admin-v2-radius-label);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--admin-v2-space-1);
  padding: var(--admin-v2-badge-padding-y) var(--admin-v2-badge-padding-x);
  font-family: var(--admin-v2-font-family);
  font-size: var(--admin-v2-font-size-badge);
  line-height: var(--admin-v2-line-height-badge);
  font-weight: var(--admin-v2-font-weight-medium);
  width: fit-content;
}

.admin-v2-badge--success {
  background: var(--admin-v2-label-bg-success);
  color: var(--admin-v2-label-text-success);
}

.admin-v2-badge--warning {
  background: var(--admin-v2-label-bg-warning);
  color: var(--admin-v2-label-text-warning);
}

.admin-v2-badge--info {
  background: var(--admin-v2-label-bg-info);
  color: var(--admin-v2-label-text-info);
}

.admin-v2-badge--danger {
  background: var(--admin-v2-label-bg-danger);
  color: var(--admin-v2-label-text-danger);
}

.admin-v2-badge--neutral {
  background: var(--admin-v2-label-bg-neutral);
  color: var(--admin-v2-label-text-neutral);
}

.admin-v2-collection-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--admin-v2-space-3);
}

.admin-v2-collection-grid .products-list-row {
  height: 100%;
}

/**
 * Collection page surface — Orders is the golden lane. Since @pagayo/design 2.14.0 (opdracht 188) the
 * list sits in a white card with 24 around it (opdracht 188, stuk 5; see below).
 * Use `.admin-v2-collection-card` on every Collection Workspace list page.
 * Legacy aliases `.orders-collection-card` / `.products-collection-card` are
 * theming-only; scroll ownership is SSoT on `.admin-v2-collection-card`.
 */
.admin-v2-collection-card,
.orders-collection-card,
.products-collection-card {
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  /* Must stay visible: overflow:hidden would become the sticky containing
   * block and prevent .admin-v2-workspace-toolbar from sticking to .admin-main. */
  overflow: visible;
}

/* Lijstpagina's in de maat (opdracht 188, stuk 5; pagayo-ai-development/uiux/smaak.md):
 * het canvas blijft bijna-wit grijs, de lijst staat in een witte kaart met 1px rand,
 * 24 binnen en 24 tussenruimte, met de paginatitel (20/600) erboven. De ruimte rondom
 * hangt aan de rol "beheerpagina" (.admin-page): elke lijstpagina staat daarin. */
.admin-shell--v2 .admin-page:has(.admin-v2-collection-card) {
  padding: var(--admin-section-gap);
  background: transparent;
}

.admin-v2-page-title {
  margin: 0 0 var(--admin-section-gap);
  font-family: var(--admin-v2-font-family);
  font-size: var(--admin-v2-font-size-page-title);
  line-height: var(--admin-v2-line-height-page-title);
  font-weight: var(--admin-v2-font-weight-semibold);
  color: var(--admin-v2-color-text);
}

.admin-v2-collection-card > .admin-v2-collection-page-toolbar {
  margin: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: var(--admin-v2-color-surface);
}

.admin-v2-collection-card > .admin-v2-collection-page-toolbar .admin-v2-collection-page-toolbar__inner {
  min-height: 78px;
  gap: var(--admin-v2-space-4);
  border-bottom: 1px solid var(--admin-v2-border-default);
  padding: var(--admin-v2-space-4);
  background: var(--admin-v2-color-surface);
}

.admin-v2-collection-card .admin-v2-workspace-shell {
  flex: 0 0 auto;
  min-height: 0;
  background: transparent;
}

/* Outer CollectionWorkspace shell + inner WorkspaceListPanel shell — both flat. */
.admin-v2-collection-card .admin-v2-workspace-shell > .admin-v2-collection-shell,
.admin-v2-collection-card .admin-v2-collection-shell.products-card,
.admin-v2-collection-card .products-card.products-list-card,
.admin-v2-collection-card .admin-v2-collection-shell {
  min-height: 0;
  height: auto;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: var(--admin-v2-color-surface);
  overflow: visible;
}

/* De kaart (opdracht 188, stuk 5): de buitenste CollectionWorkspace-shell. Hij wint van
 * de platte regel hierboven op specificiteit (4 klassen tegen 3); de binnenste blijft plat. */
.admin-shell--v2 .admin-v2-collection-card .admin-v2-workspace-shell > .admin-v2-collection-shell {
  border: 1px solid var(--admin-v2-border-default);
  border-radius: var(--admin-v2-radius-md);
  padding: var(--admin-v2-card-padding-y) var(--admin-v2-card-padding-x);
}

/* Instellingen (SettingsLayout, ADR 0003) zijn geen lijstpagina: die houden hun randloze,
 * volle breedte. Leden en Houders in het beheer zijn wél lijstpagina's en krijgen de kaart.
 * De balie-terminal (/balie, ADR 0004) heeft geen admin-shell en blijft vanzelf randloos. */
.admin-shell--v2 .admin-page.settings-page .admin-v2-collection-card .admin-v2-workspace-shell > .admin-v2-collection-shell {
  border: 0;
  border-radius: 0;
  padding: 0;
}

/* Smal scherm: 16 in plaats van 24, zodat een lijst niet wordt afgesneden. */
@media (max-width: 720px) {
  .admin-shell--v2 .admin-page:has(.admin-v2-collection-card) {
    padding: var(--admin-v2-space-4);
  }

  .admin-shell--v2 .admin-v2-collection-card .admin-v2-workspace-shell > .admin-v2-collection-shell {
    padding: var(--admin-v2-space-4);
  }

  .admin-v2-page-title {
    margin-bottom: var(--admin-v2-space-4);
  }
}

.admin-v2-collection-card .admin-v2-workspace-shell > .admin-v2-collection-shell > .admin-v2-collection-body,
.admin-v2-collection-card .products-list-body {
  overflow: visible;
  background: var(--admin-v2-color-surface);
}

.admin-v2-collection-card .admin-v2-collection-context-bar {
  background: var(--admin-v2-color-surface);
}

/*
 * V2 collection lists: .admin-main is the only scrollport (shell flex column).
 * Page content grows naturally inside main — no nested list viewport.
 *
 * Critical: do NOT set `height: auto` here. With `flex-basis: auto` that lets
 * main grow to content height while `.admin-shell--v2` clips (`overflow: hidden`),
 * so long lists (Members with many pages of rows) lose their scrollport.
 * `flex: 1 1 0` keeps main sized to the remaining shell column.
 */
.admin-shell--v2 .admin-main:has(.admin-v2-collection-card) {
  display: block;
  flex: 1 1 0;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
}

.admin-shell--v2 .admin-main:has(.admin-v2-collection-card) > .admin-page,
.admin-shell--v2 .orders-page:has(.admin-v2-collection-card),
.admin-shell--v2 .products-page:has(.admin-v2-collection-card) {
  flex: none;
  height: auto;
  min-height: 0;
  max-height: none;
  overflow: visible;
}

.admin-shell--v2 .admin-v2-collection-card .admin-v2-workspace-shell {
  flex: none;
  min-height: 0;
  overflow: visible;
}

.admin-shell--v2 .admin-v2-collection-card .admin-v2-workspace-shell > .admin-v2-collection-shell,
.admin-shell--v2 .admin-v2-collection-card .admin-v2-collection-shell,
.admin-shell--v2 .admin-v2-collection-card .admin-v2-collection-body,
.admin-shell--v2 .admin-v2-collection-card .products-list-body,
.admin-shell--v2 .admin-v2-collection-card .admin-v2-collection-table-wrap {
  min-height: 0;
  height: auto;
  overflow: visible;
}

/* v2/admin-v2/entity-sheet.css */
/**
 * Pagayo Design V2 — Entity sheet (full-page editor overlay).
 *
 * Full-viewport work layer above admin shell chrome. Same slide-up entrance
 * as before; open state: body.admin-v2-sheet-open reveals backdrop and sheet.
 */

.admin-v2-entity-sheet-layer {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal, 260);
  pointer-events: none;
}

.admin-v2-entity-sheet-backdrop {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--admin-v2-sheet-backdrop);
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease;
}

.admin-v2-entity-sheet {
  position: absolute;
  inset: 0;
  z-index: 1;
  border: 0;
  border-radius: 0;
  background: var(--admin-v2-color-surface);
  box-shadow: none;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  overflow: hidden;
  pointer-events: auto;
  transform: translateY(100%);
  transition: transform 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

body.admin-v2-sheet-open .admin-v2-entity-sheet-backdrop {
  opacity: 1;
  pointer-events: auto;
}

body.admin-v2-sheet-open .admin-v2-entity-sheet {
  transform: translateY(0);
}

/* Website Editor — docked end presentation (preview stays visible beside sheet).
   Role Contract: opt-in only; Products/orders keep full-bleed default. */
.admin-v2-entity-sheet-layer--docked-end {
  pointer-events: none;
}

.admin-v2-entity-sheet-layer--docked-end .admin-v2-entity-sheet-backdrop {
  background: transparent;
  opacity: 0;
  pointer-events: none;
}

body.admin-v2-sheet-open .admin-v2-entity-sheet-layer--docked-end .admin-v2-entity-sheet-backdrop {
  opacity: 0;
  pointer-events: none;
}

.admin-v2-entity-sheet--docked-end {
  inset-block: 0;
  inset-inline: auto 0;
  width: min(26.25rem, 100%);
  max-width: 100%;
  border-inline-start: 1px solid var(--admin-v2-color-border, rgba(15, 23, 42, 0.12));
  box-shadow: var(--admin-v2-shadow-floating);
  transform: translateX(calc(100% * var(--dir-sign, 1)));
}

body.admin-v2-sheet-open .admin-v2-entity-sheet--docked-end {
  transform: translateX(0);
}

@media (max-width: 900px) {
  .admin-v2-entity-sheet--docked-end {
    inset: 0;
    width: 100%;
    border-inline-start: 0;
    box-shadow: none;
    transform: translateY(100%);
  }

  body.admin-v2-sheet-open .admin-v2-entity-sheet--docked-end {
    transform: translateY(0);
  }

  .admin-v2-entity-sheet-layer--docked-end .admin-v2-entity-sheet-backdrop {
    background: var(--admin-v2-sheet-backdrop);
  }

  body.admin-v2-sheet-open .admin-v2-entity-sheet-layer--docked-end .admin-v2-entity-sheet-backdrop {
    opacity: 1;
    pointer-events: auto;
  }
}

/* Workspace confirmations are portaled to <body>. They must sit above the
   full-page entity sheet layer. Prefer website-editor dialog token when present
   (entity sheet is raised to 1400 there); otherwise admin z-modal + 1. */
.editor-workspace-dialog-layer {
  position: fixed;
  inset: 0;
  z-index: var(--website-editor-z-dialog, calc(var(--z-modal, 260) + 1));
  display: grid;
  place-items: center;
  padding: var(--admin-v2-space-4);
}

.editor-workspace-dialog-layer__backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  background: var(--admin-v2-backdrop);
  cursor: pointer;
}

.editor-workspace-dialog {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
}

.editor-workspace-dialog__actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--admin-v2-space-2);
}

.editor-workspace-dialog__actions .editor-workspace-dialog__button {
  width: 100%;
  min-height: var(--admin-v2-button-height-md);
}

.admin-v2-entity-sheet__head {
  border-bottom: 1px solid var(--admin-v2-border-default);
  background: var(--admin-v2-color-surface-overlay);
  backdrop-filter: blur(18px);
  /* Content-edge shadow: chrome-edge.css (shared with .admin-v2-topbar). */
  padding: var(--admin-v2-chrome-bar-padding-y, var(--admin-v2-space-4)) var(--admin-v2-space-5);
}

/* Shell chrome: identity + relationship nav + close — same height as footer. */
.admin-v2-entity-sheet__head--with-tabs {
  padding: var(--admin-v2-chrome-bar-padding-y, var(--admin-v2-space-4)) var(--admin-v2-space-5);
}

.admin-v2-entity-sheet__head-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--admin-v2-space-4);
  width: 100%;
  min-width: 0;
}

.admin-v2-entity-sheet__title {
  margin: 0;
  font-family: var(--admin-v2-font-family);
  font-size: var(--admin-v2-font-size-section-title);
  line-height: var(--admin-v2-line-height-section-title);
  font-weight: var(--admin-v2-font-weight-semibold);
  color: var(--admin-v2-color-text);
  flex: 0 0 auto;
  min-width: 0;
  white-space: nowrap;
}

/* Product/entity name stays a real title even when relationship tabs share the head. */
.admin-v2-entity-sheet__head--with-tabs .admin-v2-entity-sheet__title {
  flex: 0 1 auto;
  max-width: min(42%, 22rem);
  font-size: var(--admin-v2-font-size-page-title);
  line-height: var(--admin-v2-line-height-page-title);
  font-weight: var(--admin-v2-font-weight-semibold);
  color: var(--admin-v2-color-text);
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Trailing chrome cluster (e.g. view-on-storefront) immediately before close. */
.admin-v2-entity-sheet__head-actions {
  display: inline-flex;
  align-items: center;
  gap: var(--admin-v2-space-2);
  flex: 0 0 auto;
  min-width: 0;
}

.admin-v2-entity-sheet__close {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--admin-v2-space-1);
  height: var(--admin-v2-interactive-control-height);
  min-height: var(--admin-v2-interactive-control-height);
  padding: 0 var(--admin-v2-interactive-control-padding-x);
  border: 1px solid var(--admin-v2-border-strong);
  border-radius: var(--admin-v2-radius-interactive);
  background: var(--admin-v2-color-surface);
  color: var(--admin-v2-color-text);
  cursor: pointer;
  flex: 0 0 auto;
  font-family: var(--admin-v2-font-family);
  font-size: var(--admin-v2-interactive-control-font-size);
  line-height: var(--admin-v2-interactive-control-line-height);
  font-weight: var(--admin-v2-font-weight-semibold);
  white-space: nowrap;
  text-decoration: none;
}

.admin-v2-entity-sheet__close svg {
  width: var(--admin-v2-interactive-control-icon-size);
  height: var(--admin-v2-interactive-control-icon-size);
  flex-shrink: 0;
}

.admin-v2-entity-sheet__close-label {
  display: inline-block;
}

.admin-v2-entity-sheet__close:hover {
  background: var(--admin-v2-color-surface-muted);
  color: var(--admin-v2-color-text);
  border-color: var(--admin-v2-color-text-muted);
}

.admin-v2-entity-sheet__close:focus-visible,
.admin-v2-relationship:focus-visible {
  outline: none;
  box-shadow: var(--admin-v2-focus-ring);
}

.admin-v2-entity-sheet__head-tabs {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  justify-content: center;
}

.admin-v2-entity-sheet__head-tabs .admin-v2-relationship-strip {
  padding-bottom: 0;
  justify-content: center;
  max-width: 100%;
}

/* Legacy class kept for any leftover markup; tabs now live in the head row. */
.admin-v2-entity-sheet__relationship-tabs {
  padding: 0 var(--admin-v2-space-5) var(--admin-v2-space-3);
  border-bottom: 1px solid var(--admin-v2-border-default);
}

.admin-v2-entity-sheet__body {
  overflow: auto;
  padding: var(--admin-v2-space-5);
  background: var(--admin-v2-color-bg);
  display: grid;
  /* Default three-column sheet: 1/5 · 2/5 · 2/5 */
  grid-template-columns:
    minmax(0, 1fr)
    minmax(0, 2fr)
    minmax(0, 2fr);
  align-content: start;
  /* The light canvas and white column wells establish the three regions
     without introducing card borders or shadows. */
  column-gap: var(--admin-v2-space-6);
  row-gap: var(--admin-v2-space-4);
}

/* Legacy workspace wrappers must not break the sheet body grid. */
.admin-v2-entity-sheet__body .products-workspace-detail-card,
.admin-v2-entity-sheet__body .products-detail-form,
.admin-v2-entity-sheet__body .orders-workspace-detail-card.products-card {
  display: contents;
}

.admin-v2-entity-sheet__body > .admin-v2-relationship-strip,
.admin-v2-entity-sheet__body > .admin-alert {
  grid-column: 1 / -1;
}

/*
 * Full-bleed under display:contents wrappers.
 * `body > .soft-panel` does not match SoftPanels nested in products-detail-form /
 * products-workspace-detail-card — those still participate in the body grid as items
 * and otherwise land in the first (1/5) track.
 */
.admin-v2-entity-sheet__body .products-workspace-detail-card > .admin-muted,
.admin-v2-entity-sheet__body .products-workspace-detail-card > .admin-alert,
.admin-v2-entity-sheet__body .products-workspace-detail-card > .admin-v2-soft-panel,
.admin-v2-entity-sheet__body .products-detail-form > .admin-muted,
.admin-v2-entity-sheet__body .products-detail-form > .admin-alert,
.admin-v2-entity-sheet__body .products-detail-form > .admin-v2-soft-panel {
  grid-column: 1 / -1;
}

.admin-v2-entity-sheet__body > .admin-v2-relationship-strip {
  margin: calc(-1 * var(--admin-v2-space-2)) 0 0;
  padding-bottom: var(--admin-v2-space-3);
  border-bottom: 1px solid var(--admin-v2-border-default);
}

/* Exactly two columns: keep left narrow (1/5) and give the rest to center (4/5). */
.admin-v2-entity-sheet__body:has(> .admin-v2-entity-sheet-column:nth-child(2):last-child) {
  grid-template-columns: minmax(0, 1fr) minmax(0, 4fr);
}

/* Single column fills the sheet. */
.admin-v2-entity-sheet__body:has(> .admin-v2-entity-sheet-column:only-child) {
  grid-template-columns: minmax(0, 1fr);
}

.admin-v2-soft-panel .products-card.order-create-column,
.admin-v2-soft-panel .products-card.orders-workspace-detail-card {
  border: none;
  background: transparent;
  box-shadow: none;
  padding: 0;
  min-height: 0;
}

.admin-v2-entity-sheet__body--items {
  grid-template-columns: minmax(0, 1fr);
}

.admin-v2-entity-sheet__foot,
.admin-v2-entity-sheet__actions {
  border-top: 1px solid var(--admin-v2-border-default);
  background: var(--admin-v2-color-surface-overlay);
  backdrop-filter: blur(18px);
  /* Content-edge shadow: chrome-edge.css (shared with .admin-v2-shell-footer). */
  padding: var(--admin-v2-chrome-bar-padding-y, var(--admin-v2-space-4)) var(--admin-v2-space-5);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--admin-v2-space-3);
}

.admin-v2-entity-sheet__footer-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--admin-v2-space-2);
  margin-left: auto;
}

.admin-v2-entity-sheet__footer-hint {
  margin: 0;
  flex: 1 1 12rem;
  min-width: 0;
  font-family: var(--admin-v2-font-family);
  font-size: var(--admin-v2-font-size-meta);
  line-height: var(--admin-v2-line-height-meta);
  color: var(--admin-v2-color-text-muted);
}

/*
 * One interactive control rhythm in the sheet:
 * same height, padding, type, radius — hierarchy via color/placement only.
 * Selects/dropdowns keep their own input sizing.
 */
.admin-v2-entity-sheet .btn,
.admin-v2-entity-sheet .btn-primary,
.admin-v2-entity-sheet .btn-secondary,
.admin-v2-entity-sheet .btn--primary,
.admin-v2-entity-sheet .btn--secondary,
.admin-v2-entity-sheet .btn--ghost,
.admin-v2-entity-sheet .products-workspace-toolbar__action,
.admin-v2-entity-sheet .admin-v2-relationship {
  box-sizing: border-box;
  height: var(--admin-v2-interactive-control-height);
  min-height: var(--admin-v2-interactive-control-height);
  max-height: var(--admin-v2-interactive-control-height);
  padding: 0 var(--admin-v2-interactive-control-padding-x);
  border-radius: var(--admin-v2-radius-interactive);
  font-family: var(--admin-v2-font-family);
  /* !important: beat admin global `font-size: … !important` (admin-font-size-base). */
  font-size: var(--admin-v2-interactive-control-font-size) !important;
  line-height: var(--admin-v2-interactive-control-line-height);
  font-weight: var(--admin-v2-font-weight-medium);
  width: auto;
  min-width: 0;
  max-width: 100%;
}

/*
 * Universal borderless icon action (trash / clear) — Orders, Products variants, etc.
 * No chrome: no border, no pill, no height box. Stays danger-red on hover.
 */
.admin-v2-icon-action,
.products-workspace-variants-list__icon-action {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--admin-v2-color-danger-text);
  cursor: pointer;
  line-height: 1;
  width: auto;
  height: auto;
  min-width: 0;
  min-height: 0;
  max-width: none;
  max-height: none;
}

.admin-v2-entity-sheet .admin-v2-icon-action,
.admin-v2-entity-sheet .products-workspace-variants-list__icon-action {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  padding: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  width: auto !important;
  font-size: inherit !important;
}

.admin-v2-icon-action:hover:not(:disabled),
.products-workspace-variants-list__icon-action:hover:not(:disabled),
.admin-v2-entity-sheet .admin-v2-icon-action:hover:not(:disabled),
.admin-v2-entity-sheet .products-workspace-variants-list__icon-action:hover:not(:disabled) {
  color: var(--admin-v2-state-danger-text);
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

.admin-v2-icon-action:disabled,
.products-workspace-variants-list__icon-action:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.admin-v2-icon-action svg,
.products-workspace-variants-list__icon-action svg {
  display: block;
  width: var(--admin-toolbar-inline-icon-size, 16px);
  height: var(--admin-toolbar-inline-icon-size, 16px);
}

/* Save / create primary actions: floppy icon before label (all entity sheets). */
.admin-v2-entity-sheet [data-workspace-action-intent="save"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--admin-v2-space-1);
}

.admin-v2-entity-sheet [data-workspace-action-intent="save"]::before {
  content: "";
  width: var(--admin-v2-interactive-control-icon-size);
  height: var(--admin-v2-interactive-control-icon-size);
  flex-shrink: 0;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15.2 3a2 2 0 0 1 1.4.6l3.8 3.8a2 2 0 0 1 .6 1.4V19a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2z'/%3E%3Cpath d='M17 21v-7a1 1 0 0 0-1-1H8a1 1 0 0 0-1 1v7'/%3E%3Cpath d='M7 3v4a1 1 0 0 0 1 1h7'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15.2 3a2 2 0 0 1 1.4.6l3.8 3.8a2 2 0 0 1 .6 1.4V19a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2z'/%3E%3Cpath d='M17 21v-7a1 1 0 0 0-1-1H8a1 1 0 0 0-1 1v7'/%3E%3Cpath d='M7 3v4a1 1 0 0 0 1 1h7'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Inputs share field control height. Textareas stay multi-line.
 * Search fields keep their own wrapper chrome (icon inside).
 * Color inputs use EditorColorField / square swatch chrome — never text-field padding.
 * Native selects are NOT in this block — see select affordance block below (Role Contract). */
.admin-v2-entity-sheet input.form-input:not(.products-workspace-search-field__input):not(.products-workspace-field--color):not([type='color']),
.admin-v2-entity-sheet input.form-input.products-workspace-field:not(.products-workspace-field--color):not(.products-workspace-field--range):not(.products-workspace-search-field__input) {
  box-sizing: border-box;
  width: 100%;
  height: var(--admin-v2-field-control-height) !important;
  min-height: var(--admin-v2-field-control-height) !important;
  max-height: var(--admin-v2-field-control-height) !important;
  padding: 0 var(--admin-v2-field-control-padding-x) !important;
  border: 1.5px solid var(--admin-v2-border-default) !important;
  border-radius: var(--admin-v2-field-control-radius);
  background-color: var(--admin-v2-input-bg) !important;
  font-family: var(--admin-v2-font-family);
  font-size: var(--admin-v2-field-control-font-size) !important;
  line-height: var(--admin-v2-field-control-line-height);
  font-weight: var(--admin-v2-font-weight-medium);
  box-shadow: none;
}

/*
 * Native select affordance (SSoT) — must read as dropdown, not text input.
 * Chevron via background-image only (never `background` shorthand).
 * Golden border tint matches forms/_base.css + DESIGN.md select rule.
 */
.admin-v2-entity-sheet .form-select,
.admin-v2-entity-sheet .form-select.products-workspace-field {
  box-sizing: border-box;
  width: 100%;
  height: var(--admin-v2-field-control-height) !important;
  min-height: var(--admin-v2-field-control-height) !important;
  max-height: var(--admin-v2-field-control-height) !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  padding: 0 calc(var(--admin-v2-field-control-padding-x) + var(--admin-v2-space-6)) 0 var(--admin-v2-field-control-padding-x) !important;
  border: 1.5px solid color-mix(in srgb, var(--admin-v2-color-brand-gold) 35%, transparent) !important;
  border-radius: var(--admin-v2-field-control-radius);
  background-color: var(--admin-v2-input-bg) !important;
  background-image: var(--admin-v2-select-chevron-muted) !important;
  background-repeat: no-repeat !important;
  background-position: right var(--admin-v2-field-control-padding-x) center !important;
  background-size: 16px 16px !important;
  font-family: var(--admin-v2-font-family);
  font-size: var(--admin-v2-field-control-font-size) !important;
  line-height: var(--admin-v2-field-control-line-height);
  font-weight: var(--admin-v2-font-weight-medium);
  box-shadow: none;
  cursor: pointer;
}

.admin-v2-entity-sheet .form-select:hover:not(:disabled):not(:focus),
.admin-v2-entity-sheet .form-select.products-workspace-field:hover:not(:disabled):not(:focus) {
  border-color: color-mix(in srgb, var(--admin-v2-color-brand-gold) 55%, transparent) !important;
  background-color: var(--admin-v2-input-bg) !important;
}

.admin-v2-entity-sheet .form-select:focus,
.admin-v2-entity-sheet .form-select.products-workspace-field:focus {
  border-color: var(--admin-v2-color-primary) !important;
  background-color: var(--admin-v2-input-bg) !important;
  box-shadow: 0 0 0 3px var(--admin-v2-color-primary-soft);
}

.admin-v2-entity-sheet .form-select:disabled,
.admin-v2-entity-sheet .form-select.products-workspace-field:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

/* Square color swatch — Admin V2 entity sheet (matches EditorColorField gold path). */
.admin-v2-entity-sheet .editor-color-swatch {
  width: var(--admin-v2-field-control-height, var(--pg-editor-control-height-lg, 36px));
  max-width: var(--admin-v2-field-control-height, var(--pg-editor-control-height-lg, 36px));
  height: var(--admin-v2-field-control-height, var(--pg-editor-control-height-lg, 36px));
  min-height: var(--admin-v2-field-control-height, var(--pg-editor-control-height-lg, 36px));
  aspect-ratio: 1;
  border: 1.5px solid var(--admin-v2-border-default);
  border-radius: var(--admin-v2-field-control-radius, var(--pg-editor-radius-lg));
  overflow: hidden;
}

.admin-v2-entity-sheet .editor-color-swatch__input,
.admin-v2-entity-sheet .editor-color-swatch input[type='color'],
.admin-v2-entity-sheet input.form-input[type='color'],
.admin-v2-entity-sheet input.form-input.products-workspace-field--color {
  box-sizing: border-box;
  width: var(--admin-v2-field-control-height, 36px) !important;
  max-width: var(--admin-v2-field-control-height, 36px) !important;
  height: var(--admin-v2-field-control-height, 36px) !important;
  min-height: var(--admin-v2-field-control-height, 36px) !important;
  max-height: var(--admin-v2-field-control-height, 36px) !important;
  padding: 0 !important;
  border: 1.5px solid var(--admin-v2-border-default) !important;
  border-radius: var(--admin-v2-field-control-radius, var(--pg-editor-radius-lg));
  background-color: transparent !important;
  -webkit-appearance: none;
  appearance: none;
}

.admin-v2-entity-sheet .editor-color-swatch__input,
.admin-v2-entity-sheet .editor-color-swatch input[type='color'] {
  position: absolute;
  inset: 0;
  width: 100% !important;
  max-width: none !important;
  height: 100% !important;
  max-height: none !important;
  min-height: 0 !important;
  border: 0 !important;
  border-radius: 0;
  opacity: 0;
  cursor: pointer;
}

.admin-v2-entity-sheet input.form-input[type='color']::-webkit-color-swatch-wrapper,
.admin-v2-entity-sheet input.form-input.products-workspace-field--color::-webkit-color-swatch-wrapper {
  padding: 0;
  margin: 0;
  border: none;
  width: 100%;
  height: 100%;
}

.admin-v2-entity-sheet input.form-input[type='color']::-webkit-color-swatch,
.admin-v2-entity-sheet input.form-input.products-workspace-field--color::-webkit-color-swatch {
  border: none;
  border-radius: calc(var(--admin-v2-field-control-radius, 8px) - 1px);
  width: 100%;
  height: 100%;
}

.admin-v2-entity-sheet input.form-input[type='color']::-moz-color-swatch,
.admin-v2-entity-sheet input.form-input.products-workspace-field--color::-moz-color-swatch {
  border: none;
  border-radius: calc(var(--admin-v2-field-control-radius, 8px) - 1px);
  width: 100%;
  height: 100%;
}

/*
 * SoftPanel fields: override workspace content-sizing (width:auto / field-sizing:content)
 * so inputs/selects fill the card like Admin V2 form elements.
 */
.admin-v2-entity-sheet .admin-v2-soft-panel input.form-input.products-workspace-field:not(.products-workspace-field--range):not(.products-workspace-field--color):not(.products-workspace-search-field__input),
.admin-v2-entity-sheet .admin-v2-soft-panel select.form-select.products-workspace-field,
.admin-v2-entity-sheet .admin-v2-soft-panel input.form-input:not(.products-workspace-field--range):not(.products-workspace-field--color):not(.products-workspace-search-field__input),
.admin-v2-entity-sheet .admin-v2-soft-panel .form-select {
  field-sizing: fixed;
  width: 100% !important;
  max-width: 100%;
  align-self: stretch;
}

.admin-v2-entity-sheet .admin-v2-soft-panel .products-workspace-search-field,
.admin-v2-entity-sheet .admin-v2-soft-panel .products-search-panel,
.admin-v2-entity-sheet .admin-v2-soft-panel .products-search-input-wrapper {
  width: 100%;
  min-width: 0;
  max-width: 100%;
}

.admin-v2-entity-sheet .form-input:hover:not(:disabled):not(:focus):not(.products-workspace-search-field__input):not(.products-workspace-field--color):not([type='color']),
.admin-v2-entity-sheet .form-input.products-workspace-field:hover:not(:disabled):not(:focus):not(.products-workspace-search-field__input):not(.products-workspace-field--color) {
  border-color: var(--admin-v2-border-strong) !important;
}

.admin-v2-entity-sheet .form-input:focus:not(.products-workspace-search-field__input):not(.products-workspace-field--color):not([type='color']),
.admin-v2-entity-sheet .form-input.products-workspace-field:focus:not(.products-workspace-search-field__input):not(.products-workspace-field--color) {
  border-color: var(--admin-v2-color-primary) !important;
  box-shadow: 0 0 0 3px var(--admin-v2-color-primary-soft);
}

.admin-v2-entity-sheet .editor-color-swatch:focus-within {
  border-color: var(--admin-v2-color-primary);
  box-shadow: 0 0 0 3px var(--admin-v2-color-primary-soft);
}

.admin-v2-entity-sheet .products-editor-label,
.admin-v2-entity-sheet .editor-form-label,
.admin-v2-entity-sheet .editor-form-field__label,
.admin-v2-entity-sheet .website-editor-field__label {
  color: var(--admin-v2-color-text);
  letter-spacing: 0;
  font-size: var(--admin-field-label-font-size, var(--admin-font-size-label, calc(var(--admin-font-size-base, 14px) + 2px)));
  font-weight: var(--admin-field-label-font-weight, var(--admin-v2-font-weight-semibold, var(--font-semibold)));
  margin-bottom: var(--admin-v2-label-gap, 6px);
}

.admin-v2-entity-sheet .products-editor-field > strong {
  font-size: var(--admin-font-size-base, 14px);
  font-weight: var(--admin-v2-font-weight-normal, var(--font-normal, 400));
  color: var(--admin-v2-color-text);
}

/* SoftPanel fields fill the card; only action chrome stays auto-width. */
.admin-v2-entity-sheet .admin-v2-soft-panel .btn,
.admin-v2-entity-sheet .admin-v2-soft-panel .products-workspace-toolbar__action,
.admin-v2-entity-sheet .admin-v2-soft-panel .products-workspace-inline-actions {
  justify-self: start;
  width: auto;
  max-width: 100%;
}

.admin-v2-entity-sheet .admin-v2-soft-panel .products-workspace-form-block,
.admin-v2-entity-sheet .admin-v2-soft-panel .products-workspace-form-grid,
.admin-v2-entity-sheet .admin-v2-soft-panel .products-workspace-config-grid,
.admin-v2-entity-sheet .admin-v2-soft-panel .products-detail-form,
.admin-v2-entity-sheet .admin-v2-soft-panel .products-editor-field,
.admin-v2-entity-sheet .admin-v2-soft-panel .editor-rich-text,
.admin-v2-entity-sheet .admin-v2-soft-panel .products-description-editor,
.admin-v2-entity-sheet .admin-v2-soft-panel .products-workspace-checkbox-column,
.admin-v2-entity-sheet .admin-v2-soft-panel .products-workspace-checkbox-chip {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  justify-self: stretch;
}

/* Description SoftPanel: card is the TipTap surface; toolbar bleeds to card edges. */
.admin-v2-entity-sheet-column:has(.products-description-editor) {
  min-width: 0;
}

.admin-v2-entity-sheet .admin-v2-soft-panel:has(.products-description-editor) {
  overflow: visible;
  padding-bottom: 0;
  height: auto;
}

.admin-v2-entity-sheet .admin-v2-soft-panel:has(.products-description-editor) > .products-editor-field {
  margin-top: 0;
  gap: 0;
}

.admin-v2-entity-sheet .products-description-editor {
  border: 0;
  border-radius: 0;
  background: transparent;
  overflow: visible;
  box-shadow: none;
  min-width: 0;
  max-width: 100%;
  height: auto;
}

.admin-v2-entity-sheet .products-description-editor:focus-within {
  border-color: transparent;
  box-shadow: none;
}

/* Full-bleed toolbar under SoftPanel title (negative margin = card padding).
 * Wrap instead of clipping — undo/redo + AI sparkles must stay visible. */
.admin-v2-entity-sheet .products-description-editor .editor-rich-text__toolbar,
.admin-v2-entity-sheet .products-description-editor .rich-editor-toolbar {
  --rich-editor-toolbar-btn-size: 21px;
  --rich-editor-toolbar-icon-size: 14px;
  box-sizing: border-box;
  width: calc(100% + (2 * var(--admin-v2-card-padding-x)));
  max-width: none;
  min-width: 0;
  margin-block-start: var(--admin-v2-space-3);
  margin-inline: calc(-1 * var(--admin-v2-card-padding-x));
  padding-inline: var(--admin-v2-card-padding-x);
  padding-block: 4px;
  flex: 0 0 auto;
  flex-wrap: wrap;
  overflow: visible;
  gap: 2px;
  border-top: 0;
}

.admin-v2-entity-sheet .products-description-editor .editor-rich-text__toolbar-trailing,
.admin-v2-entity-sheet .products-description-editor .rich-editor-toolbar-trailing {
  margin-left: auto;
  flex-shrink: 0;
}

.admin-v2-entity-sheet .products-description-editor .editor-rich-text__toolbar-separator,
.admin-v2-entity-sheet .products-description-editor .rich-editor-toolbar-separator {
  margin: 0 1px;
}

.admin-v2-entity-sheet .admin-v2-soft-panel:has(.products-description-editor),
.admin-v2-entity-sheet .admin-v2-soft-panel:has(.products-description-editor) .products-editor-field,
.admin-v2-entity-sheet .products-description-editor,
.admin-v2-entity-sheet .products-description-editor .editor-rich-text__body,
.admin-v2-entity-sheet .products-description-editor .rich-editor-content-wrap {
  display: flex;
  flex-direction: column;
  min-width: 0;
  max-width: 100%;
}

.admin-v2-entity-sheet .products-description-editor .products-description-editor__content,
.admin-v2-entity-sheet .products-description-editor .ProseMirror {
  padding-inline: 0;
  padding-block: 12px;
  min-height: 66px;
}

/* Primary / Save — Products golden lane (admin-v2 tokens).
 * Webshop only ships `.btn--primary`; admin also uses legacy `.btn-primary`.
 * Without this, Save gets sheet control sizing but no filled primary chrome.
 */
.admin-v2-entity-sheet .btn-primary,
.admin-v2-entity-sheet .btn--primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--admin-v2-button-gap, var(--admin-v2-space-2));
  background: var(--admin-v2-button-primary-bg, var(--admin-v2-color-primary));
  color: var(--admin-v2-button-primary-text);
  border: 1px solid var(--admin-v2-button-primary-bg, var(--admin-v2-color-primary));
  box-shadow: none;
}

.admin-v2-entity-sheet .btn-primary:hover:not(:disabled),
.admin-v2-entity-sheet .btn--primary:hover:not(:disabled) {
  background: var(--admin-v2-button-primary-bg-hover, var(--admin-v2-color-primary-hover));
  border-color: var(--admin-v2-button-primary-bg-hover, var(--admin-v2-color-primary-hover));
  color: var(--admin-v2-button-primary-text);
  box-shadow: none;
  transform: none;
}

.admin-v2-entity-sheet .btn-primary:active:not(:disabled),
.admin-v2-entity-sheet .btn--primary:active:not(:disabled) {
  background: var(--admin-v2-button-primary-bg-hover, var(--admin-v2-color-primary-hover));
  border-color: var(--admin-v2-button-primary-bg-hover, var(--admin-v2-color-primary-hover));
  transform: none;
}

.admin-v2-entity-sheet .btn-primary:disabled,
.admin-v2-entity-sheet .btn--primary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Secondary / View actions = same chrome as inactive relationship tabs. */
.admin-v2-entity-sheet .btn-secondary,
.admin-v2-entity-sheet .btn--secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--admin-v2-button-gap, var(--admin-v2-space-2));
  background: var(--admin-v2-color-surface);
  color: var(--admin-v2-color-text-muted);
  border: 1px solid var(--admin-v2-border-default);
}

.admin-v2-entity-sheet .btn-secondary:hover:not(:disabled),
.admin-v2-entity-sheet .btn--secondary:hover:not(:disabled) {
  background: var(--admin-v2-color-primary-soft);
  color: var(--admin-v2-color-primary);
  border-color: color-mix(in srgb, var(--admin-v2-color-primary) 24%, transparent);
}

.admin-v2-entity-sheet .admin-v2-relationship svg,
.admin-v2-entity-sheet .btn svg,
.admin-v2-entity-sheet .products-workspace-toolbar__action svg {
  width: var(--admin-v2-interactive-control-icon-size);
  height: var(--admin-v2-interactive-control-icon-size);
  flex: 0 0 auto;
}

/* Secondary destructive: same control chrome as Duplicate/Delete, danger color. */
.admin-v2-entity-sheet .btn-secondary.btn--danger,
.admin-v2-entity-sheet .btn--secondary.btn--danger {
  color: var(--admin-v2-color-danger-text);
  border-color: color-mix(in srgb, var(--admin-v2-color-danger-text) 28%, var(--admin-v2-border-default));
  background: var(--admin-v2-color-surface);
}

.admin-v2-entity-sheet .btn-secondary.btn--danger:hover:not(:disabled),
.admin-v2-entity-sheet .btn--secondary.btn--danger:hover:not(:disabled) {
  color: var(--admin-v2-color-danger-text);
  background: color-mix(in srgb, var(--admin-v2-color-danger-text) 8%, var(--admin-v2-color-surface));
  border-color: color-mix(in srgb, var(--admin-v2-color-danger-text) 40%, var(--admin-v2-border-default));
}

/* Ghost destructive footer: red text link — not sized control chrome. */
.admin-v2-entity-sheet__footer-actions .btn--ghost.btn--danger {
  height: auto;
  min-height: 0;
  max-height: none;
  padding: 0;
  background: transparent;
  border-color: transparent;
  color: var(--admin-v2-color-danger-text);
  box-shadow: none;
  min-width: 0;
  font-size: var(--admin-v2-interactive-control-font-size);
  line-height: var(--admin-v2-interactive-control-line-height);
}

.admin-v2-entity-sheet__footer-actions .btn--ghost.btn--danger:hover:not(:disabled) {
  background: transparent;
  border-color: transparent;
  color: var(--admin-v2-color-danger-text);
  box-shadow: none;
  transform: none;
  text-decoration: underline;
}

.admin-v2-entity-sheet__footer-actions .btn--ghost.btn--danger:active:not(:disabled) {
  background: transparent;
  border-color: transparent;
  color: var(--admin-v2-color-danger-text);
  transform: none;
}

.admin-v2-workspace-shell {
  position: relative;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.admin-v2-relationship-strip {
  display: flex;
  gap: var(--admin-v2-space-2);
  overflow-x: auto;
  padding-bottom: var(--admin-v2-space-1);
}

.admin-v2-relationship {
  height: var(--admin-v2-interactive-control-height);
  min-height: var(--admin-v2-interactive-control-height);
  border: 1px solid var(--admin-v2-border-default);
  border-radius: var(--admin-v2-radius-interactive);
  background: var(--admin-v2-color-surface);
  color: var(--admin-v2-color-text-muted);
  display: inline-flex;
  align-items: center;
  gap: var(--admin-v2-space-2);
  padding: 0 var(--admin-v2-interactive-control-padding-x);
  white-space: nowrap;
  font-family: var(--admin-v2-font-family);
  font-size: var(--admin-v2-interactive-control-font-size);
  line-height: var(--admin-v2-interactive-control-line-height);
  font-weight: var(--admin-v2-font-weight-medium);
  cursor: pointer;
}

.admin-v2-relationship:hover,
.admin-v2-relationship[aria-current="true"],
.admin-v2-relationship.active {
  background: var(--admin-v2-color-primary-soft);
  color: var(--admin-v2-color-primary);
  border-color: color-mix(in srgb, var(--admin-v2-color-primary) 24%, transparent);
}

/* SoftPanel section card: white surface, stroke, soft shadow, card padding. */
.admin-v2-soft-panel {
  border: 1px solid var(--admin-v2-border-default);
  border-radius: var(--admin-v2-radius-card);
  background: var(--admin-v2-color-surface);
  box-shadow: var(--admin-v2-shadow-xs);
  padding: var(--admin-v2-card-padding-y) var(--admin-v2-card-padding-x);
  display: grid;
  gap: var(--admin-v2-space-4);
  min-width: 0;
  max-width: 100%;
}

.admin-v2-soft-panel--disabled {
  background: var(--admin-v2-color-surface-muted);
  border-color: var(--admin-v2-border-subtle);
  box-shadow: none;
}

.admin-v2-soft-panel--disabled .admin-v2-soft-panel__title,
.admin-v2-soft-panel--disabled .admin-v2-soft-panel__title-text {
  color: var(--admin-v2-color-text-muted);
}

/*
 * SoftPanel form stacks: next label farther from the control above than from
 * its own control. SoftPanel gap alone is only 16px between direct children —
 * bump consecutive fields to the form-field gap (24px).
 */
.admin-v2-soft-panel > .order-detail-info-grid,
.admin-v2-soft-panel > .order-detail-info-col,
.admin-v2-soft-panel > .products-workspace-form-block,
.admin-v2-soft-panel > .products-workspace-form-grid,
.admin-v2-soft-panel > .products-workspace-section__body {
  row-gap: var(--admin-form-field-gap, var(--admin-v2-space-6, 24px));
}

.admin-v2-soft-panel > .products-editor-field + .products-editor-field {
  margin-top: calc(
    var(--admin-form-field-gap, var(--admin-v2-space-6, 24px)) - var(--admin-v2-space-4, 16px)
  );
}

/* Secondary actions under SoftPanel form content (hint + destructive/secondary). */
.admin-v2-soft-panel__actions {
  display: grid;
  gap: var(--admin-v2-space-2);
  align-content: start;
  justify-items: start;
  margin-top: var(--admin-v2-space-1);
  padding-top: var(--admin-v2-space-4);
  border-top: 1px solid var(--admin-v2-border-default);
}

.admin-v2-soft-panel__actions > .products-editor-hint {
  margin: 0;
}

.admin-v2-soft-panel .order-info-field + .order-info-field {
  padding-top: var(--admin-v2-space-1);
}

.admin-v2-soft-panel .order-info-field .admin-v2-badge {
  justify-self: start;
}

@media (max-width: 960px) {
  .admin-v2-entity-sheet__body {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
 * Editor-schil (opdracht 175): kop met soortregel en statuspil, voet in drie
 * zones, de pagina zonder tabs in twee kolommen, kaarten, gewijzigde velden en
 * de dokplek. Eén hangpunt voor Producten, Boekingen en Abonnementen.
 * ========================================================================== */

.admin-v2-entity-sheet__identity {
  display: grid;
  gap: var(--admin-v2-space-1, 4px);
  min-width: 0;
  flex: 1 1 auto;
}

.admin-v2-entity-sheet__title-row {
  display: flex;
  align-items: center;
  gap: var(--admin-v2-space-3);
  min-width: 0;
}

.admin-v2-entity-sheet__identity .admin-v2-entity-sheet__title {
  font-size: var(--admin-v2-font-size-page-title);
  line-height: var(--admin-v2-line-height-page-title);
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 0 1 auto;
}

.admin-v2-entity-sheet__subtitle {
  margin: 0;
  font-family: var(--admin-v2-font-family);
  font-size: var(--admin-v2-font-size-meta);
  line-height: var(--admin-v2-line-height-meta);
  color: var(--admin-v2-color-text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-v2-entity-sheet__status {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  padding: 2px var(--admin-v2-space-2);
  border-radius: var(--admin-v2-radius-pill);
  font-family: var(--admin-v2-font-family);
  font-size: var(--admin-v2-font-size-meta);
  line-height: var(--admin-v2-line-height-meta);
  font-weight: var(--admin-v2-font-weight-medium);
  color: var(--admin-v2-color-text-muted);
  background: var(--admin-v2-color-surface-muted);
}

.admin-v2-entity-sheet__status--live {
  color: var(--admin-v2-color-success-text);
  background: color-mix(in srgb, var(--admin-v2-color-success-text) 12%, var(--admin-v2-color-surface));
}

.admin-v2-entity-sheet__status--scheduled {
  color: var(--admin-v2-color-primary);
  background: var(--admin-v2-color-primary-soft);
}

/* Voet in drie zones: taal links, verwijderen en dupliceren midden, annuleren en opslaan rechts. */
.admin-v2-entity-sheet__foot--zones {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
}

.admin-v2-entity-sheet__foot--zones > :first-child {
  justify-self: start;
}

.admin-v2-entity-sheet__foot--zones > .admin-v2-entity-sheet__footer-hint {
  display: none;
}

.admin-v2-entity-sheet__footer-center {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--admin-v2-space-3);
}

.admin-v2-entity-sheet__foot--zones > .admin-v2-entity-sheet__footer-actions {
  justify-self: end;
  margin-left: 0;
}

/* Stil rood: verwijderen is een tekstlink, geen knop met chrome. */
.admin-v2-entity-sheet__footer-center .btn--ghost.btn--danger {
  height: auto;
  min-height: 0;
  padding: 0;
  background: transparent;
  border-color: transparent;
  color: var(--admin-v2-color-danger-text);
  box-shadow: none;
  min-width: 0;
}

.admin-v2-entity-sheet__footer-center .btn--ghost.btn--danger:hover:not(:disabled) {
  background: transparent;
  border-color: transparent;
  color: var(--admin-v2-color-danger-text);
  text-decoration: underline;
}

@media (max-width: 960px) {
  .admin-v2-entity-sheet__foot--zones {
    grid-template-columns: minmax(0, 1fr);
  }

  .admin-v2-entity-sheet__footer-center,
  .admin-v2-entity-sheet__foot--zones > .admin-v2-entity-sheet__footer-actions {
    justify-self: stretch;
    justify-content: flex-end;
  }
}

/* De pagina: twee kolommen, links breed (ruggengraat en soortblok), rechts smal. */
.admin-v2-editor-page {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  align-items: start;
  gap: var(--admin-v2-space-6);
  min-width: 0;
}

.admin-v2-editor-page__main,
.admin-v2-editor-page__aside {
  display: grid;
  gap: var(--admin-v2-space-6);
  min-width: 0;
}

@media (max-width: 1100px) {
  .admin-v2-editor-page {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Dokplek: dokt er een paneel, dan schuift de rechterkolom onder de linker. */
.admin-v2-entity-sheet__body[data-docked] {
  grid-template-columns: minmax(0, 1fr) minmax(18rem, 24rem);
}

.admin-v2-entity-sheet__body[data-docked] .admin-v2-editor-page {
  grid-column: 1;
  grid-template-columns: minmax(0, 1fr);
}

.admin-v2-entity-sheet__dock {
  grid-column: 2;
  grid-row: 1 / span 20;
  position: sticky;
  top: 0;
  min-width: 0;
}

/* Kaart: wit, dunne lijn, 24 binnenruimte; scheiden met ruimte, geen grijs vlak. */
.admin-v2-editor-card {
  display: grid;
  gap: var(--admin-v2-space-4);
  min-width: 0;
  padding: var(--admin-v2-card-padding-y) var(--admin-v2-card-padding-x);
  border: 1px solid var(--admin-v2-border-default);
  border-radius: var(--admin-v2-radius-card);
  background: var(--admin-v2-color-surface);
  scroll-margin-top: var(--admin-v2-space-6);
}

.admin-v2-editor-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--admin-v2-space-4);
  min-width: 0;
}

.admin-v2-editor-card__title {
  margin: 0;
  font-family: var(--admin-v2-font-family);
  font-size: var(--admin-v2-font-size-section-title);
  line-height: var(--admin-v2-line-height-section-title);
  font-weight: var(--admin-v2-font-weight-semibold);
  color: var(--admin-v2-color-text);
}

.admin-v2-editor-card__description {
  margin: calc(-1 * var(--admin-v2-space-2)) 0 0;
  font-family: var(--admin-v2-font-family);
  font-size: var(--admin-v2-font-size-meta);
  line-height: var(--admin-v2-line-height-meta);
  color: var(--admin-v2-color-text-muted);
}

.admin-v2-editor-card__row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: var(--admin-v2-space-4);
  min-width: 0;
}

/* De schakelaar in de kop draagt zijn naam voor de schermlezer; zichtbaar is de kaarttitel. */
.admin-v2-editor-card__switch .products-editor-label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Velden in een kaart: geen kaart in een kaart. Het paneel wordt een veldgroep, zijn titel het label. */
.admin-v2-editor-card .admin-v2-soft-panel {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  gap: var(--admin-v2-space-2);
}

.admin-v2-editor-card .admin-v2-soft-panel__title {
  font-size: var(--admin-v2-font-size-control);
  font-weight: var(--admin-v2-font-weight-medium);
  color: var(--admin-v2-color-text);
}

/* In een kaart is de paneeltitel een veldlabel (14/500), onder de kaarttitel (16/600).
 * Moet de !important-regel van sheet-progression.css verslaan (zelfde vorm, één niveau dieper). */
body[data-page-type="admin"] .admin-v2-editor-card .admin-v2-soft-panel__title,
body[data-page-type="admin"] .admin-v2-editor-card .admin-v2-soft-panel__title .admin-v2-soft-panel__title-text,
body[data-page-type^="admin-"] .admin-v2-editor-card .admin-v2-soft-panel__title,
body[data-page-type^="admin-"] .admin-v2-editor-card .admin-v2-soft-panel__title .admin-v2-soft-panel__title-text,
.admin-layout .admin-v2-editor-card .admin-v2-soft-panel__title,
.admin-layout .admin-v2-editor-card .admin-v2-soft-panel__title .admin-v2-soft-panel__title-text {
  font-size: var(--admin-v2-font-size-control) !important;
  line-height: var(--admin-v2-line-height-control, 20px);
  font-weight: var(--admin-v2-font-weight-medium);
}

.admin-v2-editor-card .admin-v2-soft-panel--divided {
  padding-top: var(--admin-v2-space-4);
  border-top: 1px solid var(--admin-v2-border-default);
}

/* Een geneste kolomindeling (voorraad, varianten) volgt de kaartbreedte. */
.admin-v2-editor-card .admin-v2-entity-sheet-columns {
  grid-column: auto;
}

/* Openstaande wijziging: het veld is gemarkeerd tot Opslaan of Annuleren. */
.admin-v2-editor-page [data-changed="true"] > .admin-v2-soft-panel__title::after,
.admin-v2-editor-page .admin-v2-soft-panel[data-changed="true"] > .admin-v2-soft-panel__title::after {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-inline-start: var(--admin-v2-space-2);
  border-radius: var(--admin-v2-radius-pill);
  background: var(--admin-v2-color-primary);
  vertical-align: middle;
}

.admin-v2-editor-page input[data-changed="true"],
.admin-v2-editor-page select[data-changed="true"],
.admin-v2-editor-page textarea[data-changed="true"],
.admin-v2-editor-page .admin-v2-soft-panel[data-changed="true"] :is(.form-input, .form-select, .form-textarea) {
  border-color: var(--admin-v2-color-primary);
}

/* Een voorstel van de assistent is anders gemarkeerd dan wat de winkelier typte. */
.admin-v2-editor-page .admin-v2-soft-panel[data-change-origin="assistent"] > .admin-v2-soft-panel__title::after {
  background: transparent;
  border: 1px solid var(--admin-v2-color-primary);
}

.admin-v2-editor-page .admin-v2-soft-panel[data-change-origin="assistent"] :is(.form-input, .form-select, .form-textarea),
.admin-v2-editor-page :is(input, select, textarea)[data-change-origin="assistent"] {
  border-style: dashed;
}

/* v2/admin-v2/shipping-projection.css */
/**
 * Shipping is a read-only projection of a shipment fulfillment.
 *
 * Its job is recognition and orientation: current state, order, recipient and
 * tracking. Operational changes remain in the related Fulfillment workspace.
 */

.shipping-workspace-summary {
  width: min(100%, 56rem);
  margin-inline: auto;
}

.shipping-workspace-summary__identity {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--admin-v2-space-4);
  padding-bottom: var(--admin-v2-space-4);
  border-bottom: 1px solid var(--admin-v2-border-default);
}

.shipping-workspace-summary__eyebrow,
.shipping-workspace-summary__reference,
.shipping-workspace-summary__fact dt,
.shipping-workspace-summary__fact dd {
  margin: 0;
  font-family: var(--admin-v2-font-family);
}

.shipping-workspace-summary__eyebrow,
.shipping-workspace-summary__fact dt {
  font-size: var(--admin-v2-font-size-meta);
  line-height: var(--admin-v2-line-height-meta);
  font-weight: var(--admin-v2-font-weight-medium);
  color: var(--admin-v2-color-text-muted);
}

.shipping-workspace-summary__reference {
  margin-top: var(--admin-v2-space-1);
  font-size: var(--admin-v2-font-size-body);
  line-height: var(--admin-v2-line-height-body);
  font-weight: var(--admin-v2-font-weight-semibold);
  color: var(--admin-v2-color-text);
  overflow-wrap: anywhere;
}

.shipping-workspace-summary__facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--admin-v2-space-4);
  margin: 0;
}

.shipping-workspace-summary__fact {
  display: grid;
  gap: var(--admin-v2-space-1);
  min-width: 0;
}

.shipping-workspace-summary__fact dd {
  font-size: var(--admin-v2-font-size-body);
  line-height: var(--admin-v2-line-height-body);
  font-weight: var(--admin-v2-font-weight-semibold);
  color: var(--admin-v2-color-text);
  overflow-wrap: anywhere;
}

.shipping-workspace-summary__value--muted {
  font-weight: var(--admin-v2-font-weight-normal);
  color: var(--admin-v2-color-text-muted);
}

@media (max-width: 720px) {
  .shipping-workspace-summary__facts {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* v2/admin-v2/state-language.css */
/**
 * Pagayo Design V2 — State language (save lifecycle, empty, validation).
 *
 * Positive progression surfaces for entity editors and collection states.
 * Passive labels inside states use --admin-v2-radius-label (pill).
 */

.admin-v2-state {
  display: inline-flex;
  align-items: center;
  gap: var(--admin-v2-space-2);
  min-height: var(--admin-v2-badge-height);
  padding: var(--admin-v2-space-1) var(--admin-v2-space-3);
  border-radius: var(--admin-v2-radius-interactive);
  font-family: var(--admin-v2-font-family);
  font-size: var(--admin-v2-font-size-meta);
  line-height: var(--admin-v2-line-height-meta);
  font-weight: var(--admin-v2-font-weight-medium);
}

.admin-v2-state--loading {
  background: var(--admin-v2-state-loading-bg);
  color: var(--admin-v2-state-loading-text);
}

.admin-v2-state--saving {
  background: var(--admin-v2-state-saving-bg);
  color: var(--admin-v2-state-saving-text);
}

.admin-v2-state--dirty {
  background: var(--admin-v2-state-dirty-bg);
  color: var(--admin-v2-state-dirty-text);
}

.admin-v2-state--saved {
  background: var(--admin-v2-state-saved-bg);
  color: var(--admin-v2-state-saved-text);
}

.admin-v2-state--error {
  background: var(--admin-v2-state-error-bg);
  color: var(--admin-v2-state-error-text);
}

.admin-v2-state--setup {
  background: var(--admin-v2-state-setup-bg);
  color: var(--admin-v2-state-setup-text);
}

.admin-v2-state--empty {
  background: var(--admin-v2-color-surface-muted);
  color: var(--admin-v2-color-text-muted);
}

.admin-v2-state--unavailable {
  background: var(--admin-v2-state-unavailable-bg);
  color: var(--admin-v2-state-unavailable-text);
}

.admin-v2-state--validation {
  background: var(--admin-v2-state-warning-bg);
  color: var(--admin-v2-state-warning-text);
}

/* Block-level empty / unavailable panels */
.admin-v2-state--empty.admin-v2-state--block,
.admin-v2-state--unavailable.admin-v2-state--block,
.admin-v2-state--setup.admin-v2-state--block {
  display: grid;
  place-items: center;
  min-height: 120px;
  width: 100%;
  padding: var(--admin-v2-space-6);
  border-radius: var(--admin-v2-radius-card);
  text-align: center;
}

/* v2/admin-v2/sheet-progression.css */
/**
 * Pagayo Design V2 — Sheet progression header (entity lifecycle steps).
 *
 * Status chip uses pill radius (passive). Step controls use interactive radius (8px).
 */

.admin-v2-sheet-progression {
  display: grid;
  gap: var(--admin-v2-space-3);
}

.admin-v2-sheet-progression__row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--admin-v2-space-4);
}

.admin-v2-sheet-progression__title-group {
  display: grid;
  gap: var(--admin-v2-space-2);
  min-width: 0;
}

.admin-v2-sheet-progression__title {
  margin: 0;
  font-family: var(--admin-v2-font-family);
  font-size: var(--admin-v2-font-size-section-title);
  line-height: var(--admin-v2-line-height-section-title);
  font-weight: var(--admin-v2-font-weight-semibold);
  color: var(--admin-v2-color-text);
}

.admin-v2-sheet-progression__status {
  display: inline-flex;
  align-items: center;
  gap: var(--admin-v2-space-2);
  min-height: var(--admin-v2-badge-height);
  padding: var(--admin-v2-badge-padding-y) var(--admin-v2-badge-padding-x);
  border-radius: var(--admin-v2-radius-label);
  font-family: var(--admin-v2-font-family);
  font-size: var(--admin-v2-font-size-badge);
  line-height: var(--admin-v2-line-height-badge);
  font-weight: var(--admin-v2-font-weight-medium);
  width: fit-content;
}

.admin-v2-sheet-progression__status--success {
  background: var(--admin-v2-label-bg-success);
  color: var(--admin-v2-label-text-success);
}

.admin-v2-sheet-progression__status--warning {
  background: var(--admin-v2-label-bg-warning);
  color: var(--admin-v2-label-text-warning);
}

.admin-v2-sheet-progression__status--info {
  background: var(--admin-v2-label-bg-info);
  color: var(--admin-v2-label-text-info);
}

.admin-v2-sheet-progression__status--danger {
  background: var(--admin-v2-label-bg-danger);
  color: var(--admin-v2-label-text-danger);
}

.admin-v2-sheet-progression__status--neutral {
  background: var(--admin-v2-label-bg-neutral);
  color: var(--admin-v2-label-text-neutral);
}

.admin-v2-sheet-progression__steps {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--admin-v2-space-2);
  list-style: none;
  margin: 0;
  padding: 0;
}

.admin-v2-sheet-progression__step {
  display: inline-flex;
  align-items: center;
  gap: var(--admin-v2-space-2);
  min-height: 34px;
  padding: 0 var(--admin-v2-space-3);
  border: 1px solid var(--admin-v2-border-default);
  border-radius: var(--admin-v2-radius-interactive);
  background: var(--admin-v2-color-surface);
  color: var(--admin-v2-color-text-muted);
  font-family: var(--admin-v2-font-family);
  font-size: var(--admin-v2-font-size-meta);
  line-height: var(--admin-v2-line-height-meta);
  font-weight: var(--admin-v2-font-weight-medium);
}

.admin-v2-sheet-progression__step--complete {
  background: var(--admin-v2-color-primary-soft);
  border-color: color-mix(in srgb, var(--admin-v2-color-primary) 24%, transparent);
  color: var(--admin-v2-color-primary);
}

.admin-v2-sheet-progression__step--current {
  background: var(--admin-v2-color-surface);
  border-color: var(--admin-v2-color-primary);
  color: var(--admin-v2-color-text);
  box-shadow: var(--admin-v2-focus-ring);
}

.admin-v2-sheet-progression__step--needs-attention {
  background: var(--admin-v2-label-bg-warning);
  border-color: transparent;
  color: var(--admin-v2-label-text-warning);
}

.admin-v2-sheet-progression__step-separator {
  color: var(--admin-v2-color-text-soft);
  font-size: var(--admin-v2-font-size-meta);
  user-select: none;
}

.admin-v2-entity-sheet__head--progression {
  display: grid;
  gap: var(--admin-v2-space-3);
  align-items: stretch;
}

.admin-v2-entity-sheet__head-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--admin-v2-space-4);
  width: 100%;
  min-width: 0;
}

/* SoftPanel section title: sentence case, dark (no divider).
 * +4px over section-title token so titles stay clear above bold body facts.
 * Selectors must beat admin global
 * `body[data-page-type="admin"] :not(...) { font-size: … !important }` —
 * a lone `.admin-v2-soft-panel__title` loses on specificity even with !important. */
.admin-v2-soft-panel__title {
  display: flex;
  align-items: center;
  gap: var(--admin-v2-space-2);
  margin: 0;
  padding: 0;
  font-family: var(--admin-v2-font-family);
  font-size: calc(var(--admin-v2-font-size-section-title) + 4px);
  line-height: calc(var(--admin-v2-line-height-section-title) + 4px);
  font-weight: var(--admin-v2-font-weight-semibold);
  color: var(--admin-v2-color-text);
  text-transform: none;
  letter-spacing: var(--admin-v2-letter-spacing);
}

.admin-v2-soft-panel__title-text {
  min-width: 0;
  font-weight: inherit;
}

body[data-page-type="admin"] .admin-v2-soft-panel__title,
body[data-page-type="admin"] .admin-v2-soft-panel__title .admin-v2-soft-panel__title-text,
body[data-page-type^="admin-"] .admin-v2-soft-panel__title,
body[data-page-type^="admin-"] .admin-v2-soft-panel__title .admin-v2-soft-panel__title-text,
.admin-layout .admin-v2-soft-panel__title,
.admin-layout .admin-v2-soft-panel__title .admin-v2-soft-panel__title-text {
  font-size: calc(var(--admin-v2-font-size-section-title) + 4px) !important;
  line-height: calc(var(--admin-v2-line-height-section-title) + 4px);
}

.admin-v2-soft-panel__title .editor-label-info,
.admin-v2-soft-panel__title .products-editor-label-info {
  flex-shrink: 0;
  text-transform: none;
  letter-spacing: 0;
}

.admin-v2-entity-sheet-columns {
  display: contents;
}

/* Column = layout only; SoftPanel supplies the Admin V2 card chrome. */
.admin-v2-entity-sheet-column {
  display: grid;
  gap: var(--admin-v2-space-4);
  align-content: start;
  min-width: 0;
  min-height: 0;
  padding: 0;
  border-radius: 0;
  background: transparent;
}

/* 1/5 actions + 4/5 list — own grid so body 2-column collapse rules do not apply.
 * Must beat `.admin-v2-entity-sheet-columns { display: contents }` (same specificity). */
.admin-v2-entity-sheet-columns.admin-v2-entity-sheet-columns--actions-list {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: minmax(0, 1fr) minmax(0, 4fr);
  column-gap: var(--admin-v2-space-6);
  row-gap: var(--admin-v2-space-4);
  align-content: start;
  align-items: stretch;
  min-width: 0;
  width: 100%;
}

.admin-v2-entity-sheet-columns.admin-v2-entity-sheet-columns--actions-list > .admin-v2-entity-sheet-column {
  gap: var(--admin-v2-space-3);
  min-width: 0;
  max-width: 100%;
}

.admin-v2-entity-sheet-columns.admin-v2-entity-sheet-columns--actions-list > .admin-v2-entity-sheet-column:first-child {
  align-content: start;
}

.admin-v2-entity-sheet-columns.admin-v2-entity-sheet-columns--actions-list > .admin-v2-entity-sheet-column:empty {
  display: none;
}

.admin-v2-entity-sheet-columns.admin-v2-entity-sheet-columns--actions-list > .admin-v2-entity-sheet-column:first-child .btn {
  width: 100%;
  justify-content: center;
}

.admin-v2-entity-sheet-columns.admin-v2-entity-sheet-columns--actions-list
  > .admin-v2-entity-sheet-column
  > .admin-v2-soft-panel:only-child {
  height: 100%;
  align-content: start;
}

.admin-v2-entity-sheet-columns--actions-list .orders-workspace-items-actions {
  display: grid;
  gap: var(--admin-v2-space-3);
  align-content: start;
}

.admin-v2-entity-sheet-columns--actions-list .orders-workspace-items-actions .product-search-section {
  margin: 0;
}

/* Full-width single column — own grid (booking setup rules) */
.admin-v2-entity-sheet-columns--full {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: minmax(0, 1fr);
  column-gap: var(--admin-v2-space-6);
  row-gap: var(--admin-v2-space-4);
  align-content: start;
  align-items: stretch;
  min-width: 0;
  width: 100%;
}

.admin-v2-entity-sheet-columns--full > .admin-v2-entity-sheet-column {
  min-width: 0;
  max-width: 100%;
}

/* 1/2 left + 1/2 center — own grid (booking setup offers · places) */
.admin-v2-entity-sheet-columns--half-half {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: var(--admin-v2-space-6);
  row-gap: var(--admin-v2-space-4);
  align-content: start;
  align-items: stretch;
  min-width: 0;
  width: 100%;
}

.admin-v2-entity-sheet-columns--half-half > .admin-v2-entity-sheet-column {
  min-width: 0;
  max-width: 100%;
}

.admin-v2-entity-sheet-columns--half-half
  > .admin-v2-entity-sheet-column
  > .admin-v2-soft-panel:only-child {
  height: 100%;
  align-content: start;
}

/* Three equal columns — own grid (for example inventory operation columns). */
.admin-v2-entity-sheet-columns--thirds {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: var(--admin-v2-space-6);
  row-gap: var(--admin-v2-space-4);
  align-content: start;
  align-items: stretch;
  min-width: 0;
  width: 100%;
}

.admin-v2-entity-sheet-columns--thirds > .admin-v2-entity-sheet-column {
  min-width: 0;
  max-width: 100%;
}

/* 1/3 left + 2/3 center — own grid (members dossier · booking setup schedule) */
.admin-v2-entity-sheet-columns--one-third-two-thirds {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  column-gap: var(--admin-v2-space-6);
  row-gap: var(--admin-v2-space-4);
  align-content: start;
  align-items: stretch;
  min-width: 0;
  width: 100%;
}

.admin-v2-entity-sheet-columns--one-third-two-thirds > .admin-v2-entity-sheet-column {
  min-width: 0;
  max-width: 100%;
}

/* 1/4 left + 3/4 center — own grid */
.admin-v2-entity-sheet-columns--one-quarter-three-quarters {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: minmax(0, 1fr) minmax(0, 3fr);
  column-gap: var(--admin-v2-space-6);
  row-gap: var(--admin-v2-space-4);
  align-content: start;
  align-items: stretch;
  min-width: 0;
  width: 100%;
}

.admin-v2-entity-sheet-columns--one-quarter-three-quarters > .admin-v2-entity-sheet-column {
  min-width: 0;
  max-width: 100%;
}

/* Both wells read as one row: a column with a single panel fills its height. */
.admin-v2-entity-sheet-columns--one-quarter-three-quarters
  > .admin-v2-entity-sheet-column
  > .admin-v2-soft-panel:only-child {
  height: 100%;
  align-content: start;
}

.admin-v2-entity-sheet-columns--full > .admin-v2-entity-sheet-column:empty,
.admin-v2-entity-sheet-columns--half-half > .admin-v2-entity-sheet-column:empty,
.admin-v2-entity-sheet-columns--thirds > .admin-v2-entity-sheet-column:empty,
.admin-v2-entity-sheet-columns--one-third-two-thirds > .admin-v2-entity-sheet-column:empty,
.admin-v2-entity-sheet-columns--one-quarter-three-quarters > .admin-v2-entity-sheet-column:empty,
.admin-v2-entity-sheet-columns--one-fifth-two-fifths-two-fifths > .admin-v2-entity-sheet-column:empty {
  display: none;
}

/* 1/5 left + 2/5 center + 2/5 right — booking detail (Order · Operations · Customer) */
.admin-v2-entity-sheet-columns--one-fifth-two-fifths-two-fifths {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) minmax(0, 2fr);
  column-gap: var(--admin-v2-space-6);
  row-gap: var(--admin-v2-space-4);
  align-content: start;
  align-items: stretch;
  min-width: 0;
  width: 100%;
}

.admin-v2-entity-sheet-columns--one-fifth-two-fifths-two-fifths > .admin-v2-entity-sheet-column {
  min-width: 0;
  max-width: 100%;
}

.admin-v2-entity-sheet-columns--one-fifth-two-fifths-two-fifths
  > .admin-v2-entity-sheet-column
  > .admin-v2-soft-panel:only-child {
  height: 100%;
  align-content: start;
}

/* 1/5 + 1/5 + 1/5 + 2/5 — product Overview; keep empty mid track so ratios stay stable */
.admin-v2-entity-sheet-columns--one-fifth-one-fifth-one-fifth-two-fifths {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 2fr);
  column-gap: var(--admin-v2-space-6);
  row-gap: var(--admin-v2-space-4);
  align-content: start;
  align-items: stretch;
  min-width: 0;
  width: 100%;
}

.admin-v2-entity-sheet-columns--one-fifth-one-fifth-one-fifth-two-fifths > .admin-v2-entity-sheet-column {
  min-width: 0;
  max-width: 100%;
}

.admin-v2-entity-sheet-columns--one-fifth-one-fifth-one-fifth-two-fifths
  > .admin-v2-entity-sheet-column
  > .admin-v2-soft-panel:only-child {
  height: 100%;
  align-content: start;
}

/* Five equal setup steps — product variant creation (create · list · create · list · generate) */
.admin-v2-entity-sheet-columns--fifths {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  column-gap: var(--admin-v2-space-4);
  row-gap: var(--admin-v2-space-4);
  align-content: start;
  align-items: stretch;
  min-width: 0;
  width: 100%;
}

.admin-v2-entity-sheet-columns--fifths > .admin-v2-entity-sheet-column {
  min-width: 0;
  max-width: 100%;
}

.admin-v2-entity-sheet-columns--fifths
  > .admin-v2-entity-sheet-column
  > .admin-v2-soft-panel:only-child {
  height: 100%;
  align-content: start;
}

@media (max-width: 960px) {
  .admin-v2-entity-sheet-columns.admin-v2-entity-sheet-columns--actions-list,
  .admin-v2-entity-sheet-columns--full,
  .admin-v2-entity-sheet-columns--half-half,
  .admin-v2-entity-sheet-columns--thirds,
  .admin-v2-entity-sheet-columns--one-third-two-thirds,
  .admin-v2-entity-sheet-columns--one-quarter-three-quarters,
  .admin-v2-entity-sheet-columns--one-fifth-two-fifths-two-fifths,
  .admin-v2-entity-sheet-columns--one-fifth-one-fifth-one-fifth-two-fifths,
  .admin-v2-entity-sheet-columns--fifths {
    grid-template-columns: minmax(0, 1fr);
  }
}

.admin-v2-advanced-section {
  border: 1px dashed var(--admin-v2-border-strong);
  border-radius: var(--admin-v2-radius-card);
  background: var(--admin-v2-color-surface-muted);
  overflow: hidden;
}

.admin-v2-advanced-section__toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--admin-v2-space-3);
  min-height: 44px;
  padding: var(--admin-v2-space-3) var(--admin-v2-space-4);
  border: 0;
  background: transparent;
  color: var(--admin-v2-color-text-muted);
  font-family: var(--admin-v2-font-family);
  font-size: var(--admin-v2-font-size-control);
  font-weight: var(--admin-v2-font-weight-medium);
  cursor: pointer;
}

.admin-v2-advanced-section__toggle:hover {
  color: var(--admin-v2-color-text);
}

.admin-v2-advanced-section__body {
  padding: 0 var(--admin-v2-space-4) var(--admin-v2-space-4);
  display: grid;
  gap: var(--admin-v2-space-3);
}

/* v2/admin-v2/step-editor.css */
/**
 * Pagayo Design V2 — Rollen voor een stap-editor (bestelling, klaarzetten, versturen, factuur).
 *
 * Opdracht 196. Eén hangpunt per rol; elke editor in de entity-sheet krijgt ze gratis mee:
 * - admin-v2-next-step   — de kaart "volgende stap" bovenaan, met één hoofdknop (info) of een keuze (warning).
 * - admin-v2-choice-card — een keuze als kaart met radio (hoe gaat het weg, welke optie).
 * - admin-v2-line-items  — artikelregels: afvinken, "in het pakket", artikelen van een bestelling.
 * - admin-v2-document    — een document zoals de klant het ziet (factuur, creditnota).
 * - admin-v2-sheet-progression--inline — de stappen in de kop, genummerd, naast "Sluiten".
 *
 * Maat: uiux/smaak.md §1. Wit, dunne lijn, geen schaduw, één accent; binnen een kaart geen tweede grijs vlak.
 */

/* ---------- Volgende stap ---------- */

.admin-v2-next-step {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--admin-v2-space-4);
  min-width: 0;
  padding: var(--admin-v2-card-padding-y) var(--admin-v2-card-padding-x);
  border: 1px solid color-mix(in srgb, var(--admin-v2-color-primary) 24%, transparent);
  border-radius: var(--admin-v2-radius-card);
  background: var(--admin-v2-color-primary-soft);
}

.admin-v2-next-step--warning {
  border-color: color-mix(in srgb, var(--admin-v2-state-warning-text) 32%, transparent);
  background: var(--admin-v2-state-warning-bg);
}

.admin-v2-next-step--done {
  border-color: var(--admin-v2-border-default);
  background: var(--admin-v2-color-surface);
}

.admin-v2-next-step__text {
  display: grid;
  gap: var(--admin-v2-space-1);
  min-width: 0;
  flex: 1 1 20rem;
}

.admin-v2-next-step__title {
  margin: 0;
  font-family: var(--admin-v2-font-family);
  font-size: var(--admin-v2-font-size-section-title);
  line-height: var(--admin-v2-line-height-section-title);
  font-weight: var(--admin-v2-font-weight-semibold);
  color: var(--admin-v2-color-text);
}

.admin-v2-next-step__description {
  margin: 0;
  font-family: var(--admin-v2-font-family);
  font-size: var(--admin-v2-font-size-meta);
  line-height: var(--admin-v2-line-height-meta);
  color: var(--admin-v2-color-text-muted);
}

.admin-v2-next-step__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--admin-v2-space-2);
}

/* Meerdere gelijkwaardige manieren (betaallink, QR, contant): een rij over de volle breedte. */
.admin-v2-next-step__actions--choices {
  flex: 1 1 100%;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
}

.admin-v2-next-step__body {
  flex: 1 1 100%;
  display: grid;
  gap: var(--admin-v2-space-3);
  min-width: 0;
}

/* ---------- Keuzekaart ---------- */

.admin-v2-choice-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: var(--admin-v2-space-3);
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.admin-v2-choice-card {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  column-gap: var(--admin-v2-space-3);
  row-gap: var(--admin-v2-space-1);
  min-width: 0;
  padding: var(--admin-v2-space-4);
  border: 1px solid var(--admin-v2-border-default);
  border-radius: var(--admin-v2-radius-interactive);
  background: var(--admin-v2-color-surface);
  cursor: pointer;
}

.admin-v2-choice-card:hover {
  border-color: color-mix(in srgb, var(--admin-v2-color-primary) 40%, var(--admin-v2-border-default));
}

.admin-v2-choice-card:has(input:checked) {
  border-color: var(--admin-v2-color-primary);
  box-shadow: inset 0 0 0 1px var(--admin-v2-color-primary);
}

.admin-v2-choice-card:has(input:focus-visible) {
  box-shadow: var(--admin-v2-focus-ring);
}

.admin-v2-choice-card:has(input:disabled) {
  cursor: not-allowed;
  color: var(--admin-v2-color-text-muted);
}

.admin-v2-choice-card__input {
  grid-row: 1 / span 2;
  width: 18px;
  height: 18px;
  margin: 2px 0 0;
  accent-color: var(--admin-v2-color-primary);
}

.admin-v2-choice-card__title {
  font-family: var(--admin-v2-font-family);
  font-size: var(--admin-v2-font-size-body);
  line-height: 1.4;
  font-weight: var(--admin-v2-font-weight-medium);
  color: var(--admin-v2-color-text);
}

.admin-v2-choice-card__description {
  grid-column: 2;
  font-family: var(--admin-v2-font-family);
  font-size: var(--admin-v2-font-size-meta);
  line-height: var(--admin-v2-line-height-meta);
  color: var(--admin-v2-color-text-muted);
}

/* ---------- Artikelregels ---------- */

.admin-v2-line-items {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
  min-width: 0;
}

.admin-v2-line-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--admin-v2-space-4);
  min-width: 0;
  padding: var(--admin-v2-space-3) 0;
}

.admin-v2-line-item + .admin-v2-line-item {
  border-top: 1px solid var(--admin-v2-border-subtle);
}

.admin-v2-line-item--check {
  grid-template-columns: auto auto minmax(0, 1fr) auto;
}

.admin-v2-line-item__check {
  width: 22px;
  height: 22px;
  margin: 0;
  accent-color: var(--admin-v2-color-primary);
}

.admin-v2-line-item__thumb {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  overflow: hidden;
  border: 1px solid var(--admin-v2-border-subtle);
  border-radius: var(--admin-v2-radius-interactive);
  background: var(--admin-v2-color-surface);
  color: var(--admin-v2-color-text-muted);
  font-family: var(--admin-v2-font-family);
  font-size: var(--admin-v2-font-size-meta);
  font-weight: var(--admin-v2-font-weight-semibold);
  text-transform: uppercase;
}

.admin-v2-line-item__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.admin-v2-line-item__main {
  display: grid;
  gap: var(--admin-v2-space-1);
  min-width: 0;
}

.admin-v2-line-item__title {
  overflow-wrap: anywhere;
  font-family: var(--admin-v2-font-family);
  font-size: var(--admin-v2-font-size-body);
  line-height: 1.4;
  font-weight: var(--admin-v2-font-weight-medium);
  color: var(--admin-v2-color-text);
}

.admin-v2-line-item__meta {
  font-family: var(--admin-v2-font-family);
  font-size: var(--admin-v2-font-size-meta);
  line-height: var(--admin-v2-line-height-meta);
  color: var(--admin-v2-color-text-muted);
}

.admin-v2-line-item__end {
  display: inline-flex;
  align-items: center;
  gap: var(--admin-v2-space-6);
  font-family: var(--admin-v2-font-family);
  font-size: var(--admin-v2-font-size-body);
  font-variant-numeric: tabular-nums;
  color: var(--admin-v2-color-text);
  white-space: nowrap;
}

.admin-v2-line-item__end-muted {
  font-size: var(--admin-v2-font-size-meta);
  color: var(--admin-v2-color-text-muted);
}

.admin-v2-line-item--done .admin-v2-line-item__title {
  color: var(--admin-v2-color-text-muted);
  text-decoration: line-through;
}

/* Bedragen onder de regels: rechts, smal, totaal vet. Vervangt order-totals-* in stap-editors. */
.admin-v2-amounts {
  display: grid;
  gap: var(--admin-v2-space-2);
  width: min(100%, 20rem);
  margin: var(--admin-v2-space-2) 0 0 auto;
  padding-top: var(--admin-v2-space-4);
  border-top: 1px solid var(--admin-v2-border-subtle);
  font-family: var(--admin-v2-font-family);
  font-variant-numeric: tabular-nums;
}

.admin-v2-amounts__row {
  display: flex;
  justify-content: space-between;
  gap: var(--admin-v2-space-4);
  font-size: var(--admin-v2-font-size-meta);
  line-height: var(--admin-v2-line-height-meta);
  color: var(--admin-v2-color-text-muted);
}

.admin-v2-amounts__row > :last-child {
  font-size: var(--admin-v2-font-size-body);
  color: var(--admin-v2-color-text);
}

.admin-v2-amounts__row--total {
  padding-top: var(--admin-v2-space-2);
  font-size: var(--admin-v2-font-size-body);
  font-weight: var(--admin-v2-font-weight-semibold);
  color: var(--admin-v2-color-text);
}

.admin-v2-amounts__row--total > :last-child {
  font-size: var(--admin-v2-font-size-section-title);
  font-weight: var(--admin-v2-font-weight-semibold);
}

/* ---------- Feitenlijst (rechterkolom): label links, waarde rechts ---------- */

.admin-v2-facts {
  display: grid;
  gap: var(--admin-v2-space-3);
  margin: 0;
  min-width: 0;
}

.admin-v2-facts__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--admin-v2-space-4);
  min-width: 0;
}

.admin-v2-facts__row dt {
  font-family: var(--admin-v2-font-family);
  font-size: var(--admin-v2-font-size-meta);
  line-height: var(--admin-v2-line-height-meta);
  color: var(--admin-v2-color-text-muted);
}

.admin-v2-facts__row dd {
  margin: 0;
  overflow-wrap: anywhere;
  text-align: end;
  font-family: var(--admin-v2-font-family);
  font-size: var(--admin-v2-font-size-body);
  color: var(--admin-v2-color-text);
}

.admin-v2-facts--divided {
  padding-top: var(--admin-v2-space-4);
  border-top: 1px solid var(--admin-v2-border-subtle);
}

/* Een blok tekst in de rechterkolom: naam, adres. */
.admin-v2-address {
  margin: 0;
  font-style: normal;
  font-family: var(--admin-v2-font-family);
  font-size: var(--admin-v2-font-size-body);
  line-height: 1.5;
  color: var(--admin-v2-color-text);
}

.admin-v2-address__muted {
  display: block;
  font-size: var(--admin-v2-font-size-meta);
  color: var(--admin-v2-color-text-muted);
}

/* ---------- Document ---------- */

.admin-v2-document {
  display: grid;
  align-content: start;
  gap: var(--admin-v2-space-8);
  min-width: 0;
  padding: calc(var(--admin-v2-card-padding-y) * 2) calc(var(--admin-v2-card-padding-x) * 2.25);
  border: 1px solid var(--admin-v2-border-default);
  border-radius: var(--admin-v2-radius-card);
  background: var(--admin-v2-color-surface);
  font-family: var(--admin-v2-font-family);
  color: var(--admin-v2-color-text);
}

.admin-v2-document__head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--admin-v2-space-4);
}

.admin-v2-document__seller,
.admin-v2-document__meta {
  display: grid;
  gap: var(--admin-v2-space-1);
  font-size: var(--admin-v2-font-size-meta);
  line-height: var(--admin-v2-line-height-meta);
  color: var(--admin-v2-color-text-muted);
}

.admin-v2-document__meta {
  text-align: end;
}

.admin-v2-document__name,
.admin-v2-document__kind {
  margin: 0;
  font-size: var(--admin-v2-font-size-page-title);
  line-height: 1.3;
  font-weight: var(--admin-v2-font-weight-semibold);
  color: var(--admin-v2-color-text);
}

.admin-v2-document__to {
  display: grid;
  gap: var(--admin-v2-space-1);
}

.admin-v2-document__label {
  font-size: var(--admin-v2-font-size-badge);
  line-height: var(--admin-v2-line-height-badge);
  font-weight: var(--admin-v2-font-weight-medium);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--admin-v2-color-text-muted);
}

.admin-v2-document__table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--admin-v2-font-size-body);
  font-variant-numeric: tabular-nums;
}

.admin-v2-document__table th {
  padding: 0 0 var(--admin-v2-space-3);
  border-bottom: 1px solid var(--admin-v2-border-default);
  font-size: var(--admin-v2-font-size-badge);
  font-weight: var(--admin-v2-font-weight-medium);
  letter-spacing: 0.04em;
  text-align: start;
  text-transform: uppercase;
  color: var(--admin-v2-color-text-muted);
}

.admin-v2-document__table td {
  padding: var(--admin-v2-space-4) 0;
  border-bottom: 1px solid var(--admin-v2-border-subtle);
  vertical-align: top;
}

.admin-v2-document__table :is(th, td).admin-v2-document__num {
  padding-inline-start: var(--admin-v2-space-4);
  text-align: end;
  white-space: nowrap;
}

.admin-v2-document .admin-v2-amounts {
  margin-top: 0;
  border-top: 0;
  padding-top: 0;
}

@media (max-width: 720px) {
  .admin-v2-document {
    padding: var(--admin-v2-card-padding-y) var(--admin-v2-card-padding-x);
  }

  .admin-v2-document__meta {
    text-align: start;
  }
}

/* ---------- Stappen in de kop ---------- */

.admin-v2-sheet-progression--inline {
  display: flex;
  align-items: center;
  min-width: 0;
}

.admin-v2-sheet-progression--inline .admin-v2-sheet-progression__steps {
  flex-wrap: nowrap;
  gap: var(--admin-v2-space-3);
}

.admin-v2-sheet-progression--inline .admin-v2-sheet-progression__step-item {
  display: inline-flex;
  align-items: center;
  gap: var(--admin-v2-space-3);
}

.admin-v2-sheet-progression--inline .admin-v2-sheet-progression__step {
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  color: var(--admin-v2-color-text-muted);
  font-size: var(--admin-v2-font-size-control);
  white-space: nowrap;
}

.admin-v2-sheet-progression__marker {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 24px;
  height: 24px;
  border: 1px solid var(--admin-v2-border-default);
  border-radius: var(--admin-v2-radius-pill);
  background: var(--admin-v2-color-surface);
  font-size: var(--admin-v2-font-size-badge);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.admin-v2-sheet-progression--inline .admin-v2-sheet-progression__step--complete {
  color: var(--admin-v2-color-text-muted);
}

.admin-v2-sheet-progression--inline .admin-v2-sheet-progression__step--complete .admin-v2-sheet-progression__marker {
  border-color: var(--admin-v2-color-primary);
  background: var(--admin-v2-color-primary);
  color: var(--admin-v2-color-text-inverse);
}

.admin-v2-sheet-progression--inline .admin-v2-sheet-progression__step--current {
  color: var(--admin-v2-color-text);
}

.admin-v2-sheet-progression--inline .admin-v2-sheet-progression__step--current .admin-v2-sheet-progression__marker {
  border: 2px solid var(--admin-v2-color-primary);
  color: var(--admin-v2-color-primary);
}

.admin-v2-sheet-progression--inline .admin-v2-sheet-progression__step--needs-attention {
  color: var(--admin-v2-label-text-warning);
}

.admin-v2-sheet-progression--inline .admin-v2-sheet-progression__step--needs-attention .admin-v2-sheet-progression__marker {
  border-color: var(--admin-v2-label-text-warning);
  background: var(--admin-v2-label-bg-warning);
  color: var(--admin-v2-label-text-warning);
}

.admin-v2-sheet-progression--inline .admin-v2-sheet-progression__step-separator {
  display: inline-block;
  width: 24px;
  height: 1px;
  background: var(--admin-v2-border-default);
  font-size: 0;
}

/* Smal scherm: alleen de huidige stap met naam; de andere als nummer. */
@media (max-width: 1100px) {
  .admin-v2-sheet-progression--inline .admin-v2-sheet-progression__step:not(.admin-v2-sheet-progression__step--current) .admin-v2-sheet-progression__label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .admin-v2-sheet-progression--inline .admin-v2-sheet-progression__step-separator {
    width: 12px;
  }
}

/* ---------- Meer ⋯ (in de voet van een editor) ---------- */

/* Wat je zelden nodig hebt (status met de hand, export, documenten, verwijderen) staat achter
 * één knop. Het menu opent naar boven, want de knop staat in de voet. Vlak: rand, geen schaduw. */
.admin-v2-more {
  position: relative;
  display: inline-flex;
}

.admin-v2-more__menu {
  position: absolute;
  right: 0;
  bottom: calc(100% + var(--admin-v2-space-2));
  z-index: 40;
  display: grid;
  gap: var(--admin-v2-space-1);
  min-width: 16rem;
  margin: 0;
  padding: var(--admin-v2-space-2);
  list-style: none;
  border: 1px solid var(--admin-v2-border-default);
  border-radius: var(--admin-v2-radius-card);
  background: var(--admin-v2-color-surface);
}

.admin-v2-more__menu[hidden] {
  display: none;
}

.admin-v2-more__item {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: var(--admin-v2-control-height-md);
  padding: 0 var(--admin-v2-space-3);
  border: 0;
  border-radius: var(--admin-v2-radius-interactive);
  background: transparent;
  font-family: var(--admin-v2-font-family);
  font-size: var(--admin-v2-font-size-control);
  font-weight: var(--admin-v2-font-weight-medium);
  text-align: start;
  color: var(--admin-v2-color-text);
  cursor: pointer;
}

.admin-v2-more__item:hover:not(:disabled),
.admin-v2-more__item:focus-visible {
  background: var(--admin-v2-color-surface-hover);
  outline: none;
}

.admin-v2-more__item:focus-visible {
  box-shadow: var(--admin-v2-focus-ring);
}

.admin-v2-more__item:disabled {
  cursor: not-allowed;
  color: var(--admin-v2-color-text-muted);
}

.admin-v2-more__item--danger {
  color: var(--admin-v2-state-danger-text);
}

/* v2/admin-v2/editor-settings.css */
/**
 * Pagayo Design V2 — Rollen voor een instel-editor (klant, btw, kassa instellen).
 *
 * Opdracht 197. Eén hangpunt per rol; elke editor in de entity-sheet krijgt ze gratis mee:
 * - admin-v2-line-item--plain  — een regel zonder plaatje of vinkje (bestellingen, apparaten, tarieven).
 * - admin-v2-editor-card__link — een tekstlink in de kop van een editorkaart ("Alle", "Openen").
 * - admin-v2-segmented         — twee of drie gelijkwaardige keuzes naast elkaar (ja/nee, incl./excl.).
 * - admin-v2-chips             — gekozen dingen als pil met "weghalen" (categorieën, medewerkers).
 *   Grijs, want blauw is in het beheer alleen een actie (smaak.md §1).
 *
 * Maat: uiux/smaak.md §1. Wit, dunne lijn, geen schaduw, één accent; de keuze is nooit alleen kleur.
 */

/* ---------- Regel zonder plaatje ---------- */

.admin-v2-line-item--plain {
  grid-template-columns: minmax(0, 1fr) auto;
}

/* ---------- Link in de kop van een editorkaart ---------- */

.admin-v2-editor-card__link {
  flex: 0 0 auto;
  font-family: var(--admin-v2-font-family);
  font-size: var(--admin-v2-font-size-meta);
  font-weight: var(--admin-v2-font-weight-medium);
  color: var(--admin-v2-color-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.admin-v2-editor-card__link:hover {
  color: var(--admin-v2-color-primary-hover);
}

.admin-v2-editor-card__link:focus-visible {
  outline: none;
  border-radius: var(--admin-v2-radius-interactive);
  box-shadow: var(--admin-v2-focus-ring);
}

/* ---------- Gesegmenteerde keuze (radiogroep) ---------- */

.admin-v2-segmented {
  display: inline-flex;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 1px solid var(--admin-v2-border-default);
  border-radius: var(--admin-v2-radius-interactive);
  background: var(--admin-v2-color-surface);
  overflow: hidden;
}

.admin-v2-segmented--full {
  display: flex;
  width: 100%;
}

.admin-v2-segmented__option {
  position: relative;
  display: inline-flex;
  flex: 1 1 0;
  align-items: center;
  justify-content: center;
  min-height: var(--admin-v2-control-height-lg);
  padding: var(--admin-v2-space-2) var(--admin-v2-space-4);
  font-family: var(--admin-v2-font-family);
  font-size: var(--admin-v2-font-size-control);
  font-weight: var(--admin-v2-font-weight-medium);
  color: var(--admin-v2-color-text);
  text-align: center;
  overflow-wrap: anywhere;
  cursor: pointer;
}

.admin-v2-segmented__option + .admin-v2-segmented__option {
  border-left: 1px solid var(--admin-v2-border-default);
}

/* Het rondje blijft in de boom (toetsenbord, schermlezer), maar valt weg in beeld. */
.admin-v2-segmented__input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

/* Alleen een vak dat je nog kunt kiezen, reageert op de muis; het gekozen vak blijft blauw. */
.admin-v2-segmented__option:not(:has(input:checked, input:disabled)):hover {
  background: var(--admin-v2-color-surface-hover);
}

/* Uitgeschakeld maar niet gekozen: gedempt. De gekozen keuze blijft leesbaar (regel hieronder wint). */
.admin-v2-segmented__option:has(input:disabled) {
  color: var(--admin-v2-color-text-muted);
  cursor: not-allowed;
}

.admin-v2-segmented__option:has(input:checked) {
  background: var(--admin-v2-color-primary);
  color: var(--admin-v2-color-text-inverse);
  font-weight: var(--admin-v2-font-weight-semibold);
}

/* De focusring zit aan de binnenkant: de rand van de groep knipt hem niet weg. Op het gekozen
 * (blauwe) vak een tweede, lichte ring, zodat de focus ook daar te zien is. */
.admin-v2-segmented__option:has(input:focus-visible) {
  box-shadow: inset 0 0 0 2px var(--admin-v2-color-primary);
  z-index: 1;
}

.admin-v2-segmented__option:has(input:checked):has(input:focus-visible) {
  box-shadow: inset 0 0 0 2px var(--admin-v2-color-primary), inset 0 0 0 4px var(--admin-v2-color-text-inverse);
}

/* Hoog contrast (Windows): vullingen vallen weg; de keuze krijgt een rand van het systeem. */
@media (forced-colors: active) {
  .admin-v2-segmented__option:has(input:checked) {
    outline: 3px solid Highlight;
    outline-offset: -3px;
  }

  /* Focus met een streep onder de tekst, zodat de rand van de keuze blijft staan. */
  .admin-v2-segmented__option:has(input:focus-visible) {
    text-decoration: underline;
    text-decoration-thickness: 3px;
    text-underline-offset: 4px;
  }
}

/* ---------- Pillen met weghalen ---------- */

.admin-v2-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--admin-v2-space-2);
  margin: 0;
  padding: 0;
  list-style: none;
  min-width: 0;
}

.admin-v2-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--admin-v2-space-1);
  min-height: var(--admin-v2-control-height-sm);
  padding: 0 var(--admin-v2-space-2) 0 var(--admin-v2-space-3);
  border-radius: var(--admin-v2-radius-pill);
  background: var(--admin-v2-color-surface-muted);
  color: var(--admin-v2-color-text);
  font-family: var(--admin-v2-font-family);
  font-size: var(--admin-v2-font-size-control);
  font-weight: var(--admin-v2-font-weight-medium);
}

.admin-v2-chip__remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--admin-v2-icon-button-size-sm);
  height: var(--admin-v2-icon-button-size-sm);
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: var(--admin-v2-radius-pill);
  background: transparent;
  color: inherit;
  cursor: pointer;
}

.admin-v2-chip__remove:hover {
  background: var(--admin-v2-color-surface);
}

.admin-v2-chip__remove:focus-visible {
  outline: none;
  box-shadow: var(--admin-v2-focus-ring);
}

/* v2/admin-v2/surface-columns.css */
/**
 * Pagayo Design V2 — Surface grammar columns (Marketing / Results / Steering).
 */

.admin-v2-surface-columns {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--admin-v2-space-4);
  align-items: start;
}

.admin-v2-surface-column {
  border: 1px solid var(--admin-v2-border-default);
  border-radius: var(--admin-v2-radius-card);
  background: var(--admin-v2-color-surface);
  box-shadow: var(--admin-v2-shadow-xs);
  display: grid;
  gap: var(--admin-v2-space-3);
  min-height: 280px;
  padding: var(--admin-v2-space-4);
}

.admin-v2-surface-column__title {
  margin: 0;
  font-family: var(--admin-v2-font-family);
  font-size: var(--admin-v2-font-size-section-title);
  line-height: var(--admin-v2-line-height-section-title);
  font-weight: var(--admin-v2-font-weight-semibold);
  color: var(--admin-v2-color-text);
}

.admin-v2-surface-column__subtitle {
  margin: 0;
  font-family: var(--admin-v2-font-family);
  font-size: var(--admin-v2-font-size-meta);
  line-height: var(--admin-v2-line-height-meta);
  color: var(--admin-v2-color-text-muted);
}

.admin-v2-surface-signal-card {
  border: 1px solid var(--admin-v2-border-default);
  border-radius: var(--admin-v2-radius-interactive);
  background: var(--admin-v2-color-surface-muted);
  padding: var(--admin-v2-space-3);
  display: grid;
  gap: var(--admin-v2-space-2);
}

.admin-v2-surface-signal-card__label {
  margin: 0;
  font-family: var(--admin-v2-font-family);
  font-size: var(--admin-v2-font-size-meta);
  line-height: var(--admin-v2-line-height-meta);
  color: var(--admin-v2-color-text-muted);
}

.admin-v2-surface-signal-card__value {
  margin: 0;
  font-family: var(--admin-v2-font-family);
  font-size: var(--admin-v2-font-size-section-title);
  line-height: var(--admin-v2-line-height-section-title);
  font-weight: var(--admin-v2-font-weight-semibold);
  color: var(--admin-v2-color-text);
}

@media (max-width: 1100px) {
  .admin-v2-surface-columns {
    grid-template-columns: 1fr;
  }
}

/* v2/admin-v2/settings-rail.css */
/**
 * Pagayo Design V2 — Settings stack (org settings chrome) + settings right rail.
 *
 * SettingsStack = SettingsLayout grammar (ADR 0003) — not WorkspaceShell / SoftPanel editor lane.
 *
 * Workspace Chrome Contract: one scrollport flush to the viewport edge — no outer
 * `.admin-page` gutter around the stack. (Collection-card list pages have a 24 gutter and a
 * card since @pagayo/design 2.14.0 (opdracht 188); settings keep this full-bleed reset.)
 */

/* ── Org SettingsStack (SettingsLayout) ─────────────────────────────────── */

/* Full-bleed inside admin-main (settings are not collection-card list pages). */
.admin-shell--v2 .admin-page.settings-page {
  padding: 0;
  background: transparent;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
}

.admin-shell--v2 .admin-page.settings-page > .admin-v2-settings-stack {
  flex: 1 1 auto;
  min-height: 0;
}

.admin-v2-settings-stack {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  gap: var(--admin-v2-space-4);
}

.admin-v2-settings-stack__body {
  display: grid;
  flex: 1;
  grid-template-columns: minmax(220px, 280px) minmax(0, 1fr);
  gap: var(--admin-v2-space-4);
  min-height: 0;
  align-items: stretch;
}

.admin-v2-settings-stack__body--detail-only {
  grid-template-columns: minmax(0, 1fr);
}

.admin-v2-settings-stack__nav {
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
  border: 1px solid var(--admin-v2-border-default);
  border-radius: var(--admin-v2-radius-card);
  background: var(--admin-v2-color-surface);
  box-shadow: var(--admin-v2-shadow-xs);
  overflow: hidden;
}

.admin-v2-settings-stack__nav-list {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: var(--admin-v2-space-2);
  gap: var(--admin-v2-space-1);
}

.admin-v2-settings-stack__detail {
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
  border: 1px solid var(--admin-v2-border-default);
  border-radius: var(--admin-v2-radius-card);
  background: var(--admin-v2-color-surface);
  box-shadow: var(--admin-v2-shadow-xs);
  overflow: hidden;
}

/*
 * Detail-only (Company zone owns discovery): SoftPanels / hybrid list are the
 * only card planes — flatten the outer stack detail surface (GS-07 golden).
 */
.admin-v2-settings-stack__body--detail-only .admin-v2-settings-stack__detail {
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.admin-v2-settings-stack__body--detail-only .admin-v2-settings-stack__sections-content {
  padding-left: 0;
  padding-right: 0;
}

.admin-v2-settings-stack__body--detail-only .admin-v2-settings-stack__foot {
  padding-left: 0;
  padding-right: 0;
  background: transparent;
  backdrop-filter: none;
}

.admin-v2-settings-stack__header {
  display: flex;
  align-items: flex-start;
  gap: var(--admin-v2-space-3);
  flex-shrink: 0;
  padding: var(--admin-v2-space-4) var(--admin-v2-card-padding-x);
  border-bottom: 1px solid var(--admin-v2-border-default);
}

.admin-v2-settings-stack__header-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: var(--admin-v2-radius-interactive);
  background: var(--admin-v2-color-primary-soft);
  color: var(--admin-v2-color-primary);
}

.admin-v2-settings-stack__header-copy {
  display: grid;
  gap: var(--admin-v2-space-1);
  min-width: 0;
}

.admin-v2-settings-stack__header-title {
  margin: 0;
  font-family: var(--admin-v2-font-family);
  font-size: var(--admin-v2-font-size-section-title);
  line-height: var(--admin-v2-line-height-section-title, 1.35);
  font-weight: var(--admin-v2-font-weight-semibold);
  color: var(--admin-v2-color-text);
}

.admin-v2-settings-stack__header-meta {
  margin: 0;
  font-family: var(--admin-v2-font-family);
  font-size: var(--admin-v2-font-size-meta);
  line-height: var(--admin-v2-line-height-meta);
  color: var(--admin-v2-color-text-muted);
}

/* Scrollport — no padding (Workspace Chrome Contract §3). */
.admin-v2-settings-stack__sections {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 0;
}

/* Content inset lives on the inner wrapper, not the scrollport. */
.admin-v2-settings-stack__sections-content {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-height: 0;
  padding: var(--admin-v2-space-4) var(--admin-v2-card-padding-x);
  gap: var(--admin-v2-space-4);
}

/* Explicit Save footer — chrome-edge.css supplies footer shadow (Chrome Contract). */
.admin-v2-settings-stack__foot {
  flex-shrink: 0;
  border-top: 1px solid var(--admin-v2-border-default);
  background: var(--admin-v2-color-surface-overlay);
  backdrop-filter: blur(18px);
  /* Content-edge shadow: chrome-edge.css */
  padding: var(--admin-v2-chrome-bar-padding-y, var(--admin-v2-space-4)) var(--admin-v2-card-padding-x);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--admin-v2-space-3);
}

.admin-v2-settings-stack__footer-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--admin-v2-space-2);
  margin-left: auto;
}

.admin-v2-settings-stack__sections-content > .products-workspace-toolbar {
  flex-shrink: 0;
}

.admin-v2-settings-stack__sections-content > .settings-email-workspace-grid,
.admin-v2-settings-stack__sections-content > .admin-v2-settings-hybrid {
  flex: 1;
  align-items: stretch;
  min-height: 0;
}

/* ── Nested Settings hybrid list/detail (Email / Payments / Shipping) ───── */

.admin-v2-settings-hybrid {
  display: grid;
  flex: 1;
  grid-template-columns: minmax(240px, 320px) minmax(0, 1fr);
  gap: var(--admin-v2-space-4);
  min-height: 0;
  align-items: stretch;
}

/* Hybrid-list CollectionTable peers (Payments golden + Shipping) — wider plane, not list-slot. */
.admin-v2-settings-hybrid.settings-payment-workspace-grid,
.admin-v2-settings-hybrid.settings-shipping-workspace-grid {
  grid-template-columns: minmax(360px, 1.25fr) minmax(0, 1fr);
}

/* Layout-only column — WorkspaceListPanel / collection-shell owns the list card. */
.admin-v2-settings-hybrid__list {
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
  overflow: hidden;
}

.admin-v2-settings-hybrid__list > .products-list-card,
.admin-v2-settings-hybrid__list > .admin-v2-collection-shell,
.admin-v2-settings-hybrid__list > .workspace-list-panel,
.admin-v2-settings-hybrid__list > [class*="list-card"] {
  flex: 1;
  min-height: 0;
}

/* Layout-only column — SoftPanels own detail card chrome (Products look). */
.admin-v2-settings-hybrid__detail {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-height: 0;
  min-width: 0;
  overflow: hidden;
}

.admin-v2-settings-hybrid__detail-scroll {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--admin-v2-space-4);
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* Detail Save — entity sheet foot rhythm; not a second full-width stack footer. */
.admin-v2-settings-hybrid__foot {
  flex-shrink: 0;
  border-top: 1px solid var(--admin-v2-border-default);
  padding: var(--admin-v2-chrome-bar-padding-y, var(--admin-v2-space-4)) 0 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--admin-v2-space-3);
  margin-top: var(--admin-v2-space-4);
}

.admin-v2-settings-hybrid__footer-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--admin-v2-space-2);
  margin-left: auto;
}

.admin-v2-settings-hybrid__header {
  display: flex;
  align-items: flex-start;
  gap: var(--admin-v2-space-3);
  flex-shrink: 0;
  padding-bottom: var(--admin-v2-space-4);
  border-bottom: 1px solid var(--admin-v2-border-default);
}

.admin-v2-settings-hybrid__header-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: var(--admin-v2-radius-interactive);
  border: 1px solid var(--admin-v2-border-default);
  background: var(--admin-v2-color-primary-soft);
  color: var(--admin-v2-color-primary);
}

.admin-v2-settings-hybrid__header-copy {
  display: grid;
  gap: var(--admin-v2-space-1);
  min-width: 0;
}

.admin-v2-settings-hybrid__header-title-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--admin-v2-space-2);
}

.admin-v2-settings-hybrid__header-title {
  margin: 0;
  font-family: var(--admin-v2-font-family);
  font-size: var(--admin-v2-font-size-section-title);
  line-height: var(--admin-v2-line-height-section-title, 1.35);
  font-weight: var(--admin-v2-font-weight-semibold);
  color: var(--admin-v2-color-text);
}

.admin-v2-settings-hybrid__header-meta {
  margin: 0;
  font-family: var(--admin-v2-font-family);
  font-size: var(--admin-v2-font-size-meta);
  line-height: var(--admin-v2-line-height-meta);
  color: var(--admin-v2-color-text-muted);
}

.admin-v2-settings-hybrid__empty {
  display: grid;
  place-items: center;
  gap: var(--admin-v2-space-3);
  flex: 1;
  min-height: 12rem;
  color: var(--admin-v2-color-text-muted);
  text-align: center;
}

.admin-v2-settings-hybrid__empty p {
  margin: 0;
  font-family: var(--admin-v2-font-family);
  font-size: var(--admin-v2-font-size-body);
}

.admin-v2-settings-hybrid .products-workspace-summary-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--admin-v2-space-3);
}

.admin-v2-settings-hybrid .products-workspace-summary-field {
  display: grid;
  gap: var(--admin-v2-space-1);
  min-width: 0;
}

.admin-v2-settings-hybrid .products-workspace-summary-field span {
  font-family: var(--admin-v2-font-family);
  font-size: var(--admin-v2-font-size-meta);
  line-height: var(--admin-v2-line-height-meta);
  color: var(--admin-v2-color-text-muted);
}

.admin-v2-settings-hybrid .products-workspace-summary-field strong {
  font-family: var(--admin-v2-font-family);
  font-size: var(--admin-v2-font-size-body);
  font-weight: var(--admin-v2-font-weight-semibold);
  color: var(--admin-v2-color-text);
  overflow-wrap: anywhere;
}

@media (max-width: 960px) {
  .admin-v2-settings-hybrid {
    grid-template-columns: 1fr;
  }

  .admin-v2-settings-hybrid__list {
    max-height: 280px;
  }
}

.admin-v2-settings-stack__section-description {
  margin: 0;
  font-family: var(--admin-v2-font-family);
  font-size: var(--admin-v2-font-size-meta);
  line-height: var(--admin-v2-line-height-meta);
  color: var(--admin-v2-color-text-muted);
}

@media (max-width: 960px) {
  .admin-v2-settings-stack__body:not(.admin-v2-settings-stack__body--detail-only) {
    grid-template-columns: 1fr;
  }

  .admin-v2-settings-stack__nav {
    max-height: 240px;
  }
}

/* ── Entity settings right rail (setup checklist + useful links) ─────────── */

.admin-v2-settings-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 320px);
  gap: var(--admin-v2-space-4);
  align-items: start;
}

.admin-v2-settings-rail {
  border: 1px solid var(--admin-v2-border-default);
  border-radius: var(--admin-v2-radius-card);
  background: var(--admin-v2-color-surface);
  box-shadow: var(--admin-v2-shadow-xs);
  display: grid;
  gap: var(--admin-v2-space-4);
  padding: var(--admin-v2-space-4);
  position: sticky;
  top: var(--admin-v2-space-4);
}

.admin-v2-settings-rail__section-title {
  margin: 0;
  font-family: var(--admin-v2-font-family);
  font-size: var(--admin-v2-font-size-control);
  line-height: var(--admin-v2-line-height-control);
  font-weight: var(--admin-v2-font-weight-semibold);
  color: var(--admin-v2-color-text);
}

.admin-v2-settings-rail__checklist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--admin-v2-space-2);
}

.admin-v2-settings-rail__check-item {
  display: flex;
  align-items: flex-start;
  gap: var(--admin-v2-space-2);
  font-family: var(--admin-v2-font-family);
  font-size: var(--admin-v2-font-size-meta);
  line-height: var(--admin-v2-line-height-meta);
  color: var(--admin-v2-color-text-muted);
}

.admin-v2-settings-rail__check-item--done {
  color: var(--admin-v2-color-text);
}

.admin-v2-settings-rail__links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--admin-v2-space-2);
}

.admin-v2-settings-rail__link {
  display: inline-flex;
  align-items: center;
  gap: var(--admin-v2-space-2);
  min-height: 34px;
  padding: 0 var(--admin-v2-space-2);
  border: 0;
  border-radius: var(--admin-v2-radius-interactive);
  background: transparent;
  color: var(--admin-v2-color-primary);
  font-family: var(--admin-v2-font-family);
  font-size: var(--admin-v2-font-size-meta);
  font-weight: var(--admin-v2-font-weight-medium);
  text-decoration: none;
  cursor: pointer;
}

.admin-v2-settings-rail__link:hover {
  background: var(--admin-v2-color-primary-soft);
}

@media (max-width: 1100px) {
  .admin-v2-settings-layout {
    grid-template-columns: 1fr;
  }

  .admin-v2-settings-rail {
    position: static;
  }
}

/* v2/admin-v2/create-workspace.css */
/**
 * Pagayo Design V2 — Capability-driven create (chooser + 3-column create grid).
 */

.admin-v2-create-chooser {
  display: grid;
  gap: var(--admin-v2-space-4);
  padding: var(--admin-v2-space-2) 0;
}

.admin-v2-create-chooser__title {
  margin: 0;
  font-family: var(--admin-v2-font-family);
  font-size: var(--admin-v2-font-size-section-title);
  line-height: var(--admin-v2-line-height-section-title);
  font-weight: var(--admin-v2-font-weight-semibold);
  color: var(--admin-v2-color-text);
}

.admin-v2-create-chooser__subtitle {
  margin: 0;
  font-family: var(--admin-v2-font-family);
  font-size: var(--admin-v2-font-size-meta);
  line-height: var(--admin-v2-line-height-meta);
  color: var(--admin-v2-color-text-muted);
}

.admin-v2-create-chooser__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--admin-v2-space-3);
}

.admin-v2-create-chooser-card {
  border: 1px solid var(--admin-v2-border-default);
  border-radius: var(--admin-v2-radius-card);
  background: var(--admin-v2-color-surface);
  box-shadow: var(--admin-v2-shadow-xs);
  padding: var(--admin-v2-space-4);
  display: grid;
  gap: var(--admin-v2-space-2);
  text-align: left;
  cursor: pointer;
  min-height: 140px;
}

.admin-v2-create-chooser-card:hover,
.admin-v2-create-chooser-card[aria-pressed="true"],
.admin-v2-create-chooser-card.active {
  border-color: color-mix(in srgb, var(--admin-v2-color-primary) 32%, transparent);
  background: var(--admin-v2-color-primary-soft);
}

.admin-v2-create-chooser-card__title {
  margin: 0;
  font-family: var(--admin-v2-font-family);
  font-size: var(--admin-v2-font-size-control);
  line-height: var(--admin-v2-line-height-control);
  font-weight: var(--admin-v2-font-weight-semibold);
  color: var(--admin-v2-color-text);
}

.admin-v2-create-chooser-card__description {
  margin: 0;
  font-family: var(--admin-v2-font-family);
  font-size: var(--admin-v2-font-size-meta);
  line-height: var(--admin-v2-line-height-meta);
  color: var(--admin-v2-color-text-muted);
}

.admin-v2-create-columns {
  display: grid;
  grid-template-columns:
    minmax(280px, 0.95fr)
    minmax(360px, 1.2fr)
    minmax(280px, 0.95fr);
  gap: var(--admin-v2-space-4);
  align-items: start;
}

.admin-v2-create-column__title {
  margin: 0 0 var(--admin-v2-space-3);
  font-family: var(--admin-v2-font-family);
  font-size: var(--admin-v2-font-size-control);
  line-height: var(--admin-v2-line-height-control);
  font-weight: var(--admin-v2-font-weight-semibold);
  color: var(--admin-v2-color-text);
}

@media (max-width: 960px) {
  .admin-v2-create-columns {
    grid-template-columns: 1fr;
  }
}

/* v2/admin-v2/surface-workspace.css */
/**
 * Pagayo Design V2 — Surface grammar workspace scaffold.
 * Lifecycle: aggregate → prioritize → drill-in → refresh.
 */

.admin-v2-surface-workspace {
  display: grid;
  gap: var(--admin-v2-space-4);
  min-height: 0;
}

.admin-v2-surface-workspace__header {
  display: grid;
  gap: var(--admin-v2-space-2);
}

.admin-v2-surface-workspace__title {
  margin: 0;
  font-family: var(--admin-v2-font-family);
  font-size: var(--admin-v2-font-size-page-title);
  line-height: var(--admin-v2-line-height-page-title);
  font-weight: var(--admin-v2-font-weight-semibold);
  color: var(--admin-v2-color-text);
}

.admin-v2-surface-workspace__subtitle {
  margin: 0;
  font-family: var(--admin-v2-font-family);
  font-size: var(--admin-v2-font-size-meta);
  line-height: var(--admin-v2-line-height-meta);
  color: var(--admin-v2-color-text-muted);
}

.admin-v2-surface-workspace__toolbar {
  margin-bottom: 0;
}

.admin-v2-surface-workspace__body {
  display: grid;
  gap: var(--admin-v2-space-4);
  min-height: 0;
}

.admin-v2-surface-workspace__drill-link {
  align-self: start;
}

/* v2/admin-v2/process-workspace.css */
/**
 * Pagayo Design V2 — Process grammar pipeline (start → steps → preview → commit → result).
 */

.admin-v2-process-workspace {
  display: grid;
  gap: var(--admin-v2-space-4);
}

.admin-v2-process-workspace__header {
  display: grid;
  gap: var(--admin-v2-space-2);
}

.admin-v2-process-workspace__title {
  margin: 0;
  font-family: var(--admin-v2-font-family);
  font-size: var(--admin-v2-font-size-page-title);
  line-height: var(--admin-v2-line-height-page-title);
  font-weight: var(--admin-v2-font-weight-semibold);
  color: var(--admin-v2-color-text);
}

.admin-v2-process-workspace__subtitle {
  margin: 0;
  font-family: var(--admin-v2-font-family);
  font-size: var(--admin-v2-font-size-meta);
  line-height: var(--admin-v2-line-height-meta);
  color: var(--admin-v2-color-text-muted);
}

.admin-v2-process-pipeline {
  display: flex;
  flex-wrap: wrap;
  gap: var(--admin-v2-space-2);
  padding: 0;
  margin: 0;
  list-style: none;
}

.admin-v2-process-pipeline__step {
  display: inline-flex;
  align-items: center;
  gap: var(--admin-v2-space-2);
  border: 1px solid var(--admin-v2-border-default);
  border-radius: var(--admin-v2-radius-pill);
  padding: var(--admin-v2-space-1) var(--admin-v2-space-3);
  font-family: var(--admin-v2-font-family);
  font-size: var(--admin-v2-font-size-meta);
  line-height: var(--admin-v2-line-height-meta);
  color: var(--admin-v2-color-text-muted);
  background: var(--admin-v2-color-surface);
}

.admin-v2-process-pipeline__step--current {
  border-color: var(--admin-v2-color-accent);
  color: var(--admin-v2-color-text);
  background: var(--admin-v2-color-surface-muted);
  font-weight: var(--admin-v2-font-weight-semibold);
}

.admin-v2-process-pipeline__step--complete {
  border-color: var(--admin-v2-color-success-border, var(--admin-v2-border-default));
  color: var(--admin-v2-color-text);
}

.admin-v2-process-pipeline__step--upcoming {
  opacity: 0.72;
}

.admin-v2-process-preview {
  border: 1px solid var(--admin-v2-border-default);
  border-radius: var(--admin-v2-radius-card);
  background: var(--admin-v2-color-surface-muted);
  padding: var(--admin-v2-space-4);
  display: grid;
  gap: var(--admin-v2-space-3);
}

.admin-v2-process-preview__title {
  margin: 0;
  font-family: var(--admin-v2-font-family);
  font-size: var(--admin-v2-font-size-section-title);
  line-height: var(--admin-v2-line-height-section-title);
  font-weight: var(--admin-v2-font-weight-semibold);
  color: var(--admin-v2-color-text);
}

.admin-v2-process-preview__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--admin-v2-space-2);
}

.admin-v2-process-result {
  border: 1px solid var(--admin-v2-border-default);
  border-radius: var(--admin-v2-radius-card);
  background: var(--admin-v2-color-surface);
  padding: var(--admin-v2-space-4);
  display: grid;
  gap: var(--admin-v2-space-2);
}

.admin-v2-process-result__title {
  margin: 0;
  font-family: var(--admin-v2-font-family);
  font-size: var(--admin-v2-font-size-section-title);
  font-weight: var(--admin-v2-font-weight-semibold);
  color: var(--admin-v2-color-text);
}

.admin-v2-process-workspace__body {
  display: grid;
  gap: var(--admin-v2-space-4);
}

/* v2/admin-v2/transact-panel.css */
/**
 * Pagayo Design V2 — Transact cross-cut (initiate → compose → preview → commit → audit).
 */

.admin-v2-transact-panel {
  border: 1px solid var(--admin-v2-border-default);
  border-radius: var(--admin-v2-radius-card);
  background: var(--admin-v2-color-surface-muted);
  padding: var(--admin-v2-space-3) var(--admin-v2-space-4);
  display: grid;
  gap: var(--admin-v2-space-3);
}

.admin-v2-transact-panel__header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--admin-v2-space-2);
}

.admin-v2-transact-panel__title {
  margin: 0;
  font-family: var(--admin-v2-font-family);
  font-size: var(--admin-v2-font-size-section-title);
  line-height: var(--admin-v2-line-height-section-title);
  font-weight: var(--admin-v2-font-weight-semibold);
  color: var(--admin-v2-color-text);
}

.admin-v2-transact-panel__summary {
  margin: 0;
  font-family: var(--admin-v2-font-family);
  font-size: var(--admin-v2-font-size-meta);
  line-height: var(--admin-v2-line-height-meta);
  color: var(--admin-v2-color-text-muted);
}

.admin-v2-transact-panel__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--admin-v2-space-2);
}

.admin-v2-transact-panel__progress {
  margin: 0;
  font-family: var(--admin-v2-font-family);
  font-size: var(--admin-v2-font-size-meta);
  color: var(--admin-v2-color-text-muted);
}

.admin-v2-transact-panel__result {
  display: grid;
  gap: var(--admin-v2-space-2);
  border-top: 1px solid var(--admin-v2-border-default);
  padding-top: var(--admin-v2-space-3);
}

.admin-v2-transact-panel__result-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--admin-v2-space-3);
  font-family: var(--admin-v2-font-family);
  font-size: var(--admin-v2-font-size-meta);
  color: var(--admin-v2-color-text);
}

.admin-v2-transact-panel__result-row--success {
  color: var(--admin-v2-color-success-text, var(--admin-v2-color-text));
}

.admin-v2-transact-panel__result-row--danger {
  color: var(--admin-v2-color-danger-text, var(--admin-v2-color-text));
}

.admin-v2-transact-panel__errors {
  margin: 0;
  padding-left: var(--admin-v2-space-4);
  font-family: var(--admin-v2-font-family);
  font-size: var(--admin-v2-font-size-meta);
  color: var(--admin-v2-color-danger-text, var(--admin-v2-color-text));
}

.admin-v2-transact-panel--preview {
  border-color: var(--admin-v2-color-accent);
}

.admin-v2-transact-panel--result {
  border-color: var(--admin-v2-border-default);
  background: var(--admin-v2-color-surface);
}

/* v2/admin-v2/command-center.css */
/**
 * Admin V2 — Workspace Command Center recipe (Wave C)
 *
 * Visual SSoT for the collapsible collection tools hub.
 * Consumers (storefront) own composition/state; this file owns appearance.
 * Class names keep the storefront BEM contract (`workspace-command-center*`)
 * so markup does not fork during consolidation.
 */

.workspace-command-center {
  position: relative;
  overflow: visible;
  border: 1px solid var(--admin-v2-border-default);
  border-radius: var(--admin-v2-radius-xl);
  background: linear-gradient(
    180deg,
    var(--admin-v2-color-surface) 0%,
    var(--admin-v2-color-surface-hover) 100%
  );
  box-shadow: var(--admin-v2-shadow-lg);
  margin-bottom: var(--admin-v2-space-4, 1rem);
}

.workspace-command-center__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--admin-v2-space-6, 1.5rem);
  min-height: 7rem;
  padding: 1.375rem 1.5rem;
}

.workspace-command-center__title-block {
  display: grid;
  gap: 0.3rem;
  min-width: 0;
}

.workspace-command-center__title {
  margin: 0;
  color: var(--admin-v2-color-text);
  font-size: 1rem;
  font-weight: 760;
  letter-spacing: -0.015em;
}

.workspace-command-center__subtitle {
  margin: 0;
  max-width: 32rem;
  color: var(--admin-v2-color-text-muted);
  font-size: 0.84rem;
  line-height: 1.45;
}

.workspace-command-center__count {
  width: fit-content;
  border-radius: var(--admin-v2-radius-pill);
  background: var(--admin-v2-color-primary-soft);
  color: var(--admin-v2-color-primary);
  font-size: 0.78rem;
  font-weight: 700;
  padding: 0.25rem 0.55rem;
}

.workspace-command-center__header-actions,
.workspace-command-center__footer-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 0.625rem;
}

.workspace-command-center__toggle,
.workspace-command-center__button {
  min-height: 2.5rem;
  border: 1px solid color-mix(in srgb, var(--admin-v2-color-primary) 18%, transparent);
  border-radius: var(--admin-v2-radius-pill);
  background: var(--admin-v2-color-surface);
  color: var(--admin-v2-color-text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0 1rem;
  font-weight: 720;
  font-size: 0.9rem;
  box-shadow: var(--admin-v2-shadow-sm);
  cursor: pointer;
  transition:
    transform 160ms ease,
    box-shadow 160ms ease,
    border-color 160ms ease,
    background 160ms ease;
}

.workspace-command-center__toggle:hover,
.workspace-command-center__button:hover:not(:disabled) {
  border-color: color-mix(in srgb, var(--admin-v2-color-primary) 35%, transparent);
  box-shadow: var(--admin-v2-shadow-md);
  transform: translateY(-1px);
}

.workspace-command-center__toggle:focus-visible,
.workspace-command-center__button:focus-visible,
.workspace-command-option:focus-visible,
.workspace-command-field:focus-visible,
.workspace-command-center__close:focus-visible,
.workspace-command-center__chip:focus-visible,
.workspace-command-center__clear:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--admin-v2-color-primary) 28%, transparent);
  outline-offset: 2px;
}

.workspace-command-center__button:disabled,
.workspace-command-option:disabled,
.workspace-command-field:disabled,
.workspace-command-segmented__item:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.workspace-command-center__button--primary {
  background: var(--admin-v2-color-primary);
  border-color: var(--admin-v2-color-primary);
  color: var(--admin-v2-color-text-inverse);
}

.workspace-command-center__button--danger {
  color: var(--admin-v2-state-danger-text);
  border-color: color-mix(in srgb, var(--admin-v2-state-danger-text) 24%, transparent);
}

.workspace-command-center__button--muted {
  color: var(--admin-v2-color-text-muted);
}

.workspace-command-center__surface {
  position: absolute;
  z-index: 40;
  top: calc(100% + 0.625rem);
  left: 0.75rem;
  right: 0.75rem;
  max-height: min(32.5rem, calc(100vh - 14.375rem));
  overflow: auto;
  border: 1px solid color-mix(in srgb, var(--admin-v2-color-text) 10%, transparent);
  border-radius: var(--admin-v2-radius-xl);
  background: color-mix(in srgb, var(--admin-v2-color-surface-hover) 98%, transparent);
  box-shadow: var(--admin-v2-shadow-floating);
  padding: 0.875rem;
}

.workspace-command-center__surface-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.625rem;
}

.workspace-command-center__eyebrow {
  color: var(--admin-v2-color-primary);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.workspace-command-center__surface-title {
  margin: 0.0625rem 0 0;
  color: var(--admin-v2-color-text-muted);
  font-size: 0.82rem;
}

.workspace-command-center__close {
  width: 2.125rem;
  height: 2.125rem;
  border: 1px solid var(--admin-v2-border-default);
  border-radius: var(--admin-v2-radius-pill);
  background: var(--admin-v2-color-surface);
  color: var(--admin-v2-color-text-muted);
  display: inline-grid;
  place-items: center;
  cursor: pointer;
}

.workspace-command-center__grid {
  display: grid;
  grid-template-columns: 1.25fr 1fr 1fr 1fr 1fr;
  gap: 0.625rem;
}

.workspace-command-center__section {
  min-width: 0;
  grid-column: span 1;
  border: 1px solid var(--admin-v2-border-default);
  border-radius: var(--admin-v2-radius-lg);
  background: var(--admin-v2-color-surface);
  padding: 0.75rem;
  box-shadow: var(--admin-v2-shadow-sm);
}

.workspace-command-center__section--lg {
  grid-column: span 1;
}

.workspace-command-center__section-header {
  display: grid;
  gap: 0.2rem;
  margin-bottom: 0.5rem;
}

.workspace-command-center__section-header h2 {
  margin: 0;
  color: var(--admin-v2-color-text);
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.workspace-command-center__section-header p {
  display: none;
}

.workspace-command-center__section-body {
  min-width: 0;
}

.workspace-command-stack,
.workspace-command-form-grid {
  display: grid;
  gap: 0.375rem;
}

.workspace-command-check-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.375rem;
}

.workspace-command-check {
  min-height: 1.875rem;
  border: 1px solid var(--admin-v2-border-default);
  border-radius: var(--admin-v2-radius-md);
  background: var(--admin-v2-color-surface-hover);
  color: var(--admin-v2-color-text);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.3rem 0.5rem;
  font-size: 0.78rem;
  font-weight: 650;
}

.workspace-command-check input {
  width: 0.875rem;
  height: 0.875rem;
  accent-color: var(--admin-v2-color-primary);
}

.workspace-command-option {
  width: 100%;
  min-height: 2rem;
  border: 1px solid var(--admin-v2-border-default);
  border-radius: var(--admin-v2-radius-md);
  background: var(--admin-v2-color-surface);
  color: var(--admin-v2-color-text);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.625rem;
  padding: 0.375rem 0.55rem;
  font-size: 0.78rem;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
}

.workspace-command-option:hover:not(:disabled),
.workspace-command-option--active {
  border-color: color-mix(in srgb, var(--admin-v2-color-primary) 28%, transparent);
  background: var(--admin-v2-color-primary-soft);
  color: var(--admin-v2-color-primary-hover);
}

.workspace-command-option small {
  border-radius: var(--admin-v2-radius-pill);
  background: var(--admin-v2-color-surface-muted);
  color: var(--admin-v2-color-text-muted);
  font-size: 0.64rem;
  font-weight: 800;
  padding: 0.125rem 0.375rem;
}

.workspace-command-field {
  width: 100%;
  min-height: 2.125rem;
  border: 1px solid var(--admin-v2-border-strong);
  border-radius: var(--admin-v2-radius-md);
  background: var(--admin-v2-color-surface);
  color: var(--admin-v2-color-text);
  padding: 0 0.625rem;
  font-size: 0.8rem;
}

.workspace-command-field::placeholder {
  color: var(--admin-v2-color-text-soft);
}

.workspace-command-segmented {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.25rem;
  border-radius: var(--admin-v2-radius-lg);
  background: var(--admin-v2-color-surface-muted);
  padding: 0.2rem;
}

.workspace-command-segmented__item {
  min-height: 1.875rem;
  border: 0;
  border-radius: var(--admin-v2-radius-sm);
  background: transparent;
  color: var(--admin-v2-color-text-muted);
  font-size: 0.78rem;
  font-weight: 800;
  cursor: pointer;
}

.workspace-command-segmented__item--active {
  background: var(--admin-v2-color-surface);
  color: var(--admin-v2-color-primary);
  box-shadow: var(--admin-v2-shadow-sm);
}

.workspace-command-center__footer {
  position: sticky;
  bottom: -0.875rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin: 0.75rem -0.875rem -0.875rem;
  padding: 0.625rem 0.875rem;
  border-top: 1px solid var(--admin-v2-border-default);
  border-radius: 0 0 var(--admin-v2-radius-xl) var(--admin-v2-radius-xl);
  background: color-mix(in srgb, var(--admin-v2-color-surface) 96%, transparent);
  backdrop-filter: blur(12px);
}

.workspace-command-center__active-filters {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  min-width: 0;
}

.workspace-command-center__chip {
  border: 1px solid color-mix(in srgb, var(--admin-v2-color-primary) 18%, transparent);
  border-radius: var(--admin-v2-radius-pill);
  background: var(--admin-v2-color-primary-soft);
  color: var(--admin-v2-color-primary-hover);
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.5rem;
  font-size: 0.72rem;
  font-weight: 800;
  cursor: pointer;
}

.workspace-command-center__no-filters {
  color: var(--admin-v2-color-text-soft);
  font-size: 0.84rem;
  font-weight: 650;
}

.workspace-command-center__clear {
  border: 0;
  background: transparent;
  color: var(--admin-v2-color-text-muted);
  font-size: 0.8rem;
  font-weight: 800;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.workspace-command-center .orders-channel-toolbar-filters,
.workspace-command-center .orders-channel-toolbar-filter {
  display: grid;
  gap: 0.5rem;
}

.workspace-command-center .products-list-controls-row {
  display: grid;
  gap: 0.5rem;
}

.workspace-command-center .products-control-dropdown-panel {
  position: static;
  box-shadow: none;
  border-radius: var(--admin-v2-radius-lg);
  margin-top: 0.375rem;
}

@media (max-width: 1180px) {
  .workspace-command-center__surface {
    max-height: min(35rem, calc(100vh - 11.875rem));
  }

  .workspace-command-center__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .workspace-command-center__section--lg {
    grid-column: span 1;
  }
}

@media (max-width: 720px) {
  .workspace-command-center__header,
  .workspace-command-center__footer {
    align-items: stretch;
    flex-direction: column;
  }

  .workspace-command-center__header-actions,
  .workspace-command-center__footer-actions {
    justify-content: stretch;
  }

  .workspace-command-center__toggle,
  .workspace-command-center__button {
    width: 100%;
  }

  .workspace-command-center__surface {
    position: fixed;
    inset: auto 0.625rem 0.625rem 0.625rem;
    top: 5.5rem;
    max-height: none;
  }

  .workspace-command-center__grid,
  .workspace-command-check-grid {
    grid-template-columns: 1fr;
  }
}


}

@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 utilities {
/* GEGENEREERD door scripts/generate-rtl-truncate.mjs — niet met de hand wijzigen.
 * Opdracht 226 (S6): afkappen met een beletselteken volgt in rechts-naar-links de
 * richting van de tekst, niet van het blok. 64 selectors. */
[dir="rtl"] :is(
  .admin-account-nav__account-meta,
  .admin-account-nav__account-title,
  .admin-account-nav__child-link span,
  .admin-account-nav__item-label,
  .admin-assistant-modal__menu-tab-label,
  .admin-capability-action-bar__context-copy small,
  .admin-capability-action-bar__context-copy strong,
  .admin-search-dropdown__item-title,
  .admin-sidebar__user-name,
  .admin-table .col-truncate,
  .admin-v2-context-menu__place-label,
  .admin-v2-entity-sheet__head--with-tabs .admin-v2-entity-sheet__title,
  .admin-v2-entity-sheet__identity .admin-v2-entity-sheet__title,
  .admin-v2-entity-sheet__subtitle,
  .admin-v2-shell-footer__lang-menu-locale,
  .admin-v2-shell-footer__lang-menu-name,
  .admin-v2-shell-footer__lang-switch-copy,
  .cart-item-name,
  .col-slug,
  .col-truncate,
  .coupon-applied-code,
  .dashboard-order-customer,
  .dashboard-order-meta,
  .editor-select__option,
  .editor-select__value,
  .faq-editor-item-title,
  .ideal-bank-name,
  .link-row-url,
  .main-nav__title,
  .media-library__tile span,
  .navbar-brand-label,
  .order-items-table__product-name,
  .order-list-customer,
  .orders-workspace-customer-history__id,
  .orders-workspace-items-list__product-title,
  .partners-admin-table__external-link span,
  .partners-admin-table__partner-copy span,
  .partners-admin-table__partner-copy strong,
  .pos-cart__items--grid .pos-cart-item__name,
  .pos-custom-amount-modal--inline .pos-payment__cash-summary-label,
  .pos-customer-item__email,
  .pos-daily-close__header-meta,
  .pos-payment--inline .pos-payment__cash-summary-label,
  .pos-product-card__cat,
  .pos-product-card__name,
  .pos-receipt__item-name,
  .pos-terminal .pos-cart-item__name,
  .product-booking-selector__step-label,
  .products-workspace-gallery-item__btn,
  .products-workspace-inventory-movements-table td:nth-child(1),
  .products-workspace-inventory-movements-table th:nth-child(1),
  .products-workspace-module-card__field-value,
  .products-workspace-variants-list__row--header > .products-workspace-variants-list__cell,
  .products-workspace-variants-list__variant-label,
  .products-workspace-variants-table .admin-v2-collection-table__primary,
  .psp-webhook-url-text,
  .sidebar__user-name,
  .staff-access-scope-chip__path,
  .text-truncate,
  .today-dashboard-action__copy strong,
  .truncate,
  .universal-search__item-name,
  .website-editor-content-tabs__label,
  body.website-editor-active #website-editor-root .admin-capability-action-bar__context-copy strong
) {
  unicode-bidi: plaintext;
}

}

@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>
 */

}