/* ============================================================================
   DRANKENHANDEL MAAS & WAAL — Frontend Stylesheet
   ============================================================================
   Eén gestructureerde stylesheet voor de hele bestelomgeving.
   Vervangt: newstyle.css, restyle.css en de oude legacy style.css.

   INHOUDSOPGAVE
     1. Design tokens          (kleuren, spacing, fonts, schaduwen)
     2. Base / reset           (box-sizing, fonts, body, links)
     3. Layout                 (main-content wrapper, page background)
     4. Sidebar navigation     (de linker zijbalk incl. mobile offcanvas)
     5. Header                 (bovenbalk met hamburger, search, nav, user)
     6. Utilities              (hide helpers, overlays)
     7. Components
        7.1 Buttons
        7.2 Cards
        7.3 Forms & inputs
        7.4 Tables
        7.5 Alerts (toasts)
        7.6 Modals & overlays
        7.7 Pagination
     8. Page: Home             (bestellijst)
     9. Page: Store            (assortiment grid + producten_load.php kaartjes)
    10. Page: Checkout         (winkelwagen — basisstyling zodat pagina leesbaar blijft)
    11. Page: Order history    (/history, /orderhistory)
    12. Page: Bestelling gelukt
    13. Responsive breakpoints (mobile-first overrides per sectie)
    14. Accessibility          (focus-visible, reduced-motion)

   CONVENTIES
     - Alle eigen CSS-variabelen prefix: `--mw-*`
     - Kleuren gebruiken variabelen, geen hex-waardes in regels
     - Mobile-first waar mogelijk; desktop-overrides in @media (min-width)
     - Touch targets minimaal 44×44px op mobile
     - Inputs minimaal 16px op mobile (voorkomt iOS-zoom)
     - Horizontaal scrollen is verboden behalve expliciet (carousels)
   ============================================================================ */


/* ============================================================================
   1. DESIGN TOKENS
   ============================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&family=Oswald:wght@500;600;700&display=swap');

:root {
  /* -------- Merk-kleuren -------- */
  --mw-primary:       #16243d; /* Donkerblauw, huisstijl — overal gebruikt */
  --mw-primary-hover: #16243d; /* Flat huisstijl: geen afwijkende hover-kleur */
  --mw-primary-dark:  #16243d; /* Flat huisstijl: geen donkerder variant */
  --mw-accent:        #dea635; /* Goud, huisstijl */
  --mw-accent-hover:  #c9912a;
  --mw-accent-soft:   rgba(222, 166, 53, 0.12);

  /* -------- Neutrale kleuren -------- */
  --mw-bg:            #f5f7fa; /* Pagina-achtergrond */
  --mw-bg-alt:        #eef1f6;
  --mw-surface:       #ffffff; /* Cards, kaders */
  --mw-surface-alt:   #fafbfc;
  --mw-border:        #e5e8ef;
  --mw-border-strong: #cfd6e4;

  /* -------- Tekst -------- */
  --mw-text:          #1a2236;
  --mw-text-muted:    #697586;
  --mw-text-subtle:   #9ba5b7;

  /* -------- Feedback-kleuren -------- */
  --mw-success:       #15803d;
  --mw-success-bg:    #dcfce7;
  --mw-danger:        #b02a37;
  --mw-danger-bg:     #fef1f2;
  --mw-info:          #0c5460;
  --mw-info-bg:       #d1ecf1;
  --mw-warning:       #92400e;
  --mw-warning-bg:    #fef3c7;

  /* -------- Schaduwen -------- */
  --mw-shadow-xs: 0 1px 2px rgba(17, 24, 39, 0.04);
  --mw-shadow-sm: 0 1px 2px rgba(17, 24, 39, 0.04), 0 2px 8px rgba(17, 24, 39, 0.04);
  --mw-shadow-md: 0 1px 2px rgba(17, 24, 39, 0.04), 0 8px 24px rgba(17, 24, 39, 0.06);
  --mw-shadow-lg: 0 10px 30px rgba(17, 24, 39, 0.12);

  /* -------- Border radius -------- */
  --mw-radius-xs:   6px;
  --mw-radius-sm:  10px;
  --mw-radius:     14px;
  --mw-radius-lg:  18px;
  --mw-radius-pill: 999px;

  /* -------- Typografie -------- */
  --mw-font: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  /* -------- Layout-maten -------- */
  --mw-sidebar-width:       300px;
  --mw-sidebar-width-wide:  340px;
  --mw-header-height:       72px;
  --mw-header-height-mob:   64px;
}


/* ============================================================================
   2. BASE / RESET
   ============================================================================ */

*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  padding: 0;
  margin: 0;
  list-style: none;
  text-decoration: none;
  font-family: var(--mw-font);
}

html, body {
  overscroll-behavior-y: contain; /* Voorkom dat sidebar-scroll de body scrollt */
  background: var(--mw-bg);
  color: var(--mw-text);
  font-size: 16px;             /* Basisgrootte: 16px voorkomt iOS zoom op inputs */
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: inherit;
  text-decoration: none; /* Specificity-fix: wint van Bootstrap's `a { text-decoration: underline }` op /store */
}

a:hover,
a:focus {
  text-decoration: none;
}

button {
  font-family: var(--mw-font);
  cursor: pointer;
}


/* ============================================================================
   3. LAYOUT
   ============================================================================ */

/* De hoofdcontainer waar alles na de sidebar in leeft */
.main-content {
  margin-left: var(--mw-sidebar-width);
  transition: margin-left 300ms ease;
  min-height: 100vh;
}

/* Main = content onder de header */
main {
  margin-top: var(--mw-header-height);
  padding: 1.5rem;
  background: var(--mw-bg);
  min-height: calc(100vh - var(--mw-header-height));
}

/* Specifieke main voor de store (geen padding, volle breedte) */
.main_shop {
  margin-top: var(--mw-header-height);
  padding: 0;
  background: var(--mw-surface);
  min-height: calc(100vh - var(--mw-header-height));
}


/* ============================================================================
   4. SIDEBAR NAVIGATION
   ============================================================================
   De sidebar gebruikt een classic CSS-only "checkbox-hack" offcanvas.
   DOM-volgorde is belangrijk:
     <input #nav-toggle type="checkbox">
     <div .sidebar>...
     <label for="nav-toggle" .sidebar-backdrop>
   De `+` selector (`#nav-toggle:checked + .sidebar`) eist dat sidebar direct
   op de checkbox volgt. De backdrop staat erachter met `~`. */

#nav-toggle {
  display: none; /* Checkbox zelf verbergen, label doet het werk */
}

.sidebar {
  position: fixed;
  left: 0;
  top: 0;
  width: var(--mw-sidebar-width);
  height: 100vh;
  height: 100dvh; /* dynamische viewport (respecteert mobiele URL-bar) */
  z-index: 100;
  background: #16243d;            /* Huisstijl donkerblauw, flat (geen gradient) */
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overscroll-behavior-y: contain; /* Scroll blijft in sidebar */
  padding-bottom: env(safe-area-inset-bottom, 0);
  transition: left 300ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* -------- Sidebar backdrop (alleen zichtbaar op mobile als sidebar open is) -------- */
.sidebar-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(13, 19, 33, 0.55);
  z-index: 95;
  cursor: pointer;
  margin: 0;
  opacity: 0;
  transition: opacity 280ms ease;
  -webkit-tap-highlight-color: transparent;
}

/* -------- Sidebar brand (logo) -------- */
.sidebar-brand {
  padding: 1.5rem 1.5rem 1rem;
  color: #fff;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.sidebar-brand img {
  width: 200px;
  max-width: 100%;
}


/* -------- Sidebar menu -------- */
.sidebar-menu {
  margin-top: 0.75rem;
  padding: 0 0.75rem;
  flex: 1; /* Duwt sidebar-info + brand-info naar beneden */
}

/* Expliciete ul-reset binnen de sidebar. Nodig omdat Bootstrap op /store
   een `ul { padding-left: 2rem }` oplegt die de items anders subtiel
   naar rechts duwt en de sidebar op /home (zonder Bootstrap) anders
   doet uitzien dan op /store (met Bootstrap). */
.sidebar ul,
.sidebar-menu ul,
.sidebar-info ul,
.brand-info ul,
.navbar_side ul,
.navbar_top ul {
  padding: 0;
  margin: 0;
  list-style: none;
}

.sidebar-menu li {
  margin-bottom: 0.6rem;
}

.sidebar-menu a {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 15px 20px;
  border-radius: 14px;
  color: rgba(255, 255, 255, 0.85);
  font-size: 1.05rem;
  font-weight: 400;
  min-height: 54px;
  transition: background 180ms ease, color 180ms ease;
}

.sidebar-menu a:hover {
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
}

/* Active state: witte "pill" die naar rechts uitsteekt tot de sidebar-rand.
   De negative margin-right doorbreekt de 0.75rem right-padding van
   .sidebar-menu zodat de pill de rechterkant van de sidebar raakt.
   De left-side is afgerond (30px), de right-side is recht. */
.sidebar-menu a.active {
  background: #fff;
  color: var(--mw-primary);
  font-weight: 600;
  border-radius: 30px 0 0 30px;
  margin-right: -0.75rem;            /* Strekt uit tot de sidebar-rand */
  padding-right: calc(16px + 0.75rem); /* Compenseert de margin zodat icoon/tekst niet wegduikt */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.sidebar-menu a.active span:first-child {
  color: var(--mw-primary);
}

/* Icoon in menu-item (FontAwesome span) */
.sidebar-menu a span:first-child {
  font-size: 1.2rem;
  width: 24px;
  text-align: center;
  flex-shrink: 0;
}

/* Sub-nav met categorieën (verschijnt onder "Assortiment" op /store).
   Alleen zichtbaar op mobile — op desktop staan deze categorieën al
   in de top-nav (.navbar_top), dus daar zou dit dubbelop zijn. */
.navbar_side {
  display: none;
  margin: 0.25rem 0.75rem 0.5rem 2.25rem;
  padding: 0.4rem 0;
}

.navbar_side ul {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.navbar_side a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px 10px 16px;
  margin-left: -2px;
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.9rem;
  font-weight: 500;
  border-radius: 10px;
  border-left: 2px solid transparent;
  transition: background 150ms ease, color 150ms ease, border-color 150ms ease, transform 150ms ease;
}

.navbar_side__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  font-size: 0.95rem;
  color: #fff;
  flex: 0 0 auto;
  transition: color 150ms ease, transform 150ms ease;
}

.navbar_side a:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.05);
  border-left-color: var(--mw-accent);
}

.navbar_side a:hover .navbar_side__icon {
  color: #fff;
  transform: scale(1.05);
}

.navbar_side a.active_nav {
  color: var(--mw-accent);
  background: rgba(222, 166, 53, 0.12);
  border-left-color: var(--mw-accent);
  font-weight: 600;
}

.navbar_side a.active_nav .navbar_side__icon {
  color: var(--mw-accent);
}

/* -------- Sidebar info (telefoon, email, website) --------
   margin-top: auto duwt de info naar onderen zolang er ruimte is;
   bij te weinig ruimte vervalt het naar 0 zodat alles gewoon flowt
   en meeschuift met overflow-scroll. */
.sidebar-info {
  margin: auto 1rem 0.25rem;
  padding: 1rem 1.25rem 0.75rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  line-height: 1.65;
  flex-shrink: 0;
}

.sidebar-info li {
  padding: 4px 0;
}

.sidebar-info a {
  color: rgba(255, 255, 255, 0.75);
  font-size: 0.82rem;
  transition: color 150ms;
}

.sidebar-info a:hover {
  color: var(--mw-accent);
}

/* -------- Brand info (systeem versie, powered by) -------- */
.brand-info {
  padding: 0.75rem 1.25rem 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  text-align: center;
  flex-shrink: 0;
}

