@layer components {
  /* ===================================================
     Canonical unified masthead structural geometry
     Batch 2C.2: extracted from layout/site-header.css's
     .site-header.minimal:not(.with-hero-media) family so the
     properties actually contested by shop.css's product-hero
     override are owned by the components layer rather than
     layout. Values are unchanged — only ownership moved. Only
     the specific properties shop.css overrides were relocated;
     the rest of each rule (display, flex-direction, align-items,
     min-height, overflow, decorative divider width/height/
     background/opacity, etc.) now lives in site-masthead.css since
     it is not part of this collision and stays masthead-owned
     structural geometry, per the batch's own instruction that
     layout may retain positioning it doesn't need to share.
     Sibling of components/hero-typography.css (Batch 2B.4) and
     components/section-heading.css (Batch 2B.1).

     shop.css's body.shop-product-scoped overrides for these same
     selectors are unconditionally more specific (they add a
     "body.shop-product" qualifier this file's selectors do not
     have), so they continue to win by ordinary CSS specificity
     once both rules sit in the same layer — no source-order
     dependency, matching hero-typography.css's finding for the
     typography side of this same family.
     =================================================== */

  .site-header.minimal:not(.with-hero-media) {
    margin: 0 0 var(--space-sm, 1rem);
    padding:
      clamp(1.1rem, 3vw, 2rem)
      var(--header-gutter)
      clamp(1.15rem, 3vw, 2rem);
  }

  .site-header.minimal:not(.with-hero-media) .header-main {
    gap: clamp(0.25rem, 0.8vw, 0.55rem);
  }

  .site-header.minimal:not(.with-hero-media) .hierarchy-block {
    display: grid;
    gap: clamp(0.2rem, 0.7vw, 0.45rem);
  }

  /* Decorative divider line under the hierarchy-block on the compact
     masthead. shop.css hides it (along with the hierarchy-block
     itself) for the product hero; only its display is contested. */
  .site-header.minimal:not(.with-hero-media) .hierarchy-block::after {
    display: block;
  }

  .site-header.minimal:not(.with-hero-media) .hero-overlay-top {
    gap: clamp(0.3rem, 1vw, 0.6rem);
    margin-top: var(--space-xs, 0.5rem);
  }

  /* shop.css's site-header/hierarchy-block rules are unconditional (no
     media query), so they also compete with site-header.css's 768px
     tablet overrides for the same properties. */
  @media (max-width: 768px) {
    .site-header.minimal:not(.with-hero-media) {
      margin-bottom: var(--space-xs, 0.5rem);
      padding:
        max(1rem, env(safe-area-inset-top))
        var(--header-gutter)
        1.25rem;
    }

    .site-header.minimal:not(.with-hero-media)
    .hierarchy-block {
      gap: 0.32rem;
    }
  }
}