/* ============================================================
   A-meubel.nl — Design B, /kleur landing (swatch-grid)
   Geïsoleerd: alleen geladen vanuit includes/designs/b/kleur.php.
   db3k_ = design B v3 kleur. Gebruikt de :root-tokens uit style.css.
   ============================================================ */

.db3k{padding-bottom:48px}

/* ---- tabs (Kleuren / Bekleding) ---- */
.db3k__tabs{display:flex;gap:6px;border-bottom:1px solid var(--line);margin:0 0 26px}
.db3k__tab{appearance:none;border:0;background:none;font:inherit;font-weight:700;font-size:15px;
  color:var(--muted);padding:12px 20px;cursor:pointer;border-bottom:3px solid transparent;margin-bottom:-1px;
  transition:color .15s,border-color .15s}
.db3k__tab:hover{color:var(--blue)}
.db3k__tab.is-active{color:var(--blue);border-bottom-color:var(--orange)}
.db3k__tab em{font-style:normal;color:var(--muted);font-weight:600;margin-left:5px}

.db3k__panel[hidden]{display:none}

/* ---- swatch-grid ---- */
.db3k__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:18px}

.db3k-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);
  border-radius:var(--radius);overflow:hidden;text-decoration:none;color:var(--text);
  transition:box-shadow .15s,transform .15s}
.db3k-card:hover{box-shadow:var(--shadow);transform:translateY(-2px)}
.db3k-card:hover .db3k-card__name{color:var(--orange)}

.db3k-card__img{display:block;aspect-ratio:1/1;background:#f3f4f5 50% 50%/cover no-repeat}
.db3k-card__body{padding:13px 15px 15px}
.db3k-card__name{display:block;font-weight:700;font-size:15px;color:var(--blue);transition:color .15s}
.db3k-card__count{display:block;font-size:13px;color:var(--muted);margin-top:3px}

.db3k__empty{color:var(--muted);padding:24px 0}

@media(max-width:600px){
  .db3k__grid{grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:12px}
  .db3k__tab{padding:11px 14px;font-size:14px}
}

/* ============================================================
   Popup: collecties/varianten van een kleur of bekleding.
   De binnen-markup komt uit /includes/ajax/get_colours.php (ongewijzigd);
   we herstijlen die A-klassen binnen de .db3k-modal-scope naar B-look.
   ============================================================ */
.db3k-modal{position:fixed;inset:0;z-index:1000;display:flex;align-items:flex-start;justify-content:center;padding:24px}
.db3k-modal[hidden]{display:none}
.db3k-modal__backdrop{position:absolute;inset:0;background:rgba(10,20,35,.55)}
.db3k-modal__dialog{position:relative;background:#fff;border-radius:14px;box-shadow:0 24px 60px rgba(8,18,33,.32);
  width:min(1120px,100%);max-height:calc(100vh - 48px);overflow:auto;padding:30px 32px 36px}
.db3k-modal__close{position:absolute;top:16px;right:18px;appearance:none;border:1px solid var(--line);background:#fff;
  border-radius:8px;padding:7px 15px;font:inherit;font-weight:600;color:var(--text);cursor:pointer;transition:color .15s,border-color .15s}
.db3k-modal__close:hover{color:var(--orange);border-color:var(--orange)}
.db3k-modal__title{text-align:center;font-size:24px;color:var(--blue);font-weight:700;margin:2px 0 4px}
.db3k-modal__sub{text-align:center;color:var(--muted);font-size:14px;margin:0 0 18px}
.db3k-modal__search{display:block;width:min(460px,100%);margin:0 auto 26px;padding:12px 18px;border:1px solid var(--line);
  border-radius:30px;font:inherit;outline:none;transition:border-color .15s}
.db3k-modal__search:focus{border-color:var(--blue)}
.db3k-modal__loading,.db3k-modal__none{text-align:center;color:var(--muted);padding:22px}

/* --- collecties-grid (4 kolommen, masonry-achtig; markup uit get_colours.php) --- */
.db3k-modal__body .row-colour-set{display:flex;flex-wrap:wrap;gap:26px;margin:0}
.db3k-modal__body .col-colour-set{flex:1 1 210px;min-width:0;display:flex;flex-direction:column;gap:24px;padding:0}
.db3k-modal__body .colour-set{position:relative}
.db3k-modal__body .colour-set .category{font-weight:700;font-size:15px;color:var(--text);line-height:1.2}
.db3k-modal__body .colour-set .price-added{font-size:12.5px;color:var(--muted);margin:2px 0 9px;display:flex;gap:4px}
.db3k-modal__body .colours.group-item{display:flex;flex-wrap:wrap;gap:7px;margin:0;padding:0;list-style:none}
.db3k-modal__body .colour-block{width:54px;height:54px;margin:0;padding:0}
.db3k-modal__body .colour-block.is-empty{visibility:hidden}
.db3k-modal__body .colour-block a.colour{display:block;width:54px;height:54px}
.db3k-modal__body .colour-block img{width:54px;height:54px;object-fit:cover;border-radius:7px;border:1px solid var(--line);
  display:block;transition:border-color .12s,transform .12s}
.db3k-modal__body .colour-block a.colour:hover img{border-color:var(--orange);transform:scale(1.05)}

/* --- help (?)-tooltip per collectie --- */
.db3k-modal__body .colour-set .help{position:absolute;top:0;right:0}
.db3k-modal__body .colour-set .help-icon{cursor:help}
.db3k-modal__body .colour-set .help-icon img{width:16px;height:16px;opacity:.45}
.db3k-modal__body .colour-set .help-content{display:none;position:absolute;right:0;top:24px;width:230px;background:#fff;
  border:1px solid var(--line);box-shadow:var(--shadow);border-radius:8px;padding:10px 12px;font-size:12.5px;color:var(--text);z-index:5;line-height:1.45}
.db3k-modal__body .colour-set .help:hover .help-content{display:block}

@media(max-width:600px){
  .db3k-modal{padding:0}
  .db3k-modal__dialog{border-radius:0;max-height:100vh;padding:22px 16px 30px}
  .db3k-modal__body .col-colour-set{flex-basis:140px}
}