.brand-info li {
  padding: 2px 0;
}

.brand-info a {
  color: rgba(255, 255, 255, 0.4);
  font-size: 0.72rem;
}


/* ============================================================================
   5. HEADER (bovenbalk)
   ============================================================================ */

header {
  position: fixed;
  left: var(--mw-sidebar-width);
  top: 0;
  width: calc(100% - var(--mw-sidebar-width));
  height: var(--mw-header-height);
  background: var(--mw-surface);
  display: flex;
  align-items: center;   /* verticaal centreren van alle kinderen */
  justify-content: space-between;
  padding: 0 1.5rem;
  box-shadow: 0 1px 0 var(--mw-border), 0 2px 10px rgba(17, 24, 39, 0.03);
  z-index: 90;
  transition: left 300ms ease, width 300ms ease;
  gap: 1.5rem;
}

/* Forceer dat alle direct header-children verticaal centreren — voorkomt
   dat flex-kinderen door hun eigen content naar de top/bottom getrokken worden */
header > * {
  align-self: center;
}

header h2 {
  font-size: 1.35rem;
  font-weight: 600;
  color: var(--mw-text);
  display: flex;
  align-items: center;
}

/* Hamburger label (alleen zichtbaar op mobile) */
header h2 label {
  display: none;
  background: var(--mw-primary);
  width: 42px;
  height: 42px;
  border-radius: 12px;
  color: #fff;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  margin-right: 0.75rem;
  transition: background 150ms;
}

header h2 label:hover {
  background: var(--mw-primary-hover);
}

header h2 label span {
  font-size: 1.1rem;
}

/* Search in header (alleen op /store) */
.search-wrapper {
  display: flex;
  align-items: center;
  background: var(--mw-surface-alt);
  border: 1px solid var(--mw-border);
  border-radius: var(--mw-radius-pill);
  padding: 0 1rem;
  height: 44px;
  flex: 1;
  max-width: 320px;
  transition: border-color 150ms, box-shadow 150ms;
}

.search-wrapper:focus-within {
  border-color: var(--mw-accent);
  box-shadow: 0 0 0 3px var(--mw-accent-soft);
  background: var(--mw-surface);
}

.search-wrapper span {
  color: var(--mw-text-muted);
  font-size: 1rem;
  margin-right: 0.5rem;
}

.search-wrapper input {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  font-size: 0.95rem;
  color: var(--mw-text);
  min-width: 0;
}

/* Override generieke input:focus + input:focus-visible — de search-wrapper
   toont de focus-ring zelf via :focus-within, dus de input blijft naakt. */
.search-wrapper input:focus,
.search-wrapper input:focus-visible {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  background: transparent;
}

.search-wrapper input::placeholder {
  color: var(--mw-text-subtle);
}

/* Top nav met categorieën (alleen op /store, desktop).
   Simpele losstaande pills, verticaal gecentreerd in de header. */
.navbar_top {
  flex: 1 1 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  align-self: center;
  min-width: 0;
  overflow: hidden;
}

.navbar_top ul {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0;
  margin: 0;
  list-style: none;
  flex-wrap: nowrap;
}

.navbar_top li {
  display: flex;
  margin: 0;
  padding: 0;
}

.navbar_top a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 11px 22px;
  border-radius: var(--mw-radius-pill);
  color: var(--mw-text-muted);
  font-size: 0.98rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  white-space: nowrap;
  line-height: 1;
  min-height: 44px;
  border: 1px solid transparent;
  transition: background 180ms ease, color 180ms ease, border-color 180ms ease;
  -webkit-tap-highlight-color: transparent;
}

.navbar_top a:hover {
  color: var(--mw-text);
  background: var(--mw-bg-alt);
  border-color: var(--mw-border);
}

.navbar_top a.active_nav {
  background: var(--mw-primary);
  color: #fff;
  border-color: var(--mw-primary);
  box-shadow: 0 4px 12px rgba(22, 36, 61, 0.22);
}

.navbar_top a.active_nav:hover {
  background: var(--mw-primary);
  color: #fff;
  border-color: var(--mw-primary);
}

@media (max-width: 960px) {
  .navbar_top a {
    padding: 10px 16px;
    font-size: 0.9rem;
    min-height: 40px;
  }
  .navbar_top ul {
    gap: 0.3rem;
  }
}

/* User widget (rechts in header) */
.user-wrapper {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-shrink: 1;
  flex-basis: auto;
  min-width: 0;
  max-width: 240px;
}

.user-wrapper img {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--mw-bg-alt);
  flex: 0 0 auto;
}

.user-wrapper > div {
  min-width: 0;
  overflow: hidden;
}

.user-wrapper h4 {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--mw-text);
  margin: 0;
  /* Lange namen worden met ellipsis afgekapt */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 180px;
}


/* ============================================================================
   6. UTILITIES
   ============================================================================ */

.mobile_hide { display: block; }
.desktop_hide { display: none; }

.hide-modal { display: none !important; }


/* ============================================================================
   7. COMPONENTS
   ============================================================================ */

/* ---------- 7.1  BUTTONS ---------- */

button,
.btn {
  background: var(--mw-primary);
  color: #fff;
  border: 1px solid var(--mw-primary);
  border-radius: var(--mw-radius-sm);
  font-size: 0.85rem;
  font-weight: 500;
  padding: 0.6rem 1.1rem;
  transition: background 150ms, border-color 150ms, transform 150ms;
}

button:hover,
.btn:hover {
  background: var(--mw-primary-hover);
  border-color: var(--mw-primary-hover);
}

/* Gouden accent-variant (gebruik voor highlights waar nodig) */
.btn-accent {
  background: var(--mw-accent) !important;
  color: var(--mw-primary) !important;
  border: none !important;
}

.btn-accent:hover {
  background: var(--mw-accent-hover) !important;
  transform: translateY(-1px);
}

/* Donker primair "Voeg producten toe" knop (huisstijl-knop in card-headers) */
.mobile_button {
  background: var(--mw-primary);
  color: #fff;
  border: 1px solid var(--mw-primary);
  padding: 11px 20px;
  border-radius: 10px;
  font-size: 0.85rem;
  font-weight: 500;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  transition: background 150ms, transform 150ms;
  white-space: nowrap;
}

.mobile_button:hover {
  background: var(--mw-primary-hover);
  border-color: var(--mw-primary-hover);
  transform: translateY(-1px);
}

/* ---------- 7.2  CARDS ---------- */

.card {
  background: var(--mw-surface);
  border: 1px solid var(--mw-border);
  border-radius: var(--mw-radius);
  box-shadow: var(--mw-shadow-md);
  padding: 0.5rem;
  overflow: hidden;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.25rem 1.25rem 1rem;
  border-bottom: 1px solid var(--mw-border);
  gap: 1rem;
}

.card-header h2 {
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--mw-text);
  margin: 0;
  line-height: 1.3;
}

.card-body {
  padding: 0.5rem;
}

/* Kleine actie-cards (bijv. op home: "Bestellen", "Aantal op 0")
   Niet fullscreen — ze blijven op hun natuurlijke breedte en "hangen"
   naar links i.p.v. te stretchen over de hele content-breedte. */
.cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 400px));
  gap: 1.25rem;
  margin-top: 1.5rem;
  justify-content: start;
}

.card-single {
  background: var(--mw-surface);
  border: 1px solid var(--mw-border);
  border-radius: var(--mw-radius);
  box-shadow: var(--mw-shadow-sm);
  padding: 2rem 2.25rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  transition: transform 180ms, box-shadow 180ms, border-color 180ms;
  min-height: 120px;
}

.card-single:hover {
  transform: translateY(-2px);
  box-shadow: var(--mw-shadow-md);
  border-color: var(--mw-border-strong);
}

.card-single h1 {
  font-size: 1.9rem;
  font-weight: 700;
  color: var(--mw-text);
  margin: 0 0 4px;
  line-height: 1.1;
}

.card-single div:first-child span {
  font-size: 0.9rem;
  color: var(--mw-text-muted);
  font-weight: 400;
}

/* Pijl rechts in de card (geen gekleurd vierkant eromheen — gewoon groot) */
.card-single div:last-child span {
  font-size: 2.2rem;
  color: var(--mw-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  height: auto;
  background: transparent;
  transition: transform 180ms;
}

.card-single:hover div:last-child span {
  transform: translateX(4px);
}

/* Eerste card = donker primair accent (Bestellen — primaire actie) */
.cards .card-single:first-child {
  background: var(--mw-primary);
  border-color: var(--mw-primary);
}

.cards .card-single:first-child h1 { color: #fff; }
.cards .card-single:first-child div:first-child span { color: rgba(255, 255, 255, 0.7); }
.cards .card-single:first-child div:last-child span { color: #fff; }

/* ---------- 7.3  FORMS & INPUTS ---------- */

input,
textarea,
select {
  font-family: var(--mw-font);
  font-size: 16px; /* Voorkomt iOS zoom */
  color: var(--mw-text);
  border: 1px solid var(--mw-border-strong);
  border-radius: var(--mw-radius-sm);
  padding: 10px 12px;
  background: var(--mw-surface);
  transition: border-color 150ms, box-shadow 150ms;
}

input:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: var(--mw-accent);
  box-shadow: 0 0 0 3px var(--mw-accent-soft);
}

/* Verberg spinners op number inputs voor een schonere look */
input[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
}
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* ---------- 7.4  TABLES ---------- */

table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}

thead tr {
  border: none;
}

thead td {
  color: var(--mw-text-muted);
  font-weight: 600;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.9rem 1rem;
  border-bottom: 1px solid var(--mw-border);
  text-align: left;
}

tbody tr {
  border-bottom: 1px solid #f2f4f8;
  transition: background 150ms;
}

tbody tr:last-child {
  border-bottom: none;
}

tbody tr:hover {
  background: var(--mw-surface-alt);
}

tbody td {
  padding: 0.85rem 1rem;
  color: var(--mw-text);
  font-size: 0.92rem;
  vertical-align: middle;
}

.table-responsive {
  width: 100%;
  overflow-x: auto;
}

/* ---------- 7.5  ALERTS (toasts) ----------
   Toast-notificaties rechtsboven. De HTML-structuur wordt gegenereerd door
   `showSuccessMessage()` in store.php: een .alert wrapper met .alert-heading
   (titel), een <p> (bericht), een <hr> (verborgen via CSS) en een #loader
   div die dient als progress-bar onder in de toast.
   -------------------------------------------------------- */

.alert-container {
  position: fixed;
  bottom: 1.25rem;
  right: 1.25rem;
  z-index: 9999;
  display: flex;
  flex-direction: column-reverse;  /* nieuwste toast onderaan (dichtst bij rand) */
  gap: 0.65rem;
  max-width: 380px;
  pointer-events: none;
}

.alert {
  position: relative;
  background: var(--mw-surface);
  border: 1px solid var(--mw-border);
  border-radius: var(--mw-radius);
  /* Linker padding laat ruimte voor het absoluut gepositioneerde icoon */
  padding: 1rem 1.25rem 1.1rem 4.25rem;
  box-shadow:
    0 12px 32px rgba(17, 24, 39, 0.18),
    0 2px 6px rgba(17, 24, 39, 0.06);
  width: 360px;
  max-width: calc(100vw - 2.5rem);
  overflow: hidden;
  pointer-events: auto;
  animation: mw-toast-in 320ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.alert.is-leaving {
  animation: mw-toast-out 260ms ease-in forwards;
}

@keyframes mw-toast-in {
  from { opacity: 0; transform: translateX(24px) scale(0.97); }
  to   { opacity: 1; transform: translateX(0) scale(1); }
}

@keyframes mw-toast-out {
  from { opacity: 1; transform: translateX(0) scale(1); }
  to   { opacity: 0; transform: translateX(24px) scale(0.97); }
}

/* Icoon: absoluut gepositioneerd links, verticaal perfect gecentreerd.
   Simpeler dan een grid-setup en onafhankelijk van de content-hoogte. */
.alert::before {
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  font-size: 20px;
  font-weight: 700;
  line-height: 1;
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

.alert-success::before {
  content: "✓";
  background: #dcfce7;
  color: #16a34a;
  font-size: 22px;
}

.alert-danger::before {
  content: "!";
  background: var(--mw-danger-bg);
  color: var(--mw-danger);
  font-size: 24px;
}

/* Titel rechts bovenaan */
.alert-heading {
  display: block;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--mw-text);
  margin: 0 0 2px;
  line-height: 1.3;
}

/* Bericht onder de titel */
.alert p {
  margin: 0;
  font-size: 0.85rem;
  color: var(--mw-text-muted);
  line-height: 1.45;
}

.alert.alert-danger .alert-heading {
  color: var(--mw-danger);
}

/* Legacy <hr> verbergen */
.alert hr {
  display: none;
}

/* --- Progress bar onderaan (gebaseerd op de legacy #loader / #loader_danger
   divs die showSuccessMessage() genereert). We positioneren ze absoluut
   onderaan de toast en animeren width van 100% naar 0 als "aftel"-indicator. --- */
#loader,
#loader_danger {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 3px;
  margin: 0;
  border-radius: 0;
  background: #86efac;                      /* zacht groen */
  transform-origin: left;
  animation: mw-load 2s linear forwards;
}

#loader_danger {
  background: #f5c2c7;                      /* zacht rood */
}

