/* venstermarkt.com — custom daisyUI theme + mk-* component customisation layer.
   Brand tokens from brand_brief.json. daisyUI components keep their own markup;
   everything below only re-skins them. */

[data-theme="venstermarkt"] {
  /* daisyUI 4 colour tokens (oklch L C H) */
  --p: 63.5% 0.192 44;        /* primary   #EC660D */
  --pc: 100% 0 0;
  --s: 38.5% 0.104 258;       /* secondary #1F4E8C */
  --sc: 100% 0 0;
  --a: 69% 0.163 51;          /* accent    #F58220 */
  --ac: 100% 0 0;
  --n: 37.5% 0 0;             /* neutral   #404040 (nav bar) */
  --nc: 100% 0 0;
  --b1: 100% 0 0;             /* base-100  #FFFFFF */
  --b2: 97.2% 0 0;            /* base-200  #F7F7F7 */
  --b3: 89.1% 0 0;            /* base-300  #E0E0E0 */
  --bc: 21% 0 0;              /* base text #1A1A1A */
  --su: 52.5% 0.118 145;      /* success   #3C8B3C */
  --suc: 100% 0 0;
  --in: 38.5% 0.104 258;
  --inc: 100% 0 0;
  --wa: 76% 0.16 70;
  --wac: 21% 0 0;
  --er: 55% 0.21 27;
  --erc: 100% 0 0;

  --rounded-btn: 6px;
  --rounded-box: 10px;
  --rounded-badge: 4px;
  --border-btn: 1px;
  --animation-btn: 0.2s;
  --btn-text-case: none;
  --tab-radius: 6px;

  /* brand aliases used by the mk-* layer */
  --mk-orange: #EC660D;
  --mk-accent: #F58220;
  --mk-blue: #1F4E8C;
  --mk-nav: #404040;
  --mk-surface: #F7F7F7;
  --mk-line: #E0E0E0;
  --mk-text: #1A1A1A;
  --mk-muted: #6B6B6B;
  --mk-shadow: 0 1px 2px rgba(0,0,0,.05), 0 6px 18px rgba(0,0,0,.06);
}

