/* ============ RESET & VARIABLES ============ */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
:root{
  --nude:#E8D5C4;--nude-dark:#D4B5A0;--cream:#F8F4F0;
  --brown:#3D2B1F;--gold:#C9A77C;--black:#1A1A1A;--gray:#777;
  --shadow:0 10px 40px rgba(0,0,0,.08);
  --transition:cubic-bezier(.4,0,.2,1);
}
html{scroll-behavior:smooth}
body{font-family:'Inter',sans-serif;color:var(--black);background:var(--cream);line-height:1.6;overflow-x:hidden}
body.no-scroll{overflow:hidden}
h1,h2,h3,h4{font-family:'Cormorant Garamond',serif;font-weight:500;letter-spacing:.5px}
img{max-width:100%;display:block}
a{text-decoration:none;color:inherit}
button{cursor:pointer;font-family:inherit;border:none;background:none}
.container{max-width:1280px;margin:0 auto;padding:0 24px}

/* TOP BAR */
.topbar{background:var(--brown);color:var(--cream);overflow:hidden;font-size:13px;padding:10px 0;letter-spacing:1px}
.topbar-slider{display:flex;animation:slide 20s linear infinite;white-space:nowrap}
.topbar-slider span{padding:0 30px}
.topbar-slider i{margin-right:8px;color:var(--gold)}
@keyframes slide{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}