@keyframes mw-load {
  0%   { transform: scaleX(1); }
  100% { transform: scaleX(0); }
}

/* --- Alert-info (gebruikt o.a. voor de wijn-waarschuwing op /store).
   Geen toast, maar inline info-box — andere styling. --- */
.alert-info {
  color: var(--mw-info);
  background: var(--mw-info-bg);
  border: 1px solid #bee5eb;
  border-left: 4px solid var(--mw-info);
  padding: 1rem 1.25rem;
  border-radius: var(--mw-radius-sm);
  /* Reset de toast-animatie voor inline alerts */
  position: static;
  box-shadow: none;
  min-width: 0;
  animation: none;
}

.alert-info::before {
  display: none; /* geen icoon voor inline info */
}

/* ---- Mobile: toasts iets smaller, blijven rechts-onder ---- */
@media (max-width: 640px) {
  .alert-container {
    bottom: 0.85rem;
    right: 0.75rem;
    left: 0.75rem;
    max-width: none;
  }

  .alert {
    min-width: 0;
    width: 100%;
    /* Linker padding laat ruimte voor het icoon (34px + 0.75rem gap) */
    padding: 0.85rem 1rem 0.95rem 3.5rem;
  }

  .alert::before {
    left: 0.75rem;
    width: 34px;
    height: 34px;
    font-size: 18px;
  }

  .alert-heading {
    font-size: 0.88rem;
  }

  .alert p {
    font-size: 0.82rem;
  }
}

/* Wijn-waarschuwing op /store?product/wijn/ */
.wijnalert {
  background: var(--mw-warning-bg);
  color: var(--mw-warning);
  border: 1px solid #fcd34d;
  border-left: 4px solid #f59e0b;
  border-radius: var(--mw-radius-sm);
  padding: 1rem 1.25rem;
  margin: 1rem 0;
  font-size: 0.92rem;
}

/* ---------- 7.6  MODALS & OVERLAYS ---------- */

#overlay {
  display: none;
}

.overlay {
  position: fixed !important;
  inset: 0;
  background: rgba(13, 19, 33, 0.5);
  z-index: 998;
  display: block !important;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(13, 19, 33, 0.5);
  z-index: 999;
  display: none;
}

.modal-content {
  max-width: 90%;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: var(--mw-surface);
  border-radius: var(--mw-radius);
  box-shadow: var(--mw-shadow-lg);
  z-index: 1000;
  overflow: hidden;
}

.modal-header,
.modal-body,
.modal-footer {
  background: var(--mw-surface);
  text-align: center;
  padding: 1rem;
  border: none;
}

.modal-header { border-radius: var(--mw-radius) var(--mw-radius) 0 0; }
.modal-footer { border-radius: 0 0 var(--mw-radius) var(--mw-radius); }

body.modal-open,
body.mw-modal-open {
  overflow: hidden;
}

/* ----------------------------------------------------------------------------
   CUSTOM CONFIRMATION MODAL (.mw-confirm)
   ----------------------------------------------------------------------------
   Vervangt de lelijke native `confirm()` dialog met een mooie gestylde modal.
   Gebruikt via de JS helper `mwConfirm(message)` in home.php.
   Volledig responsive: centered dialog op desktop, bottom-sheet-achtige
   layout op mobile met de knoppen naast elkaar.
   ---------------------------------------------------------------------------- */

.mw-confirm {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.mw-confirm.is-open {
  display: flex;
  animation: mw-confirm-fade 180ms ease-out;
}

@keyframes mw-confirm-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Donker, lichtjes geblurred overlay achter de dialog */
.mw-confirm__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(13, 19, 33, 0.55);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  cursor: pointer;
}

/* De dialog zelf — wit, afgerond, shadow, max-width voor desktop */
.mw-confirm__dialog {
  position: relative;
  width: 100%;
  max-width: 440px;
  background: var(--mw-surface);
  border-radius: var(--mw-radius-lg);
  padding: 2rem 2rem 1.75rem;
  box-shadow:
    0 20px 60px rgba(0, 0, 0, 0.25),
    0 2px 4px rgba(0, 0, 0, 0.1);
  text-align: center;
  animation: mw-confirm-pop 240ms cubic-bezier(0.2, 1.2, 0.3, 1);
}

@keyframes mw-confirm-pop {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Rond icoontje bovenaan (rood geaccentueerd) */
.mw-confirm__icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 1.25rem;
  border-radius: 50%;
  background: var(--mw-danger-bg);
  color: var(--mw-danger);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 6px rgba(176, 42, 55, 0.06);
}

.mw-confirm__icon svg {
  width: 28px;
  height: 28px;
}

.mw-confirm__title {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--mw-text);
  margin: 0 0 0.5rem;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

.mw-confirm__message {
  font-size: 0.95rem;
  color: var(--mw-text-muted);
  line-height: 1.5;
  margin: 0 0 1.5rem;
  padding: 0 0.5rem;
}

/* Productnaam binnen de message (bijv. "Weet u zeker dat u <strong>X</strong> ...") */
.mw-confirm__message strong {
  color: var(--mw-text);
  font-weight: 700;
}

/* Knoppen-rij — naast elkaar op desktop/tablet/mobile */
.mw-confirm__actions {
  display: flex;
  gap: 0.75rem;
}

.mw-confirm__btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.85rem 1.25rem;
  border-radius: var(--mw-radius-sm);
  font-size: 0.95rem;
  font-weight: 600;
  font-family: var(--mw-font);
  min-height: 48px;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background 150ms ease, border-color 150ms ease, color 150ms ease, transform 150ms ease;
  -webkit-tap-highlight-color: transparent;
}

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

/* Annuleren = outline neutraal */
.mw-confirm__btn--cancel {
  background: var(--mw-surface);
  color: var(--mw-text);
  border-color: var(--mw-border-strong);
}

.mw-confirm__btn--cancel:hover {
  background: var(--mw-bg);
  border-color: var(--mw-text-muted);
}

/* Verwijderen = rood filled */
.mw-confirm__btn--danger {
  background: var(--mw-danger);
  color: #fff;
  border-color: var(--mw-danger);
  box-shadow: 0 4px 12px rgba(176, 42, 55, 0.25);
}

.mw-confirm__btn--danger:hover {
  background: #8e222c;
  border-color: #8e222c;
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(176, 42, 55, 0.32);
}

.mw-confirm__btn--danger:active {
  transform: translateY(0);
}

/* Tablet — iets compacter */
@media (max-width: 768px) {
  .mw-confirm {
    padding: 1rem 0.85rem;
    align-items: center;
  }

  .mw-confirm__dialog {
    padding: 1.75rem 1.5rem 1.5rem;
    max-width: 420px;
  }

  .mw-confirm__icon {
    width: 56px;
    height: 56px;
    margin-bottom: 1rem;
  }

  .mw-confirm__title {
    font-size: 1.15rem;
  }

  .mw-confirm__message {
    font-size: 0.92rem;
    padding: 0;
    margin-bottom: 1.25rem;
  }
}

/* Mobile — nog strakker, knoppen blijven naast elkaar maar iets kleiner */
@media (max-width: 480px) {
  .mw-confirm {
    padding: 0.75rem;
    /* Dialog iets omhoog zodat hij niet achter het toetsenbord verdwijnt */
    align-items: flex-start;
    padding-top: 15vh;
  }

  .mw-confirm__dialog {
    padding: 1.5rem 1.25rem 1.25rem;
    border-radius: var(--mw-radius);
  }

  .mw-confirm__icon {
    width: 52px;
    height: 52px;
    margin-bottom: 0.85rem;
  }

  .mw-confirm__icon svg {
    width: 24px;
    height: 24px;
  }

  .mw-confirm__title {
    font-size: 1.05rem;
    margin-bottom: 0.4rem;
  }

  .mw-confirm__message {
    font-size: 0.88rem;
    margin-bottom: 1.1rem;
  }

  .mw-confirm__btn {
    padding: 0.75rem 1rem;
    font-size: 0.9rem;
    min-height: 46px;
  }

  .mw-confirm__actions {
    gap: 0.6rem;
  }
}

/* Respecteer prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .mw-confirm.is-open,
  .mw-confirm__dialog {
    animation: none;
  }
}

/* ---------- 7.7  PAGINATION ---------- */

.toolbar-bottom {
  padding: 2rem 0;
  display: flex;
  justify-content: center;
}

nav.pagination-wrap,
.pagination-wrap {
  display: flex;
  justify-content: center;
}

ul.pagination {
  display: flex;
  gap: 0.35rem;
  align-items: center;
  padding: 0;
}

a.pagination {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 12px;
  border-radius: var(--mw-radius-sm);
  background: var(--mw-surface);
  border: 1px solid var(--mw-border);
  color: var(--mw-text-muted);
  font-size: 0.9rem;
  font-weight: 500;
  transition: all 150ms;
}

a.pagination:hover {
  border-color: var(--mw-accent);
  color: var(--mw-primary);
}

a.pagination h6.pagination {
  margin: 0;
  font-size: 0.9rem;
  font-weight: 500;
  color: inherit;
}


/* ============================================================================
   8. PAGE: HOME (bestellijst)
   ============================================================================ */

/* Grid-layout voor de bestellijst (is in principe vol-breedte) */
.recent-grid {
  display: block;
}

/* De bestellijst-tabel heeft een drag-kolom, naam, aantal, en delete-knop */
.card-body .td_drag {
  width: 44px;
  text-align: center;
  color: var(--mw-text-muted);
}

.card-body .td_drag i {
  cursor: grab;
  padding: 8px;
  color: var(--mw-text-subtle);
  font-size: 1rem;
}

.card-body .td_drag i:active {
  cursor: grabbing;
}

.card-body .td_name {
  text-align: left;
  font-weight: 500;
}

.card-body .td_input {
  width: 170px;
  text-align: center;
}

/* Quantity stepper wrapper (rond de input): [ − ] [ input ] [ + ]
   De +/- knoppen triggeren puur het bestaande 'input' event — geen data-logica. */
.card-body .qty-stepper {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid var(--mw-border-strong, var(--mw-border));
  border-radius: 10px;
  overflow: hidden;
  background: var(--mw-surface);
  box-shadow: 0 1px 2px rgba(17, 24, 39, 0.04);
}