/* ---------- base ---------- */
.mk-body { font-family: 'Inter', system-ui, sans-serif; color: var(--mk-text); background: #fff; }
.mk-container { width: 100%; max-width: 1360px; margin-inline: auto; padding-inline: 16px; }
a { color: inherit; }
img { max-width: 100%; }

/* ---------- keuzerondjes en vinkjes ----------
   De winkel is altijd licht: zonder color-scheme tekent de browser (of een donker
   daisyUI-thema) de native vakjes donkergrijs/zwart. Ze worden hier zelf getekend. */
:root, html, [data-theme="venstermarkt"] { color-scheme: light; }
input[type=radio], input[type=checkbox] {
  -webkit-appearance: none; appearance: none;
  width: 18px; height: 18px; flex: 0 0 auto;
  background: #fff; border: 1px solid #b5b5b5; box-shadow: none;
  display: inline-block; vertical-align: middle; cursor: pointer; transition: border-color .15s, background-color .15s;
}
input[type=radio] { border-radius: 50%; }
input[type=checkbox] { border-radius: 3px; }
input[type=radio]:hover, input[type=checkbox]:hover { border-color: var(--mk-orange); }
input[type=radio]:checked { border: 5px solid var(--mk-orange); background: #fff; }
input[type=checkbox]:checked {
  background: var(--mk-orange); border-color: var(--mk-orange);
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' d='M3.5 8.5l3 3 6-6'/%3E%3C/svg%3E");
  background-size: 14px 14px; background-position: center; background-repeat: no-repeat;
}
input[type=radio]:disabled, input[type=checkbox]:disabled { background: #f2f2f2; border-color: #d9d9d9; cursor: default; }

/* ---------- row 1: promo / utility bar ---------- */
.mk-topbar { background: var(--mk-orange); color: #fff; font-size: 12.5px; }
.mk-topbar-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 34px; }
.mk-topbar-menu { padding: 0; gap: 2px; flex-wrap: nowrap; }
.mk-topbar-menu li > *, .mk-topbar-menu li > span {
  padding: 4px 8px; border-radius: 4px; color: #fff; white-space: nowrap; font-size: 12.5px; line-height: 1.2;
  display: flex; align-items: center; gap: 6px;
}
.mk-topbar-menu li > a:hover { background: rgba(255,255,255,.16); }
.mk-topbar-menu i { font-size: 12px; opacity: .95; }
@media (max-width: 1023px) { .mk-topbar { display: none; } }

/* ---------- row 2: main header ---------- */
.mk-header { background: var(--mk-orange); color: #fff; }
.mk-navbar { min-height: 62px; padding: 0; gap: 16px; }
.mk-navbar-start { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; width: auto; }
.mk-navbar-center { flex: 1 1 auto; justify-content: center; display: flex; }
.mk-navbar-end { display: flex; align-items: center; gap: 4px; flex: 0 0 auto; width: auto; }
.mk-logo { display: flex; align-items: center; gap: 10px; }
.mk-logo-img { height: 30px; width: auto; }
.mk-logo-mark { height: 34px; width: auto; }
.mk-hamburger {
  color: #fff; padding: 0 8px; min-height: 40px; height: 40px; gap: 6px;
  background: transparent; border: none; font-weight: 600;
}
.mk-hamburger:hover { background: rgba(255,255,255,.16); }
.mk-hamburger-text { font-size: 11px; letter-spacing: .06em; }

.mk-search { width: 100%; max-width: 560px; }
.mk-search-input {
  flex: 1 1 auto; height: 40px; min-height: 40px; background: #fff; color: var(--mk-text);
  border: none; border-radius: 999px 0 0 999px; padding-inline: 18px; font-size: 14px;
}
.mk-search-input:focus { outline: 2px solid rgba(255,255,255,.6); outline-offset: -2px; }
.mk-search-btn {
  height: 40px; min-height: 40px; width: 52px; background: #2E2E2E; border: none; color: #fff;
  border-radius: 0 999px 999px 0;
}
.mk-search-btn:hover { background: #1a1a1a; }
.mk-search-page { max-width: 560px; margin-top: 12px; }
.mk-search-page .mk-search-input { border: 1px solid var(--mk-line); }

@media (max-width: 1023px) {
  .mk-navbar { min-height: 56px; gap: 4px; flex-wrap: nowrap; }
  .mk-navbar-center { flex: 0 0 auto; }
  .mk-search { width: auto; }
  .mk-search-input { display: none; }
  .mk-search-btn { width: 42px; background: transparent; border-radius: 6px; }
  .mk-search-btn:hover { background: rgba(255,255,255,.16); }
  .mk-logo-img { height: 26px; }
  .mk-navbar-end .mk-icon-btn[aria-label="Verlanglijst"] { display: none; }
}
.mk-waarborg { height: 34px; width: auto; margin-right: 6px; }
@media (max-width: 1279px) { .mk-waarborg { display: none; } }
.mk-icon-btn {
  color: #fff; background: transparent; border: none; min-height: 40px; height: 40px; width: 42px; padding: 0;
  font-size: 17px; position: relative;
}
.mk-icon-btn:hover { background: rgba(255,255,255,.16); }
.mk-icon-btn-dark { color: var(--mk-muted); }
.mk-icon-btn-dark:hover { background: var(--mk-surface); color: var(--mk-text); }
.mk-cart-badge, .mk-count-badge {
  position: absolute; top: 4px; right: 2px; background: #fff; color: var(--mk-orange);
  border: none; font-size: 10px; font-weight: 700; height: 16px; min-width: 16px; padding: 0 4px;
}
/* Teller pas tonen zodra er iets in de winkelwagen of verlanglijst staat. */
.mk-count-badge.is-empty { display: none; }
.mk-count-badge.is-bump { animation: mk-badge-pop .35s ease; }
@keyframes mk-badge-pop {
  0% { transform: scale(1); }
  45% { transform: scale(1.35); }
  100% { transform: scale(1); }
}

/* ---------- row 3: category nav ---------- */
.mk-nav { background: var(--mk-nav); }
.mk-nav-menu { padding: 0; gap: 0; flex-wrap: nowrap; overflow-x: auto; min-height: 44px; }
.mk-nav-menu::-webkit-scrollbar { display: none; }
.mk-nav-link {
  color: #fff; font-size: 13.5px; font-weight: 500; white-space: nowrap; border-radius: 0;
  padding: 12px 14px; line-height: 1.2;
}
.mk-nav-link:hover, .mk-nav-link-active { background: rgba(255,255,255,.12); color: #fff; }
.mk-nav-link-accent { color: #FFD9A6; font-weight: 700; }
@media (max-width: 1023px) { .mk-nav { display: none; } }

/* ---------- mobile drawer (right-hand side) ---------- */
.mk-drawer-side { z-index: 60; }
.mk-drawer-panel {
  width: 84vw; max-width: 340px; min-height: 100%; background: #fff;
  display: flex; flex-direction: column; padding-bottom: 24px;
}
.mk-drawer-head {
  display: flex; align-items: center; justify-content: space-between;
  background: var(--mk-orange); padding: 12px 16px;
}
.mk-drawer-logo { height: 26px; }
.mk-drawer-close { color: #fff; background: transparent; border: none; font-size: 20px; min-height: 36px; height: 36px; width: 36px; padding: 0; }
.mk-drawer-menu { padding: 8px 8px; gap: 2px; }
.mk-drawer-menu li > a { font-size: 15px; padding: 11px 12px; border-radius: 6px; display: flex; gap: 10px; align-items: center; }
.mk-drawer-menu li > a:hover { background: var(--mk-surface); }
.mk-drawer-menu li > a > i { width: 22px; text-align: center; font-size: 16px; color: #5A6470; flex: 0 0 22px; }
.mk-drawer-menu li > a:hover > i { color: var(--mk-orange); }
.mk-drawer-menu li > a.mk-drawer-accent { color: var(--mk-orange); font-weight: 700; }
.mk-drawer-menu li > a.mk-drawer-accent > i { color: var(--mk-orange); }

/* ---------- hero ---------- */
.mk-hero {
  background: linear-gradient(120deg, #3D1B0F 0%, #6B2A10 55%, #B94A10 100%);
  color: #fff; position: relative; padding: 26px 0 18px;
}
.mk-hero-grid {
  display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 28px; align-items: center; min-height: 330px;
}
.mk-hero-kicker { text-transform: uppercase; letter-spacing: .14em; font-size: 12px; font-weight: 700; color: #FFD9A6; }
.mk-hero-title {
  font-size: clamp(28px, 3.6vw, 50px); line-height: 1.02; font-weight: 800; margin: 8px 0 12px;
  color: #FFE24A; text-shadow: 0 2px 0 rgba(0,0,0,.18);
}
.mk-hero-sub { font-size: 15px; line-height: 1.5; max-width: 52ch; color: rgba(255,255,255,.92); }
.mk-countdown { display: flex; gap: 10px; margin: 18px 0; }
.mk-countdown-item {
  background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.25); border-radius: 8px;
  padding: 8px 14px; text-align: center; min-width: 74px;
}
.mk-countdown-num { display: block; font-size: 22px; font-weight: 800; line-height: 1; }
.mk-countdown-label { display: block; font-size: 11px; opacity: .85; margin-top: 4px; }
.mk-hero-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.mk-hero-media { display: flex; justify-content: center; }
.mk-hero-img { max-height: 340px; width: auto; filter: drop-shadow(0 12px 30px rgba(0,0,0,.35)); }
.mk-hero-dots { display: flex; justify-content: center; gap: 7px; margin-top: 14px; }
.mk-dot { width: 8px; height: 8px; border-radius: 999px; background: rgba(255,255,255,.4); display: block; }
.mk-dot-on { background: #fff; width: 22px; }
@media (max-width: 900px) {
  .mk-hero-grid { grid-template-columns: 1fr; text-align: center; min-height: 0; gap: 16px; }
  .mk-hero-sub { margin-inline: auto; }
  .mk-countdown, .mk-hero-actions { justify-content: center; }
  .mk-hero-img { max-height: 220px; }
}

/* ---------- buttons ---------- */
.mk-btn-primary {
  background: var(--mk-orange); border: 1px solid var(--mk-orange); color: #fff; font-weight: 600;
  border-radius: 6px; min-height: 44px; height: 44px; padding-inline: 22px;
}
.mk-btn-primary:hover { background: #d25a08; border-color: #d25a08; color: #fff; }
.mk-btn-blue {
  background: var(--mk-blue); border: 1px solid var(--mk-blue); color: #fff; font-weight: 600;
  border-radius: 6px; min-height: 44px; height: 44px; padding-inline: 22px;
}
.mk-btn-blue:hover { background: #173c6c; border-color: #173c6c; color: #fff; }
.mk-btn-blue-outline {
  background: transparent; border: 1px solid #fff; color: #fff; font-weight: 600;
  border-radius: 6px; min-height: 44px; height: 44px; padding-inline: 22px;
}
.mk-btn-blue-outline:hover { background: rgba(255,255,255,.14); color: #fff; }
.mk-btn-ghost-line { background: #fff; border: 1px solid var(--mk-line); color: var(--mk-text); border-radius: 6px; min-height: 40px; height: 40px; }
.mk-btn-lg { min-height: 52px; height: 52px; font-size: 16px; }
.mk-btn-block { width: 100%; }

/* ---------- generic section ---------- */
.mk-section { padding: 40px 0; }
.mk-section-tight { padding: 24px 0; }
.mk-section-surface { background: var(--mk-surface); }
.mk-section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.mk-section-title { font-size: 26px; font-weight: 800; letter-spacing: -.01em; }
.mk-section-title-center { text-align: center; margin-bottom: 24px; }
.mk-section-sub { color: var(--mk-muted); font-size: 14px; max-width: 78ch; }
.mk-section-link { color: var(--mk-blue); font-weight: 600; font-size: 14px; display: inline-flex; align-items: center; gap: 7px; }
.mk-section-link:hover { text-decoration: none; }
.mk-page-title { font-size: 30px; font-weight: 800; margin-bottom: 8px; }
.mk-page-intro { color: var(--mk-muted); max-width: 80ch; font-size: 14.5px; line-height: 1.6; }
.mk-breadcrumbs { font-size: 13px; color: var(--mk-muted); padding: 10px 0; }
.mk-breadcrumbs a:hover { color: var(--mk-orange); }
/* eerste kruimel: huisje in plaats van het woord "Home" (tekst blijft in de DOM) */
.mk-breadcrumbs li:first-child a { display: inline-flex; align-items: center; font-size: 0; line-height: 1; }
.mk-breadcrumbs li:first-child a::before { content: ""; display: block; width: 15px; height: 15px; background-color: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.6 1.8 11.3l1.3 1.5L4.5 11.6V21h6v-6h3v6h6v-9.4l1.4 1.2 1.3-1.5z'/%3E%3C/svg%3E") no-repeat center / contain; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.6 1.8 11.3l1.3 1.5L4.5 11.6V21h6v-6h3v6h6v-9.4l1.4 1.2 1.3-1.5z'/%3E%3C/svg%3E") no-repeat center / contain; }
.mk-prose { max-width: 90ch; }
.mk-prose h2 { font-size: 21px; font-weight: 700; margin: 24px 0 8px; }
.mk-prose h3 { font-size: 17px; font-weight: 700; margin: 18px 0 6px; }
.mk-prose h4 { font-size: 15px; font-weight: 700; margin: 14px 0 4px; }
.mk-prose p, .mk-prose li { font-size: 14.5px; line-height: 1.7; color: #333; }
.mk-prose ul { list-style: disc; padding-left: 20px; margin: 8px 0; }
.mk-prose a { color: var(--mk-blue); text-decoration: none; }
.mk-policy-legal { font-size: 12.5px; color: var(--mk-muted); }
.mk-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; }
@media (max-width: 900px) { .mk-two-col { grid-template-columns: 1fr; } }

/* ---------- product cards ---------- */
.mk-product-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
.mk-cat-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 1200px) { .mk-product-grid { grid-template-columns: repeat(3, minmax(0,1fr)); } .mk-cat-grid { grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (max-width: 860px) { .mk-product-grid, .mk-cat-grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; } }

.mk-card {
  background: #fff; border: 1px solid var(--mk-line); border-radius: 10px; position: relative;
  overflow: hidden; transition: box-shadow .18s ease, transform .18s ease;
}
.mk-card:hover { box-shadow: var(--mk-shadow); transform: translateY(-2px); }
.mk-card-badge {
  position: absolute; top: 10px; left: 10px; z-index: 2; background: var(--mk-orange); color: #fff;
  border: none; border-radius: 4px; font-size: 11px; font-weight: 700; height: auto; padding: 4px 8px; line-height: 1.2;
}
.mk-card-badge-static { position: static; display: inline-block; margin-bottom: 8px; }
.mk-card-figure { padding: 22px 16px 8px; background: #fff; }
.mk-card-figure img { height: 150px; width: auto; object-fit: contain; }
.mk-card-body { padding: 12px 14px 14px; gap: 7px; }
.mk-card-title { font-size: 14px; font-weight: 600; line-height: 1.35; min-height: 38px; }
.mk-card-title a:hover { color: var(--mk-orange); }
.mk-card-rating { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--mk-muted); }
.mk-stars { color: #F5A623; letter-spacing: 1px; font-size: 12px; }
.mk-card-specs { list-style: none; padding: 0; margin: 0; display: grid; gap: 3px; }
.mk-card-specs li { font-size: 12.5px; color: #444; display: flex; gap: 6px; align-items: flex-start; }
.mk-card-specs i { color: var(--mk-blue); font-size: 11px; margin-top: 3px; }
.mk-card-foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; margin-top: 6px; }
.mk-price { display: flex; flex-direction: column; }
.mk-price-old { font-size: 12px; color: var(--mk-muted); text-decoration: line-through; }
.mk-price-now { font-size: 20px; font-weight: 800; color: var(--mk-orange); line-height: 1.1; }
.mk-price-now-lg { font-size: 34px; }
.mk-card-actions { display: flex; gap: 6px; }
/* Productkaart: winkelwagen, verlanglijst en vergelijken als drie even brede knoppen. */
.mk-card-actions-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-top: 10px; }
.mk-card-actions-3 > .btn { width: 100%; min-width: 0; height: 40px; min-height: 40px; margin: 0; padding: 0; font-size: 15px; }
.mk-card-actions-3 .mk-btn-cart { margin-top: 0; }
.mk-icon-compare, .mk-icon-cart {
  min-height: 36px; height: 36px; width: 36px; padding: 0; border-radius: 6px; border: 1px solid var(--mk-line);
  background: #fff; color: var(--mk-blue); font-size: 14px;
}
.mk-icon-cart { background: #3C8B3C; border-color: #3C8B3C; color: #fff; }
.mk-icon-cart:hover { background: #326f32; border-color: #326f32; color: #fff; }
/* Vergelijkknop: wit met een blauw pictogram; staat het product in de vergelijking,
   dan draait hij om naar blauw met een wit pictogram. */
.mk-icon-compare { background: #fff; border-color: var(--mk-blue); color: var(--mk-blue); }
.mk-icon-compare:hover, .mk-icon-compare:focus {
  background: #eaf1fa; border-color: var(--mk-blue); color: var(--mk-blue);
}
.mk-icon-compare.is-on, .mk-icon-compare.is-on:hover, .mk-icon-compare.is-on:focus {
  background: var(--mk-blue); border-color: var(--mk-blue); color: #fff;
}
.mk-icon-compare i { color: inherit; }

/* ---------- keuzehulp tool cards ---------- */
.mk-tool-row { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 18px; }
@media (max-width: 860px) { .mk-tool-row { grid-template-columns: 1fr; } }
.mk-tool-card { background: #fff; border: 1px solid var(--mk-line); border-radius: 10px; overflow: hidden; }
.mk-tool-card:hover { box-shadow: var(--mk-shadow); }
.mk-tool-card figure img { width: 100%; height: 190px; object-fit: cover; }
.mk-tool-body { padding: 14px 16px 16px; gap: 6px; }
.mk-tool-title { font-size: 17px; font-weight: 700; }
.mk-tool-link { color: var(--mk-blue); font-weight: 600; font-size: 14px; display: inline-flex; gap: 7px; align-items: center; }
.mk-tool-link:hover { text-decoration: none; }
.mk-tool-note { font-size: 12.5px; color: var(--mk-muted); margin-top: 12px; }

/* ---------- banners ---------- */
.mk-banner { display: block; border-radius: 10px; overflow: hidden; }
.mk-banner img { width: 100%; height: auto; max-height: 260px; object-fit: cover; display: block; }

/* ---------- usp ---------- */
.mk-usp-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 16px; }
@media (max-width: 1000px) { .mk-usp-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 600px) { .mk-usp-grid { grid-template-columns: 1fr; } }
.mk-usp {
  background: #fff; border: 1px solid var(--mk-line); border-radius: 14px; padding: 18px;
  display: flex; gap: 14px; align-items: center;
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.mk-usp:hover { border-color: var(--mk-orange); box-shadow: var(--mk-shadow); transform: translateY(-2px); }
.mk-usp-ico {
  flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%;
  background: rgba(236,102,13,.10); display: grid; place-items: center;
}
.mk-usp i { color: var(--mk-orange); font-size: 19px; line-height: 1; }
.mk-usp-body { min-width: 0; }
.mk-usp-title { display: block; font-size: 14.5px; font-weight: 700; line-height: 1.3; color: var(--mk-text); }
.mk-usp p { font-size: 13px; line-height: 1.45; color: var(--mk-muted); margin-top: 3px; }
@media (max-width: 600px) { .mk-usp { padding: 16px; } }

/* ---------- reviews ---------- */
.mk-score { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.mk-score-num { font-size: 28px; font-weight: 800; color: var(--mk-orange); }
.mk-score-note { font-size: 12.5px; color: var(--mk-muted); }
.mk-review-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 16px; }
@media (max-width: 1000px) { .mk-review-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 600px) { .mk-review-grid { grid-template-columns: 1fr; } }
.mk-review-card { background: #fff; border: 1px solid var(--mk-line); border-radius: 10px; }
.mk-review-body { padding: 16px; gap: 7px; }
.mk-review-title { font-size: 15px; font-weight: 700; }
.mk-review-text { font-size: 13.5px; color: #444; line-height: 1.6; }
.mk-review-name { font-size: 12.5px; color: var(--mk-muted); }

/* ---------- cta band ---------- */
.mk-cta-band { background: var(--mk-orange); color: #fff; padding: 28px 0; }
.mk-cta-inner { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.mk-cta-avatar { width: 84px; height: 84px; border-radius: 999px; object-fit: cover; background: #fff; }
.mk-cta-text { flex: 1 1 320px; }
.mk-cta-title { font-size: 24px; font-weight: 800; margin-bottom: 4px; }
.mk-cta-text p { font-size: 14px; }
.mk-cta-text a { text-decoration: none; }

/* ---------- footer ---------- */
.mk-footer-strip { background: var(--mk-orange); color: #fff; padding: 22px 0; }
.mk-footer-strip-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 24px; align-items: center; }
@media (max-width: 900px) { .mk-footer-strip-grid { grid-template-columns: 1fr; text-align: center; } }
.mk-footer-strip-title { font-size: 14px; font-weight: 700; margin-bottom: 10px; }
.mk-social { display: flex; gap: 8px; }
@media (max-width: 900px) { .mk-social { justify-content: center; } .mk-footer-trust { justify-content: center; } }
.mk-social-btn {
  background: rgba(255,255,255,.16); border: none; color: #fff; border-radius: 999px;
  min-height: 38px; height: 38px; width: 38px; padding: 0; font-size: 16px;
}
.mk-social-btn:hover { background: #fff; color: var(--mk-orange); }
.mk-footer-payment { height: 26px; width: auto; }
.mk-footer-trust { display: flex; gap: 12px; align-items: center; }
.mk-footer-trust img { height: 42px; width: auto; background: #fff; border-radius: 6px; padding: 3px 6px; }

.mk-footer { background: var(--mk-surface); padding: 34px 0 10px; border-top: 1px solid var(--mk-line); }
.mk-footer-cols { display: grid; grid-template-columns: repeat(6, minmax(0,1fr)); gap: 18px 24px; }
@media (max-width: 1100px) { .mk-footer-cols { grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (max-width: 640px) { .mk-footer-cols { grid-template-columns: repeat(2, minmax(0,1fr)); } }
.mk-footer-col-title { font-size: 13.5px; font-weight: 700; margin-bottom: 6px; }
.mk-footer-menu { padding: 0; gap: 0; }
.mk-footer-menu li > a { padding: 3px 0; font-size: 12.5px; color: #555; border-radius: 0; }
.mk-footer-menu li > a:hover { color: var(--mk-orange); background: transparent; }

.mk-footer-bottom { background: var(--mk-surface); padding: 16px 0 30px; }
.mk-footer-bottom-inner { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; border-top: 1px solid var(--mk-line); padding-top: 16px; }
.mk-footer-logo img { height: 26px; width: auto; }
.mk-footer-bottom-menu { padding: 0; gap: 0; flex-wrap: wrap; }
.mk-footer-bottom-menu li > a { padding: 3px 10px 3px 0; font-size: 12.5px; color: #555; }
.mk-footer-bottom-menu li > a:hover { color: var(--mk-orange); background: transparent; }
.mk-footer-legal { font-size: 12px; color: var(--mk-muted); line-height: 1.6; }
.mk-footer-legal a { text-decoration: none; }

/* ---------- cookie consent ---------- */
/* стили баннера согласия вынесены в css/cookie-consent.css (класс .mk-cc) */

/* ---------- category page ---------- */
.mk-keuzehulp-strip { background: #2E2E2E; color: #fff; padding: 16px 0; }
.mk-keuzehulp-inner { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.mk-keuzehulp-title { font-size: 16px; font-weight: 700; }
.mk-keuzehulp-thumbs { display: flex; gap: 8px; flex: 1 1 auto; }
.mk-keuzehulp-thumbs img { width: 52px; height: 52px; object-fit: contain; background: #fff; border-radius: 6px; padding: 4px; }
.mk-keuzehulp-cta { min-height: 40px; height: 40px; }

.mk-cat-layout { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 26px; align-items: start; }
@media (max-width: 1000px) { .mk-cat-layout { grid-template-columns: 1fr; } }
.mk-filters { background: #fff; border: 1px solid var(--mk-line); border-radius: 10px; padding: 8px 10px 14px; }
.mk-filters-title { font-size: 16px; font-weight: 700; padding: 8px 6px; }
.mk-filter { border-top: 1px solid var(--mk-line); border-radius: 0; }
.mk-filter-title { font-size: 13.5px; font-weight: 600; min-height: 0; padding: 12px 6px; }
.mk-filter-content { padding: 0 6px 10px; }
.mk-filter-list { list-style: none; padding: 0; display: grid; gap: 6px; }
.mk-filter-option { display: flex; gap: 8px; align-items: center; font-size: 12.5px; color: #444; cursor: pointer; }
.mk-checkbox { width: 16px; height: 16px; border-radius: 3px; border-color: var(--mk-line); }
.mk-filter-price { padding: 12px 6px; }
.mk-range { width: 100%; }
.mk-filter-price-labels { display: flex; justify-content: space-between; font-size: 12px; color: var(--mk-muted); margin-top: 4px; }
.mk-cat-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.mk-cat-count { font-size: 13px; color: var(--mk-muted); }
.mk-select { height: 40px; min-height: 40px; border: 1px solid var(--mk-line); border-radius: 6px; font-size: 13.5px; background: #fff; }
.mk-cat-more { display: flex; justify-content: center; margin-top: 26px; }

/* ---------- accordion / table ---------- */
.mk-faq { max-width: 960px; }
.mk-accordion { border: 1px solid var(--mk-line); border-radius: 8px; margin-top: 10px; background: #fff; }
.mk-accordion-title { font-size: 15px; font-weight: 600; min-height: 0; padding: 14px 16px; }
.mk-accordion-content { padding: 0 16px 14px; font-size: 14px; color: #444; line-height: 1.6; }
.mk-table { background: #fff; border: 1px solid var(--mk-line); border-radius: 10px; font-size: 14px; }
.mk-table th { font-weight: 600; color: #333; width: 34%; background: #fff; }
.mk-table td { color: #444; }
.mk-table a { color: var(--mk-blue); text-decoration: none; }

/* ---------- product page ---------- */
.mk-product-layout { display: grid; grid-template-columns: 1.05fr 1fr; gap: 34px; align-items: start; }
@media (max-width: 900px) { .mk-product-layout { grid-template-columns: 1fr; gap: 20px; } }
.mk-gallery-main { background: #fff; border: 1px solid var(--mk-line); border-radius: 10px; padding: 24px; display: flex; justify-content: center; }
.mk-gallery-main img { max-height: 420px; object-fit: contain; }
.mk-gallery-thumbs { display: flex; gap: 8px; margin-top: 10px; }
.mk-gallery-thumb { width: 72px; height: 72px; padding: 6px; border: 1px solid var(--mk-line); border-radius: 8px; background: #fff; min-height: 0; }
.mk-gallery-thumb:hover { border-color: var(--mk-orange); background: #fff; }
.mk-gallery-thumb img { max-height: 100%; object-fit: contain; }
.mk-product-title { font-size: 26px; font-weight: 800; line-height: 1.25; margin-bottom: 8px; }
.mk-product-specs { margin: 14px 0; gap: 5px; }
.mk-product-specs li { font-size: 13.5px; }
.mk-product-price { display: flex; align-items: baseline; gap: 12px; margin: 10px 0; }
.mk-product-stock { font-size: 13.5px; color: #3C8B3C; display: flex; gap: 8px; align-items: flex-start; }
.mk-product-actions { margin: 16px 0; }
.mk-product-usp { list-style: none; padding: 14px 0 0; margin: 0; display: grid; gap: 8px; border-top: 1px solid var(--mk-line); }
.mk-product-usp li { font-size: 13px; color: #444; display: flex; gap: 9px; align-items: flex-start; }
.mk-product-usp i { color: var(--mk-orange); margin-top: 2px; }
.mk-info-card { background: #fff; border: 1px solid var(--mk-line); border-radius: 10px; margin-bottom: 16px; }
.mk-info-title { font-size: 17px; font-weight: 700; display: flex; gap: 9px; align-items: center; margin-bottom: 4px; }
.mk-info-card p { font-size: 14px; color: #444; line-height: 1.6; }

/* ---------- cart / checkout ---------- */
.mk-cart-layout { display: grid; grid-template-columns: minmax(0,1fr) 340px; gap: 26px; align-items: start; }
@media (max-width: 1000px) { .mk-cart-layout { grid-template-columns: 1fr; } }
.mk-cart-table th { font-size: 12.5px; text-transform: none; color: var(--mk-muted); }
/* De kolommen van de winkelwagen: de brede 34% van .mk-table hoort bij de specificatietabel, niet hier.
   Zonder deze regels wordt de fotokolom een kwart van de tabel en zweeft de foto links weg. */
.mk-cart-table { min-width: 560px; }
.mk-cart-table th, .mk-cart-table td { width: auto; }
.mk-cart-table th:first-child, .mk-cart-table td:first-child { width: 108px; min-width: 96px; text-align: center; padding-right: 0; }
.mk-cart-table th:nth-child(3), .mk-cart-table td:nth-child(3) { width: 132px; }
.mk-cart-table th:nth-child(4), .mk-cart-table td:nth-child(4) { width: 150px; }
.mk-cart-table th:last-child, .mk-cart-table td:last-child { width: 64px; text-align: right; }
.mk-cart-img { width: 72px; height: 72px; object-fit: contain; display: block; margin: 0 auto; }
.mk-cart-name { font-size: 14px; font-weight: 600; }
.mk-cart-name:hover { color: var(--mk-orange); }
.mk-cart-price { font-weight: 700; }
.mk-qty { width: 72px; height: 38px; min-height: 38px; border: 1px solid var(--mk-line); border-radius: 6px; }
/* Aantal in de winkelwagen: min, getal en plus op een lijn, in een kader zoals de andere velden. */
.mk-qty-box { display: inline-flex; align-items: center; height: 38px; border: 1px solid var(--mk-line); border-radius: 6px; background: #fff; overflow: hidden; }
.mk-qty-box .mk-qty-step { width: 34px; height: 100%; flex: 0 0 34px; display: flex; align-items: center; justify-content: center; border: 0; background: #fff; color: var(--mk-text); font-size: 18px; line-height: 1; font-weight: 600; cursor: pointer; padding: 0; transition: background .15s, color .15s; }
.mk-qty-box .mk-qty-step:hover { background: var(--mk-orange); color: #fff; }
.mk-qty-box .mk-qty-step:focus-visible { outline: 2px solid var(--mk-orange); outline-offset: -2px; }
.mk-qty-box .mk-qty { width: 44px; height: 100%; min-height: 0; border: 0; border-left: 1px solid var(--mk-line); border-right: 1px solid var(--mk-line); border-radius: 0; text-align: center; font-size: 14px; font-weight: 600; padding: 0; background: #fff; color: var(--mk-text); -moz-appearance: textfield; appearance: textfield; }
.mk-qty-box .mk-qty:focus { outline: 2px solid var(--mk-orange); outline-offset: -2px; }
.mk-qty-box .mk-qty::-webkit-outer-spin-button, .mk-qty-box .mk-qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.mk-summary { background: #fff; border: 1px solid var(--mk-line); border-radius: 10px; position: sticky; top: 16px; }
.mk-summary-title { font-size: 18px; font-weight: 700; }
.mk-summary-row { display: flex; justify-content: space-between; gap: 12px; font-size: 13.5px; color: #444; }
.mk-summary-total { font-size: 18px; font-weight: 800; color: var(--mk-text); }
.mk-summary-item { display: flex; align-items: center; gap: 10px; font-size: 13px; }
.mk-summary-item img { width: 40px; height: 40px; object-fit: contain; }
.mk-summary-item span { flex: 1 1 auto; }
.mk-summary-payment { height: 24px; width: auto; margin-top: 12px; }
.mk-summary-note { font-size: 12.5px; color: var(--mk-muted); }
.mk-field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 640px) { .mk-field-grid { grid-template-columns: 1fr; } }
.mk-field { display: grid; gap: 4px; }
.mk-label { font-size: 12.5px; font-weight: 600; color: #333; }
.mk-input { height: 44px; min-height: 44px; border: 1px solid var(--mk-line); border-radius: 6px; background: #fff; font-size: 14px; width: 100%; }
.mk-input:focus { outline: 2px solid var(--mk-orange); outline-offset: -1px; }
.mk-textarea { height: auto; min-height: 120px; padding: 10px 12px; }
.mk-radio-row { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; color: #333; padding: 7px 0; cursor: pointer; }
.mk-radio { width: 18px; height: 18px; }
.mk-radio-row a { color: var(--mk-blue); text-decoration: none; }
.mk-checkout-main .mk-info-card { margin-bottom: 16px; }

/* ---------- auth / empty ---------- */
.mk-auth-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; max-width: 960px; margin-inline: auto; }
@media (max-width: 860px) { .mk-auth-layout { grid-template-columns: 1fr; } }
.mk-auth-card { background: #fff; border: 1px solid var(--mk-line); border-radius: 10px; }
.mk-auth-card-wide { grid-column: 1 / -1; }
.mk-auth-title { font-size: 22px; font-weight: 800; margin-bottom: 8px; }
.mk-auth-card p { font-size: 14px; color: #444; }
.mk-auth-link { font-size: 13px; color: var(--mk-blue); text-decoration: none; }
/* Op .mk-container reset de padding-shorthand de zijmarge, daarom hier expliciet zijruimte. */
.mk-empty { text-align: center; max-width: 640px; margin-inline: auto; display: grid; gap: 12px; justify-items: center; padding: 20px 16px; }
@media (max-width: 640px) { .mk-empty { padding-inline: 26px; } }
.mk-empty-icon { font-size: 40px; color: var(--mk-muted); }
.mk-empty-icon-success { color: #3C8B3C; }
.mk-empty-title { font-size: 25px; font-weight: 800; }
.mk-empty-text { font-size: 14.5px; color: #444; line-height: 1.6; }
.mk-empty-text a { color: var(--mk-blue); text-decoration: none; }
.mk-empty-actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.mk-empty-actions .mk-btn-blue-outline { border-color: var(--mk-blue); color: var(--mk-blue); }
.mk-empty-actions .mk-btn-blue-outline:hover { background: #eef3f9; color: var(--mk-blue); }

/* ---------- contact ---------- */
.mk-contact-list { list-style: none; padding: 0; display: grid; gap: 16px; margin-top: 16px; }
.mk-contact-list li { display: flex; gap: 14px; align-items: flex-start; }
.mk-contact-list i { color: var(--mk-orange); font-size: 18px; margin-top: 3px; width: 22px; }
.mk-contact-list div { display: grid; gap: 2px; font-size: 14px; }
.mk-contact-list strong { font-size: 14px; }
.mk-contact-list span, .mk-contact-list a { font-size: 13.5px; color: #444; }
.mk-contact-list a { color: var(--mk-blue); text-decoration: none; }


/* --- home lane (common/home): keep Weektoppers cards on one baseline like the reference --- */
[data-source-block="index:product_row__weektoppers"] .mk-card { display: flex; flex-direction: column; }
[data-source-block="index:product_row__weektoppers"] .mk-card-body { display: flex; flex-direction: column; flex: 1 1 auto; }
[data-source-block="index:product_row__weektoppers"] .mk-card-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.6em;
}
[data-source-block="index:product_row__weektoppers"] .mk-card-specs { min-height: 3.9em; }
[data-source-block="index:product_row__weektoppers"] .mk-card-foot { margin-top: auto; }
[data-source-block="index:product_row__weektoppers"] .mk-price-now,
[data-source-block="index:product_row__weektoppers"] .mk-price-old { white-space: nowrap; }
/* --- lane checkout-cart: winkelwagen en afrekenen --- */
.mk-cart-note { background: #fff; border: 1px solid var(--mk-line); border-left: 4px solid var(--mk-orange); border-radius: 8px; padding: 10px 14px; font-size: 13.5px; color: #333; margin-top: 10px; }
.mk-cart-note-ok { border-left-color: #2e7d32; }
.mk-cart-note-error { border-left-color: #c62828; }
.mk-cart-note a { color: var(--mk-blue); text-decoration: none; }
.mk-cart-row td { vertical-align: middle; }
.mk-cart-row form { display: inline; margin: 0; }
.mk-cart-option { color: var(--mk-muted); font-size: 12px; }
/* Verlanglijst: dezelfde tabel als de winkelwagen, met een knop om het product alsnog te bestellen. */
.mk-wish-cart { height: 38px; min-height: 38px; font-size: 13px; padding: 0 14px; white-space: nowrap; }
.mk-wish-empty { color: var(--mk-muted); font-size: 14px; margin: 8px 0 20px; }
.mk-cart-row td form.mk-wish-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
/* Een knop in een tekstblok houdt zijn eigen kleur: de blauwe verwijzingskleur maakt het opschrift onzichtbaar. */
.mk-prose a.btn { color: #fff; text-decoration: none; }
.mk-checkout-main .card-body { padding: 18px 20px; }
.mk-checkout-main .form-control, .mk-checkout-main input[type=text], .mk-checkout-main input[type=email], .mk-checkout-main input[type=tel], .mk-checkout-main input[type=password], .mk-checkout-main select, .mk-checkout-main textarea { height: 44px; min-height: 44px; border: 1px solid var(--mk-line); border-radius: 6px; background: #fff; font-size: 14px; width: 100%; padding: 0 12px; color: var(--mk-text); }
.mk-checkout-main textarea, .mk-checkout-main textarea.form-control { height: auto; min-height: 90px; padding: 10px 12px; }
/* Het eigen pijltje staat los van de rand: het systeempijltje plakt tegen het kader aan. */
.mk-checkout-main select {
  -webkit-appearance: none; -moz-appearance: none; appearance: none;
  padding-right: 36px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%23555' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 12px 8px;
}
.mk-checkout-main input:focus, .mk-checkout-main select:focus, .mk-checkout-main textarea:focus { outline: 2px solid var(--mk-orange); outline-offset: -1px; }
.mk-checkout-main label, .mk-checkout-main .form-label, .mk-checkout-main .col-form-label { font-size: 12.5px; font-weight: 600; color: #333; display: block; margin-bottom: 4px; }
.mk-checkout-main .row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 640px) { .mk-checkout-main .row { grid-template-columns: 1fr; } }
.mk-checkout-main .row > [class^="col"], .mk-checkout-main .row > .col { width: auto; }
.mk-checkout-main .form-check, .mk-checkout-main .radio, .mk-checkout-main .form-check-label { display: flex; gap: 10px; align-items: center; font-size: 13.5px; font-weight: 400; color: #333; padding: 5px 0; }
.mk-checkout-main input[type=radio], .mk-checkout-main input[type=checkbox] { width: 18px; height: 18px; min-height: 18px; accent-color: var(--mk-orange); }
.mk-checkout-main legend, .mk-checkout-main h2:not(.mk-info-title), .mk-checkout-main h3 { font-size: 15px; font-weight: 700; margin: 4px 0 8px; }
.mk-checkout-main .btn, .mk-checkout-confirm .btn { background: var(--mk-orange); border: 1px solid var(--mk-orange); color: #fff; border-radius: 6px; min-height: 44px; height: 44px; font-size: 15px; font-weight: 700; padding: 0 22px; }
.mk-checkout-main .btn:hover, .mk-checkout-confirm .btn:hover { background: #d25a08; border-color: #d25a08; color: #fff; }
.mk-checkout-confirm { margin-top: 4px; }
.mk-checkout-confirm .btn { width: 100%; min-height: 52px; height: 52px; font-size: 16px; }
.mk-checkout-confirm table { width: 100%; font-size: 13.5px; }
/* 'Bestelling bevestigen' knipperde en klopte bij elke klik: DaisyUI zet op .btn een
   'button-pop'-animatie die bij elke :active opnieuw start, plus een eigen achtergrond
   voor :active/:focus. Hier alles vastzetten: geen animatie, geen schaalsprong en
   dezelfde oranje kleur in alle toestanden. */
.mk-checkout-main .btn, .mk-checkout-confirm .btn,
.mk-checkout-main .btn:active, .mk-checkout-confirm .btn:active,
.mk-checkout-main .btn:focus, .mk-checkout-confirm .btn:focus,
.mk-checkout-main .btn:focus-visible, .mk-checkout-confirm .btn:focus-visible,
.mk-checkout-main .btn:active:hover, .mk-checkout-confirm .btn:active:hover,
.mk-checkout-main .btn:active:focus, .mk-checkout-confirm .btn:active:focus {
  animation: none;
  transform: none;
  --btn-focus-scale: 1;
  --animation-btn: 0s;
  transition: background-color .15s ease, border-color .15s ease;
}
.mk-checkout-main .btn:active, .mk-checkout-confirm .btn:active,
.mk-checkout-main .btn:active:hover, .mk-checkout-confirm .btn:active:hover,
.mk-checkout-main .btn:active:focus, .mk-checkout-confirm .btn:active:focus {
  background: #d25a08; border-color: #d25a08; color: #fff;
}
.mk-checkout-main .btn:focus-visible, .mk-checkout-confirm .btn:focus-visible {
  outline: 2px solid #8a3c05; outline-offset: 2px;
}
.mk-checkout-main .btn:disabled, .mk-checkout-confirm .btn:disabled,
.mk-checkout-main .btn[disabled], .mk-checkout-confirm .btn[disabled] {
  background: #e7b995; border-color: #e7b995; color: #fff; opacity: 1;
}
.mk-checkout-main .text-danger { color: #c62828; font-size: 12.5px; font-weight: 400; }
/* Het besteloverzicht staat in de statiek alleen in de zijkolom, niet nog eens onder het formulier. */
.mk-checkout-confirm table { display: none; }

/* Bezorg- en betaalwijze: het hele vak is aanklikbaar, niet alleen het bolletje. */
.mk-method-list { display: grid; gap: 8px; margin-bottom: 4px; }
.mk-method-wait { font-size: 13.5px; color: var(--mk-muted); margin: 0; }
.mk-checkout-main .mk-method-error { color: #c62828; font-size: 12.5px; margin: 4px 0 0; }
.mk-checkout-main .mk-method-error:empty { margin: 0; }
.mk-method-comment { margin-top: 16px; }
/* De opmaak van de gewone opschriften in het afrekenen is zwaarder: daarom hier ook met .mk-checkout-main. */
.mk-checkout-main .mk-method-option, .mk-method-option {
  display: flex; align-items: center; gap: 12px; cursor: pointer;
  border: 1px solid var(--mk-line); border-radius: 8px; background: #fff;
  padding: 12px 14px; margin: 0; font-size: 14px; font-weight: 400; color: var(--mk-text);
  transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.mk-checkout-main .mk-method-option:hover { border-color: var(--mk-orange); background: #fff8f3; }
.mk-checkout-main .mk-method-option.is-chosen { border-color: var(--mk-orange); background: #fff5ed; box-shadow: inset 0 0 0 1px var(--mk-orange); }
.mk-checkout-main .mk-method-option input[type=radio] { width: 18px; height: 18px; min-height: 18px; accent-color: var(--mk-orange); flex: 0 0 auto; margin: 0; }
.mk-checkout-main .mk-method-option input[type=radio]:focus, .mk-checkout-main .mk-method-option input[type=radio]:focus-visible { outline: none; box-shadow: none; }
.mk-checkout-main .mk-method-body { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex: 1 1 auto; }
.mk-checkout-main .mk-method-name { font-weight: 600; }
.mk-checkout-main .mk-method-price { white-space: nowrap; font-weight: 700; color: var(--mk-orange); }

/* === section-02-footer (lane footer, ref 1:1) === */
.mk-footer-strip { background: #fff; color: #111; padding: 40px 0 34px; }
.mk-footer-strip-grid { grid-template-columns: repeat(6, minmax(0,1fr)); gap: 18px 24px; align-items: start; }
.mk-footer-strip-col:nth-child(1) { grid-column: span 2; }
.mk-footer-strip-col:nth-child(2) { grid-column: span 2; }
.mk-footer-strip-col:nth-child(3) { grid-column: span 2; }
.mk-footer-strip-title { font-size: 19px; font-weight: 800; margin-bottom: 16px; color: #111; letter-spacing: -.2px; }
/* Alle sociale pictogrammen in één stijl: gelijke ronde knop, gelijke kleur en grootte. */
.mk-social { gap: 12px; }
.mk-social-btn {
  background: #111; border: 0; color: #fff; border-radius: 999px;
  width: 38px; height: 38px; min-height: 38px; padding: 0; font-size: 18px;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .2s ease, color .2s ease;
}
.mk-social-btn i { font-size: 18px; line-height: 1; }
.mk-social-btn:hover, .mk-social-btn:focus-visible { background: var(--mk-orange); color: #fff; }
.mk-footer-payment { height: 30px; }
.mk-footer-trust img { height: 34px; background: transparent; border-radius: 0; padding: 0; }
.mk-footer-trust { gap: 16px; }
@media (max-width: 900px) {
  .mk-footer-strip { padding: 22px 0 16px; }
  .mk-footer-strip-grid { grid-template-columns: 1fr; gap: 16px; }
  .mk-footer-strip-col:nth-child(n) { grid-column: auto; }
  .mk-footer-strip-col .mk-footer-strip-title { display: none; }
  .mk-footer-strip-col:nth-child(2), .mk-footer-strip-col:nth-child(3) { border-top: 1px solid var(--mk-line); padding-top: 12px; }
}

.mk-footer { padding: 46px 0 26px; }
.mk-footer-cols { grid-template-columns: repeat(6, minmax(0,1fr)); gap: 0 24px; align-items: start; }
.mk-footer-col { display: block; }
.mk-footer-group { margin-bottom: 28px; }
.mk-footer-group > .mk-footer-col-title { font-size: 15px; font-weight: 800; margin-bottom: 10px; color: #111; list-style: none; cursor: default; }
.mk-footer-group > .mk-footer-col-title::-webkit-details-marker { display: none; }
.mk-footer-group > .mk-footer-menu { display: block !important; }
.mk-footer-menu li > a { padding: 4px 0; font-size: 13.5px; color: #222; }

.mk-footer-bottom { padding: 10px 0 34px; }
.mk-footer-bottom-inner { flex-direction: row; align-items: center; flex-wrap: wrap; gap: 6px 18px; padding-top: 18px; }
.mk-footer-bottom-menu { flex: 1 1 auto; }
.mk-footer-bottom-menu li > a { font-size: 13.5px; color: #222; padding: 3px 9px 3px 0; }
.mk-footer-credit { margin-left: auto; font-size: 13.5px; color: #555; }
.mk-footer-credit a { text-decoration: none; color: #555; }

@media (max-width: 900px) {
  .mk-footer { padding: 0 0 8px; border-top: 0; }
  .mk-footer-cols { grid-template-columns: 1fr; gap: 0; }
  .mk-footer-group { margin: 0; border-bottom: 1px solid var(--mk-line); }
  .mk-footer-group > .mk-footer-col-title {
    display: flex; align-items: center; justify-content: space-between;
    margin: 0; padding: 20px 4px; font-size: 17px; font-weight: 500; cursor: pointer;
  }
  .mk-footer-group > .mk-footer-col-title::after {
    content: ""; width: 12px; height: 12px; margin-right: 6px; flex: none;
    border-right: 2px solid #111; border-bottom: 2px solid #111; transform: rotate(45deg) translate(-3px,-3px);
  }
  .mk-footer-group[open] > .mk-footer-col-title::after { transform: rotate(-135deg) translate(-3px,-3px); }
  .mk-footer-group > .mk-footer-menu { display: none !important; padding-bottom: 8px; }
  .mk-footer-group[open] > .mk-footer-menu { display: block !important; }
  .mk-footer-bottom { padding: 18px 0 30px; }
  .mk-footer-bottom-inner { border-top: 0; justify-content: flex-start; gap: 14px; }
  .mk-footer-bottom-menu { display: none; }
  .mk-footer-logo img { height: 30px; }
  .mk-footer-credit { margin-left: 0; font-size: 15px; }
}
/* ---------- zoeksuggesties, winkelwagenknop en verlanglijst-hartje ---------- */
.mk-search-wrap { position: relative; width: 100%; max-width: 560px; }
.mk-search-wrap .mk-search { max-width: none; }
@media (max-width: 1023px) { .mk-search-wrap { width: auto; } }

/* De shapa staat vóór .mk-nav in de DOM, dus zonder eigen laag schuift de balk over de eerste suggestie. */
.mk-header { position: relative; z-index: 3; }

.mk-suggest {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 80;
  background: #fff; border: 1px solid var(--mk-line); border-radius: 10px;
  box-shadow: 0 14px 34px rgba(0,0,0,.20); overflow: hidden auto; max-height: 72vh;
}
.mk-suggest[hidden] { display: none; }
.mk-suggest-item { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-bottom: 1px solid #f1f1f1; color: var(--mk-text); }
.mk-suggest-item:hover { background: #f5f7fa; }
.mk-suggest-img { width: 46px; height: 46px; flex: 0 0 46px; object-fit: contain; }
.mk-suggest-name { font-size: 13px; line-height: 1.35; }
.mk-suggest-price { margin-left: auto; padding-left: 8px; font-size: 14px; font-weight: 800; color: var(--mk-orange); white-space: nowrap; }
.mk-suggest-all { display: block; padding: 10px 12px; background: #fafafa; text-align: center; font-size: 13px; font-weight: 700; color: var(--mk-blue); }
.mk-suggest-all:hover { background: #eef3f9; }
.mk-suggest-empty { padding: 14px 12px; font-size: 13px; color: var(--mk-muted); }
@media (max-width: 1023px) { .mk-suggest { width: 86vw; left: auto; right: 0; } }

.mk-icon-wish {
  min-height: 36px; height: 36px; width: 36px; padding: 0; border-radius: 6px;
  border: 1px solid var(--mk-line); background: #fff; color: #8b8b8b; font-size: 15px;
}
.mk-icon-wish:hover { border-color: #E0245E; background: #fdeef3; color: #E0245E; }
.mk-icon-wish.is-on, .mk-icon-wish.is-on:hover { background: #E0245E; border-color: #E0245E; color: #fff; }
.mk-icon-wish.is-busy, .mk-btn-cart.is-busy { opacity: .55; pointer-events: none; }

.mk-btn-cart {
  width: 100%; height: 40px; min-height: 40px; margin-top: 10px; border-radius: 6px;
  background: #3C8B3C; border: 1px solid #3C8B3C; color: #fff;
  font-size: 13.5px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
}
.mk-btn-cart:hover { background: #326f32; border-color: #326f32; color: #fff; }

.mk-toasts { position: fixed; bottom: 16px; right: 16px; top: auto; z-index: 200; display: grid; gap: 8px; max-width: min(360px, calc(100vw - 32px)); }
.mk-toast {
  background: #2E2E2E; color: #fff; border-left: 4px solid #3C8B3C; border-radius: 8px;
  padding: 11px 14px; font-size: 13px; line-height: 1.4; box-shadow: 0 10px 26px rgba(0,0,0,.25);
  transition: opacity .4s ease, transform .4s ease;
}
.mk-toast a { color: #FFC08A; text-decoration: none; }
.mk-toast-bad { border-left-color: #C0392B; }
.mk-toast.is-out { opacity: 0; transform: translateX(12px); }

/* ---------- vergelijken: knop in de kop en de vergelijkpagina ---------- */
/* Op smalle schermen is er in de kop geen plek voor een vierde pictogram. */
@media (max-width: 639px) {
  .mk-header .mk-navbar-end .mk-compare-btn { display: none; }
}
.mk-cmp-head {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 16px;
  flex-wrap: wrap; margin-bottom: 18px;
}
.mk-cmp-count {
  background: #fff; border: 1px solid var(--mk-line); border-radius: 999px;
  padding: 6px 14px; font-size: 13px; font-weight: 600; color: var(--mk-blue); white-space: nowrap;
}
.mk-cmp-wrap {
  background: #fff; border: 1px solid var(--mk-line); border-radius: 12px;
  overflow-x: auto; box-shadow: 0 1px 2px rgba(0,0,0,.04);
}
.mk-cmp-table { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 760px; }
.mk-cmp-table td, .mk-cmp-table th { padding: 12px 16px; text-align: left; vertical-align: top; border-top: 1px solid var(--mk-line); }
.mk-cmp-table thead td, .mk-cmp-table thead th { border-top: none; }
.mk-cmp-table tbody tr:nth-child(even) { background: var(--mk-surface); }
/* De eerste kolom blijft staan tijdens het horizontaal schuiven. */
.mk-cmp-label {
  position: sticky; left: 0; z-index: 2; width: 190px; min-width: 190px;
  background: inherit; font-weight: 600; color: #333;
}
.mk-cmp-table tbody tr:nth-child(odd) .mk-cmp-label { background: #fff; }
.mk-cmp-table tbody tr:nth-child(even) .mk-cmp-label { background: var(--mk-surface); }
.mk-cmp-corner { background: #fff; vertical-align: bottom; color: var(--mk-muted); font-size: 13px; }
.mk-cmp-group th {
  background: var(--mk-blue); color: #fff; font-size: 13px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em;
}
.mk-cmp-cell { width: 22%; min-width: 190px; background: #fff; height: 1px; /* laat de kaart de rijhoogte vullen */ }
/* Elke productkaart heeft dezelfde vaste rasterhoogtes, zodat titels van
   verschillende lengte de sterren, prijs en knop niet uit elkaar duwen. */
.mk-cmp-card {
  position: relative; display: flex; flex-direction: column; align-items: stretch;
  gap: 8px; padding-top: 6px; height: 100%; min-height: 330px;
}
.mk-cmp-remove {
  position: absolute; top: -4px; right: -6px; display: flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 999px; border: 1px solid var(--mk-line);
  background: #fff; color: var(--mk-muted); font-size: 12px;
}
.mk-cmp-remove:hover { background: #C0392B; border-color: #C0392B; color: #fff; }
.mk-cmp-figure {
  display: flex; align-items: center; justify-content: center; width: 100%; height: 140px;
  flex: 0 0 140px; background: #fff; border: 1px solid var(--mk-line); border-radius: 8px; padding: 8px;
}
.mk-cmp-figure img { max-height: 100%; max-width: 100%; object-fit: contain; }
.mk-cmp-nofoto { color: var(--mk-line); font-size: 30px; }
.mk-cmp-name {
  font-weight: 600; line-height: 1.35; color: var(--mk-text);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden; height: calc(1.35em * 3); flex: 0 0 auto;
}
.mk-cmp-name:hover { color: var(--mk-orange); }
.mk-cmp-rating { height: 16px; line-height: 16px; flex: 0 0 auto; }
.mk-cmp-rating .mk-stars { color: #F5A623; font-size: 12px; }
.mk-cmp-price { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; min-height: 26px; flex: 0 0 auto; }
.mk-cmp-card .mk-btn-cart { margin-top: auto; width: 100%; justify-content: center; }
.mk-cmp-desc { color: #555; line-height: 1.5; }
.mk-cmp-stock {
  display: inline-block; background: #EAF5EA; color: #2e7d32; border-radius: 999px;
  padding: 3px 10px; font-size: 12.5px; font-weight: 600;
}
.mk-cmp-cell-empty { background: var(--mk-surface); }
.mk-cmp-add {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  height: 100%; min-height: 190px; border: 1px dashed var(--mk-line); border-radius: 8px;
  color: var(--mk-muted); font-size: 13px; font-weight: 600;
}
.mk-cmp-add i { font-size: 18px; }
.mk-cmp-add:hover { border-color: var(--mk-orange); color: var(--mk-orange); }
.mk-cmp-foot { margin-top: 20px; }
@media (max-width: 767px) {
  .mk-cmp-label { width: 140px; min-width: 140px; }
  .mk-cmp-table { font-size: 13px; }
  .mk-cmp-table td, .mk-cmp-table th { padding: 10px 12px; }
}

/* ---------- nergens onderstreepte tekst ----------
   Onderstreping komt ook van buiten dit blad: de browserstijl voor links, de
   hulpklassen van Tailwind (underline, hover:underline), .link van DaisyUI en
   tekst uit de beheerder (<u>, style="text-decoration:underline"). Daarom hier
   een sluitregel. Alleen de doorgehaalde oude prijs houdt haar streep. */
html *:not(s):not(del):not(strike):not(.mk-price-old),
html *:not(s):not(del):not(strike):not(.mk-price-old)::before,
html *:not(s):not(del):not(strike):not(.mk-price-old)::after {
  text-decoration-line: none !important;
}
html s, html del, html strike, html .mk-price-old { text-decoration-line: line-through !important; }
/* ---------- bevestigingspagina (account aangemaakt, uitgelogd, ...) ---------- */
.mk-success-card { max-width: 720px; margin-inline: auto; }
.mk-success-body { align-items: center; text-align: center; gap: 0; padding: 40px 28px; }
.mk-success-check {
  display: inline-flex; align-items: center; justify-content: center;
  width: 72px; height: 72px; border-radius: 50%;
  background: #eaf5ea; color: #3C8B3C; border: 2px solid #cfe7cf;
  margin-bottom: 18px;
}
.mk-success-title { font-size: 28px; font-weight: 800; letter-spacing: -.01em; margin: 0 0 10px; }
.mk-auth-card p.mk-success-lead { font-size: 15px; color: var(--mk-muted); max-width: 52ch; margin: 0 auto; }
.mk-success-text { font-size: 14px; color: var(--mk-muted); max-width: 60ch; margin: 0 auto; }
.mk-success-text p { margin: 0 0 8px; }
.mk-success-points {
  list-style: none; margin: 22px auto 0; padding: 16px 20px; text-align: left;
  display: flex; flex-direction: column; gap: 10px;
  background: var(--mk-surface); border: 1px solid var(--mk-line); border-radius: 10px;
}
.mk-success-points li { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; color: #333; }
.mk-success-points svg { color: #3C8B3C; flex: 0 0 auto; margin-top: 2px; }
.mk-success-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 26px; }
.mk-success-actions .btn { min-width: 190px; }
.mk-btn-blue-soft {
  background: #fff; border: 1px solid var(--mk-blue); color: var(--mk-blue); font-weight: 700;
}
.mk-btn-blue-soft:hover { background: var(--mk-blue); border-color: var(--mk-blue); color: #fff; }
@media (max-width: 560px) {
  .mk-success-body { padding: 28px 16px; }
  .mk-success-title { font-size: 22px; }
  .mk-success-actions .btn { min-width: 100%; }
}

/* ------------------------------------------------------------------
   Mijn account: gedeelde schil (zijmenu + inhoudskaart) voor alle
   accountpagina's, plus de meldingen die de kern via #alert plaatst.
   ------------------------------------------------------------------ */
/* De kernmeldingen krijgen dezelfde vorm als onze eigen .mk-toast en staan
   onderaan het scherm, zodat ze de kop (met zoekbalk) nooit afdekken. */
#alert.toast-container {
  position: fixed; bottom: 16px; right: 16px; top: auto; left: auto; z-index: 1200; padding: 0;
  display: flex; flex-direction: column; gap: 8px; max-width: min(360px, calc(100vw - 32px));
  pointer-events: none;
}
#alert .alert {
  pointer-events: auto; display: flex; align-items: flex-start; gap: 10px;
  padding: 11px 14px; border-radius: 8px; font-size: 13px; line-height: 1.4;
  border: 0; border-left: 4px solid #3C8B3C; background: #2E2E2E; color: #fff;
  box-shadow: 0 10px 26px rgba(0,0,0,.25);
  transition: opacity .4s ease, transform .4s ease;
}
#alert .alert.is-out { opacity: 0; transform: translateY(12px); }
#alert .alert-success { background: #2E2E2E; border-left-color: #3C8B3C; color: #fff; }
#alert .alert-danger { background: #2E2E2E; border-left-color: #C0392B; color: #fff; }
#alert .alert a { color: #FFC08A; text-decoration: none; }
#alert .alert i { margin-top: 2px; }
#alert .btn-close {
  margin-left: auto; border: 0; background: transparent; color: inherit;
  font-size: 0; width: 18px; height: 18px; cursor: pointer; opacity: .6;
}
#alert .btn-close::before { content: '\00d7'; font-size: 18px; line-height: 18px; }
#alert .btn-close:hover { opacity: 1; }
@media (max-width: 767px) {
  #alert.toast-container { right: 12px; left: 12px; bottom: 12px; max-width: none; }
  #alert .alert { width: 100%; }
}

.mk-account-layout { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 24px; align-items: start; }
@media (max-width: 900px) { .mk-account-layout { grid-template-columns: 1fr; } }

.mk-account-side { background: #fff; border: 1px solid var(--mk-line); border-radius: 10px; overflow: hidden; }
.mk-account-user { padding: 16px; background: var(--mk-surface); border-bottom: 1px solid var(--mk-line); }
.mk-account-user-name { font-size: 15px; font-weight: 700; color: var(--mk-text); }
.mk-account-user-mail { font-size: 12.5px; color: var(--mk-muted); word-break: break-all; }
.mk-account-menu { list-style: none; margin: 0; padding: 6px; display: flex; flex-direction: column; gap: 2px; }
.mk-account-menu a {
  display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 6px;
  font-size: 14px; color: var(--mk-text); text-decoration: none;
}
.mk-account-menu a i { width: 16px; text-align: center; color: var(--mk-blue); font-size: 13px; }
.mk-account-menu a:hover { background: var(--mk-surface); color: var(--mk-orange); }
.mk-account-menu a:hover i { color: var(--mk-orange); }
.mk-account-menu li.is-active a { background: #eef3f9; color: var(--mk-blue); font-weight: 700; }
.mk-account-menu-sep { margin: 6px 4px; border-top: 1px solid var(--mk-line); }
.mk-account-menu a.mk-account-logout { color: #b03027; }
.mk-account-menu a.mk-account-logout i { color: #b03027; }

/* Retourformulier zonder account: uitleg naast het formulier. */
.mk-return-aside .mk-account-panel { padding: 18px; }
.mk-return-steps { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.mk-return-steps li { display: flex; gap: 10px; align-items: flex-start; }
.mk-return-steps li > span {
  flex: 0 0 auto; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center;
  background: #eef3f9; color: var(--mk-blue); font-size: 12.5px; font-weight: 800;
}
.mk-return-steps strong { display: block; font-size: 14px; font-weight: 700; }
.mk-return-steps div { font-size: 12.5px; color: var(--mk-muted); line-height: 1.5; }
.mk-return-aside-note {
  display: flex; gap: 8px; align-items: flex-start; margin: 0 0 14px;
  padding: 10px 12px; border-radius: 8px; font-size: 12.5px; line-height: 1.5;
  background: #fdeee2; border: 1px solid #f6d5bb; color: #8a4b1a;
}
.mk-return-aside-links { list-style: none; margin: 0; padding: 14px 0 0; border-top: 1px solid var(--mk-line); display: flex; flex-direction: column; gap: 8px; }
.mk-return-aside-links a { display: flex; gap: 8px; align-items: center; font-size: 13.5px; color: var(--mk-blue); text-decoration: none; }
.mk-return-aside-links a:hover { color: var(--mk-orange); }

.mk-account-main { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.mk-account-panel { background: #fff; border: 1px solid var(--mk-line); border-radius: 10px; padding: 22px; }
.mk-account-panel-title { font-size: 18px; font-weight: 800; margin: 0 0 4px; }
.mk-account-panel-sub { font-size: 13.5px; color: var(--mk-muted); margin: 0 0 16px; }
.mk-account-lead { font-size: 14.5px; color: #444; margin: 0 0 16px; max-width: 70ch; }

.mk-account-note {
  display: flex; align-items: flex-start; gap: 10px; margin-bottom: 16px;
  padding: 11px 14px; border-radius: 8px; font-size: 14px;
  background: #eaf5ea; border: 1px solid #cfe7cf; color: #2f6f2f;
}
.mk-account-note i { margin-top: 2px; }

.mk-account-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: 14px; }
.mk-account-tile {
  display: flex; gap: 12px; align-items: flex-start; padding: 16px;
  background: #fff; border: 1px solid var(--mk-line); border-radius: 10px;
  text-decoration: none; color: var(--mk-text); transition: box-shadow .16s ease, transform .16s ease, border-color .16s ease;
}
.mk-account-tile:hover { border-color: var(--mk-orange); box-shadow: var(--mk-shadow); transform: translateY(-2px); }
.mk-account-tile-icon {
  flex: 0 0 auto; width: 38px; height: 38px; border-radius: 8px; display: grid; place-items: center;
  background: #eef3f9; color: var(--mk-blue); font-size: 15px;
}
.mk-account-tile:hover .mk-account-tile-icon { background: #fdeee2; color: var(--mk-orange); }
.mk-account-tile-title { display: block; font-size: 14.5px; font-weight: 700; }
.mk-account-tile-text { display: block; font-size: 12.5px; color: var(--mk-muted); line-height: 1.5; margin-top: 2px; }

.mk-account-form { display: flex; flex-direction: column; gap: 14px; }
.mk-account-form .mk-field-grid { gap: 14px; }
.mk-form-error { font-size: 12.5px; color: #b03027; }
.mk-form-error:empty { display: none; }
.mk-account-form .mk-input.is-invalid, .mk-account-form .mk-select.is-invalid { border-color: #b03027; }
.mk-select {
  height: 44px; min-height: 44px; border: 1px solid var(--mk-line); border-radius: 6px;
  background: #fff; font-size: 14px; width: 100%; padding-inline: 12px;
}
.mk-select:focus { outline: 2px solid var(--mk-orange); outline-offset: -1px; }
.mk-textarea {
  border: 1px solid var(--mk-line); border-radius: 6px; background: #fff;
  font-size: 14px; width: 100%; padding: 10px 12px; min-height: 110px;
}
.mk-textarea:focus { outline: 2px solid var(--mk-orange); outline-offset: -1px; }
.mk-account-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; align-items: center; margin-top: 4px; }
.mk-account-actions .btn { min-width: 170px; }
@media (max-width: 560px) { .mk-account-actions .btn { min-width: 100%; } }

.mk-account-table { width: 100%; background: #fff; border: 1px solid var(--mk-line); border-radius: 10px; border-collapse: separate; border-spacing: 0; font-size: 14px; overflow: hidden; }
.mk-account-table th {
  text-align: left; font-weight: 600; font-size: 12.5px; letter-spacing: .02em; text-transform: uppercase;
  color: var(--mk-muted); background: var(--mk-surface); padding: 10px 14px; border-bottom: 1px solid var(--mk-line);
}
.mk-account-table td { padding: 12px 14px; border-bottom: 1px solid var(--mk-line); color: #333; vertical-align: top; }
.mk-account-table tbody tr:last-child td { border-bottom: 0; }
.mk-account-table tbody tr:hover td { background: #fafafa; }
.mk-account-table .mk-num { text-align: right; white-space: nowrap; }
.mk-account-table a { color: var(--mk-blue); text-decoration: none; }
.mk-account-table a:hover { color: var(--mk-orange); }
.mk-account-table tfoot td { padding: 10px 14px; border-top: 1px solid var(--mk-line); font-size: 13.5px; }
.mk-account-scroll { overflow-x: auto; }
.mk-account-scroll .mk-account-table { min-width: 620px; }

.mk-account-status { display: inline-block; padding: 3px 9px; border-radius: 999px; background: #eef3f9; color: var(--mk-blue); font-size: 12px; font-weight: 600; white-space: nowrap; }

.mk-account-rowbtn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  width: 34px; height: 34px; border-radius: 6px; border: 1px solid var(--mk-line);
  background: #fff; color: var(--mk-blue); font-size: 13px; text-decoration: none;
}
.mk-account-rowbtn:hover { border-color: var(--mk-blue); background: #eef3f9; }
.mk-account-rowbtn-danger { color: #b03027; }
.mk-account-rowbtn-danger:hover { border-color: #b03027; background: #fdeceb; }
.mk-account-rowactions { display: flex; gap: 6px; justify-content: flex-end; }
.mk-account-table td:has(.mk-account-rowactions) { vertical-align: middle; }
/* daisyUI tekent een keuzerondje alleen met .radio; met .checkbox wordt het een zwart vierkant. */
.mk-account-form .mk-radio, .mk-account-form .mk-checkbox { border-color: var(--mk-line); }

.mk-account-empty { text-align: center; padding: 32px 16px; color: var(--mk-muted); font-size: 14px; }
.mk-account-empty i { display: block; font-size: 30px; color: var(--mk-line); margin-bottom: 10px; }

.mk-account-foot { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; }
.mk-account-results { font-size: 13px; color: var(--mk-muted); }
.mk-account-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.mk-account-addr { border: 1px solid var(--mk-line); border-radius: 10px; padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.mk-account-addr-text { font-size: 14px; line-height: 1.6; color: #333; }
.mk-account-addr-actions { display: flex; gap: 8px; margin-top: auto; }
.mk-account-def { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 640px) { .mk-account-def { grid-template-columns: 1fr; } }
.mk-account-def dl { border: 1px solid var(--mk-line); border-radius: 10px; overflow: hidden; }
.mk-account-def dl > div { display: flex; gap: 12px; padding: 10px 14px; border-bottom: 1px solid var(--mk-line); font-size: 14px; }
.mk-account-def dl > div:last-child { border-bottom: 0; }
.mk-account-def dt { font-weight: 600; color: #333; flex: 0 0 45%; }
.mk-account-def dd { margin: 0; color: #444; }

/* Lege winkelwagen: een eigen kaart in plaats van het kale 404-sjabloon van de kern. */
.mk-cart-empty {
  background: #fff; border: 1px solid var(--mk-line); border-radius: 12px;
  padding: 40px 24px 32px; margin-top: 4px;
}
.mk-cart-empty .mk-empty { padding: 0; }
.mk-cart-empty-icon {
  width: 84px; height: 84px; border-radius: 999px; background: var(--mk-surface);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--mk-orange); font-size: 34px; margin-bottom: 4px;
}
.mk-cart-empty-cats {
  margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--mk-line); text-align: center;
}
.mk-cart-empty-cats-title { display: block; font-size: 14.5px; font-weight: 700; margin-bottom: 12px; }
.mk-cart-empty-chips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.mk-cart-empty-chip {
  display: inline-flex; align-items: center; height: 34px; padding: 0 14px;
  border: 1px solid var(--mk-line); border-radius: 999px; background: #fff;
  font-size: 13px; font-weight: 600; color: #333; transition: .15s ease;
}
.mk-cart-empty-chip:hover { border-color: var(--mk-orange); color: var(--mk-orange); text-decoration: none; }
.mk-cart-empty-links {
  display: flex; flex-wrap: wrap; gap: 10px 28px; justify-content: center; margin-top: 18px;
}
@media (max-width: 640px) {
  .mk-cart-empty { padding: 28px 16px 24px; }
  .mk-cart-empty-links { flex-direction: column; align-items: center; gap: 10px; }
}
/* ------------------------------------------------------------------
   Focusrand van formuliervelden.
   DaisyUI geeft .input/.select/.textarea/.checkbox/.range standaard een
   grijze ring met outline-offset:2px. Die ring zweeft naast de veldrand,
   volgt de hoekronding niet en oogt daardoor scheef (vooral in de
   filters van de categoriepagina). Overal dezelfde nette oranje rand,
   strak op de rand van het veld.
   De zoekbalk in de donkere kop houdt haar eigen witte ring.
   ------------------------------------------------------------------ */
.input:focus:not(.mk-search-input), .input:focus-visible:not(.mk-search-input),
.select:focus, .select:focus-visible,
.textarea:focus, .textarea:focus-visible,
.file-input:focus, .file-input:focus-visible {
  outline: 2px solid var(--mk-orange);
  outline-offset: -1px;
  border-color: var(--mk-orange);
  box-shadow: none;
}
.checkbox:focus-visible, .radio:focus-visible, .toggle:focus-visible, .range:focus-visible {
  outline: 2px solid var(--mk-orange);
  outline-offset: 2px;
  box-shadow: none;
}