/* =====================================================================
   TOP BAR, FULL-SCREEN MENU AND FOOTER (shared by every page)
   Top bar: transparent over the first screen, a frosted ivory strip once the page scrolls;
   it steps out of the way while reading down and returns on the way up (classes set by common.js).
   Menu: opens as a circle from the button pressed. Footer: dark teak, four columns.
   ===================================================================== */
:root{--hdr-top:96px;--hdr-s:72px;--gut:clamp(1rem,4vw,3.5rem);--ring:color-mix(in srgb,currentColor 24%,transparent)}

/* ---------- top bar ---------- */
.hdr{position:fixed;top:0;left:0;right:0;z-index:100;height:var(--hdr-top);display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-inline:var(--gut);
  color:var(--ivory);transition:transform .6s var(--ease-out),height .5s var(--ease-out),color .5s}
.page-light .hdr{color:var(--ink)}
.hdr::before{content:"";position:absolute;inset:0;z-index:-1;background:rgba(246,242,236,.8);-webkit-backdrop-filter:blur(16px) saturate(1.4);backdrop-filter:blur(16px) saturate(1.4);
  border-bottom:1px solid var(--line);opacity:0;transition:opacity .5s}
.hdr.scrolled{height:var(--hdr-s);color:var(--ink)}
.hdr.scrolled::before{opacity:1}
.hdr.away{transform:translateY(-100%)}
.lite .hdr::before{background:rgba(246,242,236,.97);-webkit-backdrop-filter:none;backdrop-filter:none}
/* the shop's filter bar stays tucked under the bar, and rises when the bar steps away */
.toolbar{transition:top .6s var(--ease-out)}
.hdr-away .toolbar{top:0!important}

.hdr .logo{position:relative;z-index:2;font-family:var(--serif);font-size:1.55rem;font-weight:400;letter-spacing:.35em;white-space:nowrap}
.hdr .logo b{color:var(--gold);font-weight:400;letter-spacing:0;margin-right:.5rem}

/* links in the middle: the word rolls up and comes back in gold; a gold dot marks the page you are on */
.hnav{margin-inline:auto}
.hnav ul{display:flex;gap:.2rem;list-style:none}
.hnav a{position:relative;display:block;height:40px;line-height:40px;padding:0 .95rem;border-radius:99px;overflow:hidden;font-size:.66rem;font-weight:400;letter-spacing:.24em;text-transform:uppercase}
.hnav a span{display:block;transition:transform .55s var(--ease-out);text-shadow:0 40px 0 var(--gold)}
.hnav a:hover span,.hnav a:focus-visible span{transform:translateY(-40px)}
.hnav a[aria-current="page"]::after{content:"";position:absolute;left:50%;bottom:3px;width:5px;height:5px;border-radius:50%;background:var(--gold);transform:translateX(-50%)}

.nav-right{position:relative;z-index:2;display:flex;align-items:center;gap:.6rem}

/* language: a pill with the current language filled */
.lang{display:inline-flex;align-items:center;height:40px;padding:4px;border-radius:99px;box-shadow:inset 0 0 0 1px var(--ring)}
.lang button{height:32px;min-width:36px;padding:0 .55rem;border:0;border-radius:99px;background:none;color:inherit;font:inherit;font-size:.62rem;letter-spacing:.16em;cursor:pointer;opacity:.7;transition:background .4s,color .4s,opacity .4s}
.lang button:hover{opacity:1}
.lang button.on{opacity:1;background:var(--ink);color:var(--ivory)}
.page-home .hdr:not(.scrolled) .lang button.on,.menu-open .hdr .lang button.on{background:var(--ivory);color:var(--ink)}

/* cart: a ring like the other round buttons */
.hdr .cart-btn{width:44px;height:44px;border:0;opacity:1;box-shadow:inset 0 0 0 1px var(--ring)}
.hdr .cart-btn:hover{background:var(--ink);color:var(--ivory)}
.page-home .hdr:not(.scrolled) .cart-btn:hover{background:var(--ivory);color:var(--ink)}

