/* ==========================================================================
   Hippe Zeeuw · laag 4 — shortcodes
   Shortcodes bestaan alleen voor dynamische WooCommerce-data. Elke shortcode
   is een dunne wrapper om dezelfde render-helper die de partial ook aanroept,
   dus de opmaak hier is alleen het omhulsel (sectie, kop, rail-navigatie).
   ========================================================================== */

.hz-sc{ position:relative; }
.hz-sc--section{ padding-block:clamp(52px,6vw,88px); }

/* lege staat — nooit een kale witte sectie */
.hz-sc__empty{
  border:1px dashed var(--line);
  padding:34px 26px;
  text-align:center;
  color:var(--ink-3);
  font-size:.875rem;
}

/* product-rail wrapper zoals op de home (sale) en de PDP (cross-sell) */
.hz-sc__head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:32px;
  flex-wrap:wrap;
  margin-bottom:clamp(32px,4vw,54px);
}
.hz-sc__head-txt{ max-width:60ch; }
.hz-sc__head h2{ margin-top:14px; }
.hz-sc__head .lead{ margin-top:16px; }

/* categorie-tegels als shortcode */
.hz-sc__cats{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:clamp(12px,1.6vw,26px);
}

/* USP-strip als shortcode */
.hz-sc__usps{ display:grid; grid-template-columns:repeat(4,1fr); }

@media (max-width:1180px){
  .hz-sc__cats{ grid-template-columns:repeat(3,1fr); }
}
@media (max-width:820px){
  .hz-sc__cats{ grid-template-columns:repeat(2,1fr); }
  .hz-sc__usps{ grid-template-columns:repeat(2,1fr); }
}