.card-body .qty-stepper .qty-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 42px;
  background: var(--mw-bg);
  border: none;
  color: var(--mw-primary);
  font-size: 1.2rem;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  border-radius: 0;
  transition: background 150ms ease, color 150ms ease;
  -webkit-tap-highlight-color: transparent;
}

.card-body .qty-stepper .qty-btn:hover,
.card-body .qty-stepper .qty-btn:focus-visible {
  background: var(--mw-primary);
  color: #fff;
  outline: none;
}

.card-body .qty-stepper .qty-btn-minus {
  border-right: 1px solid var(--mw-border-strong, var(--mw-border));
}

.card-body .qty-stepper .qty-btn-plus {
  border-left: 1px solid var(--mw-border-strong, var(--mw-border));
}

.card-body .td_input input.js-qty-input {
  width: 64px;
  height: 42px;
  padding: 8px 6px;
  text-align: center;
  font-size: 16px;
  font-weight: 600;
  border: none;
  border-radius: 0;
  background: var(--mw-surface);
  box-shadow: none;
}

.card-body .td_input input.js-qty-input:focus {
  outline: none;
  box-shadow: none;
}

/* Verberg native number-spinners — we hebben onze eigen knoppen */
.card-body .td_input input.js-qty-input::-webkit-outer-spin-button,
.card-body .td_input input.js-qty-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.card-body .td_input input.js-qty-input {
  -moz-appearance: textfield;
  appearance: textfield;
}

.card-body .td_action {
  width: 80px;
  text-align: center;
}

/* Delete/trash button — Optie A: neutraal in rust-stand, rood bij hover/tap.
   Rationale: een lijst met 10+ rijen blijft visueel rustig omdat de delete
   knopjes niet voortdurend "gevaar!" schreeuwen. De destructieve intent
   wordt duidelijk zodra de gebruiker erover hovert of tapt. */
.card-body .td_action button {
  background: var(--mw-surface);
  color: var(--mw-text-muted);
  border: 1px solid var(--mw-border);
  border-radius: var(--mw-radius-sm);
  padding: 0;
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 150ms ease, border-color 150ms ease, color 150ms ease, transform 150ms ease;
}

.card-body .td_action button:hover,
.card-body .td_action button:focus-visible,
.card-body .td_action button:active {
  background: var(--mw-danger-bg);
  border-color: #f5c2c7;
  color: var(--mw-danger);
  transform: translateY(-1px);
}

/* ---------- Empty state (geen producten in de bestellijst) ---------- */

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 3.5rem 1.5rem 3rem;
  min-height: 300px;
}

/* Compact variant — voor gebruik binnen een kleinere card (checkout) */
.empty-state--compact {
  padding: 2rem 1rem 1.5rem;
  min-height: 0;
}

.empty-state--compact .empty-state__icon {
  width: 68px;
  height: 68px;
  margin-bottom: 1rem;
}

.empty-state--compact .empty-state__icon svg {
  width: 32px;
  height: 32px;
}

.empty-state--compact .empty-state__title {
  font-size: 1.05rem;
}

.empty-state--compact .empty-state__message {
  font-size: 0.88rem;
  margin-bottom: 1.25rem;
}

.empty-state--compact .empty-state__cta {
  padding: 11px 20px;
  font-size: 0.9rem;
  min-height: 44px;
}

.empty-state__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 88px;
  height: 88px;
  border-radius: 50%;
  background: var(--mw-bg);
  color: var(--mw-primary);
  margin-bottom: 1.25rem;
  box-shadow: 0 0 0 10px rgba(22, 36, 61, 0.03);
}

.empty-state__icon svg {
  width: 40px;
  height: 40px;
}

.empty-state__title {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--mw-text);
  margin: 0 0 0.5rem;
  letter-spacing: -0.01em;
}

.empty-state__message {
  font-size: 0.92rem;
  color: var(--mw-text-muted);
  line-height: 1.55;
  max-width: 420px;
  margin: 0 0 1.75rem;
}

.empty-state__cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 24px;
  background: var(--mw-primary);
  color: #fff;
  border-radius: var(--mw-radius-sm);
  font-size: 0.95rem;
  font-weight: 600;
  min-height: 48px;
  border: 1px solid var(--mw-primary);
  transition: background 150ms ease, transform 150ms ease, box-shadow 150ms ease;
  box-shadow: 0 4px 12px rgba(22, 36, 61, 0.18);
}

.empty-state__cta:hover {
  background: var(--mw-primary);
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(22, 36, 61, 0.25);
  color: #fff;
}

.empty-state__cta .fas {
  font-size: 0.8rem;
  transition: transform 150ms ease;
}

.empty-state__cta:hover .fas {
  transform: translateX(3px);
}

@media (max-width: 640px) {
  .empty-state {
    padding: 2.5rem 1rem 2rem;
    min-height: 240px;
  }

  .empty-state__icon {
    width: 72px;
    height: 72px;
  }

  .empty-state__icon svg {
    width: 34px;
    height: 34px;
  }

  .empty-state__title {
    font-size: 1.1rem;
  }

  .empty-state__message {
    font-size: 0.88rem;
  }

  .empty-state__cta {
    width: 100%;
    justify-content: center;
  }
}


/* ============================================================================
   9. PAGE: STORE (assortiment) + producten_load.php
   ============================================================================
   De store bestaat uit twee delen:
     - store.php: layout wrapper met header-nav en loading-area
     - producten_load.php: rendert de product grid via AJAX
   Beide delen stylen we hier zodat ze samen kloppen. */

.shop-main-area {
  padding: 0.25rem 1.5rem 3rem;
  max-width: 1600px;
  margin: 0 auto;
}

/* Custom grid container (override Bootstrap's standaard container als die te smal wordt) */
.container-default,
.custom-area,
.custom-container {
  width: 100%;
}

/* Loading-area waar de producten in geladen worden via AJAX */
#loading-area {
  padding: 1rem 0;
  min-height: 200px;
}

#loading-area > p {
  text-align: center;
  color: var(--mw-text-muted);
  padding: 3rem 1rem;
  font-size: 0.95rem;
}

/* ---------- Product grid ---------- */

/* .shop_wrapper is de parent `.row` rond alle product-cards */
.shop_wrapper {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 1.25rem;
  margin: 0;
}

/* Empty-state mag het volle grid-breedte pakken (spant alle kolommen) */
.shop_wrapper--empty {
  grid-template-columns: 1fr !important;
}

.empty-state--store {
  grid-column: 1 / -1;
  background: var(--mw-surface);
  border: 1px solid var(--mw-border);
  border-radius: var(--mw-radius-lg, 14px);
  box-shadow: var(--mw-shadow-sm);
  padding: 3.5rem 1.5rem 3rem;
  margin: 0.5rem 0;
}

/* Bootstrap's .col-md-3 klassen op .product-area overschrijven we;
   we gebruiken CSS grid zodat het altijd netjes uitkomt */
.product-area {
  width: 100% !important;
  max-width: 100% !important;
  flex: none !important;
  padding: 0 !important;
}

/* ---------- Product card ---------- */

.single-product {
  background: var(--mw-surface);
  border: 1px solid var(--mw-border);
  border-radius: var(--mw-radius);
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease;
  height: 100%;
  position: relative;
}

.single-product:hover {
  transform: translateY(-3px);
  box-shadow: var(--mw-shadow-md);
  border-color: var(--mw-border-strong);
}

/* Product afbeelding.
   LET OP: geen `transform: scale()` op de img — dat promoveert de image
   naar een GPU-layer en de browser rendert dan continu met sub-pixel
   antialiasing waardoor raster images (zoals de PNG placeholders) wazig
   lijken, zelfs in rust-stand. Voor hover-feedback gebruiken we liever
   een subtiele wijziging op de parent (border/shadow). */
.product-image {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  background: var(--mw-surface-alt);
  border-radius: var(--mw-radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 0.85rem;
}

.product-image img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  image-rendering: auto;
}

/* Override de inline `w-60` / `w-30` width utility classes die producten_load.php
   meegeeft (Bootstrap-style width%). Die zouden de image oprekken. */
.img_store,
.product-image-1.w-60 {
  max-width: 100% !important;
  max-height: 100% !important;
  width: auto !important;
  height: auto !important;
}

/* Placeholder images: iets compacter maar wel in volle kleur —
   geen opacity, anders lijkt er een filter overheen te zitten. */
.img_store_placeholder,
.product-image-1.w-30 {
  max-width: 55% !important;
  max-height: 90% !important;
  width: auto !important;
  height: auto !important;
}

/* Product-content (titel + button + SKU) */
.product-content {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  flex: 1;
}

.product-title {
  cursor: pointer;
  min-height: 2.6em; /* Reserveert ruimte voor 2 regels */
}

h4.product_title {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--mw-text);
  line-height: 1.3;
  margin: 0;
  text-align: center;
  display: -webkit-box;
  -webkit-line-clamp: 2;
          line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* "Artikel: SKU" onderaan */
p.product_title {
  font-size: 0.75rem;
  color: var(--mw-text-muted);
  margin: 0;
  font-weight: 400;
  text-align: center;
}

/* De "Toevoegen" button wrapper (legacy naamgeving) */
.geheleknop {
  margin-top: auto; /* Duwt de knop naar onderkant van de card */
}

.geheleknop > br,
.product-content > br {
  display: none; /* Legacy <br>'s die het layout saboteren */
}

.winkel_knop {
  display: block !important;
  width: 100%;
}

/* De eigenlijke "Toevoegen" knop */
.favorite-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 11px 14px;
  background: var(--mw-primary);
  color: #fff;
  font-size: 0.88rem;
  font-weight: 600;
  border-radius: var(--mw-radius-sm);
  cursor: pointer;
  transition: background 250ms ease, color 250ms ease, transform 150ms ease, border-color 250ms ease;
  min-height: 44px;
  border: 1px solid var(--mw-primary);
  overflow: hidden;
  position: relative;
}

.favorite-icon:hover {
  background: var(--mw-accent);
  color: var(--mw-primary);
  border-color: var(--mw-accent);
}

.favorite-icon:active {
  transform: scale(0.98);
}

/* ---------- Success state na klikken op "Toevoegen" ----------
   .is-added → tijdelijke pop-animatie (1.2s)
   .is-in-fav → permanente "toegevoegd"-state (groen, geen hover-revert) */
.favorite-icon.is-added {
  animation: mw-btn-pop 320ms ease;
}

.favorite-icon.is-in-fav {
  background: #16a34a;                          /* heldergroen = succes */
  border-color: #16a34a;
  color: #fff;
  pointer-events: none;                         /* niet opnieuw klikbaar */
  cursor: default;
}

.favorite-icon.is-in-fav:hover {
  background: #16a34a;
  border-color: #16a34a;
  color: #fff;
}

@keyframes mw-btn-pop {
  0%   { transform: scale(1); }
  40%  { transform: scale(0.96); }
  100% { transform: scale(1); }
}

/* SVG checkmark met draw-in animatie */
.favorite-icon .mw-btn-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  animation: mw-check-in 420ms cubic-bezier(0.2, 1.2, 0.3, 1);
}

.favorite-icon .mw-btn-check svg {
  width: 100%;
  height: 100%;
}

@keyframes mw-check-in {
  0%   { transform: scale(0) rotate(-20deg); opacity: 0; }
  60%  { transform: scale(1.25) rotate(0);   opacity: 1; }
  100% { transform: scale(1) rotate(0);      opacity: 1; }
}

/* Label "Toegevoegd" fade't in */
.favorite-icon .mw-btn-label {
  display: inline-block;
  animation: mw-label-in 320ms ease-out 60ms both;
}

