/* AUREL HOUSE: floating glass navigation and matching scroll-to-top control.
   Loaded after the existing Atelier stylesheet; public storefront only. */

body:not(.owner-body) .header,
body.page-home .header {
  position: fixed;
  inset: auto auto auto 50%;
  top: 46px;
  left: 50%;
  right: auto;
  width: min(1460px, calc(100% - 48px));
  height: 86px;
  transform: translateX(-50%);
  padding: 0 clamp(18px, 3.3vw, 52px);
  border: 1px solid rgba(246, 229, 208, .28);
  border-radius: 18px;
  background: rgba(21, 24, 22, .58);
  -webkit-backdrop-filter: blur(18px) saturate(125%);
  backdrop-filter: blur(18px) saturate(125%);
  box-shadow: 0 15px 40px rgba(15, 13, 11, .16);
  color: #f8f3eb;
  z-index: 100;
  transition: top .28s ease, background .28s ease,
    box-shadow .28s ease, border-color .28s ease;
}
body:not(.owner-body) .header .wordmark,
body:not(.owner-body) .header .wordmark span,
body:not(.owner-body) .header .main-nav a,
body:not(.owner-body) .header .head-actions a,
body:not(.owner-body) .header .head-actions button {
  color: #f8f3eb;
}
body:not(.owner-body) .header .wordmark span { color: #e7d5c1; }
body:not(.owner-body) .header .main-nav a::after { background: #d2ab7e; }
body:not(.owner-body) .header .head-actions b {
  background: rgba(245, 232, 216, .91);
  color: #2d241e;
}

body:not(.owner-body) .header.is-scrolled {
  top: 12px;
  background: rgba(248, 244, 238, .91);
  border-color: rgba(112, 89, 62, .26);
  box-shadow: 0 13px 46px rgba(21, 19, 14, .16);
}
body:not(.owner-body) .header.is-scrolled .wordmark,
body:not(.owner-body) .header.is-scrolled .main-nav a,
body:not(.owner-body) .header.is-scrolled .head-actions a,
body:not(.owner-body) .header.is-scrolled .head-actions button { color: #2b261f; }
body:not(.owner-body) .header.is-scrolled .wordmark span { color: #876f57; }
body:not(.owner-body) .header.is-scrolled .head-actions b {
  background: #e5d8c7;
  color: #382b20;
}

/* On pale interior pages, let the floating glass adopt the warm ivory palette. */
body.page-interior .header {
  background: rgba(248, 244, 238, .86);
  border-color: rgba(112, 89, 62, .21);
}
body.page-interior .header .wordmark,
body.page-interior .header .main-nav a,
body.page-interior .header .head-actions a,
body.page-interior .header .head-actions button { color: #2b261f; }
body.page-interior .header .wordmark span { color: #876f57; }
body.page-interior .header .head-actions b { background: #e5d8c7; color: #382b20; }

/* Once the header becomes fixed, preserve clearance on non-home pages. */
body.page-interior main { padding-top: 102px; }
body.page-home main { padding-top: 0; }

/* Keep the existing mobile menu attached visually to the floating bar. */
body:not(.owner-body) #mobile-menu {
  position: fixed;
  z-index: 99;
  top: 141px;
  left: auto;
  right: 24px;
  width: min(400px, calc(100% - 48px));
  max-height: calc(100dvh - 158px);
  overflow-y: auto;
  padding: 15px 22px;
  border: 1px solid #e2d4c4;
  border-radius: 14px;
  background: rgba(248, 244, 236, .97);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  color: #312920;
  box-shadow: 0 22px 55px rgba(28, 23, 18, .22);
}
body:not(.owner-body) #mobile-menu[hidden] { display: none; }
body.aurel-nav-scrolled #mobile-menu { top: 105px; max-height: calc(100dvh - 118px); }
body:not(.owner-body) #mobile-menu a { color: #312920; }

/* Bottom right corner: premium bronze-trimmed floating return control. */
.aurel-back-to-top {
  position: fixed;
  right: max(24px, env(safe-area-inset-right, 0px));
  bottom: max(24px, env(safe-area-inset-bottom, 0px));
  z-index: 95;
  display: grid;
  place-items: center;
  width: 62px;
  height: 62px;
  padding: 0;
  border: 1px solid rgba(222, 177, 119, .8);
  border-radius: 50%;
  background: rgba(28, 32, 27, .9);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: 0 9px 30px rgba(18, 17, 15, .25);
  color: #f3dfc4;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(14px) scale(.92);
  transition: opacity .26s ease, visibility .26s ease,
    transform .3s ease, background .25s ease, box-shadow .25s ease;
}
.aurel-back-to-top::before {
  content: '';
  position: absolute;
  inset: -6px;
  border: 1px solid rgba(188, 147, 104, .36);
  border-radius: inherit;
  animation: aurel-top-halo 3.2s ease-in-out infinite;
  pointer-events: none;
}
.aurel-back-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}
.aurel-back-to-top.is-visible:hover {
  background: rgba(76, 60, 44, .96);
  transform: translateY(-5px);
  box-shadow: 0 14px 35px rgba(18, 17, 15, .28);
}
.aurel-back-to-top svg { position: relative; z-index: 1; pointer-events: none; }
.aurel-back-to-top:focus-visible {
  outline: 3px solid #d5a978;
  outline-offset: 6px;
}
@keyframes aurel-top-halo {
  0%, 100% { opacity: .35; transform: scale(1); }
  50% { opacity: .75; transform: scale(1.075); }
}

@media (max-width: 820px) {
  body:not(.owner-body) .header,
  body.page-home .header {
    top: 43px;
    width: calc(100% - 24px);
    height: 74px;
    border-radius: 15px;
    padding: 0 18px;
  }
  body:not(.owner-body) .header.is-scrolled { top: 10px; }
  body.page-interior main { padding-top: 95px; }
  body:not(.owner-body) #mobile-menu {
    top: 125px;
    right: 12px;
    width: min(400px, calc(100% - 24px));
    max-height: calc(100dvh - 138px);
  }
  body.aurel-nav-scrolled #mobile-menu {
    top: 92px;
    max-height: calc(100dvh - 103px);
  }
  .aurel-back-to-top {
    right: max(17px, env(safe-area-inset-right, 0px));
    bottom: max(24px, env(safe-area-inset-bottom, 0px));
    width: 54px;
    height: 54px;
  }
}
@media (max-width: 380px) {
  body:not(.owner-body) .header { padding: 0 12px; }
  body:not(.owner-body) .header .wordmark { font-size: 17px; letter-spacing: .1em; }
  body:not(.owner-body) .header .head-actions { gap: 7px; }
}
@media (prefers-reduced-motion: reduce) {
  .aurel-back-to-top::before { animation: none; }
  .aurel-back-to-top,
  body:not(.owner-body) .header { transition: none; }
}

/* Mobile viewport correction, 20 October 2026.
   The original flex row could exceed its available inner width on narrow phones.
   Position from both inline edges and let the brand/actions share the space. */
@media (max-width: 820px) {
  html, body {
    max-width: 100%;
    overflow-x: clip;
  }
  body:not(.owner-body) .header,
  body.page-home .header {
    box-sizing: border-box;
    inset: 43px max(12px, env(safe-area-inset-right, 0px)) auto max(12px, env(safe-area-inset-left, 0px));
    width: auto;
    max-width: none;
    min-width: 0;
    transform: none;
    gap: clamp(6px, 2vw, 12px);
    padding-inline: clamp(11px, 2.7vw, 17px);
  }
  body:not(.owner-body) .header.is-scrolled { top: 10px; }
  body:not(.owner-body) .header .wordmark {
    min-width: 0;
    flex: 0 1 auto;
    white-space: nowrap;
  }
  body:not(.owner-body) .header .head-actions {
    margin-left: auto;
    flex: 0 0 auto;
    min-width: 0;
    gap: clamp(6px, 1.75vw, 12px);
  }
  body:not(.owner-body) .header .menu-toggle {
    flex: 0 0 44px;
    width: 44px;
    min-width: 44px;
  }
  body:not(.owner-body) #mobile-menu {
    box-sizing: border-box;
    inset-inline: max(12px, env(safe-area-inset-left, 0px)) max(12px, env(safe-area-inset-right, 0px));
    width: auto;
    max-width: none;
  }
}
@media (max-width: 430px) {
  body:not(.owner-body) .header,
  body.page-home .header {
    padding-inline: 12px;
    gap: 8px;
  }
  body:not(.owner-body) .header .wordmark {
    font-size: clamp(16px, 4.6vw, 20px);
    letter-spacing: .1em;
  }
  body:not(.owner-body) .header .wordmark span {
    font-size: 7px;
    letter-spacing: .17em;
  }
  body:not(.owner-body) .header .head-actions { gap: 7px; }
  body:not(.owner-body) .header .head-actions a:first-child { font-size: 21px !important; }
  body:not(.owner-body) .header .head-actions a:nth-child(2) { font-size: 10px !important; }
}
@media (max-width: 350px) {
  body:not(.owner-body) .header .wordmark { font-size: 16px; letter-spacing: .075em; }
  /* Narrowest phones retain the accessible Shopping bag link and count. */
  body:not(.owner-body) .header .head-actions a:nth-child(2) { font-size: 0 !important; }
  body:not(.owner-body) .header .head-actions a:nth-child(2) b { font-size: 11px !important; }
}