:root{
  --bg:#0D0D0F;
  --surface:#18181B;
  --surface-2:#212124;
  --gold:#FF5B1F;
  --gold-soft:rgba(255,91,31,0.15);
  --rose:#2E8FFF;
  --text:#F8F8F8;
  --text-mute:rgba(248,248,248,0.60);
  --line:rgba(248,248,248,0.10);
}
*{box-sizing:border-box; margin:0; padding:0;}
html,body{background:var(--bg); color:var(--text); font-family:'Inter',sans-serif; overflow-x:hidden; scroll-behavior:smooth;}
h1,h2,h3,.serif{font-family:'Anton', sans-serif; text-transform:uppercase; letter-spacing:0.01em; font-weight:400;}
img{display:block; max-width:100%;}
a{text-decoration:none; color:inherit;}
ul{list-style:none;}
button{font-family:inherit; cursor:pointer; border:none; background:none; color:inherit;}
::-webkit-scrollbar{display:none;}
* {scrollbar-width:none;}

/* ===== NAVBAR ===== */
nav{
  position:fixed; top:0; left:0; right:0; z-index:50;
  padding:16px 20px;
  display:flex; align-items:center; justify-content:space-between;
  transition:background .3s ease, backdrop-filter .3s ease, border-color .3s ease;
  border-bottom:1px solid transparent;
}
nav.scrolled{
  background:rgba(13,13,15,0.75);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.logo{display:flex; align-items:center; gap:8px; font-family:'Anton',sans-serif; font-size:22px; font-weight:400; letter-spacing:0.02em; text-transform:uppercase;}
.logo-img{width:30px; height:30px; object-fit:contain; border-radius:8px; flex-shrink:0;}
.nav-links{display:none; gap:32px; font-size:13px; color:var(--text-mute); letter-spacing:0.05em; text-transform:uppercase; font-weight:600;}
.nav-links a:hover{color:var(--gold);}
.nav-right{display:flex; align-items:center; gap:14px;}
.icon-btn{width:38px; height:38px; border-radius:50%; background:var(--surface); border:1px solid var(--line); display:flex; align-items:center; justify-content:center; position:relative;}
.icon-btn svg{width:17px; height:17px;}
.cart-badge{position:absolute; top:-4px; right:-4px; background:var(--gold); color:#0D0D0F; font-size:10px; font-weight:700; width:16px; height:16px; border-radius:50%; display:flex; align-items:center; justify-content:center;}
.menu-btn{display:flex; width:38px; height:38px; border-radius:50%; background:var(--surface); border:1px solid var(--line); align-items:center; justify-content:center;}
.menu-btn svg{width:18px; height:18px;}

/* ===== HERO ===== */
.hero{position:relative; min-height:420px; display:flex; flex-direction:column; justify-content:flex-end; padding:80px 20px 28px; overflow:hidden;}
.hero-bg{
  position:absolute; inset:0;
  background:
    radial-gradient(120% 90% at 20% 0%, rgba(46,143,255,0.28) 0%, transparent 55%),
    radial-gradient(100% 80% at 90% 100%, rgba(255,91,31,0.22) 0%, transparent 60%),
    linear-gradient(180deg, var(--bg) 0%, var(--surface) 60%, var(--bg) 100%);
}
.hero-content{position:relative; z-index:2;}
.eyebrow{font-size:11px; letter-spacing:0.24em; text-transform:uppercase; color:var(--gold); margin-bottom:12px; display:block; font-weight:700;}
.hero h1{font-size:38px; font-weight:400; line-height:0.98; letter-spacing:0.005em; max-width:460px; margin-bottom:14px;}
.hero h1 em{font-style:normal; color:var(--gold);}
.hero p{font-size:14px; color:var(--text-mute); max-width:360px; line-height:1.55; margin-bottom:20px; font-weight:400;}
.hero-actions{display:flex; gap:10px; flex-wrap:wrap;}
.btn-gold{display:inline-flex; align-items:center; gap:10px; background:var(--gold); color:#0D0D0F; font-weight:700; font-size:13px; text-transform:uppercase; letter-spacing:0.04em; padding:14px 24px; border-radius:8px; transition:transform .2s ease, opacity .2s ease;}
.btn-gold:active{transform:scale(0.97);}
.btn-ghost{display:inline-flex; align-items:center; gap:8px; border:1.5px solid var(--line); color:var(--text); font-weight:700; font-size:13px; text-transform:uppercase; letter-spacing:0.04em; padding:14px 24px; border-radius:8px; background:rgba(255,255,255,0.03);}
.btn-gold svg, .btn-ghost svg{width:15px; height:15px;}

/* ===== CATEGORY TABS ===== */
.cat-section{padding:22px 0 4px;}
.cat-scroll{display:flex; gap:8px; overflow-x:auto; padding:0 20px 6px; -webkit-overflow-scrolling:touch;}
.cat-pill{flex-shrink:0; padding:10px 18px; border-radius:8px; background:var(--surface); border:1px solid var(--line); font-size:12px; color:var(--text-mute); font-weight:700; letter-spacing:0.04em; text-transform:uppercase; transition:all .2s ease; white-space:nowrap;}
.cat-pill.active{background:var(--gold); color:#0D0D0F; border-color:var(--gold); font-weight:700;}

/* ===== PRODUCT SECTION ===== */
.prod-section{padding:18px 0 30px;}
.prod-header{display:flex; align-items:baseline; justify-content:space-between; padding:0 20px; margin-bottom:12px;}
.prod-header h2{font-size:22px; font-weight:400;}
.prod-header span{font-size:11px; color:var(--text-mute); letter-spacing:0.05em; text-transform:uppercase; font-weight:600;}

.carousel{display:flex; gap:14px; overflow-x:auto; padding:4px 20px 16px; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;}
.card{scroll-snap-align:start; flex-shrink:0; width:168px; background:var(--surface); border:1px solid var(--line); border-radius:14px; overflow:hidden; position:relative; transition:transform .2s ease;}
.card:active{transform:scale(0.97);}
.card-img{width:100%; height:200px; position:relative; overflow:hidden; background:linear-gradient(160deg, var(--surface-2), var(--bg));}
.card-img img{width:100%; height:100%; object-fit:cover;}
.card-img-scroll{display:flex; width:100%; height:100%; overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;}
.card-img-scroll img{width:100%; height:100%; object-fit:cover; flex-shrink:0; scroll-snap-align:start;}
.card-img-dots{position:absolute; bottom:8px; left:0; right:0; display:flex; justify-content:center; gap:4px; z-index:2; pointer-events:none;}
.card-img-dots .dot{width:5px; height:5px; border-radius:50%; background:rgba(248,248,248,0.45); transition:background .2s ease, transform .2s ease;}
.card-img-dots .dot.active{background:var(--gold); transform:scale(1.35);}
.note-tag{position:absolute; top:8px; left:8px; z-index:2; font-size:9px; letter-spacing:0.08em; text-transform:uppercase; font-weight:700; background:rgba(13,13,15,0.72); backdrop-filter:blur(6px); color:var(--gold); padding:4px 8px; border-radius:6px; border:1px solid rgba(255,91,31,0.35);}
.fav-btn{position:absolute; top:8px; right:8px; z-index:2; width:28px; height:28px; border-radius:50%; background:rgba(13,13,15,0.6); backdrop-filter:blur(6px); display:flex; align-items:center; justify-content:center; border:1px solid var(--line);}
.fav-btn svg{width:13px; height:13px; color:var(--text);}
.card-body{padding:12px 12px 14px;}
.card-body .p-name{font-size:14px; font-weight:700; margin-bottom:2px; line-height:1.25;}
.card-body .p-desc{font-size:11px; color:var(--text-mute); margin-bottom:8px; line-height:1.4;}
.card-foot{display:flex; align-items:center; justify-content:space-between;}
.p-price{font-size:15px; font-weight:800; color:var(--gold);}
.p-price small{font-size:10px; color:var(--text-mute); font-weight:400; text-decoration:line-through; margin-right:4px;}
.add-btn{width:32px; height:32px; border-radius:8px; background:var(--gold); color:#0D0D0F; display:flex; align-items:center; justify-content:center; flex-shrink:0;}
.add-btn svg{width:15px; height:15px;}

/* ===== BANNER ===== */
.banner{margin:8px 20px 30px; border-radius:16px; overflow:hidden; position:relative; min-height:240px; display:flex; align-items:flex-end; padding:24px; background:linear-gradient(180deg, rgba(13,13,15,0.1) 0%, rgba(13,13,15,0.9) 100%), linear-gradient(135deg, #241a12 0%, #0D0D0F 65%); border:1px solid var(--line);}
.banner-inner span{font-size:11px; letter-spacing:0.2em; text-transform:uppercase; font-weight:700; color:var(--gold); display:block; margin-bottom:8px;}
.banner-inner h3{font-size:28px; font-weight:400; max-width:280px; line-height:1.05; margin-bottom:14px;}
.banner-inner p{font-size:13px; color:var(--text-mute); max-width:260px; margin-bottom:16px; line-height:1.5;}

/* ===== FOOTER ===== */
footer{padding:44px 20px 100px;}
.footer-logo{font-family:'Anton',sans-serif; font-size:26px; font-weight:400; text-transform:uppercase; margin-bottom:10px;}
footer p.tag{font-size:13px; color:var(--text-mute); max-width:340px; line-height:1.6; margin-bottom:8px;}
.footer-links{display:flex; flex-direction:column; gap:10px; margin:20px 0;}
.footer-links a{font-size:13px; color:var(--text-mute);}
.footer-links a:hover{color:var(--gold);}
.footer-bottom{border-top:1px solid var(--line); padding-top:20px; font-size:11px; color:var(--text-mute); display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px;}

/* ===== WHATSAPP FLOAT ===== */
.wa-float{position:fixed; bottom:20px; right:20px; z-index:60; width:56px; height:56px; border-radius:50%; background:#25D366; display:flex; align-items:center; justify-content:center; box-shadow:0 8px 24px rgba(0,0,0,0.4);}
.wa-float svg{width:28px; height:28px; color:#fff;}

/* ===== MOBILE MENU ===== */
.mobile-menu{position:fixed; inset:0; z-index:70; background:rgba(13,13,15,0.97); backdrop-filter:blur(10px); display:flex; flex-direction:column; padding:24px 24px 40px; transform:translateX(100%); transition:transform .3s ease;}
.mobile-menu.open{transform:translateX(0);}
.mobile-menu-top{display:flex; justify-content:space-between; align-items:center; margin-bottom:50px;}
.mobile-menu a{font-size:26px; font-family:'Anton',sans-serif; font-weight:400; text-transform:uppercase; padding:14px 0; border-bottom:1px solid var(--line);}

/* ===== CART DRAWER ===== */
.cart-overlay, .modal-overlay, .fav-overlay{position:fixed; inset:0; background:rgba(0,0,0,0.6); z-index:80; opacity:0; pointer-events:none; transition:opacity .25s ease;}
.cart-overlay.open, .modal-overlay.open, .fav-overlay.open{opacity:1; pointer-events:auto;}
.cart-drawer, .fav-drawer{position:fixed; top:0; right:0; bottom:0; width:100%; max-width:380px; background:var(--surface); z-index:90; transform:translateX(100%); transition:transform .3s ease; display:flex; flex-direction:column;}
.cart-drawer.open, .fav-drawer.open{transform:translateX(0);}
.cart-header{display:flex; justify-content:space-between; align-items:center; padding:20px; border-bottom:1px solid var(--line);}
.cart-header h3{font-size:20px;}
.cart-items{flex:1; overflow-y:auto; padding:12px 20px;}
.cart-line{display:flex; align-items:center; gap:12px; padding:14px 0; border-bottom:1px solid var(--line);}
.cart-line .ci-thumb{width:52px; height:52px; border-radius:10px; object-fit:cover; background:var(--surface-2); border:1px solid var(--line); flex-shrink:0;}
.cart-line .ci-name{flex:1; font-size:13px; font-weight:600;}
.cart-line .ci-price{font-size:12px; color:var(--gold);}
.cart-qty{display:flex; align-items:center; gap:8px;}
.cart-qty button{width:24px; height:24px; border-radius:50%; background:var(--surface-2); border:1px solid var(--line); font-size:14px; display:flex; align-items:center; justify-content:center;}
.cart-remove{color:var(--text-mute); font-size:11px; text-decoration:underline; margin-top:4px; cursor:pointer;}
.cart-empty{color:var(--text-mute); font-size:13px; text-align:center; padding:40px 0;}
.cart-coupon{padding:16px 20px; border-top:1px solid var(--line);}
.coupon-row{display:flex; align-items:center; gap:6px; background:var(--surface-2); border:1.5px dashed rgba(255,91,31,0.45); border-radius:10px; padding:5px 5px 5px 12px; transition:border-color .2s ease, background .2s ease;}
.coupon-row:focus-within{border-color:var(--gold); border-style:solid;}
.coupon-row .coupon-icon{width:16px; height:16px; color:var(--gold); flex-shrink:0;}
.coupon-row input{flex:1; min-width:0; background:transparent; border:none; color:var(--text); padding:10px 8px; border-radius:0; font-size:13px; font-family:inherit; text-transform:uppercase; letter-spacing:0.02em;}
.coupon-row input:focus{outline:none;}
.coupon-row input::placeholder{text-transform:none; color:var(--text-mute);}
.btn-coupon{flex-shrink:0; display:inline-flex; align-items:center; gap:6px; background:linear-gradient(135deg, var(--gold), #ff7a45); border:none; color:#0D0D0F; font-weight:800; font-size:12px; text-transform:uppercase; letter-spacing:0.03em; padding:11px 18px; border-radius:7px; box-shadow:0 4px 14px rgba(255,91,31,0.3); transition:transform .15s ease, box-shadow .15s ease, opacity .15s ease;}
.btn-coupon svg{width:13px; height:13px;}
.btn-coupon:hover{transform:translateY(-1px); box-shadow:0 6px 18px rgba(255,91,31,0.42);}
.btn-coupon:active{transform:scale(0.96); box-shadow:0 2px 8px rgba(255,91,31,0.3);}
.btn-coupon:disabled{opacity:0.55; cursor:not-allowed; transform:none; box-shadow:none;}
.coupon-msg{font-size:12px; margin-top:9px; min-height:14px; display:flex; align-items:center; gap:6px; font-weight:600;}
.coupon-msg.success{color:#5fd18a;}
.coupon-msg.error{color:#ff9b9b;}
.cart-total-lines{font-size:12px; color:var(--text-mute); margin-bottom:8px;}
.cart-total-lines div{display:flex; justify-content:space-between; margin-bottom:4px;}
.cart-total-lines .discount-line{color:#5fd18a;}
.cart-footer{padding:20px; border-top:1px solid var(--line);}
.cart-total{display:flex; justify-content:space-between; font-size:15px; margin-bottom:14px;}
.cart-total strong{color:var(--gold);}

/* ===== FAVORITES DRAWER ===== */
.fav-line{display:flex; align-items:center; gap:12px; padding:14px 0; border-bottom:1px solid var(--line);}
.fav-line .ci-thumb{width:52px; height:52px; border-radius:10px; object-fit:cover; background:var(--surface-2); border:1px solid var(--line); flex-shrink:0;}
.fav-line .ci-name{flex:1; font-size:13px; font-weight:600;}
.fav-line .ci-price{font-size:12px; color:var(--gold); margin-bottom:6px;}
.fav-line .fav-actions{display:flex; gap:8px; align-items:center; margin-top:4px;}
.fav-add-btn{font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:0.03em; color:#0D0D0F; background:var(--gold); padding:7px 14px; border-radius:6px;}
.fav-remove{color:var(--text-mute); font-size:11px; text-decoration:underline; cursor:pointer;}
.fav-btn.active svg{fill:var(--gold); stroke:var(--gold);}

/* ===== CHECKOUT MODAL ===== */
.modal-box{position:fixed; top:50%; left:50%; transform:translate(-50%,-50%); width:92%; max-width:420px; max-height:88vh; overflow-y:auto; background:var(--surface); border-radius:18px; z-index:95;}
.modal-body{padding:20px;}
.mf-label{display:block; font-size:12px; color:var(--text-mute); margin:14px 0 6px;}
.mf-label:first-child{margin-top:0;}
.mf-input{width:100%; background:var(--surface-2); border:1px solid var(--line); color:var(--text); padding:11px 12px; border-radius:8px; font-size:14px; font-family:inherit;}
.mf-input:focus{outline:none; border-color:var(--gold);}
textarea.mf-input{resize:vertical; min-height:60px;}
.mf-error{color:#ff9b9b; font-size:12px; margin-top:10px; min-height:14px;}

/* ===== DESKTOP ===== */
@media(min-width:768px){
  nav{padding:20px 40px;}
  .nav-links{display:flex;}
  .menu-btn{display:none;}
  .hero{padding:0 40px 40px; align-items:flex-start; min-height:520px;}
  .hero-content{max-width:600px;}
  .hero h1{font-size:50px;}
  .hero p{font-size:15px; max-width:420px;}
  .cat-scroll{padding:0 40px 6px; justify-content:center;}
  .prod-header{padding:0 40px;}
  .carousel{padding:4px 40px 16px;}
  .card{width:220px;}
  .card-img{height:260px;}
  .banner{margin:12px 40px 44px; min-height:300px; padding:40px;}
  .banner-inner h3{font-size:30px; max-width:380px;}
  footer{padding:60px 40px 60px;}
  .footer-top{display:flex; justify-content:space-between; align-items:flex-start;}
  .footer-links{flex-direction:row; gap:36px; margin:0;}
}