/* ==================================================================
   Masthead — transparent over the hero, solid green once scrolled
================================================================== */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  padding: clamp(1rem, 2.4vw, 1.9rem) clamp(1.25rem, 4vw, 3.5rem);
  transition: background-color 0.6s var(--ease-soft),
              padding 0.6s var(--ease-soft),
              box-shadow 0.6s var(--ease-soft);
}
.nav::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(16, 12, 10, 0.72), transparent);
  opacity: 1;
  transition: opacity 0.5s var(--ease-soft);
  pointer-events: none;
}
.nav.is-stuck {
  background: rgba(30, 23, 18, 0.92);
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  padding-top: 0.85rem;
  padding-bottom: 0.85rem;
  box-shadow: 0 1px 0 rgba(212, 175, 55, 0.28), 0 18px 50px rgba(0, 0, 0, 0.4);
}
.nav.is-stuck::before { opacity: 0; }

/* --- Wordmark ---------------------------------------------------- */
.brand {
  position: relative;
  display: flex;
  align-items: center;
  line-height: 1;
}
.brand__logo {
  height: clamp(30px, 3.4vw, 44px);
  width: auto;
  display: block;
  transition: opacity 0.4s var(--ease-soft);
}
.brand:hover .brand__logo { opacity: 0.82; }
.nav.is-stuck .brand__logo,
.page-inner .brand__logo { height: clamp(26px, 2.8vw, 36px); }
.brand__name {
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 2.2vw, 1.7rem);
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--gold-300);
}
.brand__sub {
  margin-top: 0.42em;
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.34em;
  color: rgba(246, 241, 230, 0.6);
}

/* --- Links ------------------------------------------------------- */
.nav__links {
  position: relative;
  display: flex;
  align-items: center;
  gap: clamp(1.2rem, 2.6vw, 2.6rem);
}
.nav__link {
  position: relative;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: rgba(246, 241, 230, 0.82);
  padding-block: 0.4em;
  transition: color 0.4s var(--ease-soft);
}
.nav__link::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%;
  height: 1px;
  background: var(--gold-400);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.5s var(--ease-out);
}
.nav__link:hover { color: var(--gold-200); }
.nav__link:hover::after { transform: scaleX(1); transform-origin: left; }

.nav__wa {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  padding: 0.72em 1.35em;
  border: 1px solid rgba(232, 210, 140, 0.5);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--gold-200);
  transition: background-color 0.45s var(--ease-soft), color 0.45s var(--ease-soft);
}
.nav__wa:hover { background: var(--gold-500); color: var(--espresso-950); }
.nav__wa svg { width: 15px; height: 15px; fill: currentColor; }

/* --- Mobile ------------------------------------------------------ */
.nav__toggle { display: none; position: relative; width: 30px; height: 18px; }
.nav__toggle span {
  position: absolute; left: 0;
  width: 100%; height: 1px;
  background: var(--cream);
  transition: transform 0.45s var(--ease-out), opacity 0.3s;
}
.nav__toggle span:nth-child(1) { top: 0; }
.nav__toggle span:nth-child(2) { top: 50%; }
.nav__toggle span:nth-child(3) { top: 100%; }
.nav.is-open .nav__toggle span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.nav.is-open .nav__toggle span:nth-child(2) { opacity: 0; }
.nav.is-open .nav__toggle span:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }

