/* ==========================================================================
   WEFT — Structural Layout
   Loading screen, header/nav, mobile menu, footer, drawer & modal shells
   ========================================================================== */

/* -------------------- LOADING SCREEN -------------------- */
.loader{
  position:fixed;inset:0;z-index:9999;
  background:var(--charcoal);
  display:flex;align-items:center;justify-content:center;
  transition:opacity .8s var(--ease-luxe),visibility .8s var(--ease-luxe);
}
.loader.done{opacity:0;visibility:hidden;pointer-events:none;}
.loader-mark{display:flex;flex-direction:column;align-items:center;gap:22px;}
.loader-mark svg{width:52px;height:52px;}
.loader-logo{height:64px;width:auto;max-width:70vw;}
.loader-bar{width:180px;height:1px;background:var(--line-dark);position:relative;overflow:hidden;}
.loader-bar::after{
  content:'';position:absolute;top:0;left:0;height:100%;width:40%;
  background:var(--gold-light);
  animation:loaderMove 1.1s var(--ease-soft) infinite;
}
.loader-word{font-family:var(--font-sans);font-size:10.5px;letter-spacing:.32em;text-transform:uppercase;color:var(--text-on-dark-soft);}

/* -------------------- HEADER / NAV -------------------- */
header{
  position:fixed;top:0;left:0;right:0;z-index:200;
  padding:18px 0;
  transition:padding .45s var(--ease-out),background-color .45s var(--ease-out),box-shadow .45s var(--ease-out),backdrop-filter .45s var(--ease-out),transform .5s var(--ease-out);
  background:rgba(27,24,21,0);
}
header.scrolled{
  padding:12px 0;
  background:rgba(251,248,243,.78);
  backdrop-filter:blur(18px) saturate(1.4);
  -webkit-backdrop-filter:blur(18px) saturate(1.4);
  box-shadow:0 1px 0 var(--line),0 20px 40px -28px rgba(18,16,9,.25);
}
header.hide{transform:translateY(-100%);}

nav.navbar{
  display:flex;align-items:center;justify-content:space-between;
  max-width:var(--container);margin:0 auto;padding:0 var(--gutter);
}

.logo{
  font-family:var(--font-display);
  font-size:20px;letter-spacing:.02em;
  color:var(--text-on-dark);
  display:flex;align-items:baseline;gap:2px;
  transition:color .45s var(--ease-out);
}
.logo em{font-style:normal;color:var(--gold-light);}
header.scrolled .logo{color:var(--text);}
header.scrolled .logo em{color:var(--gold);}
.logo img{height:40px;width:auto;display:block;}

.nav-links{display:none;align-items:center;gap:2px;}
.nav-links a{
  position:relative;
  font-size:12px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;
  color:var(--text-on-dark-soft);
  padding:10px 16px;
  transition:color .3s;
}
header.scrolled .nav-links a{color:var(--text-soft);}
.nav-links a:hover{color:var(--text-on-dark);}
header.scrolled .nav-links a:hover{color:var(--text);}
.nav-links a::after{
  content:'';position:absolute;left:16px;right:16px;bottom:6px;height:1px;
  background:currentColor;transform:scaleX(0);transform-origin:left;
  transition:transform .35s var(--ease-out);
}
.nav-links a:hover::after{transform:scaleX(1);}

.nav-right{display:flex;align-items:center;gap:6px;}
.currency-switch{display:flex;align-items:center;}
.currency-switch select{
  height:34px;padding:0 10px;border-radius:17px;border:1px solid currentColor;
  background:transparent;color:var(--text-on-dark);font-family:inherit;font-size:12px;
  font-weight:600;letter-spacing:.03em;cursor:pointer;transition:background .3s,color .3s;
}
header.scrolled .currency-switch select{color:var(--text);}
.currency-switch select:hover{background:var(--line-dark);}
header.scrolled .currency-switch select:hover{background:var(--line);}
.currency-switch select option{color:var(--text);background:var(--white);}
.nav-icon-btn{
  position:relative;
  width:40px;height:40px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  color:var(--text-on-dark);
  transition:background .3s,color .3s;
}
header.scrolled .nav-icon-btn{color:var(--text);}
.nav-icon-btn:hover{background:var(--line-dark);}
header.scrolled .nav-icon-btn:hover{background:var(--line);}
.nav-icon-btn svg{width:19px;height:19px;}
.nav-count{
  position:absolute;top:2px;right:2px;
  min-width:15px;height:15px;padding:0 3px;
  background:var(--gold);color:var(--white);
  border-radius:50%;font-size:9px;font-weight:700;
  display:flex;align-items:center;justify-content:center;
  transform:scale(0);transition:transform .35s var(--ease-out);
}
.nav-count.show{transform:scale(1);}
.nav-count.bump{animation:bump .4s var(--ease-out);}