/* HEADER */
header{background:rgba(248,244,240,.95);backdrop-filter:blur(10px);position:sticky;top:0;z-index:100;border-bottom:1px solid rgba(0,0,0,.05);transition:all .3s}
header.scrolled{box-shadow:0 4px 20px rgba(0,0,0,.08)}
.nav{display:flex;justify-content:space-between;align-items:center;padding:20px 0;transition:padding .3s}
header.scrolled .nav{padding:12px 0}
.logo{font-family:'Cormorant Garamond',serif;font-size:34px;font-weight:600;letter-spacing:8px;cursor:pointer}
.logo span{color:var(--gold)}
.menu{display:flex;gap:35px;list-style:none}
.menu a{font-size:13px;font-weight:400;letter-spacing:1.5px;text-transform:uppercase;position:relative;transition:.3s}
.menu a::after{content:'';position:absolute;bottom:-5px;left:0;width:0;height:1px;background:var(--brown);transition:width .3s}
.menu a:hover::after,.menu a.active::after{width:100%}
.menu a.active{color:var(--gold)}
.icons{display:flex;gap:22px;font-size:18px;align-items:center}
.icons > i,.icons > .cart-btn,.icons > .wish-btn{cursor:pointer;transition:.3s;position:relative}
.icons > i:hover{color:var(--gold);transform:translateY(-2px)}
.badge-count{position:absolute;top:-8px;right:-10px;background:var(--brown);color:#fff;width:18px;height:18px;border-radius:50%;font-size:10px;display:flex;align-items:center;justify-content:center;font-family:'Inter',sans-serif;transition:transform .3s}
.badge-count.bump{animation:bump .4s}
@keyframes bump{0%{transform:scale(1)}50%{transform:scale(1.4)}100%{transform:scale(1)}}
.menu-toggle{display:none;font-size:22px;cursor:pointer}

/* MEGA MENU */
.menu li.has-mega{position:static}
.mega{position:absolute;left:0;right:0;top:100%;background:#fff;box-shadow:0 20px 40px rgba(0,0,0,.08);border-top:1px solid #eee;padding:40px 0;opacity:0;visibility:hidden;transform:translateY(-8px);transition:.25s var(--transition);z-index:99}
.menu li.has-mega:hover .mega,.mega:hover{opacity:1;visibility:visible;transform:translateY(0)}
.mega-grid{max-width:1280px;margin:0 auto;padding:0 24px;display:grid;grid-template-columns:1fr 1fr 1fr 1fr 1.2fr;gap:40px;text-align:left}
.mega h5{font-family:'Inter',sans-serif;font-size:12px;letter-spacing:2px;text-transform:uppercase;color:var(--brown);margin-bottom:18px;font-weight:600;padding-bottom:10px;border-bottom:1px solid #eee}
.mega ul{list-style:none}
.mega ul li{margin-bottom:10px}
.mega ul li a{font-size:14px;color:#555;transition:.2s;display:inline-block}
.mega ul li a:hover{color:var(--brown);transform:translateX(4px)}
.mega ul li a.hot{color:var(--gold);font-weight:500}
.mega .col-dots{display:flex;flex-wrap:wrap;gap:10px}
.mega .col-dots a{display:flex;align-items:center;gap:8px;font-size:13px;color:#555;width:46%}
.mega .col-dots .dot{width:18px;height:18px;border-radius:50%;border:1px solid #ddd}
.mega .col-sizes{display:flex;flex-wrap:wrap;gap:6px}
.mega .col-sizes a{width:42px;height:38px;border:1px solid #ddd;display:flex;align-items:center;justify-content:center;font-size:12px;color:#555;transition:.2s}
.mega .col-sizes a:hover{background:var(--brown);color:#fff;border-color:var(--brown)}
.mega-banner{position:relative;overflow:hidden;min-height:240px;background-size:cover;background-position:center}
.mega-banner::after{content:'';position:absolute;inset:0;background:linear-gradient(rgba(0,0,0,.1),rgba(0,0,0,.5))}
.mega-banner .info{position:absolute;bottom:20px;left:20px;right:20px;z-index:2;color:#fff}
.mega-banner .info h4{font-size:22px;color:#fff;margin-bottom:6px}
.mega-banner .info .btn-mini{display:inline-block;margin-top:10px;background:#fff;color:var(--brown);padding:8px 18px;font-size:11px;letter-spacing:1.5px;text-transform:uppercase;font-weight:500}
@media(max-width:1100px){.mega{display:none}}

/* MOBILE MENU */
.mobile-menu{position:fixed;top:0;left:0;width:80%;max-width:320px;height:100%;background:#fff;z-index:201;padding:30px;transform:translateX(-100%);transition:transform .4s var(--transition);display:flex;flex-direction:column}
.mobile-menu.active{transform:translateX(0)}
.mobile-menu .close-mm{align-self:flex-end;font-size:22px;cursor:pointer;margin-bottom:30px}
.mobile-menu a{display:block;padding:15px 0;font-size:16px;letter-spacing:2px;text-transform:uppercase;border-bottom:1px solid #f0f0f0}

/* SEARCH */
.search-overlay{position:fixed;inset:0;background:rgba(248,244,240,.98);z-index:300;display:flex;align-items:center;justify-content:center;flex-direction:column;opacity:0;visibility:hidden;transition:.3s}
.search-overlay.active{opacity:1;visibility:visible}
.search-overlay .close-search{position:absolute;top:30px;right:30px;font-size:30px;cursor:pointer}
.search-overlay input{width:90%;max-width:600px;padding:20px 0;font-size:24px;background:transparent;border:none;border-bottom:1px solid var(--brown);outline:none;font-family:'Cormorant Garamond',serif;text-align:center}
.search-results{margin-top:30px;width:90%;max-width:600px;max-height:300px;overflow-y:auto}
.search-result-item{display:flex;gap:15px;padding:12px;cursor:pointer;transition:.2s;align-items:center}
.search-result-item:hover{background:#fff}
.search-result-item img{width:60px;height:75px;object-fit:cover}
.search-result-item h5{font-family:'Inter',sans-serif;font-size:14px;margin-bottom:4px}
.search-result-item .price{color:var(--brown);font-size:13px;font-weight:500}

/* BUTTONS */
.btn{display:inline-block;padding:16px 38px;font-size:13px;letter-spacing:2px;text-transform:uppercase;background:#fff;color:var(--black);transition:all .4s;border:1px solid #fff;cursor:pointer;font-family:inherit;text-align:center}
.btn:hover{background:transparent;color:#fff;transform:translateY(-2px)}
.btn-dark{background:var(--brown);color:#fff;border-color:var(--brown)}
.btn-dark:hover{background:transparent;color:var(--brown)}
.btn-outline{background:transparent;color:var(--brown);border-color:var(--brown)}
.btn-outline:hover{background:var(--brown);color:#fff}

/* BREADCRUMB */
.breadcrumb{background:#fff;padding:20px 0;border-bottom:1px solid #eee}
.breadcrumb .container{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--gray)}
.breadcrumb a:hover{color:var(--gold)}
.breadcrumb i{font-size:10px}
.breadcrumb .current{color:var(--brown);font-weight:500}

/* PAGE HEADER */
.page-header{background:linear-gradient(rgba(0,0,0,.3),rgba(0,0,0,.4)),url('https://images.unsplash.com/photo-1490481651871-ab68de25d43d?w=1600&q=80') center/cover;color:#fff;text-align:center;padding:120px 20px 100px}
.page-header h1{font-size:clamp(40px,5vw,64px);margin-bottom:15px}
.page-header p{opacity:.9;font-size:16px;letter-spacing:2px;text-transform:uppercase}

/* SECTIONS */
section{padding:80px 0}
.section-title{text-align:center;margin-bottom:50px}
.section-title .sub{font-size:12px;letter-spacing:4px;color:var(--gold);text-transform:uppercase;margin-bottom:12px}
.section-title h2{font-size:clamp(32px,4vw,52px);margin-bottom:15px}
.section-title p{color:var(--gray);max-width:500px;margin:0 auto}

/* PRODUCTS */
.products{display:grid;grid-template-columns:repeat(4,1fr);gap:30px}
.product{background:#fff;position:relative;transition:all .4s var(--transition);animation:fadeUp .6s both}
.product:hover{transform:translateY(-8px)}
.product-img{position:relative;overflow:hidden;background:var(--cream);aspect-ratio:3/4}
.product-img img{width:100%;height:100%;object-fit:cover;transition:transform .6s,opacity .4s}
.product-img img.alt{position:absolute;inset:0;opacity:0}
.product:hover .product-img img.main{opacity:0}
.product:hover .product-img img.alt{opacity:1}
.badge{position:absolute;top:15px;left:15px;background:var(--brown);color:#fff;padding:5px 12px;font-size:11px;letter-spacing:1px;text-transform:uppercase;z-index:2}
.badge.sale{background:var(--gold)}
.wishlist-icon{position:absolute;top:15px;right:15px;width:38px;height:38px;background:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:2;transition:.3s;font-size:14px;color:#999}
.wishlist-icon:hover,.wishlist-icon.active{color:#e74c3c;transform:scale(1.1)}
.wishlist-icon.active i{font-weight:900}
.quick-actions{position:absolute;bottom:15px;left:50%;transform:translateX(-50%) translateY(20px);display:flex;gap:8px;opacity:0;transition:.4s}
.product:hover .quick-actions{transform:translateX(-50%) translateY(0);opacity:1}
.quick-actions button{background:#fff;width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;transition:.3s;font-size:14px;box-shadow:0 4px 12px rgba(0,0,0,.15)}
.quick-actions button:hover{background:var(--brown);color:#fff}
.product-info{padding:18px 0;text-align:center}
.product-info .brand{font-family:'Inter',sans-serif;font-size:10px;letter-spacing:3px;text-transform:uppercase;color:var(--gold);font-weight:500;margin-bottom:6px}
.product-info h4{font-family:'Inter',sans-serif;font-size:15px;font-weight:500;margin-bottom:8px;letter-spacing:.5px}
.product-info .price{color:var(--brown);font-weight:500;font-size:16px}
.product-info .old{text-decoration:line-through;color:var(--gray);font-size:13px;margin-right:8px;font-weight:400}
.rating{color:var(--gold);font-size:11px;margin-bottom:6px;letter-spacing:1px}

/* FORMS */
.form-group{margin-bottom:20px}
.form-group label{display:block;font-size:12px;letter-spacing:1px;text-transform:uppercase;margin-bottom:8px;color:var(--gray)}
.form-group input,.form-group textarea,.form-group select{width:100%;padding:14px 16px;border:1px solid #ddd;background:#fff;font-family:inherit;font-size:14px;outline:none;transition:.3s}
.form-group input:focus,.form-group textarea:focus,.form-group select:focus{border-color:var(--brown)}
.form-group textarea{resize:vertical;min-height:120px}

/* FOOTER */
footer{background:var(--black);color:#bbb;padding:70px 0 0}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:50px;margin-bottom:50px}
.footer-grid h4{color:#fff;font-family:'Inter',sans-serif;font-size:14px;letter-spacing:2px;text-transform:uppercase;margin-bottom:20px;font-weight:500}
.footer-grid p{font-size:14px;margin-bottom:20px;line-height:1.8}
.footer-grid ul{list-style:none}
.footer-grid ul li{margin-bottom:12px;font-size:14px;transition:.3s;cursor:pointer}
.footer-grid ul li:hover{color:var(--gold);padding-left:5px}
.socials{display:flex;gap:15px}
.socials a{width:38px;height:38px;border:1px solid #444;display:flex;align-items:center;justify-content:center;border-radius:50%;transition:.3s}
.socials a:hover{background:var(--gold);border-color:var(--gold);color:#fff;transform:translateY(-3px)}
.payments{display:flex;gap:8px;flex-wrap:wrap;margin-top:15px}
.payments i{font-size:28px;color:#888}
.copy{border-top:1px solid #2a2a2a;padding:25px 0;text-align:center;font-size:13px;color:#666}

/* CART DRAWER */
.overlay{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:200;opacity:0;visibility:hidden;transition:.3s}
.overlay.active{opacity:1;visibility:visible}
.cart-drawer{position:fixed;top:0;right:0;width:420px;max-width:100%;height:100%;background:#fff;z-index:201;transform:translateX(100%);transition:transform .4s var(--transition);display:flex;flex-direction:column}
.cart-drawer.active{transform:translateX(0)}
.cart-header{padding:25px;border-bottom:1px solid #eee;display:flex;justify-content:space-between;align-items:center}
.cart-header h3{font-size:24px}
.cart-close{font-size:22px;cursor:pointer;transition:.3s}
.cart-close:hover{transform:rotate(90deg);color:var(--gold)}
.freeshipping-bar{padding:15px 25px;background:var(--cream);font-size:13px;text-align:center}
.freeshipping-bar .progress{height:4px;background:#ddd;margin-top:8px;border-radius:2px;overflow:hidden}
.freeshipping-bar .progress-fill{height:100%;background:var(--gold);transition:width .6s var(--transition)}
.cart-items{flex:1;overflow-y:auto;padding:20px 25px}
.cart-empty{text-align:center;padding:60px 20px;color:var(--gray)}
.cart-empty i{font-size:60px;margin-bottom:20px;color:#ddd}
.cart-item{display:flex;gap:15px;padding:15px 0;border-bottom:1px solid #f0f0f0;animation:slideIn .3s}
@keyframes slideIn{from{opacity:0;transform:translateX(20px)}to{opacity:1;transform:translateX(0)}}
.cart-item img{width:80px;height:100px;object-fit:cover}
.cart-item-info{flex:1}
.cart-item-info h5{font-size:14px;margin-bottom:5px;font-family:'Inter',sans-serif;font-weight:500}
.cart-item-info .ci-price{color:var(--brown);font-weight:500;font-size:14px;margin-bottom:8px}
.qty{display:flex;align-items:center;gap:8px}
.qty button{width:26px;height:26px;border:1px solid #ddd;display:flex;align-items:center;justify-content:center;transition:.2s}
.qty button:hover{background:var(--brown);color:#fff;border-color:var(--brown)}
.qty span{font-size:14px;min-width:20px;text-align:center}
.remove-btn{color:#c00;cursor:pointer;font-size:12px;margin-top:5px;display:inline-block}
.remove-btn:hover{text-decoration:underline}
.cart-footer{padding:25px;border-top:1px solid #eee;background:var(--cream)}
.cart-total{display:flex;justify-content:space-between;margin-bottom:20px;font-size:18px;font-weight:500}
.checkout-btn{width:100%;background:var(--brown);color:#fff;padding:16px;font-size:13px;letter-spacing:2px;text-transform:uppercase;transition:.3s;display:block;text-align:center}
.checkout-btn:hover{background:var(--gold)}

/* TOAST */
.toast{position:fixed;bottom:30px;left:50%;transform:translateX(-50%) translateY(100px);background:var(--brown);color:#fff;padding:15px 30px;border-radius:4px;z-index:500;opacity:0;transition:.4s;font-size:14px;box-shadow:var(--shadow)}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.toast i{color:var(--gold);margin-right:8px}

/* FLOATING */
.back-top{position:fixed;bottom:30px;right:30px;width:48px;height:48px;background:var(--brown);color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;opacity:0;visibility:hidden;transition:.3s;z-index:50;box-shadow:var(--shadow)}
.back-top.show{opacity:1;visibility:visible}
.back-top:hover{background:var(--gold);transform:translateY(-3px)}
.whatsapp-float{position:fixed;bottom:30px;left:30px;width:55px;height:55px;background:#25D366;color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:50;box-shadow:0 4px 20px rgba(37,211,102,.4);font-size:26px;animation:pulse-wa 2s infinite}
.whatsapp-float:hover{transform:scale(1.1)}
@keyframes pulse-wa{0%,100%{box-shadow:0 4px 20px rgba(37,211,102,.4)}50%{box-shadow:0 4px 30px rgba(37,211,102,.8)}}

/* REVEAL */
.reveal{opacity:0;transform:translateY(40px);transition:all .8s ease}
.reveal.visible{opacity:1;transform:translateY(0)}
@keyframes fadeUp{from{opacity:0;transform:translateY(40px)}to{opacity:1;transform:translateY(0)}}

/* RESPONSIVE */
@media(max-width:968px){
  .menu{display:none}
  .menu-toggle{display:block}
  .products{grid-template-columns:repeat(2,1fr);gap:20px}
  .footer-grid{grid-template-columns:1fr 1fr;gap:30px}
  section{padding:60px 0}
}
@media(max-width:480px){
  .products{grid-template-columns:repeat(2,1fr);gap:15px}
  .footer-grid{grid-template-columns:1fr}
  .cart-drawer{width:100%}
}