@media (max-width: 900px) {
  .nav__toggle { display: block; z-index: 2; }
  .nav__links {
    position: fixed;
    inset: 0;
    z-index: 1;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    /* Opened from the button at the top, the menu should read as
       coming down from it — so the links sit just under the bar
       rather than floating in the middle of the screen. */
    gap: 1.6rem;
    padding: calc(6.75rem + env(safe-area-inset-top)) 1.5rem 2.5rem;
    overflow-y: auto;
    overscroll-behavior: contain;
    /* Left a little translucent on purpose: the page behind is felt
       but never readable, which is what makes it look like glass
       rather than a flat panel. */
    background: rgba(16, 12, 10, 0.86);
    backdrop-filter: blur(30px) saturate(1.1);
    -webkit-backdrop-filter: blur(30px) saturate(1.1);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.45s var(--ease-soft), visibility 0.45s;
  }
  .nav.is-open .nav__links { opacity: 1; visibility: visible; }
  .nav__link { font-size: 0.95rem; letter-spacing: 0.26em; }
  .nav__wa { margin-top: 0.6rem; }

  /* The bar's own furniture has to stay on top of the panel it sits
     over, and stay usable while it is open. */
  .brand,
  .basket-btn { z-index: 2; }

  /* --- Shop details under the links (built by js/main.js) --------- */
  .nav__foot {
    width: 100%;
    max-width: 22rem;
    margin-top: auto;            /* settles at the foot of the panel */
    padding-top: 2rem;
    border-top: var(--rule) solid rgba(212, 175, 55, 0.16);
    text-align: center;
  }
  .nav__status {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5em;
    margin: 0;
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--sand);
  }
  .nav__status i {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--sand);
  }
  .nav__status.is-open { color: var(--gold-300); }
  .nav__status.is-open i {
    background: var(--gold-400);
    box-shadow: 0 0 0 3px rgba(223, 192, 95, 0.18);
  }
  .nav__hours {
    margin: 0.5rem 0 0;
    font-size: 0.72rem;
    letter-spacing: 0.1em;
    color: rgba(246, 241, 230, 0.5);
  }
  .nav__calls {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 1.1rem;
  }
  /* Full-width taps: on a phone this is the thing people came for. */
  .nav__calls a {
    padding: 0.7rem 1rem;
    border: var(--rule) solid rgba(212, 175, 55, 0.3);
    border-radius: 2px;
    /* Body face, not the display serif: Cormorant sets numerals as
       old-style figures, which look handsome and read badly in a
       phone number someone is about to dial. */
    font-size: 1rem;
    font-variant-numeric: lining-nums tabular-nums;
    letter-spacing: 0.06em;
    color: var(--gold-200);
    text-decoration: none;
  }
  .nav__where {
    margin-top: 1.2rem;
    font-size: 0.74rem;
    line-height: 1.5;
    color: rgba(246, 241, 230, 0.55);
  }
  .nav__where p { margin: 0 0 0.45rem; }
  .nav__where b {
    display: block;
    font-weight: 500;
    font-size: 0.66rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--gold-600);
  }
  .nav__mail {
    display: inline-block;
    margin-top: 0.5rem;
    font-size: 0.74rem;
    letter-spacing: 0.04em;
    color: var(--sand);
    text-decoration: underline;
    text-underline-offset: 3px;
  }
}

/* The panel's details are for the phone menu only — on a desktop the
   nav is a row of links and the footer carries all of this already. */
@media (min-width: 901px) {
  .nav__foot { display: none; }
}

/* --- Pages with no hero -------------------------------------------
   The masthead normally floats over the shopfront and turns solid on
   scroll. On an inner page there is nothing to float over, so it is
   solid from the first frame and the content starts below it.
------------------------------------------------------------------ */
.page-inner .nav {
  background: rgba(30, 23, 18, 0.94);
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  box-shadow: 0 1px 0 rgba(212, 175, 55, 0.28);
}
.page-inner .nav::before { opacity: 0; }
.page-inner .nav__link[aria-current="page"] { color: var(--gold-300); }
.page-inner .nav__link[aria-current="page"]::after { transform: scaleX(1); }

.page-collection .gallery { padding-top: clamp(7.5rem, 16vh, 11rem); }

.page-story .story { padding-top: clamp(7.5rem, 16vh, 11rem); }

/* --- Open mobile menu ---------------------------------------------
   A backdrop-filter makes an element the containing block for its own
   fixed-position children. With the bar blurred — on scroll via
   .is-stuck, and from the first frame on an inner page — the
   full-screen menu was being clamped to the height of the bar, so it
   painted only behind the bar and its links spilled over the page.
   The bar gives up its blur while the menu is open; the menu panel
   does the blurring, over the whole screen, as intended.
------------------------------------------------------------------ */
.nav.is-open,
.nav.is-open.is-stuck,
.page-inner .nav.is-open {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
}
.nav.is-open::before { opacity: 0; }