:root{
    --bg-deep:#1E0F2B;
    --bg-mid:#341943;
    --bg-soft:#4A235A;
    --gold-light:#F4E5B0;
    --gold:#D4AF37;
    --gold-deep:#AA7C11;
    --ink:#F6EFE4;
    --ink-muted:#C7B7D6;
    --line: rgba(212,175,55,0.28);
    --shadow: rgba(6,2,10,0.55);
    --font-display:'Cormorant Garamond','Amiri',serif;
    --font-label:'Cinzel','Amiri',serif;
    --font-body:'Jost','Tajawal',sans-serif;
    --max-w: 1180px;
  }
  html[data-lang="ar"]{
    --font-display:'Amiri','Cormorant Garamond',serif;
    --font-label:'Tajawal',sans-serif;
    --font-body:'Tajawal',sans-serif;
  }
  *{box-sizing:border-box; margin:0; padding:0;}
  html{scroll-behavior:smooth;}
  body{
    background:var(--bg-deep);
    color:var(--ink);
    font-family:var(--font-body);
    font-weight:300;
    line-height:1.7;
    overflow-x:hidden;
    background-image:
      radial-gradient(ellipse 900px 600px at 12% -5%, rgba(212,175,55,0.10), transparent 60%),
      radial-gradient(ellipse 700px 500px at 100% 20%, rgba(74,35,90,0.55), transparent 60%),
      radial-gradient(ellipse 900px 700px at 50% 100%, rgba(52,25,67,0.65), transparent 55%);
    background-attachment:fixed;
  }
  img{max-width:100%; display:block;}
  a{color:inherit; text-decoration:none;}
  button{font:inherit; cursor:pointer;}
  .container{max-width:var(--max-w); margin:0 auto; padding:0 28px;}
  .eyebrow{
    font-family:var(--font-label);
    font-size:0.78rem;
    letter-spacing:0.22em;
    text-transform:uppercase;
    color:var(--gold);
    font-weight:600;
  }
  h1,h2,h3{font-family:var(--font-display); font-weight:600; text-wrap:balance; color:var(--gold-light);}
  .gold-text{
    background:linear-gradient(180deg, var(--gold-light) 0%, var(--gold) 55%, var(--gold-deep) 100%);
    -webkit-background-clip:text; background-clip:text; color:transparent;
  }
  .hairline{height:1px; background:linear-gradient(90deg, transparent, var(--line) 20%, var(--line) 80%, transparent);}
  .btn{
    position:relative; overflow:hidden; display:inline-flex; align-items:center; gap:10px;
    padding:15px 34px; font-family:var(--font-label); font-size:0.8rem; letter-spacing:0.14em;
    text-transform:uppercase; font-weight:600; border-radius:3px; transition:transform .35s ease, box-shadow .35s ease;
  }
  .btn-primary{ background:linear-gradient(135deg, var(--gold-light), var(--gold) 60%, var(--gold-deep)); color:var(--bg-deep); }
  .btn-primary:hover{ transform:translateY(-2px); box-shadow:0 12px 30px -8px rgba(212,175,55,0.55); }
  .btn-outline{ border:1px solid var(--line); color:var(--gold-light); background:rgba(244,229,176,0.04); }
  .btn-outline:hover{ border-color:var(--gold); background:rgba(212,175,55,0.10); transform:translateY(-2px); }
  .btn::after{
    content:''; position:absolute; top:0; left:-60%; width:40%; height:100%;
    background:linear-gradient(115deg, transparent, rgba(255,255,255,0.55), transparent);
    transform:skewX(-20deg) translateX(0); transition:transform .7s ease;
  }
  .btn:hover::after{ transform:skewX(-20deg) translateX(340%); }

  /* ---------- Header ---------- */
  header{
    position:fixed; top:0; left:0; right:0; z-index:50;
    padding:22px 0; transition:padding .4s ease, background .4s ease, backdrop-filter .4s ease, box-shadow .4s ease;
  }
  header.scrolled{
    padding:12px 0; background:rgba(30,15,43,0.86); backdrop-filter:blur(14px);
    box-shadow:0 12px 30px -12px var(--shadow); border-bottom:1px solid var(--line);
  }
  .nav-inner{display:flex; align-items:center; justify-content:space-between; gap:24px;}
  .brand{display:flex; align-items:center; gap:12px; flex-shrink:0;}
  .brand img{width:38px; height:38px; object-fit:contain;}
  .brand-name{font-family:var(--font-label); font-size:1.05rem; letter-spacing:0.16em; color:var(--gold-light);}
  nav.links{display:flex; align-items:center; gap:34px;}
  nav.links a{font-family:var(--font-label); font-size:0.72rem; letter-spacing:0.14em; text-transform:uppercase; color:var(--ink-muted); transition:color .3s ease; position:relative; padding-bottom:4px;}
  nav.links a::after{content:''; position:absolute; left:0; bottom:0; width:0; height:1px; background:var(--gold); transition:width .3s ease;}
  nav.links a:hover{color:var(--gold-light);}
  nav.links a:hover::after{width:100%;}
  .header-actions{display:flex; align-items:center; gap:16px;}
  #langBtn{
    font-family:var(--font-label); font-size:0.7rem; letter-spacing:0.12em; text-transform:uppercase;
    color:var(--gold-light); border:1px solid var(--line); background:transparent; padding:8px 14px; border-radius:3px;
    transition:all .3s ease;
  }
  #langBtn:hover{ border-color:var(--gold); background:rgba(212,175,55,0.10); }
  .header-cta{ padding:10px 22px; font-size:0.68rem; }
  .menu-toggle{display:none; flex-direction:column; gap:5px; background:none; border:none; padding:6px;}
  .menu-toggle span{width:22px; height:1px; background:var(--gold-light); transition:transform .3s ease, opacity .3s ease;}
  .menu-toggle.open span:nth-child(1){transform:translateY(6px) rotate(45deg);}
  .menu-toggle.open span:nth-child(2){opacity:0;}
  .menu-toggle.open span:nth-child(3){transform:translateY(-6px) rotate(-45deg);}

  /* ---------- Hero ---------- */
  .hero{
    min-height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center;
    text-align:center; padding:160px 28px 100px; position:relative;
  }
  .hero-icon-wrap{width:132px; height:132px; margin:0 auto 18px;}
  .hero-icon{width:100%; height:100%; filter:drop-shadow(0 18px 40px rgba(212,175,55,0.28));
    animation:float 7s ease-in-out infinite;}
  @keyframes float{ 0%,100%{transform:translateY(0);} 50%{transform:translateY(-14px);} }
  .hero .eyebrow{display:block; margin-bottom:22px;}
  .hero h1{font-size:clamp(2.6rem, 6vw, 5rem); line-height:1.08; margin-bottom:22px;}
  .hero p.sub{max-width:560px; margin:0 auto 42px; color:var(--ink-muted); font-size:1.05rem; font-weight:300;}
  .hero-ctas{display:flex; gap:18px; flex-wrap:wrap; justify-content:center;}
  .scroll-cue{position:absolute; bottom:36px; left:50%; transform:translateX(-50%); width:1px; height:52px;
    background:linear-gradient(var(--gold), transparent); }
  .scroll-cue::after{content:''; position:absolute; top:0; left:-2px; width:5px; height:5px; border-radius:50%;
    background:var(--gold-light); animation:drip 2.4s ease-in-out infinite;}
  @keyframes drip{ 0%{top:0; opacity:1;} 90%{opacity:0;} 100%{top:100%; opacity:0;} }

  /* ---------- Section shell ---------- */
  section{padding:120px 0; position:relative;}
  .section-head{max-width:640px; margin-bottom:64px;}
  .section-head.center{margin-left:auto; margin-right:auto; text-align:center;}
  .section-head h2{font-size:clamp(2rem, 3.6vw, 2.9rem); margin-top:14px;}

  /* ---------- Collections ---------- */
  .collections-grid{display:grid; grid-template-columns:repeat(3, 1fr); gap:30px;}
  .card{
    background:linear-gradient(165deg, rgba(74,35,90,0.55), rgba(30,15,43,0.85));
    border:1px solid var(--line);
    clip-path:polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 0 100%);
    padding:44px 32px 36px; position:relative; transition:transform .45s ease, border-color .45s ease, box-shadow .45s ease;
  }
  /* Grid cards are now plain links (image + name only — full details live on
     each product's own page), so reset the anchor defaults. */
  a.card{ display:block; text-decoration:none; color:inherit; cursor:pointer; }
  .card:hover{ transform:translateY(-8px); border-color:var(--gold); box-shadow:0 30px 60px -24px var(--shadow); }
  .card-icon{width:74px; height:74px; margin-bottom:26px;}
  .card h3{font-size:1.5rem; margin-bottom:0;}
  .card p.desc{color:var(--ink-muted); font-size:0.92rem; margin-bottom:26px; min-height:66px;}
  .card-foot{display:flex; align-items:center; justify-content:space-between; padding-top:20px; border-top:1px solid var(--line);}
  .price{font-family:var(--font-label); color:var(--gold-light); font-size:0.85rem; letter-spacing:0.08em;}
  .card-link{font-family:var(--font-label); font-size:0.66rem; letter-spacing:0.12em; text-transform:uppercase; color:var(--gold); display:inline-flex; align-items:center; gap:6px;}
  .card-link svg{width:12px; height:12px; transition:transform .3s ease;}
  .card-link:hover svg{transform:translateX(4px);}

  /* ---------- About ---------- */
  .about-wrap{display:grid; grid-template-columns:1.1fr 0.9fr; gap:80px; align-items:center;}
  .about-copy p{color:var(--ink-muted); font-size:1rem; margin-top:22px; max-width:520px;}
  .about-art{position:relative; display:flex; align-items:center; justify-content:center; height:100%;}
  .about-ring{width:100%; max-width:340px; aspect-ratio:1; border:1px solid var(--line); border-radius:50%; display:flex; align-items:center; justify-content:center; position:relative;}
  .about-ring::before{content:''; position:absolute; inset:26px; border:1px solid var(--line); border-radius:50%;}
  .about-ring img{width:96px; height:96px; opacity:0.92;}

  /* ---------- Why ---------- */
  .why-grid{display:grid; grid-template-columns:repeat(4, 1fr); gap:1px; background:var(--line); border:1px solid var(--line);}
  .why-item{background:var(--bg-deep); padding:38px 28px;}
  .why-item svg{width:30px; height:30px; margin-bottom:20px; color:var(--gold);}
  .why-item h3{font-size:1.08rem; margin-bottom:10px; font-family:var(--font-display); color:var(--gold-light); font-weight:600;}
  .why-item p{color:var(--ink-muted); font-size:0.86rem;}

  /* ---------- How to order ---------- */
  .how-row{display:grid; grid-template-columns:repeat(3, 1fr); gap:40px; position:relative;}
  .how-row::before{content:''; position:absolute; top:26px; left:8%; right:8%; height:1px; background:var(--line); z-index:0;}
  .how-item{position:relative; z-index:1; text-align:center;}
  .how-num{width:52px; height:52px; border-radius:50%; border:1px solid var(--gold); background:var(--bg-deep); display:flex; align-items:center; justify-content:center; margin:0 auto 22px; font-family:var(--font-label); color:var(--gold-light); font-size:0.95rem;}
  .how-item h3{font-size:1.15rem; margin-bottom:10px;}
  .how-item p{color:var(--ink-muted); font-size:0.88rem; max-width:260px; margin:0 auto;}

  /* ---------- Final CTA ---------- */
  .final-cta{
    background:linear-gradient(145deg, var(--bg-soft), var(--bg-mid) 60%, var(--bg-deep));
    border:1px solid var(--line); padding:90px 40px; text-align:center; border-radius:4px; position:relative; overflow:hidden;
  }
  .final-cta::before{content:''; position:absolute; inset:0; background:radial-gradient(ellipse 500px 300px at 50% 0%, rgba(212,175,55,0.16), transparent 60%);}
  .final-cta h2{font-size:clamp(2rem,4vw,3rem); margin-bottom:16px;}
  .final-cta p{color:var(--ink-muted); max-width:480px; margin:0 auto 36px;}

  /* ---------- Footer ---------- */
  footer{border-top:1px solid var(--line); padding:70px 0 30px;}
  .footer-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:50px; margin-bottom:50px;}
  .footer-brand{display:flex; align-items:center; gap:12px; margin-bottom:18px;}
  .footer-brand img{width:34px; height:34px;}
  .footer-brand span{font-family:var(--font-label); letter-spacing:0.16em; color:var(--gold-light); font-size:1rem;}
  footer p.blurb{color:var(--ink-muted); font-size:0.9rem; max-width:320px;}
  footer h4{font-family:var(--font-label); font-size:0.72rem; letter-spacing:0.14em; text-transform:uppercase; color:var(--gold); margin-bottom:18px;}
  footer ul{list-style:none; display:flex; flex-direction:column; gap:12px;}
  footer ul li a{color:var(--ink-muted); font-size:0.9rem; transition:color .3s ease;}
  footer ul li a:hover{color:var(--gold-light);}
  .footer-bottom{display:flex; justify-content:space-between; flex-wrap:wrap; gap:14px; padding-top:30px; border-top:1px solid var(--line); color:var(--ink-muted); font-size:0.78rem;}

  /* ---------- Reveal animation contract ---------- */
  [data-anim]{opacity:0; transform:translateY(26px);}
  [data-anim="scale"]{transform:scale(0.94);}
  [data-anim="side"]{transform:translateX(-26px);}
  [data-anim].in-view{
    animation:reveal .75s cubic-bezier(.22,1,.36,1) both;
    animation-delay:var(--delay,0s);
  }
  [data-anim="scale"].in-view{ animation-name:revealScale; }
  [data-anim="side"].in-view{ animation-name:revealSide; }
  @keyframes reveal{ to{opacity:1; transform:none;} }
  @keyframes revealScale{ to{opacity:1; transform:none;} }
  @keyframes revealSide{ to{opacity:1; transform:none;} }
  @media (prefers-reduced-motion: reduce){
    [data-anim]{opacity:1; transform:none; animation:none;}
    .hero-icon{animation:none;}
    .scroll-cue::after{animation:none;}
  }

  @media (max-width: 980px){
    nav.links{
      display:flex; flex-direction:column; align-items:flex-start; gap:0;
      position:absolute; top:100%; left:0; right:0; background:rgba(30,15,43,0.97);
      backdrop-filter:blur(14px); border-bottom:1px solid var(--line);
      max-height:0; overflow:hidden; transition:max-height .4s ease;
      padding:0 28px;
    }
    nav.links.open{ max-height:480px; padding:18px 28px 26px; }
    nav.links a{ padding:12px 0; width:100%; border-bottom:1px solid rgba(212,175,55,0.08); }
    .menu-toggle{display:flex;}
    #langBtn, .header-cta{ display:none; }
    .nav-mobile-extra{
      display:flex; flex-direction:column; gap:12px;
      padding-top:16px; margin-top:6px; border-top:1px solid rgba(212,175,55,0.15);
    }
    .nav-mobile-extra .nav-mobile-lang{
      font-family:var(--font-label); font-size:0.7rem; letter-spacing:0.12em; text-transform:uppercase;
      color:var(--gold-light); border:1px solid var(--line); background:transparent;
      padding:10px 14px; border-radius:3px; width:100%; cursor:pointer;
    }
    .nav-mobile-extra .nav-mobile-lang:hover{ border-color:var(--gold); background:rgba(212,175,55,0.10); }
    .nav-mobile-extra .nav-mobile-whatsapp{
      display:flex; align-items:center; justify-content:center;
      background:linear-gradient(135deg, var(--gold-light), var(--gold) 60%, var(--gold-deep));
      color:var(--bg-deep); padding:13px; border-radius:3px; font-weight:600;
      font-family:var(--font-label); font-size:0.72rem; letter-spacing:0.08em;
      border-bottom:none; width:100%;
    }
    .nav-mobile-extra .nav-mobile-whatsapp::after{ display:none; }
    .collections-grid{grid-template-columns:1fr;}
    .about-wrap{grid-template-columns:1fr; gap:50px;}
    .about-art{order:-1;}
    .why-grid{grid-template-columns:repeat(2,1fr);}
    .how-row{grid-template-columns:1fr; gap:50px;}
    .how-row::before{display:none;}
    .footer-grid{grid-template-columns:1fr; gap:36px;}
  }
