/* Shared storefront header + footer — responsive at desktop / tablet / phone / narrow. */
/* Always reserve the scrollbar's space so the centred nav doesn't jump between short and long pages. */
html{scrollbar-gutter:stable}
header.site-chrome,
header.site-chrome *,
footer.site-chrome,
footer.site-chrome *{box-sizing:border-box}

header.site-chrome,
header:has(> .wrap > nav),
header:has(> nav){
  position:sticky;top:0;z-index:60;background:var(--black,#0C0B09);
  border-bottom:1px solid rgba(201,162,74,.2);
  text-align:left;padding:0;
  width:100%;max-width:100vw;
  overflow:visible;
}
header .wrap,
header.site-chrome .wrap{
  max-width:1180px;margin:0 auto;padding:0 24px;
  width:100%;overflow:visible;box-sizing:border-box;
}
header nav,
header.site-chrome nav{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  height:80px;position:relative;max-width:1180px;margin:0 auto;
  width:100%;overflow:visible;min-width:0;box-sizing:border-box;
}
header > nav{padding:0 24px}
.brand{
  display:flex;align-items:center;height:100%;overflow:visible;
  flex:0 1 auto;min-width:0;max-width:min(120px,28%);z-index:1;
}
/* Logo = logo-header.png, the transparent mark trimmed to its edges (nav-auth.js repeats these sizes). */
.brand img{
  height:66px!important;width:auto;max-width:100%!important;max-height:66px!important;display:block;
  transform:none!important;margin:0;object-fit:contain;
}
.nav-links{
  display:flex;align-items:center;gap:26px;
  font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:#c9c2b5;
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  z-index:0;line-height:1;height:auto;margin:0;padding:0;
  white-space:nowrap;
}
.nav-links a,
.nav-links a:link,
.nav-links a:visited,
.nav-links a:hover,
.nav-links a:active,
.nav-links a:focus{
  color:#c9c2b5;text-decoration:none!important;border-bottom:none;
  display:inline-flex;align-items:center;line-height:1;padding:0;
}
.nav-links a:hover{color:#fff}
.nav-links a.nav-active,
.nav-links a.nav-active:link,
.nav-links a.nav-active:visited{
  color:var(--gold-2,#C9A24A)!important;font-weight:600;
}
.nav-actions{
  display:flex;align-items:center;justify-content:flex-end;gap:8px;
  flex:0 0 auto;z-index:2;min-height:40px;min-width:0;margin-left:auto;
  max-width:58%;
}
.cartbtn{
  display:inline-flex;align-items:center;gap:8px;
  border:1px solid rgba(201,162,74,.4);color:#f2ede2;
  padding:9px 16px;border-radius:30px;font-size:12px;letter-spacing:.12em;
  text-transform:uppercase;cursor:pointer;background:transparent;text-decoration:none;
  font-family:inherit;margin-left:0;line-height:1;height:40px;
  white-space:nowrap;flex:0 0 auto;box-sizing:border-box;
}
.cartbtn:hover{color:#fff}
.cartbtn .cart-label{font:inherit;letter-spacing:inherit;text-transform:inherit}
.cartbtn .count{
  min-width:19px;height:19px;border-radius:20px;
  background:linear-gradient(135deg,#E7C882,#C9A24A 45%,#A67C1E);
  color:#1a1207;font-weight:600;display:grid;place-items:center;font-size:11px;
}
.navtoggle{
  display:none;align-items:center;justify-content:center;
  background:none;border:1px solid rgba(201,162,74,.4);
  color:#f2ede2;font-size:18px;line-height:1;cursor:pointer;
  padding:0;border-radius:8px;margin-left:0;font-family:inherit;
  flex:0 0 auto;height:40px;width:40px;min-width:40px;box-sizing:border-box;
}
a.nav-account,
a.nav-account:link,
a.nav-account:visited{
  display:inline-flex!important;align-items:center;gap:8px;
  color:#f2ede2!important;letter-spacing:.08em;
  border:1px solid rgba(201,162,74,.5)!important;
  border-radius:999px;padding:6px 14px 6px 7px!important;
  text-transform:none!important;font-size:12px!important;font-weight:500!important;
  background:rgba(255,255,255,.05)!important;text-decoration:none!important;
  box-shadow:none!important;height:40px;
  flex:0 1 auto;max-width:100%;white-space:nowrap;box-sizing:border-box;
}
a.nav-account:hover{color:#fff!important;border-color:rgba(231,201,130,.85)!important;background:rgba(255,255,255,.1)!important}
a.nav-account .nav-account-icon,
.nav-account-icon{
  width:24px;height:24px;border-radius:50%;
  display:grid;place-items:center;flex:0 0 auto;
  background:linear-gradient(135deg,#E7C882,#A67C1E);color:#1a1207;
}
a.nav-account .nav-account-icon svg,
.nav-account-icon svg{width:13px;height:13px;display:block}
a.nav-account .nav-account-label,
.nav-account-label{
  max-width:9em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  letter-spacing:.1em;text-transform:uppercase;font-size:11px;
}

/* ========== FOOTER ========== */
footer.site-chrome,
body > footer.site-chrome{
  background:var(--black,#0C0B09);color:#a8a196;
  padding:12px 20px 36px;text-align:center;margin-top:40px;
  overflow:hidden;width:100%;max-width:100vw;
}
.cta-band + footer.site-chrome,
.cta-band + footer,
body > .cta-band + footer.site-chrome{
  margin-top:0!important;padding-top:4px;
}
.footer-inner{
  max-width:720px;margin:0 auto;width:100%;
  display:flex;flex-direction:column;align-items:center;
  padding:0 4px;box-sizing:border-box;
}
footer.site-chrome img,
footer.site-chrome .footer-logo,
body > footer.site-chrome > img,
body > footer > img{
  height:160px!important;width:auto;max-width:min(280px,72vw);display:block;
  margin:4px auto 8px!important;
  transform:none!important;object-fit:contain;
}
footer.site-chrome p,
footer.site-chrome .footer-tag,
body > footer > p{
  font-size:13px;max-width:440px;margin:0 auto 8px;color:#a8a196;
  padding:0 8px;line-height:1.55;
}
footer.site-chrome a,
body > footer a{color:inherit;text-decoration:none}
footer.site-chrome a:hover,
body > footer a:hover{color:#E7C882}
footer .small,
footer .fsmall,
footer .footer-meta{
  color:#9a9284;font-size:12px;margin-top:12px;max-width:520px;width:100%;
  padding:0 8px;line-height:1.5;word-break:break-word;overflow-wrap:anywhere;
}
.footer-nav{
  display:flex;flex-wrap:wrap;justify-content:center;align-items:center;
  gap:8px 4px;margin:16px auto 4px;max-width:560px;width:100%;padding:0 4px;
}
.footer-nav a,
.footer-nav a.footer-cookie-btn,
footer.site-chrome a[data-cookie-settings],
footer a[data-cookie-settings]{
  color:#a8a196;font-size:12px!important;font-weight:400!important;padding:6px 10px;line-height:1.3!important;
  letter-spacing:normal!important;text-transform:none!important;
  text-decoration:none!important;border-radius:6px;
  appearance:none;-webkit-appearance:none;background:transparent;border:0;margin:0;
  cursor:pointer;font-family:inherit;display:inline;vertical-align:baseline;
  box-shadow:none;outline:none;
  -webkit-text-size-adjust:100%;text-size-adjust:100%;
}
.footer-nav a:hover,
.footer-nav a.footer-cookie-btn:hover,
footer.site-chrome a[data-cookie-settings]:hover,
footer a[data-cookie-settings]:hover{color:#E7C882;background:rgba(255,255,255,.04)}
.footer-nav a + a::before{
  content:"·";margin-right:10px;color:#6d675b;pointer-events:none;font-size:12px!important;font-weight:400!important;
}
.footer-stores{
  display:flex;gap:10px;justify-content:center;flex-wrap:wrap;
  margin:18px auto 6px;max-width:420px;width:100%;padding:0 4px;
}
.footer-store{
  display:inline-flex!important;align-items:center;gap:10px;
  background:#16140f;color:#f2ede2!important;
  border:1px solid rgba(201,162,74,.35);
  padding:10px 16px;border-radius:12px;min-width:0;flex:1 1 150px;max-width:200px;
  text-decoration:none!important;transition:border-color .15s,background .15s;
  box-sizing:border-box;
}
.footer-store:hover{border-color:rgba(231,201,130,.7);background:#1c1913;color:#fff!important}
.footer-store-txt{text-align:left;line-height:1.15;min-width:0}
.footer-store-eye{display:block;font-size:9px;letter-spacing:.06em;text-transform:uppercase;opacity:.75;color:#c9c2b5}
.footer-store-name{display:block;font-size:13px;font-weight:600;color:#f2ede2}

/* ---- 1) Large tablet ---- */
@media(max-width:1100px){
  .nav-links{gap:16px;font-size:11px;letter-spacing:.11em}
  .brand{max-width:min(110px,30%)}
  .brand img{
    height:60px!important;max-height:60px!important;transform:none!important;margin:0;
  }
  header nav,header.site-chrome nav{height:74px}
}

/* ---- 2) Tablet ---- */
@media(max-width:980px){
  header nav,header.site-chrome nav{height:68px;gap:8px}
  header .wrap,header.site-chrome .wrap,header > nav{padding:0 16px}
  .brand{max-width:26%}
  .brand img{
    height:54px!important;max-height:54px!important;transform:none!important;margin:0;
  }
  .nav-links{gap:14px;font-size:10.5px;letter-spacing:.1em}
  .nav-actions{gap:6px;max-width:62%}
  .cartbtn{padding:8px 12px;height:36px;font-size:11px}
  a.nav-account,a.nav-account:link,a.nav-account:visited{
    height:36px!important;padding:5px 10px 5px 5px!important;gap:6px!important;
  }
  a.nav-account .nav-account-icon,.nav-account-icon{width:22px;height:22px}
  .navtoggle{height:36px;width:36px;min-width:36px}

  footer.site-chrome{padding:10px 16px 32px}
  footer.site-chrome img,
  footer.site-chrome .footer-logo{
    height:130px!important;max-width:min(240px,70vw);
    margin:4px auto 8px!important;
  }
}

/* ---- 3) Compact tablet / phone: hamburger + compact chrome ---- */
@media(max-width:860px){
  .navtoggle{display:inline-flex}
  header nav,header.site-chrome nav{height:58px;gap:6px}
  header .wrap,header.site-chrome .wrap,header > nav{padding:0 12px}
  .brand{max-width:34%;overflow:visible}
  .brand img{
    height:50px!important;max-height:50px!important;transform:none!important;margin:0;
  }
  .nav-actions{gap:5px;max-width:none}
  header nav .nav-links,
  header.site-chrome .nav-links{
    display:none;position:absolute;top:58px;left:0;right:0;
    transform:none;background:var(--black,#0C0B09);flex-direction:column;gap:0;
    padding:4px 0 8px;border-bottom:1px solid rgba(201,162,74,.2);z-index:41;
    width:100%;white-space:normal;box-shadow:0 12px 28px rgba(0,0,0,.35);
  }
  header nav .nav-links.open,
  header.site-chrome .nav-links.open{display:flex}
  header nav .nav-links a,
  header.site-chrome .nav-links a{
    padding:14px 16px;width:100%;box-sizing:border-box;
  }
  /* Icon-only account as soon as hamburger shows — prevents overflow */
  header .nav-actions a.nav-account,
  header .nav-actions a.nav-account:link,
  header .nav-actions a.nav-account:visited{
    margin:0!important;width:36px!important;height:36px!important;min-width:36px;
    padding:0!important;justify-content:center!important;gap:0!important;
    border-radius:50%!important;max-width:none!important;
  }
  header .nav-actions .nav-account-label{display:none!important}
  header .nav-actions .nav-account-icon{
    width:36px;height:36px;background:transparent;color:#E7C882;
  }
  header .nav-actions .nav-account-icon svg{width:18px;height:18px;stroke:#E7C882}
  .cartbtn{
    margin-left:0;padding:0 10px;height:36px;font-size:10px;letter-spacing:.08em;gap:5px;
  }
  .cartbtn .count{min-width:17px;height:17px;font-size:10px}
  .navtoggle{height:36px;width:36px;min-width:36px;font-size:18px}
  /* 36px icons, 44px-tall touch areas (invisible, so the header looks the same) */
  header .nav-actions a.nav-account,header .nav-actions .cartbtn,header .nav-actions .navtoggle{position:relative}
  header .nav-actions a.nav-account::after,header .nav-actions .cartbtn::after,header .nav-actions .navtoggle::after{
    content:"";position:absolute;inset:-4px -2px;
  }

  .footer-nav{gap:4px 0;max-width:100%}
  .footer-nav a,
  .footer-nav a.footer-cookie-btn{padding:8px 10px;font-size:12px!important;font-weight:400!important}
  .footer-nav a + a::before{margin-right:8px}
  .footer-stores{gap:8px}
  .footer-store{flex:1 1 calc(50% - 8px);max-width:none;min-width:140px}
}

/* ---- 4) Phone ---- */
@media(max-width:640px){
  header nav,header.site-chrome nav{height:54px;gap:5px}
  header .wrap,header.site-chrome .wrap,header > nav{padding:0 10px}
  .brand{max-width:34%}
  .brand img{
    height:48px!important;max-height:48px!important;transform:none!important;margin:0;
  }
  header nav .nav-links,
  header.site-chrome .nav-links{top:54px}
  .cartbtn .cart-label{display:none}

  footer.site-chrome{padding:8px 12px 28px;margin-top:28px}
  footer.site-chrome img,
  footer.site-chrome .footer-logo{
    height:110px!important;max-width:min(200px,70vw);
    margin:4px auto 8px!important;
  }
  footer.site-chrome .footer-tag,
  footer.site-chrome p{font-size:12.5px;max-width:100%}
  .footer-stores{gap:8px;margin:14px auto 4px;flex-direction:column;align-items:stretch}
  .footer-store{
    flex:1 1 auto;max-width:100%;width:100%;
    justify-content:center;padding:12px 14px;
  }
  .footer-nav{
    display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
    gap:2px;width:100%;max-width:360px;margin:14px auto 6px;
  }
  .footer-nav a,
  .footer-nav a.footer-cookie-btn{
    display:block;text-align:center;padding:11px 8px;font-size:12px!important;font-weight:400!important;width:100%;
  }
  .footer-nav a + a::before{content:none;margin:0}
  footer .footer-meta{font-size:12px;margin-top:10px}
  .footer-store-eye{font-size:12px}
  /* finger-sized touch area for the e-mail link, same look */
  footer .footer-meta a{position:relative}
  footer .footer-meta a::before{content:"";position:absolute;inset:-14px -4px}
}

/* ---- Narrow phone ---- */
@media(max-width:400px){
  header .wrap,header.site-chrome .wrap,header > nav{padding:0 8px}
  .brand{max-width:32%}
  .brand img{
    height:46px!important;max-height:46px!important;transform:none!important;margin:0;
  }
  .nav-actions{gap:4px}
  .cartbtn{padding:0 8px}
  footer.site-chrome img,
  footer.site-chrome .footer-logo{
    height:96px!important;margin:4px auto 8px!important;
  }
}
@media(max-width:360px){
  .cartbtn{padding:0 6px;font-size:9px}
  .navtoggle{width:34px;min-width:34px;height:34px}
  header .nav-actions a.nav-account{
    width:34px!important;height:34px!important;min-width:34px;
  }
}