.nav-cta{
  display:none;
  border:1px solid var(--line-dark);
  border-radius:var(--r-pill);
  padding:12px 24px;
  font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--text-on-dark);
  transition:all .35s var(--ease-out);
}
header.scrolled .nav-cta{color:var(--text);border-color:var(--line);}
.nav-cta:hover{background:var(--text-on-dark);color:var(--charcoal);}
header.scrolled .nav-cta:hover{background:var(--ink);color:var(--ivory);}

.burger{
  width:40px;height:40px;border-radius:50%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;
  color:var(--text-on-dark);
}
header.scrolled .burger{color:var(--text);}
.burger span{width:20px;height:1.5px;background:currentColor;transition:transform .35s var(--ease-out),opacity .35s var(--ease-out);}
.burger.open span:nth-child(1){transform:translateY(6.5px) rotate(45deg);}
.burger.open span:nth-child(2){opacity:0;}
.burger.open span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg);}

@media(min-width:1000px){
  .nav-links{display:flex;}
  .nav-cta{display:inline-block;}
  .burger{display:none;}
}

/* -------------------- MOBILE MENU -------------------- */
.mobile-menu{
  position:fixed;inset:0;z-index:190;
  background:var(--charcoal);
  display:flex;flex-direction:column;
  padding:calc(var(--header-h) + 20px) var(--gutter) 40px;
  opacity:0;visibility:hidden;
  transition:opacity .5s var(--ease-out),visibility .5s var(--ease-out);
}
.mobile-menu.open{opacity:1;visibility:visible;}
.mobile-menu-links{display:flex;flex-direction:column;gap:4px;margin-top:20px;}
.mobile-menu-links a{
  font-family:var(--font-display);
  font-size:clamp(30px,9vw,42px);
  color:var(--text-on-dark);
  padding:10px 0;
  opacity:0;transform:translateY(18px);
  transition:opacity .55s var(--ease-out),transform .55s var(--ease-out);
  display:flex;align-items:center;gap:16px;
}
.mobile-menu.open .mobile-menu-links a{opacity:1;transform:translateY(0);}
.mobile-menu-links a span{font-family:var(--font-sans);font-size:11px;color:var(--gold-light);letter-spacing:.1em;}
.mobile-menu-foot{
  margin-top:auto;padding-top:30px;border-top:1px solid var(--line-dark);
  display:flex;flex-direction:column;gap:14px;
  opacity:0;transition:opacity .6s .3s var(--ease-out);
}
.mobile-menu.open .mobile-menu-foot{opacity:1;}
.mobile-menu-foot a{font-size:13px;color:var(--text-on-dark-soft);}