/* ================= Cart, checkout, modals ================= */
.cart-btn{
  position:relative; display:flex; align-items:center; justify-content:center;
  width:38px; height:38px; border:1px solid var(--line); border-radius:3px;
  background:transparent; color:var(--gold-light); transition:all .3s ease;
}
.cart-btn:hover{ border-color:var(--gold); background:rgba(212,175,55,0.10); }
.cart-btn svg{ width:18px; height:18px; }
.cart-count{
  position:absolute; top:-7px; right:-7px; min-width:18px; height:18px; padding:0 4px;
  border-radius:9px; background:var(--gold); color:var(--bg-deep); font-size:0.65rem;
  font-family:var(--font-label); font-weight:700; display:flex; align-items:center; justify-content:center;
}
.cart-count[data-empty="true"]{ display:none; }

.overlay{
  position:fixed; inset:0; background:rgba(6,2,10,0.6); backdrop-filter:blur(3px);
  opacity:0; pointer-events:none; transition:opacity .35s ease; z-index:80;
}
.overlay.show{ opacity:1; pointer-events:auto; }

.cart-drawer{
  position:fixed; top:0; bottom:0; right:0; width:min(400px, 92vw);
  background:linear-gradient(165deg, var(--bg-mid), var(--bg-deep));
  border-left:1px solid var(--line); z-index:90; display:flex; flex-direction:column;
  transform:translateX(105%); transition:transform .45s cubic-bezier(.22,1,.36,1);
}
.cart-drawer.open{ transform:translateX(0); }
.cart-drawer-head{ display:flex; align-items:center; justify-content:space-between; padding:22px 24px; border-bottom:1px solid var(--line); }
.cart-drawer-head h3{ font-size:1.2rem; }
.icon-close{ background:none; border:none; color:var(--gold-light); font-size:1.6rem; line-height:1; cursor:pointer; padding:4px 8px; }
.cart-items{ flex:1; overflow-y:auto; padding:14px 24px; display:flex; flex-direction:column; gap:16px; }
.cart-item{ display:flex; align-items:center; gap:14px; padding-bottom:16px; border-bottom:1px solid rgba(212,175,55,0.12); }
.cart-item .ci-icon{ width:44px; height:44px; flex:none; opacity:0.9; border-radius:6px; overflow:hidden; }
.cart-item .ci-icon img{ width:100%; height:100%; object-fit:cover; display:block; }
.cart-item .ci-info{ flex:1; min-width:0; }
.cart-item .ci-name{ font-family:var(--font-display); color:var(--gold-light); font-size:1rem; }
.cart-item .ci-price{ color:var(--ink-muted); font-size:0.8rem; margin-top:2px; }
.ci-qty{ display:flex; align-items:center; gap:8px; }
.ci-qty button{ width:24px; height:24px; border:1px solid var(--line); background:transparent; color:var(--gold-light); border-radius:3px; font-size:0.9rem; }
.ci-qty span{ min-width:16px; text-align:center; font-variant-numeric:tabular-nums; }
.ci-remove{ background:none; border:none; color:var(--ink-muted); font-size:1.1rem; cursor:pointer; padding:2px 6px; }
.ci-remove:hover{ color:var(--gold); }
.cart-empty{ display:none; padding:40px 24px; text-align:center; color:var(--ink-muted); }
.cart-drawer-foot{ padding:20px 24px 26px; border-top:1px solid var(--line); }
.cart-subtotal-row{ display:flex; justify-content:space-between; font-family:var(--font-label); color:var(--gold-light); margin-bottom:16px; font-variant-numeric:tabular-nums; }
.cart-drawer-foot .btn{ width:100%; justify-content:center; }
.cart-drawer.is-empty .cart-empty{ display:block; }
.cart-drawer.is-empty .cart-drawer-foot{ display:none; }

