/* =============================================================================
   Ayzaa Configurator — Stylesheet v2
   Mobile-first · BEM · CSS custom properties
   ============================================================================= */

:root {
  --conf-canvas-w: 600px;
  --conf-canvas-h: 700px;
}

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

.configurator__header {
  padding-block: var(--space-6, 48px) var(--space-3, 24px);
}

.configurator__title {
  font-family: var(--font-garamond, 'EB Garamond', Georgia, serif);
  font-size: clamp(2rem, 4vw, 3rem);
  color: var(--color-on-surface, #1c1610);
}

.configurator__subtitle {
  margin-top: var(--space-2, 16px);
  color: var(--color-on-surface-variant, #6b5847);
  font-size: 1.125rem;
  max-width: 60ch;
}

/* =============================================================================
   LAYOUT
   ============================================================================= */

.configurator__layout {
  display: grid;
  /*
   * Canvas-kolom: auto zodat hij mee krimpt als de viewport laag is.
   * De canvas-wrap zelf bepaalt zijn breedte via min() + aspect-ratio.
   * align-items: stretch (standaard) zodat de preview-kolom mee opstrekt
   * met de stappen-kolom — dit geeft de sticky canvas-container scroll-ruimte.
   */
  grid-template-columns: auto 1fr;
  gap: var(--space-6, 48px);
  padding-bottom: var(--space-10, 80px);
}

@media (max-width: 1100px) {
  .configurator__layout {
    grid-template-columns: 1fr;
  }
}

/* =============================================================================
   PREVIEW COLUMN
   ============================================================================= */

.configurator__preview {
  /*
   * De preview-kolom strekt zich uit over de volledige hoogte van de grid-rij
   * (align-self: stretch is standaard in CSS-grid, maar expliciet gezet voor leesbaarheid).
   * Hierdoor heeft de sticky canvas-container voldoende scroll-ruimte binnen
   * de preview-kolom om te werken: de kolom is even hoog als de stappen-kolom.
   */
  align-self: stretch;
}

/* Actie-rij onder de canvas (bijv. afdrukken) */
.configurator__preview-actions {
  display: flex;
  justify-content: center;
  margin-top: var(--space-1, 8px);
}

/*
 * Knop voor acties bij de canvas preview (print, download, etc.)
 * Compact, subtiel — bedoeld als hulpactie, niet als primaire CTA.
 */
.conf-canvas-action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-manrope, sans-serif);
  font-size: .8125rem;
  font-weight: 500;
  color: var(--color-on-surface-variant, #6b5847);
  background: none;
  border: 1px solid var(--color-outline-variant, #e0d0bc);
  border-radius: var(--radius-sm, 8px);
  padding: 7px 14px;
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
  white-space: nowrap;
}

.conf-canvas-action .material-symbols-outlined {
  font-size: 18px;
}

.conf-canvas-action:hover:not(:disabled) {
  background: var(--color-surface-container-low, #f5f0e8);
  border-color: var(--color-primary, #8b6e50);
  color: var(--color-on-surface, #1c1610);
}

.conf-canvas-action:disabled {
  opacity: .4;
  cursor: not-allowed;
}

/*
 * canvas-container: sticky wrapper rondom canvas + print-knop.
 * Door beide elementen in één sticky container te plaatsen blijft
 * de print-knop altijd zichtbaar naast de flesvizualisatie.
 *
 * top: hoogte admin-balk (32px) + wat ruimte.
 */
.configurator__canvas-container {
  position: sticky;
  top: calc(32px + var(--space-2, 16px));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1, 8px);
}

/* Canvas */
.configurator__canvas-wrap {
  /*
   * Hoogte-gedreven sizing zodat sx === sy altijd geldt.
   *
   * Vroeger werd breedte expliciet gezet en max-height apart — maar die twee
   * formules hadden een offset van 40px (160px vs 200px), waardoor de hoogte
   * door max-height werd afgekapt terwijl de breedte niet meekromp.
   * Gevolg: canvas was geen exacte 600:700 verhouding meer → sx ≠ sy →
   * horizontale laag-posities kwamen 12-24px te ver naar links uit.
   *
   * Oplossing: hoogte als primaire maat, breedte via aspect-ratio automatisch.
   * aspect-ratio: 600/700 garandeert altijd sx === sy, waardoor de JS
   * positionering (in 0-600 × 0-700 coördinaten) correct blijft.
   */
  position: relative;
  height: min(var(--conf-canvas-h, 700px), calc(100vh - 200px));
  width: auto;
  aspect-ratio: 600 / 700;
  background: var(--color-surface-container-low, #f5f0e8);
  border-radius: var(--radius-lg, 16px);
  overflow: hidden;
  border: 1px solid var(--color-outline-variant, #e0d0bc);
  /* Blending context for the color overlay */
  isolation: isolate;
}

/* Product render layers */
.configurator__canvas-layer {
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
  user-select: none;
}

/*
 * Color tint overlay — <img> element met SVG-filter (feFlood + feComposite).
 * Geen mix-blend-mode of background-color nodig: de kleur en alpha-masking
 * gebeuren volledig in het SVG-filter (#ayzaa-bottle-tint).
 */
.conf-color-overlay {
  position: absolute;
  pointer-events: none;
  z-index: 15;
  display: block;
}

/* Logo layer */
.conf-logo-layer {
  position: absolute;
  pointer-events: none;
  user-select: none;
  /* transition: all 100ms ease; — omit: causes jank during slider drag */
}

/* Empty state */
.configurator__canvas-empty {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2, 16px);
  color: var(--color-on-surface-variant, #6b5847);
}

.configurator__canvas-empty .material-symbols-outlined {
  font-size: 48px;
  opacity: .35;
}

.configurator__canvas-empty p {
  font-size: .875rem;
  opacity: .6;
}

/*
 * Order balk — sticky onderaan de steps-kolom.
 * Twee rijen: samenvatting bovenaan, acties eronder.
 * Altijd bereikbaar zonder te scrollen.
 */
.configurator__order-bar {
  position: sticky;
  bottom: 0;
  z-index: 50;
  margin-top: var(--space-4, 32px);
  background: #fff;
  border: 1px solid var(--color-outline-variant, #e0d0bc);
  border-radius: var(--radius-lg, 16px) var(--radius-lg, 16px) 0 0;
  padding: var(--space-2, 16px) var(--space-3, 24px) var(--space-2, 16px);
  box-shadow: 0 -6px 24px rgba(28, 22, 16, .09);
  /* Twee rijen: samenvatting + acties */
  display: flex;
  flex-direction: column;
  gap: var(--space-1, 8px);
}

/* Selectierij — 4 items horizontaal, volle breedte */
.configurator__order-summary {
  display: flex;
  align-items: center;
  gap: 0;
  width: 100%;
  overflow: hidden;
}

.configurator__order-item {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
  padding-inline: 10px;
}

.configurator__order-item:first-child {
  padding-left: 0;
}

.configurator__order-icon {
  font-size: 18px;
  color: var(--color-primary, #8b6e50);
  flex-shrink: 0;
  opacity: .6;
}

.configurator__order-detail {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.configurator__order-label {
  font-family: var(--font-manrope, sans-serif);
  font-size: .6875rem;
  font-weight: 600;
  color: var(--color-on-surface-variant, #6b5847);
  text-transform: uppercase;
  letter-spacing: .04em;
  white-space: nowrap;
}

.configurator__order-value {
  font-family: var(--font-manrope, sans-serif);
  font-size: .8125rem;
  color: var(--color-on-surface, #1c1610);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Scheidingslijn tussen items */
.configurator__order-divider {
  width: 1px;
  height: 36px;
  background: var(--color-outline-variant, #e0d0bc);
  flex-shrink: 0;
}

/* Actie-knopgroep — rechts uitgelijnd, volle breedte */
.configurator__order-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-1, 8px);
  width: 100%;
  padding-top: var(--space-1, 8px);
  border-top: 1px solid var(--color-outline-variant, #e0d0bc);
}

.configurator__cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.configurator__reset-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: .875rem;
  color: var(--color-on-surface-variant, #6b5847);
  white-space: nowrap;
}

@media (max-width: 1100px) {
  /* Canvas-container niet sticky op tablet — layout is verticaal gestapeld */
  .configurator__canvas-container {
    position: relative;
    top: auto;
  }

  .configurator__canvas-wrap {
    width: min(400px, 100%);
    height: auto;
    max-height: none;
    margin-inline: auto;
  }
}

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

.configurator__steps {
  min-width: 0;
}

.configurator__step-nav {
  display: flex;
  border-bottom: 2px solid var(--color-outline-variant, #e0d0bc);
  margin-bottom: var(--space-4, 32px);
  overflow-x: auto;
  scrollbar-width: none;
}
.configurator__step-nav::-webkit-scrollbar { display: none; }

.configurator__step-tab {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: var(--space-2, 16px) var(--space-3, 24px);
  font-family: var(--font-manrope, 'Manrope', system-ui, sans-serif);
  font-size: .875rem;
  font-weight: 600;
  color: var(--color-on-surface-variant, #6b5847);
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  white-space: nowrap;
  transition: color 150ms ease, border-color 150ms ease;
  cursor: pointer;
  border-top: none;
  border-left: none;
  border-right: none;
  background: none;
}

.configurator__step-tab:hover {
  color: var(--color-on-surface, #1c1610);
}

.configurator__step-tab.is-active {
  color: var(--color-primary, #8b6e50);
  border-bottom-color: var(--color-primary, #8b6e50);
}

.configurator__step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--color-outline-variant, #e0d0bc);
  font-size: 11px;
  font-weight: 700;
  transition: background 150ms ease, color 150ms ease;
}

.configurator__step-tab.is-active .configurator__step-num {
  background: var(--color-primary, #8b6e50);
  color: #fff;
}

.configurator__step-tab.is-done .configurator__step-num::after {
  content: '✓';
  font-size: 12px;
}
.configurator__step-tab.is-done .configurator__step-num {
  background: var(--color-primary, #8b6e50);
  color: #fff;
}

/* Step panels */
.configurator__step-panel { display: none; }
.configurator__step-panel.is-active { display: block; }

/* Step header */
.configurator__step-header {
  display: flex;
  flex-direction: column;
  gap: var(--space-2, 16px);
  margin-bottom: var(--space-3, 24px);
}

.configurator__step-header-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2, 16px);
}

.configurator__step-header-top h2 {
  font-family: var(--font-garamond, 'EB Garamond', Georgia, serif);
  font-size: 1.5rem;
}

/* Per-step clear button */
.conf-step-clear {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-manrope, 'Manrope', system-ui, sans-serif);
  font-size: .75rem;
  font-weight: 600;
  color: var(--color-on-surface-variant, #6b5847);
  padding: 4px 10px;
  border-radius: 20px;
  border: 1px solid var(--color-outline-variant, #e0d0bc);
  background: #fff;
  cursor: pointer;
  transition: border-color 150ms ease, color 150ms ease;
  white-space: nowrap;
}

.conf-step-clear .material-symbols-outlined {
  font-size: 14px;
}

.conf-step-clear:hover {
  border-color: var(--color-primary, #8b6e50);
  color: var(--color-primary, #8b6e50);
}

/* =============================================================================
   SEARCH INPUT
   ============================================================================= */

.configurator__search-wrap {
  position: relative;
}

.conf-search-icon {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 18px;
  color: var(--color-on-surface-variant, #6b5847);
  pointer-events: none;
  user-select: none;
}

.conf-search-input {
  width: 100%;
  padding: 10px 12px 10px 36px;
  border: 1px solid var(--color-outline-variant, #e0d0bc);
  border-radius: var(--radius-md, 8px);
  font-family: var(--font-manrope, 'Manrope', system-ui, sans-serif);
  font-size: .9375rem;
  color: var(--color-on-surface, #1c1610);
  background: #fff;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}

.conf-search-input:focus {
  outline: none;
  border-color: var(--color-primary, #8b6e50);
  box-shadow: 0 0 0 3px rgba(139, 110, 80, .15);
}

.conf-search-input::-webkit-search-cancel-button {
  cursor: pointer;
}

/* =============================================================================
   FILTERS
   ============================================================================= */

.configurator__filters {
  display: flex;
  gap: var(--space-1, 8px);
  flex-wrap: wrap;
}

.configurator__filter-select {
  padding: 7px 10px;
  border: 1px solid var(--color-outline-variant, #e0d0bc);
  border-radius: var(--radius-sm, 4px);
  font-family: var(--font-manrope, 'Manrope', system-ui, sans-serif);
  font-size: .8125rem;
  color: var(--color-on-surface, #1c1610);
  background: #fff;
  cursor: pointer;
}

/* =============================================================================
   PRODUCT GRID
   ============================================================================= */

.configurator__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: var(--space-2, 16px);
  min-height: 160px;
}

/* Product card */
.conf-product-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: var(--space-2, 16px);
  border: 2px solid var(--color-outline-variant, #e0d0bc);
  border-radius: var(--radius-md, 8px);
  background: #fff;
  cursor: pointer;
  transition: border-color 150ms ease, box-shadow 150ms ease, transform 150ms ease;
  text-align: center;
  position: relative;
}

.conf-product-card:hover {
  border-color: var(--color-primary, #8b6e50);
  box-shadow: 0 4px 14px rgba(139, 110, 80, .14);
  transform: translateY(-2px);
}

.conf-product-card.is-selected {
  border-color: var(--color-primary, #8b6e50);
  background: #fdf8f4;
  box-shadow: 0 0 0 3px rgba(139, 110, 80, .2);
}

.conf-product-card__checkmark {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--color-primary, #8b6e50);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  opacity: 0;
  transition: opacity 150ms ease;
  pointer-events: none;
}

.conf-product-card.is-selected .conf-product-card__checkmark {
  opacity: 1;
}

.conf-product-card__thumb {
  width: 120px;
  height: 120px;
  object-fit: contain;
}

.conf-product-card__thumb--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-surface-container-low, #f5f0e8);
  border-radius: 4px;
}

.conf-product-card__name {
  font-size: .8125rem;
  font-weight: 600;
  color: var(--color-on-surface, #1c1610);
  line-height: 1.3;
}

.conf-product-card__meta {
  font-size: .6875rem;
  color: var(--color-on-surface-variant, #6b5847);
}

/* =============================================================================
   LOADING / EMPTY
   ============================================================================= */

.configurator__loading {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2, 16px);
  padding: var(--space-6, 48px);
  color: var(--color-on-surface-variant, #6b5847);
  font-size: .875rem;
}

.configurator__empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: var(--space-5, 40px);
  color: var(--color-on-surface-variant, #6b5847);
  font-size: .875rem;
}

.configurator__spinner {
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 2px solid var(--color-outline-variant, #e0d0bc);
  border-top-color: var(--color-primary, #8b6e50);
  border-radius: 50%;
  animation: conf-spin .7s linear infinite;
}

@keyframes conf-spin {
  to { transform: rotate(360deg); }
}

/* =============================================================================
   PAGINATION / LOAD MORE
   ============================================================================= */

.conf-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2, 16px);
  margin-top: var(--space-3, 24px);
  flex-wrap: wrap;
}

.conf-pagination__count {
  font-size: .8125rem;
  color: var(--color-on-surface-variant, #6b5847);
}

.conf-load-more {
  font-size: .875rem;
}

/* =============================================================================
   SUGGESTED SETS
   ============================================================================= */

.configurator__suggested {
  background: var(--color-surface-container-low, #f5f0e8);
  border-radius: var(--radius-md, 8px);
  padding: var(--space-3, 24px);
  margin-bottom: var(--space-4, 32px);
  border: 1px solid var(--color-outline-variant, #e0d0bc);
}

.configurator__suggested-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-garamond, 'EB Garamond', Georgia, serif);
  font-size: 1.1rem;
  margin-bottom: var(--space-2, 16px);
}

.configurator__suggested-title .material-symbols-outlined {
  font-size: 18px;
  color: var(--color-gold, #c4a35a);
}

.configurator__sets-grid {
  display: flex;
  gap: var(--space-2, 16px);
  flex-wrap: wrap;
}

.conf-set-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: var(--space-2, 16px);
  background: #fff;
  border: 2px solid var(--color-outline-variant, #e0d0bc);
  border-radius: var(--radius-md, 8px);
  cursor: pointer;
  transition: border-color 150ms ease;
  font-size: .8125rem;
  text-align: center;
  min-width: 110px;
}

.conf-set-card:hover {
  border-color: var(--color-gold, #c4a35a);
}

.conf-set-card__preview {
  width: 80px;
  height: 80px;
  object-fit: contain;
}

/* =============================================================================
   DESIGN STEP
   ============================================================================= */

.configurator__design-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-4, 32px);
  max-width: 580px;
}

.configurator__design-group,
.configurator__design-group fieldset {
  border: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-1, 8px);
}

.configurator__design-label {
  font-weight: 600;
  font-size: .9375rem;
  color: var(--color-on-surface, #1c1610);
}

.configurator__hint {
  font-size: .8125rem;
  color: var(--color-on-surface-variant, #6b5847);
  margin-top: -4px;
}

/* ── RGB Kleurprikker ── */
.conf-color-picker {
  display: flex;
  align-items: center;
  gap: var(--space-2, 16px);
  margin-top: var(--space-1, 8px);
  flex-wrap: wrap;
}

/* "Geen kleur" reset knop */
.conf-color-none {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: 20px;
  border: 2px solid var(--color-outline-variant, #e0d0bc);
  background: none;
  color: var(--color-on-surface, #1c1610);
  font-family: var(--font-manrope, sans-serif);
  font-size: .8125rem;
  font-weight: 500;
  cursor: pointer;
  transition: border-color 150ms ease, background 150ms ease;
  white-space: nowrap;
}

.conf-color-none:hover {
  border-color: var(--color-on-surface, #1c1610);
  background: var(--color-outline-variant, #e0d0bc);
}

.conf-color-none.is-selected {
  border-color: var(--color-primary, #8b6e50);
  background: rgba(139, 110, 80, .08);
  color: var(--color-primary, #8b6e50);
  font-weight: 600;
}

/* Kleurprikker trigger — verbergt de native input, toont preview + label */
.conf-color-trigger {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 7px 14px 7px 8px;
  border-radius: 20px;
  border: 2px solid var(--color-outline-variant, #e0d0bc);
  background: var(--color-surface, #faf7f2);
  cursor: pointer;
  font-family: var(--font-manrope, sans-serif);
  font-size: .8125rem;
  font-weight: 500;
  color: var(--color-on-surface, #1c1610);
  transition: border-color 150ms ease, box-shadow 150ms ease;
  white-space: nowrap;
  user-select: none;
}

.conf-color-trigger:hover {
  border-color: var(--color-on-surface, #1c1610);
}

.conf-color-trigger.is-active {
  border-color: var(--color-primary, #8b6e50);
  box-shadow: 0 0 0 3px rgba(139, 110, 80, .18);
}

/* Gekleurde preview-cirkel */
.conf-color-preview {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 2px solid rgba(0,0,0,.12);
  flex-shrink: 0;
  background:
    linear-gradient(45deg, #ccc 25%, transparent 25%),
    linear-gradient(-45deg, #ccc 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #ccc 75%),
    linear-gradient(-45deg, transparent 75%, #ccc 75%);
  background-size: 8px 8px;
  background-position: 0 0, 0 4px, 4px -4px, -4px 0px;
  transition: background-color 80ms ease;
}

/*
 * De native color input overspant de volledige trigger label zodat klikken
 * overal op de trigger de kleurprikker opent — inclusief iOS Safari.
 * Opacity 0: visueel verborgen, maar klikbaar en focusbaar.
 */
.conf-color-trigger {
  position: relative; /* anchor voor absolute input */
}

.conf-color-input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

.conf-color-trigger__text {
  line-height: 1;
}

/* Hex waarde label naast de knop */
.conf-color-value {
  font-family: var(--font-manrope, sans-serif);
  font-size: .75rem;
  color: var(--color-on-surface-variant, #6b5c4e);
  letter-spacing: .04em;
  font-variant-numeric: tabular-nums;
}

/* ── Print option pills ── */
.conf-pill-group {
  display: flex;
  gap: var(--space-1, 8px);
  flex-wrap: wrap;
}

.conf-pill {
  padding: 7px 16px;
  border-radius: 20px;
  border: 1.5px solid var(--color-outline-variant, #e0d0bc);
  background: #fff;
  font-family: var(--font-manrope, 'Manrope', system-ui, sans-serif);
  font-size: .875rem;
  color: var(--color-on-surface, #1c1610);
  cursor: pointer;
  transition: border-color 150ms ease, background 150ms ease, color 150ms ease;
}

.conf-pill:hover {
  border-color: var(--color-primary, #8b6e50);
}

.conf-pill.is-active {
  background: var(--color-primary, #8b6e50);
  border-color: var(--color-primary, #8b6e50);
  color: #fff;
  font-weight: 600;
}

/* ── Upload area ── */
.configurator__upload-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: var(--space-4, 32px);
  border: 2px dashed var(--color-outline-variant, #e0d0bc);
  border-radius: var(--radius-md, 8px);
  background: var(--color-surface-container-low, #f5f0e8);
  cursor: pointer;
  transition: border-color 150ms ease, background 150ms ease;
  position: relative;
  text-align: center;
  font-size: .875rem;
  color: var(--color-on-surface-variant, #6b5847);
}

.configurator__upload-area:hover,
.configurator__upload-area:focus-within {
  border-color: var(--color-primary, #8b6e50);
  background: #fdf8f4;
}

.configurator__upload-area .material-symbols-outlined {
  font-size: 32px;
  opacity: .45;
}

.configurator__file-input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
  width: 100%;
  height: 100%;
}

/* Upload preview */
.conf-upload-preview {
  display: flex;
  align-items: center;
  gap: var(--space-2, 16px);
  padding: var(--space-2, 16px);
  background: #fff;
  border: 1px solid var(--color-outline-variant, #e0d0bc);
  border-radius: var(--radius-md, 8px);
  font-size: .875rem;
}

.conf-upload-preview img {
  width: 56px;
  height: 56px;
  object-fit: contain;
  border-radius: 4px;
  background: var(--color-surface-container-low, #f5f0e8);
}

.conf-upload-remove {
  margin-left: auto;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid var(--color-outline-variant, #e0d0bc);
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 150ms ease;
}

.conf-upload-remove:hover {
  background: #fee2e2;
  border-color: #fca5a5;
}

.conf-upload-remove .material-symbols-outlined {
  font-size: 16px;
  color: #b91c1c;
}

/* ── Logo controls ── */
.conf-logo-controls {
  background: var(--color-surface-container-low, #f5f0e8);
  border: 1px solid var(--color-outline-variant, #e0d0bc);
  border-radius: var(--radius-md, 8px);
  padding: var(--space-3, 24px);
  display: flex;
  flex-direction: column;
  gap: var(--space-2, 16px);
}

.conf-logo-controls__title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-manrope, 'Manrope', system-ui, sans-serif);
  font-size: .9375rem;
  font-weight: 600;
  color: var(--color-on-surface, #1c1610);
}

.conf-logo-controls__title .material-symbols-outlined {
  font-size: 18px;
  color: var(--color-primary, #8b6e50);
}

.conf-slider-row {
  display: grid;
  grid-template-columns: 100px 1fr 42px;
  align-items: center;
  gap: var(--space-1, 8px);
}

.conf-slider-label {
  font-size: .8125rem;
  font-weight: 500;
  color: var(--color-on-surface, #1c1610);
}

.conf-slider {
  width: 100%;
  accent-color: var(--color-primary, #8b6e50);
  cursor: pointer;
  height: 4px;
}

.conf-slider-val {
  font-size: .75rem;
  color: var(--color-on-surface-variant, #6b5847);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.configurator__design-disclaimer {
  font-size: .75rem;
  color: var(--color-on-surface-variant, #6b5847);
  font-style: italic;
  border-top: 1px solid var(--color-outline-variant, #e0d0bc);
  padding-top: var(--space-2, 16px);
}

/* =============================================================================
   MODAL
   ============================================================================= */

.conf-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-3, 24px);
}

.conf-modal[hidden] { display: none; }

.conf-modal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(28, 22, 16, .6);
  backdrop-filter: blur(4px);
}

.conf-modal__box {
  position: relative;
  background: #fff;
  border-radius: var(--radius-lg, 16px);
  padding: var(--space-5, 40px);
  width: 100%;
  max-width: 600px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 24px 48px rgba(28, 22, 16, .25);
}

.conf-modal__close {
  position: absolute;
  top: var(--space-2, 16px);
  right: var(--space-2, 16px);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-surface-container-low, #f5f0e8);
  color: var(--color-on-surface, #1c1610);
  border: none;
  cursor: pointer;
  transition: background 150ms ease;
}

.conf-modal__close:hover {
  background: var(--color-outline-variant, #e0d0bc);
}

.conf-modal__box h2 {
  font-family: var(--font-garamond, 'EB Garamond', Georgia, serif);
  font-size: 1.75rem;
  margin-bottom: 6px;
}

.conf-modal__intro {
  color: var(--color-on-surface-variant, #6b5847);
  margin-bottom: var(--space-4, 32px);
}

.conf-modal__form {
  display: flex;
  flex-direction: column;
  gap: var(--space-3, 24px);
}

.conf-modal__row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--space-2, 16px);
}

.conf-modal__field {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.conf-modal__field label {
  font-size: .875rem;
  font-weight: 600;
  color: var(--color-on-surface, #1c1610);
}

.conf-modal__field input,
.conf-modal__field textarea {
  padding: 10px 14px;
  border: 1px solid var(--color-outline-variant, #e0d0bc);
  border-radius: var(--radius-sm, 4px);
  font-family: var(--font-manrope, 'Manrope', system-ui, sans-serif);
  font-size: 1rem;
  color: var(--color-on-surface, #1c1610);
  transition: border-color 150ms ease, box-shadow 150ms ease;
}

.conf-modal__field input:focus,
.conf-modal__field textarea:focus {
  outline: none;
  border-color: var(--color-primary, #8b6e50);
  box-shadow: 0 0 0 3px rgba(139, 110, 80, .15);
}

.conf-modal__alert {
  padding: 12px 16px;
  border-radius: var(--radius-sm, 4px);
  font-size: .875rem;
}

.conf-modal__alert--success {
  background: #d4edda;
  color: #155724;
  border: 1px solid #c3e6cb;
}

.conf-modal__alert--error {
  background: #f8d7da;
  color: #721c24;
  border: 1px solid #f5c6cb;
}

.conf-modal__actions {
  display: flex;
  gap: var(--space-2, 16px);
  flex-wrap: wrap;
}

.conf-modal__form.is-submitting .btn[type="submit"] {
  opacity: .7;
  pointer-events: none;
}

/* =============================================================================
   MOBILE STICKY ACTION BAR
   Verborgen op desktop; zichtbaar < 768 px.
   ============================================================================= */

.conf-mobile-bar {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: #fff;
  border-top: 1px solid var(--color-outline-variant, #e0d0bc);
  padding: 10px 20px;
  /* Safe area inset voor notched telefoons */
  padding-bottom: max(10px, env(safe-area-inset-bottom, 10px));
  z-index: 500;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  box-shadow: 0 -4px 20px rgba(28, 22, 16, .1);
}

.conf-mobile-bar__progress {
  display: flex;
  align-items: center;
  gap: 0;
  flex: 1;
  min-width: 0;
}

.conf-mobile-bar__step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.conf-mobile-bar__step-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid var(--color-outline-variant, #e0d0bc);
  background: #fff;
  transition: background 200ms ease, border-color 200ms ease, transform 200ms ease;
}

.conf-mobile-bar__step[data-done] .conf-mobile-bar__step-dot {
  background: var(--color-primary, #8b6e50);
  border-color: var(--color-primary, #8b6e50);
  transform: scale(1.15);
}

.conf-mobile-bar__step-label {
  font-family: var(--font-manrope, sans-serif);
  font-size: .625rem;
  color: var(--color-on-surface-variant, #6b5847);
  white-space: nowrap;
  transition: color 200ms ease, font-weight 200ms ease;
}

.conf-mobile-bar__step[data-done] .conf-mobile-bar__step-label {
  color: var(--color-primary, #8b6e50);
  font-weight: 600;
}

.conf-mobile-bar__step-line {
  flex: 1;
  height: 2px;
  background: var(--color-outline-variant, #e0d0bc);
  align-self: flex-start;
  /* Lijn uitgelijnd met het midden van de stip (stip = 12px, label ~14px totaal) */
  margin-top: 5px;
  margin-inline: 4px;
  transition: background 200ms ease;
  min-width: 6px;
}

.conf-mobile-bar__cta {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  min-height: 44px;
  padding: 10px 18px;
}

.conf-mobile-bar__cta .material-symbols-outlined {
  font-size: 18px;
}

/* =============================================================================
   RESPONSIVE — TABLET (768 – 1100 px)
   ============================================================================= */

@media (min-width: 768px) and (max-width: 1100px) {
  .configurator__layout {
    grid-template-columns: 1fr;
    gap: var(--space-4, 32px);
  }

  .configurator__canvas-container {
    position: relative;
    top: auto;
  }

  .configurator__canvas-wrap {
    width: min(340px, 100%);
    height: auto;
  }

  /* Order balk: volle breedte op tablet */
  .configurator__order-bar {
    border-radius: var(--radius-lg, 16px);
  }
}

/* =============================================================================
   RESPONSIVE — MOBIEL (< 768 px)
   ============================================================================= */

@media (max-width: 767px) {

  /* ── Pagina header ── */
  .configurator__header {
    padding-block: var(--space-3, 24px) var(--space-1, 8px);
  }

  .configurator__title {
    font-size: clamp(1.5rem, 6vw, 2rem);
  }

  .configurator__subtitle {
    font-size: .9375rem;
    margin-top: var(--space-1, 8px);
  }

  /* ── Layout ── */
  .configurator__layout {
    grid-template-columns: 1fr;
    gap: var(--space-2, 16px);
    /* Ruimte reserveren voor de vaste onderste balk */
    padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px));
  }

  /*
   * Preview: sticky bovenaan zodat de flesvizualisatie altijd zichtbaar
   * blijft terwijl de gebruiker door de stappen scrolt.
   * margin-inline: bloed tot aan de container-rand voor een full-width look.
   * De waarde -20px matcht de container-padding op mobiel.
   */
  .configurator__preview {
    position: sticky;
    top: 0;
    order: -1;
    z-index: 200;
    background: var(--color-surface, #faf7f2);
    margin-inline: -20px;
    padding-inline: 20px;
    padding-block: 10px 14px;
    box-shadow: 0 4px 20px rgba(28, 22, 16, .09);
  }

  /* Canvas-container: geen sticky op mobiel — preview-aside doet dit */
  .configurator__canvas-container {
    position: relative;
    top: auto;
  }

  /* Canvas compact */
  .configurator__canvas-wrap {
    position: relative;
    top: auto;
    height: 220px;
    width: auto;
    max-width: none;
    max-height: none;
    aspect-ratio: 600 / 700;
    margin-inline: auto;
    border-radius: 12px;
  }

  /* Order-balk verborgen op mobiel — mobiele actiebalk neemt het over */
  .configurator__order-bar {
    display: none;
  }

  /* Print-knop verborgen op mobiel — afdrukken op ware grootte is desktop-only */
  .configurator__preview-actions {
    display: none;
  }

  /* Toon de mobiele balk */
  .conf-mobile-bar {
    display: flex;
  }

  /* ── Stap tabs — volledige breedte, compact ── */
  .configurator__step-nav {
    gap: 0;
    margin-bottom: var(--space-2, 16px);
  }

  .configurator__step-tab {
    flex: 1;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 10px 4px;
    font-size: .625rem;
    text-align: center;
    line-height: 1.2;
  }

  .configurator__step-num {
    width: 26px;
    height: 26px;
    font-size: 11px;
  }

  /* ── Aanraakdoelen: minimaal 44 × 44 px ── */
  .conf-step-clear {
    min-height: 44px;
    padding: 0 12px;
  }

  .conf-upload-remove,
  .conf-modal__close {
    width: 44px;
    height: 44px;
  }

  /* ── Zoekbalk ── */
  .conf-search-input {
    height: 48px;
    font-size: 1rem;
    padding: 12px 14px 12px 38px;
  }

  /* ── Productgrid: 2 kolommen ── */
  .configurator__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-1, 8px);
  }

  .conf-product-card {
    padding: 10px 8px;
  }

  .conf-product-card__thumb {
    width: 90px;
    height: 90px;
  }

  /* ── Design stap ── */
  .configurator__design-form {
    max-width: none;
    gap: var(--space-3, 24px);
  }

  /* ── Kleurprikker ── */
  .conf-color-picker {
    gap: var(--space-1, 8px);
  }

  .conf-color-none,
  .conf-color-trigger {
    height: 44px;
    padding-inline: 14px;
    border-radius: 12px;
  }

  /* ── Afwerking pills: 2×2 raster ── */
  .conf-pill-group {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }

  .conf-pill {
    text-align: center;
    padding: 12px 8px;
    border-radius: 10px;
  }

  /* ── Logo sliders: aanraak-vriendelijk ── */
  .conf-slider-row {
    grid-template-columns: 90px 1fr 40px;
    gap: 6px;
  }

  .conf-slider {
    height: 6px;
  }

  /* ── Modal: bottom sheet op mobiel ── */
  .conf-modal {
    align-items: flex-end;
    padding: 0;
  }

  .conf-modal__box {
    border-radius: var(--radius-lg, 16px) var(--radius-lg, 16px) 0 0;
    padding: var(--space-4, 32px) var(--space-3, 24px);
    padding-bottom: max(var(--space-3, 24px), env(safe-area-inset-bottom, 24px));
    max-height: 92vh;
    width: 100%;
  }

  /* Bottom sheet drag handle */
  .conf-modal__box::before {
    content: '';
    display: block;
    width: 40px;
    height: 4px;
    border-radius: 2px;
    background: var(--color-outline-variant, #e0d0bc);
    margin: -16px auto var(--space-3, 24px);
  }

  .conf-modal__actions {
    flex-direction: column-reverse;
  }

  .conf-modal__actions .btn {
    width: 100%;
    justify-content: center;
  }
}