@keyframes mw-label-in {
  0%   { opacity: 0; transform: translateX(-4px); }
  100% { opacity: 1; transform: translateX(0); }
}

/* Ster-icoon achter de "Toevoegen"-knop is op verzoek verborgen —
   de knop-tekst alleen is duidelijk genoeg. */
.icon_favo {
  display: none;
}

/* Feedback-tekst na toevoegen (p#toegevoegd<sku>) */
p[id^="toegevoegd"] {
  font-size: 0.78rem;
  color: var(--mw-success);
  text-align: center;
  min-height: 1em;
}


/* ============================================================================
  10a. PAGE: LOGIN
   ============================================================================
   Gesplit-card layout: links donkerblauw met login-form, rechts goud met
   contact-info voor account-aanvraag. Gecentreerd op de viewport. */

/* Body op login krijgt een lichte neutrale achtergrond — het dark-mode
   van de sidebar zit hier niet want _nav.php wordt niet geladen. */
body:has(.login-container) {
  background: var(--mw-bg);
}

.login-container {
  max-width: 1080px;
  margin: 4.5rem auto;
  padding: 0 1rem;
}

.login-container .row {
  background: var(--mw-surface);
  border-radius: 6px;
  box-shadow:
    0 20px 60px rgba(17, 24, 39, 0.15),
    0 4px 12px rgba(17, 24, 39, 0.06);
  overflow: hidden;
  margin: 0;
  min-height: 520px;
}

/* -------- Linker helft: login form (donkerblauw) -------- */
.login-form-1 {
  background: var(--mw-primary);
  color: #fff;
  padding: 3rem 3.5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.login-form-1 h3 {
  font-family: 'Oswald', var(--mw-font);
  font-size: 2rem;
  font-weight: 600;
  color: #fff;
  margin: 0 0 1.5rem;
  letter-spacing: 0.01em;
  text-transform: none;
}

.login-form-1 .form-group {
  margin-bottom: 1rem;
}

/* Inputs — witte pill met donkere tekst */
.login-form-1 .form-control,
.login-form-1 input[type="number"],
.login-form-1 input[type="email"],
.login-form-1 input[type="text"] {
  width: 100%;
  padding: 12px 18px;
  border: none;
  border-radius: 4px;
  background: #fff;
  color: var(--mw-text);
  font-size: 1rem;
  font-family: var(--mw-font);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
  transition: box-shadow 150ms ease, transform 150ms ease;
}

.login-form-1 .form-control::placeholder,
.login-form-1 input::placeholder {
  color: var(--mw-text-muted);
  opacity: 1;
}

.login-form-1 .form-control:focus,
.login-form-1 input:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(222, 166, 53, 0.35), 0 4px 10px rgba(0, 0, 0, 0.1);
}

/* Login button — witte pill met donkere tekst */
.btnSubmit {
  display: inline-block;
  width: auto;
  min-width: 180px;
  padding: 12px 40px;
  border: none;
  border-radius: 999px;
  background: #fff;
  color: var(--mw-primary);
  font-size: 1rem;
  font-weight: 700;
  font-family: var(--mw-font);
  cursor: pointer;
  transition: background 150ms ease, transform 150ms ease, box-shadow 150ms ease;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  margin-top: 0.75rem;
  -webkit-appearance: none;
  appearance: none;
}

.btnSubmit:hover {
  background: var(--mw-accent);
  color: var(--mw-primary);
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(222, 166, 53, 0.35);
}

.btnSubmit:active {
  transform: translateY(0);
}

/* Error message (bij verkeerde inloggegevens) */
.login-form-1 #error,
.login-form-1 .horizontal-shake {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-left: 4px solid var(--mw-danger);
  color: #fff;
  padding: 12px 16px;
  border-radius: var(--mw-radius-sm);
  margin-bottom: 1.25rem;
  font-size: 0.9rem;
  animation: mw-shake 450ms cubic-bezier(0.36, 0.07, 0.19, 0.97);
}

@keyframes mw-shake {
  10%, 90% { transform: translateX(-2px); }
  20%, 80% { transform: translateX(4px); }
  30%, 50%, 70% { transform: translateX(-6px); }
  40%, 60% { transform: translateX(6px); }
}

/* -------- Rechter helft: account aanvragen (goud) -------- */
.login-form-2 {
  background: var(--mw-accent);
  color: #fff;
  padding: 3rem 3rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.login-form-2 h3 {
  font-family: 'Oswald', var(--mw-font);
  font-size: 1.75rem;
  font-weight: 600;
  color: #fff;
  margin: 0 0 0.5rem;
  letter-spacing: 0.01em;
  line-height: 1.2;
}

.login-form-2 h3 p#tekst-info,
.login-form-2 h3 > p {
  font-size: 0.92rem;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.9);
  margin: 0.5rem 0 0;
  line-height: 1.4;
  display: block;
}

.login-form-2 .form-group {
  margin-top: 1.5rem;
}

.login-form-2 p,
.login-form-2 #tekst-info {
  color: #fff;
  font-size: 0.95rem;
  margin: 0 0 0.5rem;
  line-height: 1.6;
}

.login-form-2 p strong,
.login-form-2 #tekst-info strong {
  color: #fff;
  font-weight: 700;
}

/* -------- Responsive: stack op mobile -------- */
@media (max-width: 767px) {
  /* Body achtergrond matcht de donkerblauwe login-helft zodat er geen
     witruimte aan de randen zichtbaar is (login-form-2 blijft goud). */
  body:has(.login-container) {
    background: var(--mw-primary);
  }

  .login-container {
    max-width: none;
    margin: 0;
    padding: 0;
  }

  .login-container .row {
    min-height: 100vh;
    min-height: 100dvh;
    border-radius: 0;
    box-shadow: none;
  }

  .login-form-1,
  .login-form-2 {
    padding: 2rem 1.75rem;
  }

  .login-form-1 h3 {
    font-size: 1.75rem;
    margin-bottom: 1.5rem;
  }

  .login-form-2 h3 {
    font-size: 1.4rem;
  }
}


/* ============================================================================
  10. PAGE: CHECKOUT (winkelwagen)
   ============================================================================
   Twee-koloms layout (Bootstrap col-lg-6): factuurgegevens links, order
   summary rechts. Stacked op <lg (<992px). */

.checkout-area {
  padding: 2rem 1.5rem 4rem;
  max-width: 1200px;
  margin: 0 auto;
  background: var(--mw-bg);
  min-height: calc(100vh - var(--mw-header-height));
  /* checkout.php heeft géén <main> tag, dus pakken we hier zelf de
     margin-top die nodig is om onder de fixed header te beginnen. */
  margin-top: var(--mw-header-height);
}

/* Bootstrap voegt negative margins toe aan .row — geen probleem, laat staan */

/* ---- Section heading met goud accent-balkje ---- */
.checkout-area h3 {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--mw-text);
  margin: 0 0 1.25rem;
  padding-bottom: 0.9rem;
  border-bottom: 1px solid var(--mw-border);
}

.checkout-area h3::before {
  content: "";
  width: 4px;
  height: 22px;
  background: var(--mw-accent);
  border-radius: 2px;
  flex-shrink: 0;
}

/* ---- Left card: factuurgegevens ---- */
.checkbox-form {
  background: var(--mw-surface);
  border: 1px solid var(--mw-border);
  border-radius: var(--mw-radius);
  padding: 1.75rem;
  box-shadow: var(--mw-shadow-sm);
}

.checkout-form-list {
  margin-bottom: 1.1rem;
}

.checkout-form-list-2 {
  margin-bottom: 0;
  margin-top: 0.5rem;
}

.checkout-form-list label {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--mw-text);
  margin-bottom: 0.45rem;
}

.checkout-form-list .required {
  color: var(--mw-danger);
  margin-left: 2px;
  font-weight: 700;
}

/* Input styling — hogere specificity om inline styles en Bootstrap te beaten */
.checkbox-form input[type="text"],
.checkbox-form input[type="email"],
.input_checkout {
  width: 100%;
  padding: 11px 14px;
  border: 1px solid var(--mw-border-strong);
  border-radius: var(--mw-radius-sm);
  background: var(--mw-surface);
  font-size: 0.95rem;
  color: var(--mw-text);
  font-family: var(--mw-font);
  transition: border-color 150ms, box-shadow 150ms;
  line-height: 1.4;
}

.checkbox-form input[type="text"]:focus,
.checkbox-form input[type="email"]:focus,
.input_checkout:focus {
  outline: none;
  border-color: var(--mw-accent);
  box-shadow: 0 0 0 3px var(--mw-accent-soft);
}

.checkbox-form textarea,
.checkout-form-list-2 textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--mw-border-strong);
  border-radius: var(--mw-radius-sm);
  background: var(--mw-surface);
  font-family: var(--mw-font);
  font-size: 0.95rem;
  color: var(--mw-text);
  min-height: 110px;
  resize: vertical;
  transition: border-color 150ms, box-shadow 150ms;
  line-height: 1.5;
}

.checkbox-form textarea:focus,
.checkout-form-list-2 textarea:focus {
  outline: none;
  border-color: var(--mw-accent);
  box-shadow: 0 0 0 3px var(--mw-accent-soft);
}

/* ---- Error / success messages ---- */
.error-message {
  background: var(--mw-danger-bg);
  border: 1px solid #f5c2c7;
  border-left: 4px solid var(--mw-danger);
  color: #721c24;
  padding: 12px 16px;
  border-radius: var(--mw-radius-sm);
  margin-bottom: 1.25rem;
  font-size: 0.92rem;
  line-height: 1.4;
}

.success-message {
  background: var(--mw-success-bg);
  border: 1px solid #c3e6cb;
  border-left: 4px solid var(--mw-success);
  color: #155724;
  padding: 12px 16px;
  border-radius: var(--mw-radius-sm);
  margin-bottom: 1.25rem;
  font-size: 0.92rem;
  line-height: 1.4;
}

/* ---- Right card: order summary ---- */
.your-order {
  background: var(--mw-surface);
  border: 1px solid var(--mw-border);
  border-radius: var(--mw-radius);
  padding: 1.75rem;
  box-shadow: var(--mw-shadow-sm);
}

.your-order-table {
  margin-bottom: 0;
}

.your-order-table table {
  width: 100%;
  border-collapse: collapse;
  margin: 0;
}

.your-order-table tbody {
  display: block;
}

/* Elke cart-item is een flex rij: naam links, qty+delete rechts */
.your-order-table .cart_item {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.75rem;
  padding: 0.9rem 0;
  border-bottom: 1px solid var(--mw-border);
  align-items: center;
}

.your-order-table .cart_item:last-of-type {
  border-bottom: none;
}

.cart_item .cart-product-name {
  padding: 0;
  border: none;
  font-weight: 500;
  color: var(--mw-text);
  font-size: 0.92rem;
  line-height: 1.35;
  word-break: break-word;
}

.cart_item .cart-product-name a {
  color: inherit;
  pointer-events: none; /* naam is niet klikbaar */
}

.cart_item .cart-product-total {
  padding: 0;
  border: none;
  text-align: right;
}