.modal{
  position:fixed; inset:0; z-index:95; display:flex; align-items:center; justify-content:center;
  padding:20px; opacity:0; pointer-events:none; transition:opacity .3s ease;
}
.modal.open{ opacity:1; pointer-events:auto; }
.modal-box{
  position:relative; width:min(440px, 100%); max-height:88vh; overflow-y:auto;
  background:linear-gradient(165deg, var(--bg-mid), var(--bg-deep)); border:1px solid var(--line);
  border-radius:4px; padding:36px 32px; transform:translateY(16px); transition:transform .35s ease;
}
.modal.open .modal-box{ transform:translateY(0); }
.modal-box h3{ font-size:1.4rem; margin-bottom:6px; }
.modal-box p{ color:var(--ink-muted); font-size:0.9rem; }
.modal-box form{ display:flex; flex-direction:column; gap:6px; margin-top:18px; }
.modal-box label{ font-family:var(--font-label); font-size:0.68rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--gold); margin-top:10px; }
.modal-box input[type="text"], .modal-box input[type="tel"], .modal-box textarea{
  background:rgba(255,255,255,0.04); border:1px solid var(--line); border-radius:3px; padding:11px 14px;
  color:var(--ink); font-family:var(--font-body); font-size:0.92rem; resize:vertical;
}
.modal-box input:focus, .modal-box textarea:focus{ outline:none; border-color:var(--gold); }
.payment-choice{ margin-top:14px; display:flex; flex-direction:column; gap:8px; }
.payment-choice > span{ font-family:var(--font-label); font-size:0.68rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--gold); }
.payment-choice label{ display:flex; align-items:center; gap:8px; font-family:var(--font-body); color:var(--ink-muted); text-transform:none; letter-spacing:0; font-size:0.9rem; margin-top:0; }
.modal-box .btn{ margin-top:20px; width:100%; justify-content:center; }
.form-error{ color:#e8a3a3; font-size:0.82rem; min-height:0; }
.form-error:empty{ display:none; }

.confirm-icon{
  width:52px; height:52px; border-radius:50%; border:1px solid var(--gold); color:var(--gold-light);
  display:flex; align-items:center; justify-content:center; font-size:1.4rem; margin-bottom:18px;
}
.order-number-line{ margin-top:14px; font-family:var(--font-label); color:var(--gold-light); font-variant-numeric:tabular-nums; }
.order-number-line strong{ color:var(--gold); letter-spacing:0.04em; }
#confirmWhatsapp{ margin-top:22px; }

.products-loading, .products-error{
  grid-column:1 / -1; text-align:center; color:var(--ink-muted); padding:40px 0; font-size:0.95rem;
}
.card-cta-btn{
  font-family:var(--font-label); font-size:0.66rem; letter-spacing:0.12em; text-transform:uppercase;
  color:var(--bg-deep); background:linear-gradient(135deg, var(--gold-light), var(--gold) 60%, var(--gold-deep));
  border:none; padding:9px 16px; border-radius:3px; cursor:pointer; transition:transform .3s ease;
}
.card-cta-btn:hover{ transform:translateY(-1px); }
.card-cta-btn:disabled{ opacity:0.5; cursor:not-allowed; transform:none; }

.card.is-out-of-stock{ opacity:0.7; }
.card.is-out-of-stock .card-photo-wrap{ filter:grayscale(0.4); }
.out-of-stock-label{
  color:#e8a3a3; font-family:var(--font-label); font-size:0.68rem; letter-spacing:0.1em;
  text-transform:uppercase; margin:10px 0 0;
}

.card-photo-wrap{
  margin:-44px -32px 26px; height:230px; overflow:hidden; position:relative;
  clip-path:polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 0 100%);
}
.card-photo-wrap img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .6s ease;
}
.card:hover .card-photo-wrap img{ transform:scale(1.05); }
.card-photo-wrap::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(30,15,43,0) 55%, rgba(30,15,43,0.75) 100%);
  pointer-events:none;
}

