/* ═══════════════════════════════════
   NOVASTRIDE — E-Commerce Landing
   style.css
═══════════════════════════════════ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}

:root{
  --bg:        #fafaf7;
  --ink:       #15140f;
  --paper:     #ffffff;
  --line:      #e8e6df;
  --accent:    #ff5c1a;   /* signature orange */
  --accent-dk: #d6470c;
  --muted:     #6b6a62;
  --font-d:    'Bebas Neue', sans-serif;
  --font-b:    'Inter', sans-serif;
  --r: 14px;
}

html{scroll-behavior:smooth;}
body{font-family:var(--font-b);background:var(--bg);color:var(--ink);line-height:1.6;overflow-x:hidden;}
a{text-decoration:none;color:inherit;}
button{font-family:inherit;cursor:pointer;border:none;background:none;}
img{max-width:100%;display:block;}

/* ── NAV ── */
#navbar{
  position:fixed;top:0;left:0;right:0;height:78px;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 5vw;background:rgba(250,250,247,.9);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);z-index:500;
}
.logo{font-family:var(--font-d);font-size:1.6rem;letter-spacing:.03em;}
.logo span{color:var(--accent);}
.nav-links{display:flex;gap:2.4rem;list-style:none;}
.nav-links a{font-size:.92rem;font-weight:500;position:relative;}
.nav-links a::after{content:'';position:absolute;bottom:-6px;left:0;width:0;height:2px;background:var(--accent);transition:width .25s;}
.nav-links a:hover::after{width:100%;}
.nav-right{display:flex;align-items:center;gap:1rem;}
.icon-btn{font-size:1.05rem;width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;transition:background .2s;position:relative;}
.icon-btn:hover{background:var(--line);}
.cart-count{position:absolute;top:0;right:0;background:var(--accent);color:#fff;font-size:.65rem;font-weight:700;width:18px;height:18px;border-radius:50%;display:flex;align-items:center;justify-content:center;}
.burger{display:none;flex-direction:column;gap:5px;}
.burger span{width:22px;height:2px;background:var(--ink);border-radius:2px;}

/* ── CART DRAWER ── */
.cart-overlay{position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:600;opacity:0;pointer-events:none;transition:opacity .3s;}
.cart-overlay.open{opacity:1;pointer-events:auto;}
.cart-drawer{
  position:fixed;top:0;right:0;height:100%;width:380px;max-width:90vw;
  background:var(--paper);z-index:601;display:flex;flex-direction:column;
  transform:translateX(100%);transition:transform .35s cubic-bezier(.4,0,.2,1);
  box-shadow:-10px 0 40px rgba(0,0,0,.1);
}
.cart-drawer.open{transform:translateX(0);}
.cart-head{display:flex;justify-content:space-between;align-items:center;padding:1.6rem;border-bottom:1px solid var(--line);}
.cart-head h3{font-family:var(--font-d);font-size:1.4rem;}
.cart-head button{font-size:1.1rem;width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;transition:background .2s;}
.cart-head button:hover{background:var(--line);}
.cart-items{flex:1;overflow-y:auto;padding:1.2rem 1.6rem;}
.cart-empty{color:var(--muted);font-size:.9rem;text-align:center;margin-top:2rem;}
.cart-item{display:flex;gap:1rem;padding:1rem 0;border-bottom:1px solid var(--line);align-items:center;}
.ci-thumb{width:60px;height:60px;border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0;padding:.5rem;}
.ci-thumb .shoe-svg{width:100%;height:auto;}
.ci-info{flex:1;}
.ci-name{font-weight:600;font-size:.88rem;margin-bottom:.2rem;}
.ci-price{color:var(--accent);font-weight:700;font-size:.85rem;}
.ci-qty{display:flex;align-items:center;gap:.5rem;margin-top:.4rem;}
.ci-qty button{width:22px;height:22px;border:1px solid var(--line);border-radius:6px;font-size:.8rem;}
.ci-remove{font-size:.78rem;color:var(--muted);margin-top:.3rem;text-decoration:underline;}
.cart-footer{padding:1.4rem 1.6rem;border-top:1px solid var(--line);}
.cart-total-row{display:flex;justify-content:space-between;font-weight:700;font-size:1.1rem;margin-bottom:1rem;}

/* ── BUTTONS ── */
.btn-solid{
  display:inline-flex;align-items:center;gap:.6rem;padding:.95rem 2.2rem;
  background:var(--ink);color:#fff;border-radius:99px;font-weight:700;font-size:.92rem;
  transition:background .25s, transform .25s;
}
.btn-solid:hover{background:var(--accent);transform:translateY(-2px);}
.btn-solid.full{width:100%;justify-content:center;}
.btn-line{display:inline-flex;align-items:center;gap:.6rem;padding:.95rem 1.6rem;font-weight:600;font-size:.92rem;border-bottom:2px solid var(--ink);transition:border-color .2s,color .2s;}
.btn-line:hover{border-color:var(--accent);color:var(--accent);}

/* ── HERO ── */
#hero{
  min-height:100vh;display:flex;align-items:center;justify-content:space-between;
  padding:100px 6vw 4rem;gap:2rem;position:relative;overflow:hidden;
}
.kicker{font-size:.78rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--accent);margin-bottom:1.2rem;}
.hero-text h1{font-family:var(--font-d);font-size:clamp(3rem,8vw,6.5rem);line-height:.95;letter-spacing:.01em;margin-bottom:1.6rem;}
.outline-text{color:transparent;-webkit-text-stroke:2px var(--ink);}
.hero-desc{max-width:420px;color:var(--muted);font-size:1rem;margin-bottom:2.2rem;}
.hero-cta{display:flex;gap:1rem;flex-wrap:wrap;}
.hero-shoe{position:relative;flex-shrink:0;width:380px;height:380px;display:flex;align-items:center;justify-content:center;}
.shoe-glow{position:absolute;width:340px;height:340px;background:radial-gradient(circle,rgba(255,92,26,.25),transparent 70%);border-radius:50%;animation:pulse 4s ease-in-out infinite;}
@keyframes pulse{0%,100%{transform:scale(1);}50%{transform:scale(1.1);}}
.hero-shoe-svg{width:340px;max-width:90%;position:relative;z-index:1;animation:float 5s ease-in-out infinite;filter:drop-shadow(0 30px 40px rgba(0,0,0,.2));}
@keyframes float{0%,100%{transform:translateY(0) rotate(-5deg);}50%{transform:translateY(-20px) rotate(5deg);}}