.cart_item .amount {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

/* Quantity input per cart-item */
.cart_item .quantity_field {
  width: 64px;
  padding: 9px 10px;
  border: 1px solid var(--mw-border-strong);
  border-radius: var(--mw-radius-sm);
  font-size: 16px;
  text-align: center;
  background: var(--mw-surface);
  color: var(--mw-text);
  font-family: var(--mw-font);
  -moz-appearance: textfield;
  appearance: textfield;
}

.cart_item .quantity_field::-webkit-outer-spin-button,
.cart_item .quantity_field::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.cart_item .quantity_field:focus {
  outline: none;
  border-color: var(--mw-accent);
  box-shadow: 0 0 0 3px var(--mw-accent-soft);
}

/* Delete knopje per item — zelfde patroon als home delete: neutraal, rood op hover.
   LET OP: We targeten expliciet `button.del_field` (niet losse `.del_field`)
   omdat de legacy HTML op de `<i>` óók `class="del_field"` probeert te zetten
   (als tweede class-attribuut, wat HTML-parsers negeren). De legacy JS
   gebruikt `e.target.id` om het product-id op te halen, en rekent erop dat
   de click natuurlijk door de elementen heen werkt — dus GEEN
   pointer-events: none hier, anders breekt de delete-flow. */
.cart_item button.del_field {
  background: var(--mw-surface);
  color: var(--mw-text-muted);
  border: 1px solid var(--mw-border);
  border-radius: var(--mw-radius-sm);
  width: 40px;
  height: 40px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 150ms ease, border-color 150ms ease, color 150ms ease;
}

.cart_item button.del_field:hover,
.cart_item button.del_field:focus-visible,
.cart_item button.del_field:active {
  background: var(--mw-danger-bg);
  border-color: #f5c2c7;
  color: var(--mw-danger);
}

.cart_item button.del_field .fas {
  font-size: 0.9rem;
}

/* ---- Payment-method disclaimer box ---- */
.payment-method {
  margin-top: 1.5rem;
}

.payment-method .card {
  background: var(--mw-bg);
  border: 1px solid var(--mw-border);
  border-radius: var(--mw-radius-sm);
  padding: 1rem 1.25rem;
  box-shadow: none;
  overflow: visible;
}

.payment-method .card-body {
  padding: 0;
  color: var(--mw-text-muted);
  font-size: 0.85rem;
  line-height: 1.5;
}

.payment-method p {
  margin: 0;
  color: var(--mw-text-muted);
}

/* ---- Plaats bestelling knop ---- */
.order-button-payment {
  margin-top: 1.5rem;
}

.order-button-payment input[type="submit"],
.order-button-payment button {
  width: 100%;
  padding: 1rem 1.5rem;
  background: var(--mw-primary);
  color: #fff;
  border: 1px solid var(--mw-primary);
  border-radius: var(--mw-radius-sm);
  font-size: 1rem;
  font-weight: 600;
  min-height: 56px;
  cursor: pointer;
  transition: background 150ms, transform 150ms, box-shadow 150ms;
  font-family: var(--mw-font);
  -webkit-appearance: none;
  appearance: none;
}

.order-button-payment input[type="submit"]:hover,
.order-button-payment button:hover {
  background: var(--mw-primary-hover);
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(22, 36, 61, 0.18);
}

/* Disabled state tijdens verwerking */
.order-button-payment .disabled-btn,
.order-button-payment input[type="submit"]:disabled,
.order-button-payment button:disabled {
  background: #ccc;
  color: #666;
  border-color: #ccc;
  cursor: default;
  transform: none;
  box-shadow: none;
}

/* ---- Lege winkelwagen waarschuwing ---- */
.letop_winkelwagen {
  color: var(--mw-danger);
  text-align: center;
  padding: 2rem 1rem;
  font-size: 0.95rem;
  line-height: 1.5;
  margin: 0;
}

.letop_winkelwagen a {
  color: var(--mw-primary);
  font-weight: 600;
  text-decoration: underline;
}

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

/* ---- Checkout responsive ---- */
@media (max-width: 768px) {
  .checkout-area {
    padding: 1rem 0.85rem 2rem;
    margin-top: var(--mw-header-height-mob);
  }

  .checkbox-form,
  .your-order {
    padding: 1.25rem;
  }

  .checkout-area h3 {
    font-size: 1.1rem;
  }

  /* Op mobile wil je de order summary BOVEN het form zien (product check eerst).
     Bootstrap render volgorde is left-first, dus de right col (your-order) komt
     ná de left col in DOM. Met flex order krijgen we de gewenste mobile volgorde. */
  .checkout-area .row {
    display: flex;
    flex-direction: column;
  }

  .checkout-area .row > .col-lg-6:first-child {
    order: 2;
    margin-top: 1rem;
  }

  .checkout-area .row > .col-lg-6:last-child {
    order: 1;
  }
}


/* ============================================================================
  11. PAGE: ORDER HISTORY (/history, /orderhistory)
   ============================================================================ */

.customer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--mw-border);
}

.customer:last-child {
  border-bottom: none;
}

.info {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.info h4 {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--mw-text);
  margin: 0;
}

.info small {
  font-size: 0.78rem;
  color: var(--mw-text-muted);
}

.contact span {
  font-size: 1.1rem;
  margin-left: 0.5rem;
  color: var(--mw-primary);
}

/* Status-indicator dots (in order history) */
td .status {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-right: 0.5rem;
}

.status.purple { background: rebeccapurple; }
.status.pink   { background: deeppink; }
.status.orange { background: orangered; }


/* ---------- /history — bestelgeschiedenis tabel ---------- */

/* Wrapper laat subtiele afronding zien + scrollt horizontaal als het echt moet */
.history-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.history-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}

.history-table thead td {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--mw-text-muted);
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--mw-border);
  background: transparent;
  text-align: left;
  white-space: nowrap;
}

.history-table tbody td {
  padding: 1rem;
  border-bottom: 1px solid var(--mw-border);
  vertical-align: middle;
  font-size: 0.95rem;
  color: var(--mw-text);
  background: transparent;
}

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

.history-table tbody tr {
  transition: background 150ms ease;
}

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

/* Kolombreedtes */
.history-table .hcol-order  { width: 1%; white-space: nowrap; }
.history-table .hcol-date   { width: auto; color: var(--mw-text-muted); }
.history-table .hcol-action { width: 1%; text-align: right; }

/* Bestellings-cel: nummer */
.history-order__num {
  display: inline-block;
  font-weight: 700;
  color: var(--mw-primary);
  font-size: 1rem;
  line-height: 1.2;
}

/* Bekijk-knop — pill in primary-kleur, nette hover */
.history-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 18px;
  background: var(--mw-primary);
  color: #fff;
  border-radius: var(--mw-radius-pill, 999px);
  font-size: 0.88rem;
  font-weight: 600;
  white-space: nowrap;
  text-decoration: none;
  border: 1px solid var(--mw-primary);
  transition: background 150ms ease, transform 150ms ease, box-shadow 150ms ease;
  min-height: 40px;
  box-shadow: 0 2px 6px rgba(22, 36, 61, 0.12);
}

.history-btn:hover,
.history-btn:focus-visible {
  background: var(--mw-accent);
  border-color: var(--mw-accent);
  color: var(--mw-primary);
  transform: translateY(-1px);
  box-shadow: 0 6px 14px rgba(222, 166, 53, 0.3);
  text-decoration: none;
}

.history-btn .fas {
  font-size: 0.72rem;
  transition: transform 150ms ease;
}

.history-btn:hover .fas {
  transform: translateX(3px);
}

/* ---------- Tablet (<= 900px) ---------- */
@media (max-width: 900px) {
  .history-table thead td,
  .history-table tbody td {
    padding: 0.85rem 0.75rem;
  }
}

/* Fullcard-link op mobile: dekt de hele card zodat hij tappable is */
.history-mcard-link { display: none; }

/* ---------- Mobile (<= 640px) — rijen worden mooie receipt-cards ---------- */
@media (max-width: 640px) {
  .history-table-wrap {
    overflow-x: visible;
    padding: 0;
  }

  .history-table,
  .history-table thead,
  .history-table tbody,
  .history-table tr,
  .history-table td {
    display: block;
    width: 100%;
  }

  .history-table thead {
    display: none;
  }

  /* De desktop "Bekijk lijst" pill verbergen — de hele card is tappable */
  .history-table .hcol-action {
    display: none !important;
  }

  /* De rij is nu een card-grid:
     col1 = icon, col2 = text (nr + datum), col3 = chevron
     hcol-order → text (row 1), hcol-date → text (row 2)
     Icon en chevron zijn pseudo-elementen op de tr */
  .history-table tbody tr.history-row {
    position: relative;
    background: var(--mw-surface);
    border: 1px solid var(--mw-border);
    border-radius: 14px;
    padding: 0.95rem 1rem;
    margin: 0 0 0.7rem;
    display: grid !important;
    grid-template-columns: 48px 1fr 24px;
    grid-template-rows: auto auto;
    grid-template-areas:
      "icon  order  chev"
      "icon  date   chev" !important;
    column-gap: 14px;
    row-gap: 2px;
    align-items: center;
    box-shadow: 0 1px 2px rgba(17, 24, 39, 0.04), 0 4px 14px rgba(17, 24, 39, 0.06);
    transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
  }

  .history-table tbody tr.history-row:active {
    transform: scale(0.985);
  }

  .history-table tbody tr.history-row:hover {
    border-color: var(--mw-primary);
    box-shadow: 0 2px 4px rgba(17, 24, 39, 0.05), 0 10px 24px rgba(22, 36, 61, 0.1);
    background: var(--mw-surface);
  }

  /* Receipt-icoon als ::before (grid-area: icon) */
  .history-table tbody tr.history-row::before {
    content: "";
    grid-area: icon;
    align-self: center;
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background-color: var(--mw-bg);
    background-image:
      linear-gradient(135deg, rgba(222, 166, 53, 0.18), rgba(22, 36, 61, 0.04)),
      url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2316243d' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M6 2h9l3 3v16l-3-2-2 2-2-2-2 2-3-2V2z'/><line x1='9' y1='8' x2='15' y2='8'/><line x1='9' y1='12' x2='15' y2='12'/><line x1='9' y1='16' x2='13' y2='16'/></svg>");
    background-repeat: no-repeat;
    background-size: cover, 24px 24px;
    background-position: center;
    border: 1px solid var(--mw-border);
  }

  /* Chevron als ::after (grid-area: chev) */
  .history-table tbody tr.history-row::after {
    content: "›";
    grid-area: chev;
    align-self: center;
    justify-self: end;
    font-size: 1.9rem;
    line-height: 1;
    color: var(--mw-text-muted);
    font-weight: 300;
    transition: transform 160ms ease, color 160ms ease;
  }

  .history-table tbody tr.history-row:hover::after {
    color: var(--mw-primary);
    transform: translateX(3px);
  }

  /* De <a> die de hele card afdekt zodat overal tappen werkt */
  .history-table .history-mcard-link {
    display: block;
    position: absolute;
    inset: 0;
    z-index: 1;
    text-decoration: none;
    border-radius: 14px;
  }
  .history-table .history-mcard-link:focus-visible {
    outline: 2px solid var(--mw-accent);
    outline-offset: -3px;
  }

  .history-table tbody tr td {
    border: none;
    padding: 0;
    background: transparent;
  }

  /* Tekst-kolom rij 1: ordernummer */
  .history-table .hcol-order {
    grid-area: order;
    align-self: end;
    min-width: 0;
  }

  .history-order__num {
    display: block;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--mw-primary);
    line-height: 1.1;
    letter-spacing: -0.01em;
  }

  /* Tekst-kolom rij 2: datum met accent-dot */
  .history-table .hcol-date {
    grid-area: date;
    align-self: start;
    font-size: 0.84rem;
    color: var(--mw-text-muted);
    font-weight: 500;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 7px;
    margin-top: 2px;
  }

  .history-table .hcol-date::before {
    content: "";
    display: inline-block;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--mw-accent);
    flex: 0 0 auto;
  }
}

/* ---------- Very small (<= 380px) ---------- */
@media (max-width: 380px) {
  .history-table tbody tr.history-row {
    grid-template-columns: 42px 1fr 22px;
    padding: 0.85rem 0.9rem;
    column-gap: 12px;
  }
  .history-table tbody tr.history-row::before {
    width: 42px;
    height: 42px;
    background-size: cover, 22px 22px;
  }
  .history-order__num {
    font-size: 1rem;
  }
  .history-table .hcol-date {
    font-size: 0.8rem;
  }
  .history-table tbody tr.history-row::after {
    font-size: 1.75rem;
  }
}


