/* The shop page (/shop/): the ARKHIVE Store build between the site header and footer.
   The store keeps its own styles; the site header and footer use chrome.css, scoped to .ark-chrome. */

body.shop-page {
  --ark-hdr: calc(78px + env(safe-area-inset-top, 0px));
  padding-top: var(--ark-hdr);
}

/* The site header stays above the store bar. Store dialogs (cart, menus) open in the top layer above both. */
body.shop-page .ark-chrome .hdr { z-index: 50; }

/* The store bar sits under the site header and reads "Store" instead of a second ARKHIVE wordmark. */
body.shop-page #root > header { top: var(--ark-hdr); }
body.shop-page #root > header a[aria-label="ARKHIVE Store home"] svg { display: none; }
body.shop-page #root > header a[aria-label="ARKHIVE Store home"]::before {
  content: "Store";
  font-family: "Mokoto", "Plus Jakarta Sans", system-ui, sans-serif;
  font-size: 15px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #FFFFFF;
  line-height: 1;
}

/* One footer on the page: the site's. */
body.shop-page #root > footer { display: none; }

/* Phones and tablets: the three store links stay in the bar, so the page has one menu button (the site's). */
@media (max-width: 899px) {
  body.shop-page #root > header > .container { grid-template-columns: auto 1fr auto; }
  body.shop-page #root > header nav[aria-label="Main"] { display: block; justify-self: center; }
  body.shop-page #root > header nav[aria-label="Main"] ul { gap: 0; }
  body.shop-page #root > header nav[aria-label="Main"] a { padding: 0 9px; font-size: 14px; }
  body.shop-page #root > header nav[aria-label="Main"] a::after { left: 9px; right: 9px; }
  body.shop-page #root > header button[aria-label="Open menu"] { display: none; }
}
@media (max-width: 379px) {
  body.shop-page #root > header a[aria-label="ARKHIVE Store home"] { display: none; }
  body.shop-page #root > header > .container { grid-template-columns: 1fr auto; }
  body.shop-page #root > header nav[aria-label="Main"] { justify-self: start; }
}