/* ── MARQUEE ── */
.marquee{background:var(--ink);color:#fff;padding:.9rem 0;overflow:hidden;white-space:nowrap;}
.marquee-track{display:inline-flex;gap:2.5rem;animation:scroll-x 22s linear infinite;font-family:var(--font-d);font-size:1rem;letter-spacing:.05em;}
.marquee-track span:nth-child(even){color:var(--accent);}
@keyframes scroll-x{from{transform:translateX(0);}to{transform:translateX(-50%);}}

/* ── SECTIONS ── */
section{padding:6rem 6vw;}
.section-head{text-align:center;margin-bottom:3rem;}
.section-head h2{font-family:var(--font-d);font-size:clamp(2.2rem,4vw,3.4rem);}

/* ── SHOP ── */
.filter-row{display:flex;justify-content:center;gap:.8rem;margin-bottom:3rem;flex-wrap:wrap;}
.filter-chip{padding:.6rem 1.5rem;border:1.5px solid var(--line);border-radius:99px;font-weight:600;font-size:.85rem;transition:all .25s;}
.filter-chip:hover{border-color:var(--ink);}
.filter-chip.active{background:var(--ink);color:#fff;border-color:var(--ink);}

.product-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:1.6rem;max-width:1200px;margin:0 auto;}
.product-card{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;transition:transform .3s,box-shadow .3s;}
.product-card:hover{transform:translateY(-6px);box-shadow:0 20px 40px rgba(0,0,0,.08);}
.product-thumb{height:200px;display:flex;align-items:center;justify-content:center;position:relative;background:linear-gradient(135deg,var(--shoe-bg1,#fff4ec),var(--shoe-bg2,#ffe4d2));padding:1.5rem;}
.product-thumb .shoe-svg{width:100%;max-width:200px;height:auto;filter:drop-shadow(0 12px 20px rgba(0,0,0,.12));transition:transform .35s;}
.product-card:hover .shoe-svg{transform:scale(1.08) translateY(-4px);}
.product-badge{position:absolute;top:12px;left:12px;background:var(--accent);color:#fff;font-size:.68rem;font-weight:700;padding:.25rem .65rem;border-radius:99px;letter-spacing:.04em;}
.product-body{padding:1.3rem;}
.product-cat{font-size:.72rem;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;font-weight:600;margin-bottom:.3rem;}
.product-name{font-weight:700;font-size:1.05rem;margin-bottom:.5rem;}
.product-row{display:flex;justify-content:space-between;align-items:center;}
.product-price{font-weight:800;font-size:1.15rem;}
.add-btn{width:42px;height:42px;border-radius:50%;background:var(--ink);color:#fff;display:flex;align-items:center;justify-content:center;transition:background .2s,transform .2s;}
.add-btn:hover{background:var(--accent);transform:scale(1.08) rotate(90deg);}

/* ── FEATURES ── */
#features{background:var(--paper);}
.features-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1.5rem;max-width:1100px;margin:0 auto;}
.feature-card{text-align:center;padding:2.2rem 1.4rem;border-radius:var(--r);border:1px solid var(--line);transition:border-color .25s,transform .25s;}
.feature-card:hover{border-color:var(--accent);transform:translateY(-4px);}
.feature-card i{font-size:1.8rem;color:var(--accent);margin-bottom:1rem;}
.feature-card h3{font-size:1.05rem;margin-bottom:.6rem;}
.feature-card p{font-size:.86rem;color:var(--muted);}

/* ── REVIEWS ── */
.reviews-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1.5rem;max-width:1100px;margin:0 auto;}
.review-card{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:1.8rem;}
.stars{color:var(--accent);letter-spacing:.1em;margin-bottom:.8rem;}
.review-card p{font-size:.92rem;margin-bottom:1rem;font-style:italic;color:var(--ink);}
.reviewer{font-size:.82rem;color:var(--muted);font-weight:600;}

/* ── NEWSLETTER ── */
#newsletter{background:var(--ink);color:#fff;text-align:center;}
#newsletter h2{font-family:var(--font-d);font-size:clamp(2rem,4vw,3rem);margin-bottom:.8rem;}
#newsletter p{color:#b8b6ab;margin-bottom:2rem;}
#newsForm{display:flex;justify-content:center;gap:.7rem;max-width:440px;margin:0 auto;flex-wrap:wrap;}
#newsForm input{flex:1;min-width:220px;padding:.95rem 1.3rem;border-radius:99px;border:none;font-family:inherit;font-size:.92rem;}
#newsForm button{padding:.95rem 1.8rem;background:var(--accent);color:#fff;border-radius:99px;font-weight:700;transition:background .2s;}
#newsForm button:hover{background:var(--accent-dk);}
.news-status{margin-top:1rem;font-size:.88rem;min-height:1.3em;}

/* ── FOOTER ── */
footer{background:var(--paper);padding:3rem 6vw;border-top:1px solid var(--line);}
.footer-inner{max-width:1100px;margin:0 auto;display:flex;flex-direction:column;align-items:center;gap:.8rem;text-align:center;}
.footer-inner p{color:var(--muted);font-size:.85rem;}
.footer-socials{display:flex;gap:1rem;margin-top:.5rem;}
.footer-socials a{width:38px;height:38px;border-radius:50%;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;transition:background .2s,color .2s;}
.footer-socials a:hover{background:var(--ink);color:#fff;}

/* ── TOAST ── */
.toast{position:fixed;bottom:30px;right:30px;background:var(--ink);color:#fff;padding:1rem 1.6rem;border-radius:12px;font-size:.88rem;font-weight:600;display:flex;align-items:center;gap:.6rem;z-index:700;transform:translateY(100px);opacity:0;transition:transform .35s,opacity .35s;}
.toast.show{transform:translateY(0);opacity:1;}
.toast i{color:#4ade80;}

/* ── MOBILE ── */
@media (max-width:900px){
  .burger{display:flex;}
  .nav-links{position:fixed;top:78px;left:0;right:0;background:var(--paper);flex-direction:column;padding:2rem;gap:1.5rem;border-bottom:1px solid var(--line);transform:translateY(-110%);transition:transform .3s;}
  .nav-links.open{transform:translateY(0);}
  #hero{flex-direction:column;text-align:center;padding-top:120px;}
  .hero-cta{justify-content:center;}
  .hero-shoe{width:260px;height:260px;}
  .hero-shoe-svg{width:230px;}
  .hero-desc{margin-left:auto;margin-right:auto;}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;}}