/* -------------------- FOOTER -------------------- */
footer{
  background:var(--ink);color:var(--text-on-dark-soft);padding:80px 0 0;
  position:relative;overflow:hidden;z-index:2;
  border-radius:var(--r-lg) var(--r-lg) 0 0;margin-top:calc(var(--r-lg) * -1);
}
@media(min-width:1000px){
  footer{border-radius:var(--r-xl) var(--r-xl) 0 0;margin-top:calc(var(--r-xl) * -1);}
}
.footer-top{display:grid;grid-template-columns:1fr;gap:48px;padding-bottom:56px;border-bottom:1px solid var(--line-dark-soft);}
.footer-brand{max-width:340px;}
.footer-logo{font-family:var(--font-display);font-size:26px;color:var(--text-on-dark);margin-bottom:18px;}
.footer-logo img{height:54px;width:auto;display:block;}
.footer-logo em{font-style:normal;color:var(--gold-light);}
.footer-brand p{font-size:14px;line-height:1.75;color:var(--text-on-dark-soft);}
.footer-cols{display:grid;grid-template-columns:1fr 1fr;gap:36px;}
.footer-col h4{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--text-on-dark);margin-bottom:20px;font-weight:600;}
.footer-links{display:flex;flex-direction:column;gap:13px;}
.footer-links a{font-size:14px;color:var(--text-on-dark-soft);transition:color .3s,padding-left .3s;}
.footer-links a:hover{color:var(--gold-light);padding-left:4px;}
.footer-contact{display:flex;flex-direction:column;gap:16px;}
.footer-contact div{font-size:14px;line-height:1.6;}
.footer-contact b{display:block;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-on-dark);margin-bottom:5px;font-weight:600;}
.footer-bottom{display:flex;flex-direction:column;gap:18px;align-items:flex-start;padding:30px 0 34px;font-size:12.5px;color:#79705f;}
.footer-socials{display:flex;gap:10px;}
.footer-socials a{
  width:38px;height:38px;border:1px solid var(--line-dark-soft);border-radius:50%;
  display:flex;align-items:center;justify-content:center;transition:all .3s;
}
.footer-socials a svg{width:15px;height:15px;}
.footer-socials a:hover{background:var(--gold);border-color:var(--gold);color:var(--ink);}
.footer-wordmark{
  font-family:var(--font-display);font-size:min(22vw,240px);line-height:.75;
  color:transparent;-webkit-text-stroke:1px var(--line-dark-soft);
  text-align:center;padding:20px 0 0;user-select:none;letter-spacing:-.02em;
}

@media(min-width:700px){
  .footer-top{grid-template-columns:1.1fr 1fr;}
}
@media(min-width:1000px){
  .footer-top{grid-template-columns:1.3fr .8fr .8fr 1fr;gap:40px;}
  .footer-cols{display:contents;}
  .footer-bottom{flex-direction:row;align-items:center;justify-content:space-between;}
}

/* -------------------- OVERLAY (shared backdrop for drawers/modal) -------------------- */
.overlay{
  position:fixed;inset:0;z-index:300;
  background:rgba(18,16,9,.55);
  backdrop-filter:blur(4px);
  opacity:0;visibility:hidden;
  transition:opacity .5s var(--ease-out),visibility .5s var(--ease-out);
}
.overlay.open{opacity:1;visibility:visible;}

/* -------------------- DRAWER SHELL (cart / wishlist) -------------------- */
.drawer{
  position:fixed;top:0;right:0;bottom:0;z-index:310;
  width:min(420px,100vw);
  background:var(--ivory);
  box-shadow:var(--shadow-lg);
  display:flex;flex-direction:column;
  transform:translateX(100%);
  transition:transform .55s var(--ease-luxe);
}
.drawer.open{transform:translateX(0);}
.drawer-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:22px var(--gutter);border-bottom:1px solid var(--line);flex-shrink:0;
}
.drawer-head h3{font-size:14px;letter-spacing:.14em;text-transform:uppercase;font-family:var(--font-sans);font-weight:600;}
.drawer-close{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;transition:background .3s,transform .3s;}
.drawer-close:hover{background:var(--line);transform:rotate(90deg);}
.drawer-close svg{width:16px;height:16px;}
.drawer-body{flex:1;overflow-y:auto;padding:10px var(--gutter);}
.drawer-foot{padding:22px var(--gutter) 28px;border-top:1px solid var(--line);flex-shrink:0;}

/* -------------------- MODAL SHELL (quick view) -------------------- */
.modal{
  position:fixed;inset:0;z-index:320;
  display:flex;align-items:flex-end;justify-content:center;
  opacity:0;visibility:hidden;
  transition:opacity .5s var(--ease-out),visibility .5s var(--ease-out);
}
.modal.open{opacity:1;visibility:visible;}
.modal-panel{
  width:100%;max-height:92vh;
  background:var(--ivory);
  border-radius:var(--r-lg) var(--r-lg) 0 0;
  overflow-y:auto;
  transform:translateY(100%);
  transition:transform .55s var(--ease-luxe);
  position:relative;
}
.modal.open .modal-panel{transform:translateY(0);}
.modal-close{
  position:sticky;top:16px;margin-left:auto;margin-right:16px;z-index:5;
  width:38px;height:38px;border-radius:50%;
  background:var(--ivory);box-shadow:var(--shadow-sm);
  display:flex;align-items:center;justify-content:center;
  transition:transform .3s,background .3s;
}
.modal-close:hover{transform:rotate(90deg);background:var(--line);}
.modal-close svg{width:16px;height:16px;}

@media(min-width:820px){
  .modal{align-items:center;padding:40px;}
  .modal-panel{
    width:min(920px,100%);max-height:min(680px,88vh);
    border-radius:var(--r-lg);
    transform:translateY(24px) scale(.96);
  }
  .modal.open .modal-panel{transform:translateY(0) scale(1);}
}