/* ---------- /orderhistory — detail van één bestelling ---------- */

.oh-header.card-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.oh-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: var(--mw-primary);
  color: #fff;
  border: 1px solid var(--mw-primary);
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: none;
  transition: background 150ms ease, color 150ms ease, border-color 150ms ease;
}

.oh-back:hover,
.oh-back:focus-visible {
  background: var(--mw-accent);
  color: var(--mw-primary);
  border-color: var(--mw-accent);
  text-decoration: none;
}

.oh-back .fas { font-size: 0.75rem; }

.oh-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.oh-list__item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 0.85rem 0.25rem;
  border-bottom: 1px solid var(--mw-border);
}

.oh-list__item:last-child {
  border-bottom: none;
}

.oh-list__name {
  font-size: 0.95rem;
  color: var(--mw-text);
  min-width: 0;
  overflow-wrap: anywhere;
}

.oh-list__qty {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--mw-primary);
  font-feature-settings: "tnum";
  flex: 0 0 auto;
}

.oh-empty {
  color: var(--mw-text-muted);
  font-size: 0.95rem;
  margin: 0;
  padding: 0.5rem 0;
}

@media (max-width: 640px) {
  .oh-header.card-header {
    gap: 0.75rem;
  }
  .oh-list__item {
    padding: 0.75rem 0;
  }
  .oh-list__name {
    font-size: 0.92rem;
  }
}


/* ============================================================================
  12. PAGE: BESTELLING GELUKT (/bestelling_gelukt)
   ============================================================================
   Bevestigingspagina na een geplaatste order. Vol-breedte main met een
   subtiele accent-achtergrond en een gecentreerde card met:
     - geanimeerd check-icoon
     - titel + bericht
     - optionele e-mail-hint / dev-badge / error-waarschuwing
     - primaire + ghost actie-knoppen
   Volledig responsive tot 360px. */

.bedankt-main {
  min-height: calc(100vh - var(--mw-header-height, 80px));
  padding: 3rem 1.25rem 4rem;
  background:
    radial-gradient(1200px 600px at 50% -10%, rgba(222, 166, 53, 0.18), transparent 60%),
    radial-gradient(900px 500px at 100% 110%, rgba(22, 36, 61, 0.08), transparent 60%),
    var(--mw-bg);
  display: flex;
  align-items: center;
  justify-content: center;
}

.bedankt-wrap {
  width: 100%;
  max-width: 560px;
  display: flex;
  justify-content: center;
}

.bedankt-card {
  position: relative;
  width: 100%;
  background: var(--mw-surface);
  border: 1px solid var(--mw-border);
  border-radius: 20px;
  padding: 2.75rem 2.25rem 2.25rem;
  text-align: center;
  box-shadow:
    0 1px 2px rgba(17, 24, 39, 0.04),
    0 20px 50px rgba(17, 24, 39, 0.12),
    0 4px 14px rgba(17, 24, 39, 0.06);
  animation: bedankt-fade-in 450ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

@keyframes bedankt-fade-in {
  from { opacity: 0; transform: translateY(14px) scale(0.985); }
  to   { opacity: 1; transform: translateY(0)    scale(1); }
}

/* Dev-modus badge rechtsboven */
.bedankt-dev-badge {
  position: absolute;
  top: 14px;
  right: 14px;
  background: var(--mw-primary);
  color: var(--mw-accent);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid rgba(222, 166, 53, 0.5);
  user-select: none;
}

/* Check-icoon met cirkel-draw + tick-draw animaties */
.bedankt-check {
  width: 96px;
  height: 96px;
  margin: 0 auto 1.5rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(46, 160, 88, 0.12), rgba(46, 160, 88, 0.04));
  color: #2ea058;
  box-shadow: 0 0 0 10px rgba(46, 160, 88, 0.06);
}

.bedankt-check svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

.bedankt-check__circle {
  stroke-dasharray: 201;
  stroke-dashoffset: 201;
  animation: bedankt-draw-circle 600ms 150ms cubic-bezier(0.65, 0, 0.35, 1) forwards;
  transform-origin: center;
}

.bedankt-check__tick {
  stroke-dasharray: 60;
  stroke-dashoffset: 60;
  animation: bedankt-draw-tick 350ms 750ms cubic-bezier(0.65, 0, 0.35, 1) forwards;
}

@keyframes bedankt-draw-circle { to { stroke-dashoffset: 0; } }
@keyframes bedankt-draw-tick   { to { stroke-dashoffset: 0; } }

.bedankt-title {
  font-family: 'Oswald', var(--mw-font);
  font-size: 1.85rem;
  font-weight: 600;
  color: var(--mw-primary);
  margin: 0 0 0.65rem;
  line-height: 1.15;
  letter-spacing: 0.01em;
}

.bedankt-message {
  font-size: 1rem;
  color: var(--mw-text-muted);
  line-height: 1.55;
  margin: 0 auto 1.5rem;
  max-width: 440px;
}

/* E-mail-hint / info-notitie onderaan */
.bedankt-note {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: var(--mw-bg);
  border: 1px solid var(--mw-border);
  border-radius: 999px;
  font-size: 0.86rem;
  color: var(--mw-text-muted);
  margin: 0 0 1.75rem;
  max-width: 100%;
}

.bedankt-note__icon {
  display: inline-flex;
  color: var(--mw-primary);
  flex: 0 0 auto;
}

.bedankt-note--warn {
  background: rgba(245, 158, 11, 0.08);
  border-color: rgba(245, 158, 11, 0.3);
  color: #92400e;
}

.bedankt-note--warn .bedankt-note__icon {
  color: #b45309;
}

/* Actie-knoppen */
.bedankt-actions {
  display: flex;
  gap: 0.75rem;
  justify-content: center;
  align-items: stretch;
  flex-wrap: wrap;
}

.bedankt-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 26px;
  border-radius: 999px;
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration: none;
  min-height: 50px;
  transition: background 160ms ease, color 160ms ease, border-color 160ms ease,
              transform 160ms ease, box-shadow 160ms ease;
  border: 1px solid transparent;
  cursor: pointer;
  white-space: nowrap;
}

.bedankt-btn--primary {
  background: var(--mw-primary);
  color: #fff;
  border-color: var(--mw-primary);
  box-shadow: 0 4px 14px rgba(22, 36, 61, 0.2);
}

.bedankt-btn--primary:hover,
.bedankt-btn--primary:focus-visible {
  background: var(--mw-accent);
  color: var(--mw-primary);
  border-color: var(--mw-accent);
  transform: translateY(-1px);
  box-shadow: 0 8px 22px rgba(222, 166, 53, 0.35);
  text-decoration: none;
}

.bedankt-btn--primary .fas {
  font-size: 0.78rem;
  transition: transform 160ms ease;
}

.bedankt-btn--primary:hover .fas {
  transform: translateX(3px);
}

.bedankt-btn--ghost {
  background: transparent;
  color: var(--mw-primary);
  border-color: var(--mw-border-strong, var(--mw-border));
}

.bedankt-btn--ghost:hover,
.bedankt-btn--ghost:focus-visible {
  background: var(--mw-bg);
  border-color: var(--mw-primary);
  color: var(--mw-primary);
  text-decoration: none;
}

/* ---------- Tablet (<= 768px) ---------- */
@media (max-width: 768px) {
  .bedankt-main {
    padding: 2rem 1rem 3rem;
    min-height: calc(100vh - var(--mw-header-height-mob, 64px));
  }

  .bedankt-card {
    padding: 2.25rem 1.5rem 1.75rem;
    border-radius: 18px;
  }

  .bedankt-check {
    width: 84px;
    height: 84px;
    margin-bottom: 1.25rem;
  }

  .bedankt-title {
    font-size: 1.55rem;
  }

  .bedankt-message {
    font-size: 0.95rem;
  }
}

/* ---------- Mobiel (<= 480px) ---------- */
@media (max-width: 480px) {
  .bedankt-main {
    padding: 1.25rem 0.85rem 2rem;
  }

  .bedankt-card {
    padding: 2rem 1.25rem 1.5rem;
    border-radius: 16px;
  }

  .bedankt-check {
    width: 76px;
    height: 76px;
    margin-bottom: 1rem;
  }

  .bedankt-title {
    font-size: 1.35rem;
  }

  .bedankt-message {
    font-size: 0.92rem;
    margin-bottom: 1.25rem;
  }

  .bedankt-note {
    font-size: 0.8rem;
    padding: 9px 13px;
    margin-bottom: 1.35rem;
    border-radius: 14px;
  }

  .bedankt-actions {
    flex-direction: column;
    gap: 0.55rem;
  }

  .bedankt-btn {
    width: 100%;
    padding: 14px 22px;
    min-height: 52px;
  }

  .bedankt-dev-badge {
    top: 10px;
    right: 10px;
    font-size: 0.6rem;
    padding: 4px 8px;
  }
}

/* ---------- Zeer klein (<= 360px) ---------- */
@media (max-width: 360px) {
  .bedankt-card {
    padding: 1.75rem 1rem 1.35rem;
  }

  .bedankt-title {
    font-size: 1.25rem;
  }
}

/* Respect prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .bedankt-card,
  .bedankt-check__circle,
  .bedankt-check__tick {
    animation: none !important;
  }
  .bedankt-check__circle,
  .bedankt-check__tick {
    stroke-dashoffset: 0 !important;
  }
}


/* ============================================================================
  13. RESPONSIVE BREAKPOINTS
   ============================================================================
   Mobile-first: de basis hierboven is 'desktop default'; hieronder zetten
   we mobile overrides (max-width) per breakpoint.

   Breakpoints:
     - 1024px: tablet landscape
     -  768px: tablet portrait → sidebar wordt offcanvas
     -  640px: mobile groot
     -  480px: mobile klein
   ============================================================================ */

/* ---------- ≤ 1400px — Kleine desktop / groot laptopscherm ---------- */

@media (max-width: 1400px) {
  header {
    gap: 1rem;
    padding: 0 1rem;
  }

  .navbar_top a {
    padding: 10px 16px;
    font-size: 0.92rem;
  }

  .navbar_top ul {
    gap: 0.25rem;
  }

  .search-wrapper {
    max-width: 240px;
  }

  .user-wrapper {
    max-width: 180px;
  }

  .user-wrapper h4 {
    font-size: 0.95rem;
    max-width: 120px;
  }
}

/* ---------- ≤ 1200px — Laptop ---------- */

@media (max-width: 1200px) {
  .navbar_top a {
    padding: 9px 13px;
    font-size: 0.88rem;
  }

  .search-wrapper {
    max-width: 200px;
    padding: 0 0.85rem;
  }

  .user-wrapper img {
    width: 42px;
    height: 42px;
  }

  .user-wrapper {
    max-width: 150px;
  }

  .user-wrapper h4 {
    font-size: 0.9rem;
    max-width: 100px;
  }
}


/* ---------- ≤ 1024px — Tablet landscape ---------- */

@media (max-width: 1024px) {
  /* Smallere sidebar iets compacter */
  .sidebar {
    width: var(--mw-sidebar-width);
  }

  header {
    gap: 0.75rem;
    padding: 0 0.85rem;
  }

  .navbar_top a {
    padding: 8px 11px;
    font-size: 0.82rem;
  }

  .search-wrapper {
    max-width: 200px;
  }
}

/* ---------- ≤ 960px — Sidebar wordt smaller, navbar_top kleiner ---------- */

