/* Header utilities (shared) ----------------------------------
   Provides `.hd-root`, `.hd-block`, and fullwidth media helpers
   to normalize gutter and vertical spacing for header blocks.
*/

:root {
  --hd-gap: 12px;
  --hd-gutter: 12px; /* lateral gutter used across header blocks */
}

.hd-root {
  display: grid;
  gap: var(--hd-gap, 6px);
  /* fallbacks for older linters/browsers */
  padding-left: var(--hd-gutter);
  padding-right: var(--hd-gutter);
  padding-inline: var(--hd-gutter);
  padding-top: 0;
  padding-bottom: var(--hd-gap, 6px);
  box-sizing: border-box;
}

@media (min-width:768px) {
  .hd-root { grid-template-columns: 320px 1fr; align-items: start; }
}

/* Prevent double lateral padding when a pill-section or cards-section is inside an hd-root */
/* Prevent double lateral padding when a pill-section or cards-section is inside an hd-root
  Also account for page-scoped replacements to avoid layout regressions. */
.hd-root .mercat-cards-section .cards-row,
.hd-root .parada-cards-section .cards-row,
.hd-root .index-cards-section .cards-row,
.hd-root .productes-pill-section .pill-products-cards { padding-left: 0 !important; padding-right: 0 !important; }

/* Normalize internal margins/paddings so gap is the single vertical spacing control */
.hd-root > .hd-block { margin: 0; padding: 0; }
.hd-root > .hd-block > * { margin-top: 0 !important; margin-bottom: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important; }
.hd-root h1 { margin: 0; }
.hd-root .mercat-header,
.hd-root .pill-section,
.hd-root .mercat-cards-section,
.hd-root .parada-cards-section,
.hd-root .index-cards-section,
.hd-root .productes-pill-section { margin: 0; padding: 0; }

/* Remove .container lateral padding when inside header wrapper */
.hd-root .container { padding-left: 0 !important; padding-right: 0 !important; }