/* ---------- Account (header login / my orders) ---------- */
.account-wrap{ position:relative; }
.account-btn{
  display:flex; align-items:center; gap:8px;
  background:transparent; border:1px solid var(--line); border-radius:3px;
  padding:8px 14px; color:var(--gold-light); font-family:var(--font-label);
  font-size:0.7rem; letter-spacing:0.08em; transition:all .3s ease;
}
.account-btn svg{ width:16px; height:16px; flex:none; }
.account-btn:hover{ border-color:var(--gold); background:rgba(212,175,55,0.10); }
.account-dropdown{
  position:absolute; top:calc(100% + 10px); inset-inline-end:0; min-width:170px;
  background:linear-gradient(165deg, var(--bg-mid), var(--bg-deep)); border:1px solid var(--line);
  border-radius:6px; padding:8px; display:flex; flex-direction:column; gap:2px;
  opacity:0; pointer-events:none; transform:translateY(-6px);
  transition:opacity .25s ease, transform .25s ease; z-index:60;
  box-shadow:0 20px 40px -14px var(--shadow);
}
.account-dropdown.open{ opacity:1; pointer-events:auto; transform:translateY(0); }
.account-dropdown button{
  background:transparent; border:none; color:var(--ink-muted); text-align:start;
  padding:9px 12px; border-radius:4px; font-size:0.85rem; font-family:var(--font-body); transition:all .2s ease;
}
.account-dropdown button:hover{ background:rgba(212,175,55,0.10); color:var(--gold-light); }

