/* The navbar shared by the home page and the catalog. Markup: src/views/site-nav.js.
   It sets its own font and colours because the two pages have different page styles.
   The background is solid because a see-through one makes Chrome draw the home page's text thinner. */
.site-header.site-nav-header{height:70px;background:#fffefc;border-bottom:1px solid #e8e3dc;color:#25231f;font:400 14px/1.5 "Cormorant Garamond",Georgia,serif;-webkit-font-smoothing:antialiased;-webkit-backdrop-filter:none;backdrop-filter:none}
.site-nav-header *{box-sizing:border-box}
.site-nav-header svg{flex-shrink:0;vertical-align:middle}
.site-nav{max-width:1600px;margin:auto;height:100%;padding:0 4%;display:flex;align-items:center;justify-content:space-between;gap:35px}
.site-nav-links{display:flex;gap:32px;align-items:center;margin-left:auto;margin-right:auto;height:100%;font-size:15px;font-weight:600}
.site-nav-links a{position:relative;padding:8px 0;white-space:nowrap;color:inherit;text-decoration:none}
.site-nav-links a:hover{color:#a37d49}
.site-nav-links .is-current:after{content:"";position:absolute;bottom:0;left:0;right:0;height:1px;background:#9f763f}
.site-nav-actions{display:flex;align-items:center;gap:22px;flex-shrink:0}
.site-nav-search{border:0;background:none;padding:5px;font:inherit;line-height:inherit;color:inherit;cursor:pointer}
.site-nav-divider{height:26px;width:1px;background:#d1ccc5}
.site-nav-login{display:flex;align-items:center;gap:10px;font-weight:600;font-size:15px;color:inherit;text-decoration:none}
.site-nav-cta{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:37px;border:1px solid #b08c58;border-radius:30px;padding:12px 25px;color:#fffaf3;background:linear-gradient(110deg,#b99259,#c3a36e);box-shadow:inset 0 1px 0 #ffffff29;font-size:15px;font-weight:600;line-height:1.25;text-decoration:none;white-space:nowrap;transition:box-shadow .2s,background .2s,transform .2s}
.site-nav-cta:hover{box-shadow:0 4px 12px #926d3829;filter:brightness(.97)}
.site-nav-header .menu-toggle{display:none;border:0;background:none;padding:1px 6px;color:inherit;cursor:pointer}

/* The catalog page is zoomed to 125% on desktop, so the home page's bar follows it.
   These breakpoints pair each width with its range under that zoom, as catalog.css does. */
@media(min-width:1151px){body:not(.catalog-page) .site-nav-header{zoom:1.25}}
@media(max-width:1350px),(min-width:1151px) and (max-width:1687.5px){
  .site-nav{gap:20px;padding:0 3%}
  .site-nav-links{gap:24px}
  .site-nav-actions{gap:15px}
}
@media(max-width:1150px),(min-width:1151px) and (max-width:1437.5px){
  .site-nav{gap:18px}
  .site-nav-links{gap:18px}
  .site-nav-actions{gap:12px}
  .site-nav-divider,.site-nav-search{display:none}
  .site-nav-cta{padding:10px 15px}
}
@media(max-width:900px){
  .site-nav{padding:0 22px}
  .site-nav-links{gap:15px;font-size:14px}
  .site-nav-actions .site-nav-cta{display:none}
}
@media(max-width:680px){
  .site-nav{padding:0 18px;gap:12px}
  .site-nav-header .menu-toggle{display:block;margin-left:auto;order:3}
  .site-nav-actions{margin-left:auto}
  .site-nav-login{font-size:13px;gap:5px}
  .site-nav-login svg{width:19px}
  .site-nav-links{display:none;position:absolute;top:69px;left:0;right:0;height:auto;background:#fffcf7;border-bottom:1px solid #e8e3dc;padding:18px 25px;box-shadow:0 10px 15px #0001;gap:18px;flex-wrap:wrap;margin:0}
  .site-nav-links.open{display:flex}
  /* Without JavaScript the menu button does nothing, so the home page shows the links instead.
     This asks the browser directly. Waiting for app.js to say it has run made the header collapse from 194 to 70 px on slow phones. */
  @media(scripting:none){
    .marketing .site-header.site-nav-header{height:auto}
    .marketing .site-nav{flex-wrap:wrap;padding-block:12px}
    .marketing .site-nav-links{display:flex;position:static;padding:0;border:0;box-shadow:none;width:100%}
    .marketing .site-nav-header .menu-toggle{display:none}
  }
}