/* ---------------------------------------------------------------------------
   A shop page wearing the homepage's header and footer.

   From 1024px up the homepage pair is shown and the shop's own steps aside, so
   the site reads as one design. Below that the shop's pair comes back: it is
   the one built for a phone, and the homepage header would be far too wide.
   ------------------------------------------------------------------------ */
@media (min-width: 1024px) {
    body:has(.dh-header) > .header,
    body:has(.dh-header) > .footer { display: none; }

    /* A page may wear the homepage's footer without its header — a product's
       page keeps its own bar at the top. The shop's own footer has to step
       aside for either, or the page ends with two footers stacked. */
    body:has(.dh-footer) > .footer { display: none; }
}

@media not all and (min-width: 1024px) {
    .dh-header,
    .dh-news,
    .dh-footer { display: none; }
}

/* ---------------------------------------------------------------------------
   A shop page that also wears the homepage's PHONE header, footer and bottom
   bar (partials/mobile-chrome-*.blade.php, styled by mobile-home.css).

   The wrapper takes no box, so the phone header can stay stuck to the top.
   Below 1024px it replaces the shop's own header and footer; from 1024px up
   it is hidden and the desktop pair above takes over.
   ------------------------------------------------------------------------ */
.mh-chrome { display: contents; }

@media (min-width: 1024px) {
    .mh-chrome { display: none !important; }
}

@media not all and (min-width: 1024px) {
    body:has(.mh-chrome) > .header,
    body:has(.mh-chrome) > .footer { display: none; }
    /* room for the bar fixed at the foot of the screen */
    body:has(.mh-nav) { padding-bottom: calc(var(--mh-nav-h, 64px) + env(safe-area-inset-bottom, 0px)); }
}