/* ---------- Category filter pills ---------- */
.category-filters{ display:flex; gap:12px; flex-wrap:wrap; margin-bottom:36px; }
.cat-pill{
  background:transparent; border:1px solid var(--line); border-radius:20px;
  padding:9px 22px; color:var(--ink-muted); font-family:var(--font-label);
  font-size:0.7rem; letter-spacing:0.1em; text-transform:uppercase; transition:all .3s ease;
}
.cat-pill:hover{ border-color:var(--gold); color:var(--gold-light); }
.cat-pill.active{
  background:linear-gradient(135deg, var(--gold-light), var(--gold) 60%, var(--gold-deep));
  border-color:transparent; color:var(--bg-deep); font-weight:600;
}

/* ---------- Auth tabs + extra form controls in modals ---------- */
.auth-tabs{ display:flex; gap:8px; margin-top:16px; border-bottom:1px solid var(--line); }
.auth-tab{
  flex:1; background:transparent; border:none; padding:10px 8px; color:var(--ink-muted);
  font-family:var(--font-label); font-size:0.72rem; letter-spacing:0.08em; text-transform:uppercase;
  border-bottom:2px solid transparent; margin-bottom:-1px; transition:all .25s ease;
}
.auth-tab:hover{ color:var(--gold-light); }
.auth-tab.active{ color:var(--gold-light); border-bottom-color:var(--gold); }
.auth-form.hidden{ display:none; }