@media (max-width: 960px) {
  .navbar_top a {
    padding: 8px 10px;
    font-size: 0.78rem;
  }

  .search-wrapper {
    max-width: 180px;
  }

  /* Cards op home: 2 kolommen */
  .cards {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ---------- ≤ 860px — navbar_top verbergen (categorieën zitten in sidebar) ---------- */

@media (max-width: 860px) {
  .navbar_top {
    display: none;
  }

  .search-wrapper {
    max-width: none;
  }
}

/* ---------- ≤ 768px — Sidebar wordt offcanvas ---------- */

@media (max-width: 768px) {
  /* Main content vol-breedte (geen sidebar margin) */
  .main-content {
    margin-left: 0;
    width: 100%;
  }

  /* Sidebar verbergt zich buiten het scherm */
  .sidebar {
    left: -320px;
    width: 300px;
    max-width: 85vw;
  }

  /* Checkbox aan → sidebar schuift in beeld */
  #nav-toggle:checked + .sidebar {
    left: 0;
    box-shadow: 8px 0 32px rgba(0, 0, 0, 0.35);
  }

  /* Backdrop verschijnt */
  #nav-toggle:checked ~ .sidebar-backdrop {
    display: block;
    opacity: 1;
  }

  /* Menu-items op mobile iets ruimer voor touch */
  .sidebar-menu a {
    padding: 14px 18px;
    min-height: 52px;
    font-size: 1rem;
  }

  /* Header vol-breedte */
  header {
    left: 0;
    width: 100%;
    height: var(--mw-header-height-mob);
    padding: 0 0.75rem;
    gap: 0.65rem;
  }

  main,
  .main_shop {
    margin-top: var(--mw-header-height-mob);
  }

  /* Hamburger zichtbaar, desktop title verborgen */
  header h2 label {
    display: flex;
  }

  .mobile_hide { display: none; }
  .desktop_hide { display: block; }

  /* Top nav met categorieën verberg op mobile (zit al in sidebar) */
  .navbar_top {
    display: none;
  }

  /* Sub-nav in sidebar zichtbaar op mobile (vervangt de top-nav) */
  .navbar_side {
    display: block;
  }

  /* Search-wrapper pakt resterende breedte en mag shrinken */
  .search-wrapper {
    flex: 1 1 0;
    min-width: 0;
    max-width: none;
    padding: 0 0.85rem;
  }

  .search-wrapper input {
    min-width: 0;
    width: 100%;
  }

  .search-wrapper input::placeholder {
    font-size: 0.85rem;
  }

  /* User-wrapper (logo + naam) is rechts in de header — op mobile te smal
     voor zowel search als logo, dus compacter maken. */
  .user-wrapper {
    flex: 0 0 auto;
  }

  .user-wrapper img {
    width: 36px !important;
    height: 36px !important;
  }

  .user-wrapper h4 {
    display: block;
    font-size: 0.82rem;
    max-width: 90px;
  }

  /* Producten grid: smallere min-width zodat er 2 op een rij passen */
  .shop_wrapper {
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 0.75rem;
  }

  /* Shop padding strakker op mobile */
  .shop-main-area {
    padding: 0.75rem 0.85rem 3rem;
  }

  /* -----------------------------------------------------------------------
     Home: card-header mooier gestyled voor mobile EN tablet —
     titel + button netjes onder elkaar met wat extra ademruimte,
     duidelijke scheiding via border-bottom, subtiele achtergrondkleur
     en een goud-gekleurde accent-balk links van de titel voor flair.
     ----------------------------------------------------------------------- */
  .card-header {
    padding: 1.25rem 1.25rem 1.25rem;
    flex-direction: column;
    align-items: stretch;
    gap: 1rem;
    background: var(--mw-surface-alt);
    border-radius: var(--mw-radius) var(--mw-radius) 0 0;
    border-bottom: 1px solid var(--mw-border);
  }

  .card-header h2 {
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.2;
    color: var(--mw-text);
    position: relative;
    padding-left: 14px;
    margin: 0;
  }

  /* Kleine goud-gekleurde accent-balk links van de titel */
  .card-header h2::before {
    content: "";
    position: absolute;
    left: 0;
    top: 4px;
    bottom: 4px;
    width: 4px;
    border-radius: 2px;
    background: var(--mw-accent);
  }

  .card-header .mobile_button {
    width: 100%;
    justify-content: center;
    padding: 14px 18px;
    font-size: 0.95rem;
    font-weight: 600;
    min-height: 50px;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(22, 36, 61, 0.18);
  }

  .card-header .mobile_button .fas {
    font-size: 0.85rem;
    transition: transform 150ms ease;
  }

  .card-header .mobile_button:active .fas {
    transform: translateX(3px);
  }
}

/* ---------- ≤ 640px — Mobile ---------- */

@media (max-width: 640px) {
  /* Main met ruimte voor sticky bottom action bar op home */
  main {
    padding: 1rem 0.85rem 88px;
  }

  .card-body {
    padding: 0.5rem 0.65rem 0.75rem;
  }

  /* Bestellijst: tabel wordt card-layout per rij */
  .card-body .table-responsive {
    overflow-x: visible;
    padding: 0;
  }

  .card-body table,
  .card-body thead,
  .card-body tbody,
  .card-body tr,
  .card-body td {
    display: block;
    width: 100%;
  }

  .card-body thead {
    display: none;
  }

  .card-body tbody tr {
    background: var(--mw-surface);
    border: 1px solid var(--mw-border);
    border-radius: 12px;
    padding: 0.85rem 0.9rem;
    margin-bottom: 0.65rem;
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "name   name"
      "qty    action";
    gap: 0.7rem 0.75rem;
    align-items: center;
    box-shadow: var(--mw-shadow-sm);
    min-width: 0;
  }

  .card-body .td_drag {
    display: none;
  }

  .card-body .td_name {
    grid-area: name;
    padding: 0;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.3;
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
    hyphens: auto;
  }

  .card-body .td_input {
    grid-area: qty;
    padding: 0;
    width: auto;
    max-width: 100%;
    text-align: left;
    min-width: 0;
  }

  /* Quantity stepper op mobile: [ − ] [ input ] [ + ] */
  .card-body .qty-stepper {
    display: inline-flex;
    align-items: stretch;
    border: 1px solid var(--mw-border-strong);
    border-radius: 10px;
    overflow: hidden;
    background: var(--mw-surface);
    box-shadow: var(--mw-shadow-xs);
    max-width: 100%;
  }

  .card-body .qty-stepper .qty-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    min-height: 46px;
    background: var(--mw-bg);
    border: none;
    color: var(--mw-primary);
    font-size: 1.35rem;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    padding: 0;
    border-radius: 0;
    flex: 0 0 auto;
    transition: background 150ms ease, color 150ms ease;
    -webkit-tap-highlight-color: transparent;
  }

  .card-body .qty-stepper .qty-btn:active,
  .card-body .qty-stepper .qty-btn:hover {
    background: var(--mw-primary);
    color: #fff;
  }

  .card-body .qty-stepper .qty-btn-minus {
    border-right: 1px solid var(--mw-border-strong);
  }

  .card-body .qty-stepper .qty-btn-plus {
    border-left: 1px solid var(--mw-border-strong);
  }

  /* De input zit in het midden, geen eigen border (stepper heeft die) */
  .card-body .qty-stepper input.js-qty-input {
    width: 56px !important;
    max-width: 56px !important;
    height: 46px !important;
    border: none !important;
    border-radius: 0 !important;
    text-align: center !important;
    font-size: 16px !important;
    font-weight: 600;
    background: var(--mw-surface) !important;
    box-shadow: none !important;
    padding: 0 !important;
    flex: 0 0 auto;
  }

  .card-body .qty-stepper input.js-qty-input:focus {
    box-shadow: none !important;
    outline: none;
  }

  .card-body .td_action {
    grid-area: action;
    padding: 0;
    width: auto;
    text-align: right;
  }

  .card-body .td_action button {
    width: 46px;
    height: 46px;
    flex: 0 0 auto;
  }
}

/* ---------- ≤ 420px — Kleine mobile (iPhone SE, etc.) ---------- */
@media (max-width: 420px) {
  main {
    padding: 0.85rem 0.65rem 82px;
  }

  .card-body {
    padding: 0.5rem 0.5rem 0.75rem;
  }

  .card-body tbody tr {
    padding: 0.75rem 0.75rem;
    gap: 0.6rem 0.55rem;
  }

  .card-body .td_name {
    font-size: 0.95rem;
  }

  /* Compactere stepper zodat alles blijft passen */
  .card-body .qty-stepper .qty-btn {
    width: 40px;
    min-height: 44px;
    font-size: 1.25rem;
  }

  .card-body .qty-stepper input.js-qty-input {
    width: 48px !important;
    max-width: 48px !important;
    height: 44px !important;
  }

  .card-body .td_action button {
    width: 44px;
    height: 44px;
  }

  .card-header h2 {
    font-size: 1.1rem;
  }
}

/* ---------- ≤ 360px — Mini phones (iPhone SE 1st gen etc.) ---------- */
@media (max-width: 360px) {
  main {
    padding: 0.75rem 0.5rem 78px;
  }

  .card-body tbody tr {
    padding: 0.7rem 0.65rem;
    gap: 0.55rem 0.45rem;
  }

  .card-body .td_name {
    font-size: 0.9rem;
  }

  .card-body .qty-stepper .qty-btn {
    width: 36px;
    min-height: 42px;
    font-size: 1.15rem;
  }

  .card-body .qty-stepper input.js-qty-input {
    width: 42px !important;
    max-width: 42px !important;
    height: 42px !important;
    font-size: 15px !important;
  }

  .card-body .td_action button {
    width: 42px;
    height: 42px;
  }

  /* Sticky action bar iets compacter */
  .cards .card-single {
    padding: 0.5rem 0.6rem;
    min-height: 42px;
  }

  .cards .card-single h1 {
    font-size: 0.78rem;
  }
}

/* ---------- ≤ 640px — Sticky action bar & user-wrapper ---------- */
@media (max-width: 640px) {
  /* Home sticky bottom action bar (Bestellen / Aantallen op 0) */
  .cards {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 90;
    margin: 0;
    padding: 0.4rem 0.7rem calc(0.4rem + env(safe-area-inset-bottom, 0px));
    background: rgba(255, 255, 255, 0.96);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border-top: 1px solid var(--mw-border);
    box-shadow: 0 -6px 20px rgba(17, 24, 39, 0.08);
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
  }

  .cards .card-single {
    padding: 0.55rem 0.75rem;
    min-height: 46px;
    gap: 0.4rem;
  }

  .cards .card-single h1 {
    font-size: 0.85rem;
    margin: 0;
  }

  .cards .card-single div:first-child span {
    display: none; /* Kleine tagline verbergen op mobile */
  }

  .cards .card-single div:last-child span {
    width: 32px;
    height: 32px;
    font-size: 0.9rem;
  }

  /* User wrapper iets compacter */
  .user-wrapper img {
    width: 38px;
    height: 38px;
  }

  .user-wrapper h4 {
    font-size: 0.85rem;
  }
}

/* ---------- ≤ 480px — Kleine mobile ---------- */

@media (max-width: 480px) {
  /* Product grid: 2 kolommen dwingen, kleinere min */
  .shop_wrapper {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.65rem;
  }

  .single-product {
    padding: 0.75rem;
    gap: 0.6rem;
  }

  h4.product_title {
    font-size: 0.85rem;
  }

  p.product_title {
    font-size: 0.7rem;
  }

  .favorite-icon {
    padding: 10px 12px;
    font-size: 0.82rem;
  }
}


/* ============================================================================
  14. ACCESSIBILITY
   ============================================================================ */

/* Respecteer voorkeur voor minder beweging */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Toetsenbord focus-state */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.favorite-icon:focus-visible,
.card-single:focus-visible {
  outline: 2px solid var(--mw-accent);
  outline-offset: 2px;
}

/* Screenreader-only helper (indien we het ooit nodig hebben) */
.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;
}