/* ==========================================================================
   shortcodes.css — Kiddykado (kk)
   Only the reusable shortcode wrappers: section shell, section heading row
   (badge + rule + "bekijk alles" link, i.e. .pop-kop / .bs-kopwrap from the
   concepts), the responsive product grids and the empty notice.
   Nothing here is defined a second time in components.css.
   Loaded AFTER components.css. No !important in this layer.
   ========================================================================== */


/* ==========================================================================
   1. Section shell
   Vertical rhythm is set with --kk-sec-pad so a shortcode can override it
   per instance without a new class.
   ========================================================================== */
.kk-sec{
  --kk-sec-pad:clamp(46px,6vw,82px);
  padding:var(--kk-sec-pad) 0 10px;
}
.kk-sec--klein{--kk-sec-pad:clamp(24px,3vw,40px)}
.kk-sec--ruim{--kk-sec-pad:clamp(54px,7vw,98px)}
.kk-sec--vlak{--kk-sec-pad:0}
.kk-sec--bg{background:var(--bg)}


/* ==========================================================================
   2. Section heading row
   .kk-sec__kop is the generic name; .pop-kop (home slider) and .bs-kopwrap
   (bestsellers / sale) are the concept names for the same row.
   ========================================================================== */
.kk-sec__kop,
.pop-kop{display:flex;align-items:center;gap:14px;margin-bottom:22px}

.bs-kopwrap{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:30px}

.pop-badge{
  display:inline-flex;align-items:center;gap:8px;background:#fff;
  border:1.5px solid rgba(34,38,28,.1);border-radius:999px;padding:8px 18px;
  font-family:'Figtree',system-ui,sans-serif;font-weight:700;font-size:14.5px;
  white-space:nowrap;
}
.pop-badge svg{color:var(--goud);flex:none}

.pop-lijn{flex:1;height:1.5px;background:rgba(34,38,28,.08);border-radius:2px}

.bs-alle{
  flex:none;font-size:14px;font-weight:700;color:var(--groen);
  display:flex;align-items:center;gap:7px;
  border-bottom:2px solid transparent;transition:border-color .2s;
}
.bs-alle:focus-visible{outline:2px solid var(--groen);outline-offset:2px;border-radius:4px}
@media (hover:hover) and (pointer:fine){
  .bs-alle:hover{border-color:var(--groen)}
}
@media(max-width:640px){
  .pop-kop .bs-alle{display:none}
}


/* ==========================================================================
   3. Responsive product grids
   The column count is the maximum; narrower viewports step down.
   ========================================================================== */
.kk-grid{display:grid;gap:16px}
.kk-grid--2{grid-template-columns:repeat(2,1fr)}
.kk-grid--3{grid-template-columns:repeat(3,1fr)}
.kk-grid--4{grid-template-columns:repeat(4,1fr)}
.kk-grid--6{grid-template-columns:repeat(6,1fr)}

@media(max-width:1080px){
  .kk-grid--6{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:980px){
  .kk-grid--4{grid-template-columns:repeat(2,1fr)}
  .kk-grid--3{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:700px){
  .kk-grid{gap:12px}
  .kk-grid--2,
  .kk-grid--3,
  .kk-grid--4{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:560px){
  .kk-grid--6{grid-template-columns:repeat(2,1fr)}
}


/* ==========================================================================
   4. Empty notice
   ========================================================================== */
.kk-empty{
  background:#fff;border-radius:var(--radius-s);box-shadow:var(--schaduw);
  padding:28px 24px;text-align:center;color:#5b6150;font-size:14.5px;
}
.kk-empty h3{font-size:18px;font-weight:800;color:var(--tekst);margin-bottom:6px}
.kk-empty p{margin:0 auto;max-width:52ch}