.modal-box select,
.modal-box input[type="email"],
.modal-box input[type="password"]{
  background:rgba(255,255,255,0.04); border:1px solid var(--line); border-radius:3px; padding:11px 14px;
  color:var(--ink); font-family:var(--font-body); font-size:0.92rem;
  appearance:none; -webkit-appearance:none; -moz-appearance:none;
}
.modal-box select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%23D4AF37'%3E%3Cpath d='M5.5 7.5l4.5 4.5 4.5-4.5' stroke='%23D4AF37' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:left 14px center; background-size:12px;
  padding-inline-start:32px;
}
.modal-box select option{ background:var(--bg-mid); color:var(--ink); }
.modal-box select:focus,
.modal-box input[type="email"]:focus,
.modal-box input[type="password"]:focus{ outline:none; border-color:var(--gold); }

/* Browsers paint their own light autofill highlight over any input
   background we set (Chrome/Safari especially) — override it back to the
   dark theme instead of leaving a jarring white/blue box. */
.modal-box input:-webkit-autofill,
.modal-box input:-webkit-autofill:hover,
.modal-box input:-webkit-autofill:focus,
.modal-box input:autofill{
  -webkit-text-fill-color: var(--ink);
  -webkit-box-shadow: 0 0 0px 1000px #2a1a37 inset;
  box-shadow: 0 0 0px 1000px #2a1a37 inset;
  caret-color: var(--ink);
  transition: background-color 9999s ease-in-out 0s;
}

