/* =========================================================
   AUBE — Premium Fashion — Shared Stylesheet
   ========================================================= */

:root{
  --c-white:#FFFFFF;
  --c-ivory:#FBF9F4;
  --c-sand:#F3EDE2;
  --c-beige:#E9DFCF;
  --c-charcoal:#2B2926;
  --c-black:#121110;
  --c-sage:#8A9A7E;
  --c-sage-dark:#6f7f64;
  --c-taupe:#AC9682;
  --c-gold:#C7A863;
  --c-line:#E4DDCF;
  --font-head:'Playfair Display', serif;
  --font-body:'Inter', sans-serif;
  --font-ui:'DM Sans', sans-serif;
  --ease:cubic-bezier(.65,0,.35,1);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  font-family:var(--font-body);
  color:var(--c-charcoal);
  background:var(--c-white);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body.no-scroll{overflow:hidden;}

h1,h2,h3,h4,.font-head{font-family:var(--font-head);}
.font-ui{font-family:var(--font-ui);}

/* Dark mode */
body.dark{
  background:var(--c-black);
  color:#EDE9E1;
}
body.dark .site-header{background:rgba(18,17,16,.85);}
body.dark .bg-white{background:#1A1917 !important;}
body.dark .bg-ivory,body.dark .bg-sand{background:#1E1C19 !important;}
body.dark .text-charcoal{color:#EDE9E1 !important;}
body.dark .border-line{border-color:#3a362f !important;}
body.dark .product-card,body.dark .cat-card{background:#1A1917;}

/* Loader */
#page-loader{
  position:fixed;inset:0;z-index:9999;background:var(--c-ivory);
  display:flex;align-items:center;justify-content:center;
  transition:opacity .6s var(--ease), visibility .6s var(--ease);
}
#page-loader.loaded{opacity:0;visibility:hidden;pointer-events:none;}
.loader-mark{
  font-family:var(--font-head);font-size:2.2rem;letter-spacing:.35em;
  color:var(--c-charcoal);
  animation:pulseFade 1.6s ease-in-out infinite;
}
@keyframes pulseFade{0%,100%{opacity:.35;}50%{opacity:1;}}

/* Header */
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:1000;
  background:rgba(255,255,255,.72);
  backdrop-filter:blur(14px) saturate(160%);
  -webkit-backdrop-filter:blur(14px) saturate(160%);
  border-bottom:1px solid rgba(43,41,38,.06);
  transition:background .4s var(--ease),box-shadow .4s var(--ease), transform .4s var(--ease);
}
.site-header.scrolled{box-shadow:0 8px 24px -12px rgba(0,0,0,.12);}
.site-header.hide-nav{transform:translateY(-100%);}
.announce-bar{
  background:var(--c-charcoal);color:var(--c-ivory);
  font-family:var(--font-ui);letter-spacing:.06em;
}

.nav-link{position:relative;padding-bottom:4px;}
.nav-link::after{
  content:'';position:absolute;left:0;bottom:0;width:0;height:1px;
  background:currentColor;transition:width .35s var(--ease);
}
.nav-link:hover::after{width:100%;}

.icon-btn{
  width:38px;height:38px;display:flex;align-items:center;justify-content:center;
  border-radius:999px;transition:background .3s var(--ease), transform .3s var(--ease);
}
.icon-btn:hover{background:var(--c-sand);transform:translateY(-1px);}

.badge-count{
  position:absolute;top:-4px;right:-4px;background:var(--c-charcoal);color:#fff;
  font-size:10px;line-height:1;border-radius:999px;min-width:16px;height:16px;
  display:flex;align-items:center;justify-content:center;font-family:var(--font-ui);
}

/* Buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  padding:.9rem 2.1rem;font-family:var(--font-ui);font-size:.8rem;letter-spacing:.12em;
  text-transform:uppercase;transition:all .4s var(--ease);border:1px solid transparent;
  cursor:pointer;white-space:nowrap;
}
.btn-primary{background:var(--c-charcoal);color:#fff;}
.btn-primary:hover{background:var(--c-black);transform:translateY(-2px);box-shadow:0 12px 24px -10px rgba(0,0,0,.35);}
.btn-outline{border-color:var(--c-charcoal);color:var(--c-charcoal);background:transparent;}
.btn-outline:hover{background:var(--c-charcoal);color:#fff;transform:translateY(-2px);}
.btn-white{background:#fff;color:var(--c-charcoal);}
.btn-white:hover{background:var(--c-ivory);transform:translateY(-2px);}
.btn-ghost-white{border-color:rgba(255,255,255,.7);color:#fff;background:transparent;}
.btn-ghost-white:hover{background:#fff;color:var(--c-charcoal);}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none !important;}

/* Fade in on scroll */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .8s var(--ease),transform .8s var(--ease);}
.reveal.in{opacity:1;transform:translateY(0);}
.reveal-scale{opacity:0;transform:scale(.94);transition:opacity .9s var(--ease),transform .9s var(--ease);}
.reveal-scale.in{opacity:1;transform:scale(1);}

/* Hero */
.hero{position:relative;height:100vh;min-height:640px;overflow:hidden;}
.hero-bg{position:absolute;inset:0;background-size:cover;background-position:center;transform:scale(1.08);animation:heroZoom 16s ease-out forwards;}
@keyframes heroZoom{to{transform:scale(1);}}
.hero-overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(18,17,16,.15) 0%,rgba(18,17,16,.45) 100%);}
.hero-shape{position:absolute;border-radius:999px;filter:blur(60px);opacity:.35;animation:float 9s ease-in-out infinite;}
@keyframes float{0%,100%{transform:translateY(0) translateX(0);}50%{transform:translateY(-24px) translateX(14px);}}
.scroll-cue{animation:bounceDown 2s ease-in-out infinite;}
@keyframes bounceDown{0%,100%{transform:translateY(0);}50%{transform:translateY(10px);}}

/* Category / collection cards */
.cat-card{position:relative;overflow:hidden;border-radius:2px;}
.cat-card img{transition:transform 1.1s var(--ease);}
.cat-card:hover img{transform:scale(1.08);}
.cat-card .cat-overlay{background:linear-gradient(180deg,rgba(18,17,16,0) 40%,rgba(18,17,16,.65) 100%);}

/* Product card */
.product-card{position:relative;}
.product-card .pc-img-wrap{position:relative;overflow:hidden;aspect-ratio:3/4;background:var(--c-sand);}
.product-card .pc-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity .5s var(--ease),transform .8s var(--ease);}
.product-card .pc-img.alt{opacity:0;}
.product-card:hover .pc-img.main{opacity:0;}
.product-card:hover .pc-img.alt{opacity:1;transform:scale(1.04);}
.product-card .pc-actions{position:absolute;right:.65rem;top:.65rem;display:flex;flex-direction:column;gap:.5rem;opacity:0;transform:translateX(8px);transition:opacity .35s var(--ease),transform .35s var(--ease);}
.product-card:hover .pc-actions{opacity:1;transform:translateX(0);}
.pc-icon-btn{width:36px;height:36px;border-radius:999px;background:rgba(255,255,255,.92);display:flex;align-items:center;justify-content:center;box-shadow:0 4px 12px rgba(0,0,0,.12);transition:background .3s,color .3s,transform .3s;}
.pc-icon-btn:hover{background:var(--c-charcoal);color:#fff;transform:scale(1.08);}
.pc-icon-btn.active{background:var(--c-charcoal);color:#fff;}
.pc-quickadd{position:absolute;left:.65rem;right:.65rem;bottom:.65rem;opacity:0;transform:translateY(8px);transition:opacity .35s var(--ease),transform .35s var(--ease);}
.product-card:hover .pc-quickadd{opacity:1;transform:translateY(0);}
.color-dot{width:14px;height:14px;border-radius:999px;border:1px solid rgba(0,0,0,.12);display:inline-block;cursor:pointer;}
.color-dot.ring{box-shadow:0 0 0 2px #fff,0 0 0 3px var(--c-charcoal);}
.stock-dot{width:8px;height:8px;border-radius:999px;display:inline-block;}

/* Glassmorphism accent */
.glass{background:rgba(255,255,255,.55);backdrop-filter:blur(16px) saturate(180%);-webkit-backdrop-filter:blur(16px) saturate(180%);border:1px solid rgba(255,255,255,.4);}
.glass-dark{background:rgba(18,17,16,.45);backdrop-filter:blur(16px) saturate(180%);-webkit-backdrop-filter:blur(16px) saturate(180%);border:1px solid rgba(255,255,255,.12);}

/* Marquee */
.marquee-track{display:flex;width:max-content;animation:marquee 28s linear infinite;}
@keyframes marquee{from{transform:translateX(0);}to{transform:translateX(-50%);}}

/* Modals / drawers */
.overlay-scrim{position:fixed;inset:0;background:rgba(18,17,16,.5);z-index:1100;opacity:0;pointer-events:none;transition:opacity .4s var(--ease);}
.overlay-scrim.open{opacity:1;pointer-events:auto;}
.drawer{position:fixed;top:0;right:0;height:100%;width:min(440px,92vw);background:#fff;z-index:1200;transform:translateX(100%);transition:transform .5s var(--ease);display:flex;flex-direction:column;}
.drawer.open{transform:translateX(0);}
.drawer-left{right:auto;left:0;transform:translateX(-100%);}
.drawer-left.open{transform:translateX(0);}
.modal-center{position:fixed;inset:0;z-index:1200;display:flex;align-items:center;justify-content:center;padding:1rem;opacity:0;pointer-events:none;transition:opacity .4s var(--ease);}
.modal-center.open{opacity:1;pointer-events:auto;}
.modal-box{background:#fff;max-width:900px;width:100%;max-height:90vh;overflow:auto;transform:scale(.95) translateY(10px);transition:transform .4s var(--ease);}
.modal-center.open .modal-box{transform:scale(1) translateY(0);}

/* Search overlay */
#search-overlay{position:fixed;inset:0;z-index:1300;background:rgba(251,249,244,.98);opacity:0;pointer-events:none;transition:opacity .4s var(--ease);}
#search-overlay.open{opacity:1;pointer-events:auto;}

/* Accordion */
.accordion-btn[aria-expanded="true"] .accordion-chevron{transform:rotate(180deg);}
.accordion-panel{max-height:0;overflow:hidden;transition:max-height .5s var(--ease);}

/* Tabs underline */
.tab-btn{position:relative;padding-bottom:.6rem;}
.tab-btn.active{color:var(--c-charcoal);}
.tab-btn::after{content:'';position:absolute;left:0;bottom:0;height:2px;width:0;background:var(--c-charcoal);transition:width .35s var(--ease);}
.tab-btn.active::after{width:100%;}

/* Star rating */
.stars{color:var(--c-gold);letter-spacing:1px;}

/* Range slider */
input[type=range]{accent-color:var(--c-charcoal);}

/* Size guide table */
.sg-table th,.sg-table td{border:1px solid var(--c-line);padding:.55rem .8rem;text-align:center;font-size:.8rem;}

/* Back to top */
#back-to-top{position:fixed;bottom:24px;right:24px;z-index:900;width:44px;height:44px;border-radius:999px;background:var(--c-charcoal);color:#fff;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transform:translateY(10px);transition:all .4s var(--ease);}
#back-to-top.show{opacity:1;pointer-events:auto;transform:translateY(0);}

/* Cookie banner */
#cookie-banner{position:fixed;left:16px;right:16px;bottom:16px;z-index:950;transform:translateY(140%);transition:transform .6s var(--ease);}
#cookie-banner.show{transform:translateY(0);}

/* Toast */
#toast{position:fixed;bottom:24px;left:50%;transform:translate(-50%,20px);z-index:1500;opacity:0;transition:all .4s var(--ease);pointer-events:none;}
#toast.show{opacity:1;transform:translate(-50%,0);}

/* Skeleton */
.skeleton{background:linear-gradient(90deg,var(--c-sand) 25%,var(--c-beige) 37%,var(--c-sand) 63%);background-size:400% 100%;animation:skeletonShine 1.4s ease infinite;}
@keyframes skeletonShine{0%{background-position:100% 50%;}100%{background-position:0 50%;}}

/* Lookbook hotspot */
.hotspot{position:absolute;width:26px;height:26px;}
.hotspot-dot{width:26px;height:26px;border-radius:999px;background:rgba(255,255,255,.9);display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 0 rgba(255,255,255,.7);animation:hotspotPulse 2.2s ease-in-out infinite;cursor:pointer;}
@keyframes hotspotPulse{0%{box-shadow:0 0 0 0 rgba(255,255,255,.55);}70%{box-shadow:0 0 0 14px rgba(255,255,255,0);}100%{box-shadow:0 0 0 0 rgba(255,255,255,0);}}
.hotspot-card{position:absolute;width:200px;background:#fff;box-shadow:0 20px 40px -10px rgba(0,0,0,.25);opacity:0;visibility:hidden;transform:translateY(6px);transition:all .3s var(--ease);z-index:20;}
.hotspot:hover .hotspot-card,.hotspot.active .hotspot-card{opacity:1;visibility:visible;transform:translateY(0);}

/* Checkout stepper */
.step-circle{width:32px;height:32px;border-radius:999px;border:1px solid var(--c-line);display:flex;align-items:center;justify-content:center;font-family:var(--font-ui);font-size:.8rem;}
.step.active .step-circle{background:var(--c-charcoal);color:#fff;border-color:var(--c-charcoal);}
.step.done .step-circle{background:var(--c-sage);color:#fff;border-color:var(--c-sage);}

/* Utility */
.tracking-widest2{letter-spacing:.28em;}
.aspect-portrait{aspect-ratio:3/4;}
.aspect-square{aspect-ratio:1/1;}
.no-scrollbar::-webkit-scrollbar{display:none;}
.no-scrollbar{-ms-overflow-style:none;scrollbar-width:none;}

@media (max-width:768px){
  .hero{min-height:560px;}
}