/* call to action: gold pill with a dark round arrow that turns on hover */
.hdr-cta{display:inline-flex;align-items:center;gap:.8rem;height:44px;padding:0 .4rem 0 1.25rem;border-radius:99px;white-space:nowrap;
  background:linear-gradient(120deg,#ead3a6,var(--gold) 62%,#c7a56c);color:var(--ink);font-size:.62rem;font-weight:500;letter-spacing:.22em;text-transform:uppercase;
  box-shadow:0 10px 24px -14px rgba(90,46,28,.65);transition:transform .5s var(--ease-out),box-shadow .5s}
.hdr-cta:hover{transform:translateY(-1px);box-shadow:0 16px 30px -16px rgba(90,46,28,.75)}
.hdr-cta .arr{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--ink);color:#f1dcb0;transition:transform .6s var(--ease-out),background .5s,color .5s}
.hdr-cta:hover .arr{transform:rotate(-45deg);background:var(--ivory);color:var(--ink)}

/* menu button: a ring with two lines that cross into an X */
.burger{display:none;position:relative;width:44px;height:44px;padding:0;border:0;border-radius:50%;background:none;color:inherit;cursor:pointer;box-shadow:inset 0 0 0 1px var(--ring)}
.burger i{position:absolute;left:14px;right:14px;top:50%;height:1.5px;margin-top:-.75px;border-radius:2px;background:currentColor;transition:transform .5s var(--ease-out)}
.burger i:first-child{transform:translateY(-4px)}
.burger i:last-child{transform:translateY(4px)}
.menu-open .burger i:first-child{transform:rotate(45deg)}
.menu-open .burger i:last-child{transform:rotate(-45deg)}

/* while the menu is open the bar floats, light on dark, above it */
.menu-open .hdr{color:var(--ivory);transform:none}
.menu-open .hdr::before{opacity:0}
.menu-open .hdr .cart-btn,.menu-open .hdr .hdr-cta{opacity:0;pointer-events:none}

/* ---------- full-screen menu ---------- */
.mmenu{position:fixed;inset:0;z-index:98;display:flex;flex-direction:column;justify-content:space-between;overflow-y:auto;overscroll-behavior:contain;
  padding:calc(var(--hdr-top) + 1rem) clamp(1.3rem,7vw,7rem) calc(1.6rem + env(safe-area-inset-bottom));color:var(--ivory);
  background:radial-gradient(120% 70% at 85% 0%,#3b2a1c 0%,#1d1612 55%,#140f0c 100%);
  clip-path:circle(0 at var(--mx,calc(100% - 3rem)) var(--my,3rem));visibility:hidden;transition:clip-path .9s cubic-bezier(.76,0,.24,1),visibility 0s .9s}
.menu-open .mmenu{clip-path:circle(150vmax at var(--mx,calc(100% - 3rem)) var(--my,3rem));visibility:visible;transition:clip-path .9s cubic-bezier(.76,0,.24,1)}
.mm-links{flex:1;display:grid;align-content:center;gap:.15rem}
.mm-links a{display:flex;align-items:baseline;gap:1rem;width:fit-content;overflow:hidden;font-family:var(--serif);font-weight:300;font-size:clamp(2.3rem,6.5vw,4.4rem);line-height:1.12}
.mm-links a>span,.mm-links a small{display:inline-block;transform:translateY(110%);transition:transform .8s var(--ease-out),color .4s}
.menu-open .mm-links a>span,.menu-open .mm-links a small{transform:none;transition-delay:calc(.25s + var(--i) * .045s),0s}
.mm-links a:hover>span,.mm-links a:focus-visible>span{color:#f1dcb0;font-style:italic}
.mm-links a.sub{font-size:clamp(1.35rem,3.6vw,2.2rem);padding-left:clamp(.3rem,3vw,3rem);color:rgba(246,242,236,.72)}
.mm-links a small{font-family:var(--sans);font-size:.6rem;letter-spacing:.22em;color:var(--gold)}
.mm-foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.6rem 1.5rem;margin-top:1.6rem;padding-top:1.2rem;border-top:1px solid rgba(233,207,159,.18);
  font-size:.8rem;line-height:1.7;color:rgba(246,242,236,.55);opacity:0;transition:opacity .5s}
.menu-open .mm-foot{opacity:1;transition-delay:.6s}
.mm-foot a{color:var(--ivory)}

/* ---------- footer ---------- */
.ftr{position:relative;background:var(--teak);color:rgba(246,242,236,.62);padding:clamp(4rem,8vw,6rem) var(--gut) 2rem}
.ftr-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.35fr;gap:2.5rem;align-items:start;padding-bottom:3rem;border-bottom:1px solid rgba(233,207,159,.16)}
.ftr-logo{display:inline-block;font-family:var(--serif);font-size:clamp(1.9rem,3vw,2.5rem);font-weight:300;letter-spacing:.32em;color:var(--ivory)}
.ftr-logo b{color:var(--gold);font-weight:400;letter-spacing:0;margin-right:.55rem}
.ftr-brand p{max-width:22rem;margin-top:1rem;font-family:var(--serif);font-style:italic;font-size:1.15rem;line-height:1.5;color:rgba(246,242,236,.72)}
.ftr-ig{display:inline-flex;align-items:center;gap:.5rem;height:40px;margin-top:1.4rem;padding:0 1.1rem;border-radius:99px;box-shadow:inset 0 0 0 1px rgba(233,207,159,.32);
  font-size:.6rem;letter-spacing:.22em;text-transform:uppercase;color:var(--ivory);transition:background .4s,color .4s}
.ftr-ig:hover{background:#f1dcb0;color:var(--ink)}
.ftr-col h2{margin-bottom:1.1rem;font-family:var(--sans);font-size:.6rem;font-weight:500;letter-spacing:.26em;text-transform:uppercase;color:var(--gold)}
.ftr-col ul{display:flex;flex-direction:column;gap:.7rem;list-style:none}
.ftr-col li{font-size:.9rem;line-height:1.5}
.ftr-col a{position:relative;display:inline-block;color:rgba(246,242,236,.75);transition:color .3s}
.ftr-col a::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:100% 50%;transition:transform .45s var(--ease-out)}
.ftr-col a:hover{color:#f1dcb0}
.ftr-col a:hover::after{transform:scaleX(1);transform-origin:0 50%}
.ftr-hours{font-size:.82rem;color:rgba(246,242,236,.5)}
.ftr-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.7rem 1.5rem;padding-top:1.6rem;font-size:.72rem;letter-spacing:.03em;color:rgba(246,242,236,.5)}
.ftr-legal{display:flex;flex-wrap:wrap;gap:.4rem 1.3rem}
.ftr-legal a{transition:color .3s}
.ftr-legal a:hover{color:#f1dcb0}

/* ---------- smaller screens ---------- */
@media (max-width:1180px){
  .hnav{display:none}
  .burger{display:grid}
  .nav-right{margin-left:auto}
}
@media (max-width:1000px){
  .ftr-grid{grid-template-columns:1fr 1fr;gap:2.4rem 1.5rem}
  .ftr-brand{grid-column:1/-1}
}
/* phones: name on the left, language and menu on the right (cart and shop are in the dock),
   and a gold thread under the bar that fills up as the page is read */
@media (max-width:760px){
  :root{--hdr-top:66px;--hdr-s:60px}
  .hdr{gap:.6rem}
  .hdr .logo{font-size:1.2rem;letter-spacing:.4em}
  .hdr .logo b{margin-right:.35rem}
  .hdr .cart-btn,.hdr-cta{display:none}
  .lang{height:38px}
  .lang button{height:30px;min-width:34px;padding:0 .45rem}
  .burger{width:42px;height:42px}
  .burger i{left:13px;right:13px}
  .hdr::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1.5px;background:linear-gradient(90deg,#f1dcb0,var(--gold) 60%,#8a6b3c);transform:scaleX(var(--p,0));transform-origin:left;pointer-events:none}
  .menu-open .hdr::after{opacity:0}
  .mm-links a{font-size:clamp(2.1rem,10vw,3rem)}
  .mm-links a.sub{font-size:clamp(1.25rem,6vw,1.7rem)}
  .mm-foot{flex-direction:column}
  .ftr-col:last-child{grid-column:1/-1}
  .ftr-bottom{flex-direction:column;align-items:flex-start}
}
@media print{.hdr,.mmenu,.ftr{display:none!important}}

/* cookie banner (assets/common.js): only when Meta Pixel or Google Analytics are set up */
.consent{position:fixed;z-index:110;left:50%;bottom:calc(16px + env(safe-area-inset-bottom));transform:translateX(-50%);width:min(calc(100vw - 32px),560px);
  padding:1.3rem 1.4rem 1.2rem;background:var(--ivory);color:var(--ink);border:1px solid var(--line);box-shadow:0 18px 50px rgba(20,18,16,.18);
  font-family:var(--sans);font-size:.86rem;line-height:1.55;animation:consentIn .5s var(--ease-out) both}
.consent p{margin:0 1.4rem 1rem 0}
.consent p a{display:inline-block;margin-left:.3rem;color:var(--muted);text-decoration:underline;text-underline-offset:3px}
.consent-acts{display:flex;gap:.6rem;justify-content:flex-end}
.consent-acts .btn{flex:0 1 9rem;justify-content:center}
.consent-x{position:absolute;top:.4rem;right:.5rem;width:2rem;height:2rem;border:0;background:none;color:var(--muted);font-size:1.4rem;line-height:1;cursor:pointer}
@keyframes consentIn{from{opacity:0;transform:translate(-50%,16px)}}
@media (max-width:760px){
  .consent{bottom:calc(120px + env(safe-area-inset-bottom));font-size:.8rem;padding:1.1rem 1.1rem 1rem}
  .consent-acts .btn{flex:1}
}