/* ---------- Password field show/hide toggle (shared: storefront modal + checkout inline auth) ---------- */
.password-field{ position:relative; display:block; width:100%; }
.password-field input{ width:100%; padding-inline-end:42px !important; }
.password-toggle{
  position:absolute; top:50%; inset-inline-end:6px; transform:translateY(-50%);
  background:none; border:none; padding:6px; cursor:pointer; color:var(--ink-muted);
  display:flex; align-items:center; justify-content:center; transition:color .2s ease;
}
.password-toggle:hover{ color:var(--gold-light); }
.password-toggle svg{ width:18px; height:18px; }
.password-toggle .icon-eye-off{ display:none; }
.password-toggle.showing .icon-eye{ display:none; }
.password-toggle.showing .icon-eye-off{ display:block; }

.my-order-card{
  border:1px solid var(--line); border-radius:6px; padding:14px 16px; margin-top:14px; font-size:0.85rem;
}
.my-order-card .mo-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; }
.my-order-card .mo-num{ font-family:var(--font-label); color:var(--gold-light); letter-spacing:0.04em; }
.my-order-card .mo-status{ font-size:0.72rem; text-transform:uppercase; letter-spacing:0.06em; color:var(--gold); }
.my-order-card .mo-items{ color:var(--ink-muted); font-size:0.82rem; }
.my-order-card .mo-items div{ padding:2px 0; }
.my-order-card .mo-sub{ margin-top:8px; padding-top:8px; border-top:1px dashed var(--line); color:var(--gold-light); font-family:var(--font-label); font-size:0.82rem; }
.my-orders-empty{ color:var(--ink-muted); text-align:center; padding:26px 0; font-size:0.9rem; }

@media (max-width: 480px){
  .modal-box{ padding:28px 22px; }
}
@media (max-width: 620px){
  .account-btn span{ display:none; }
  .account-btn{ padding:9px; }
}