@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');
:root {
--primary: #667eea;
--secondary: #764ba2;
--accent: #f72585;
--dark: #1a1a2e;
--text: #2d3436;
--text-light: #636e72;
--bg: #ffffff;
--bg-alt: #f8f9fa;
--border: #e8e8e8;
--shadow: 0 10px 40px rgba(0,0,0,.08);
--radius: 16px;
--transition: all .3s cubic-bezier(.4,0,.2,1);
}
* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior: smooth; }
body { font-family:'Inter', sans-serif; color:var(--text); background:var(--bg); line-height:1.6; overflow-x:hidden; }
a { text-decoration:none; color:inherit; }
img { max-width:100%; height:auto; }
.container { max-width:1200px; margin:0 auto; padding:0 20px; }
/* ===== TOP BAR ===== */
.top-bar { background:var(--dark); color:#b0b0c8; padding:8px 0; font-size:.8rem; }
.top-bar .container { display:flex; justify-content:space-between; align-items:center; }
.top-bar a { color:#b0b0c8; margin-left:15px; transition:var(--transition); }
.top-bar a:hover { color:#fff; }
/* ===== HEADER ===== */
.header { padding:15px 0; background:#fff; box-shadow:0 2px 20px rgba(0,0,0,.05); position:sticky; top:0; z-index:1000; }
.header .container { display:flex; justify-content:space-between; align-items:center; gap:20px; }
.logo { font-size:1.6rem; font-weight:800; background:linear-gradient(135deg,var(--primary),var(--secondary)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; display:flex; align-items:center; gap:8px; }
.logo img { max-height:75px; width:auto; -webkit-text-fill-color:initial; }
.logo span { -webkit-text-fill-color:initial; color:var(--dark); font-weight:300; }
.search-bar { flex:1; max-width:500px; position:relative; }
.search-bar input { width:100%; padding:12px 20px; border:2px solid var(--border); border-radius:50px; font-size:.9rem; outline:none; transition:var(--transition); }
.search-bar input:focus { border-color:var(--primary); box-shadow:0 0 0 4px rgba(102,126,234,.1); }
.search-bar button { position:absolute; right:5px; top:50%; transform:translateY(-50%); background:linear-gradient(135deg,var(--primary),var(--secondary)); color:#fff; border:none; padding:8px 18px; border-radius:50px; cursor:pointer; }
.header-icons { display:flex; align-items:center; gap:20px; }
.header-icon { position:relative; font-size:1.2rem; color:var(--text); transition:var(--transition); cursor:pointer; }
.header-icon:hover { color:var(--primary); }
.cart-count { position:absolute; top:-8px; right:-10px; background:var(--accent); color:#fff; font-size:.7rem; width:20px; height:20px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:600; }
/* ===== NAV ===== */
.main-nav { background:#fff; border-bottom:1px solid var(--border); }
.main-nav .container { display:flex; align-items:center; justify-content:space-between; }
.nav-list { display:flex; list-style:none; gap:0; }
.nav-list > li { position:relative; }
.nav-list > li > a { display:block; padding:14px 22px; color:var(--text); font-size:.9rem; font-weight:500; transition:var(--transition); }
.nav-list > li > a:hover, .nav-list > li > a.active { color:var(--primary); }
.nav-list > li > a.active::after { content:''; display:block; height:3px; background:linear-gradient(135deg,var(--primary),var(--secondary)); border-radius:3px; margin-top:2px; }
.dropdown-menu { position:absolute; top:100%; left:0; background:#fff; min-width:220px; border-radius:12px; box-shadow:var(--shadow); opacity:0; visibility:hidden; transform:translateY(10px); transition:var(--transition); z-index:100; }
.nav-list li:hover .dropdown-menu { opacity:1; visibility:visible; transform:translateY(0); }
.dropdown-menu a { display:block; padding:12px 20px; color:var(--text); font-size:.85rem; border-bottom:1px solid var(--border); transition:var(--transition); }
.dropdown-menu a:hover { background:var(--bg-alt); color:var(--primary); padding-left:25px; }
.nav-toggle { display:none; background:none; border:none; font-size:1.5rem; cursor:pointer; padding:10px; }
/* ===== HERO ===== */
.hero-section { position:relative; min-height:500px; display:flex; align-items:center; overflow:hidden; background:linear-gradient(135deg,#667eea15,#764ba215); }
.hero-slider { width:100%; }
.hero-section { position:relative; min-height:500px; display:flex; flex-direction:column; align-items:center; overflow:hidden; background:linear-gradient(135deg,#667eea15,#764ba215); }
.hero-slide.active { display:block; }
.hero-slide .hero-inner { display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:40px; padding:60px 0; min-height:500px; }
.hero-content h1 { font-size:3rem; font-weight:800; line-height:1.2; margin-bottom:15px; }
.hero-content h1 span { background:linear-gradient(135deg,var(--primary),var(--secondary)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; }
.hero-content p { font-size:1.1rem; color:var(--text-light); margin-bottom:30px; max-width:500px; line-height:1.7; }
.hero-btns { display:flex; gap:15px; }
.btn { display:inline-flex; align-items:center; gap:8px; padding:14px 32px; border-radius:50px; font-size:.95rem; font-weight:600; transition:var(--transition); cursor:pointer; border:none; }
.btn-primary { background:linear-gradient(135deg,var(--primary),var(--secondary)); color:#fff; }
.btn-primary:hover { transform:translateY(-3px); box-shadow:0 10px 30px rgba(102,126,234,.4); }
.btn-outline { background:transparent; color:var(--dark); border:2px solid var(--border); }
.btn-outline:hover { border-color:var(--primary); color:var(--primary); }
.hero-image { display:flex; justify-content:center; align-items:center; }
.hero-image img { max-height:450px; object-fit:contain; animation:float 4s ease-in-out infinite; border-radius:20px; }
.hero-dots { display:flex; justify-content:center; gap:10px; margin-top:20px; padding-bottom:20px; position:relative; z-index:5; }
.hero-dot { width:12px; height:12px; border-radius:50%; background:#ddd; border:none; cursor:pointer; transition:var(--transition); }
.hero-dot.active { background:var(--primary); width:30px; border-radius:6px; }
/* Full width banner */
.full-slide { min-height:500px; display:none; align-items:center; background-size:cover; background-position:center; position:relative; width:100%; }
.full-slide.active { display:flex; min-height:500px; background-size:cover !important; background-position:center !important; }
.full-slide { min-height:500px; display:none; align-items:center; background-size:cover; background-position:center; position:relative; width:100%; flex:1; }
.full-slide .container { position:relative; z-index:2; }
.full-content { max-width:550px; color:#fff; }
.full-content h1 { font-size:3rem; font-weight:800; line-height:1.2; margin-bottom:15px; }
.full-content h1 span { color:var(--primary); }
.full-content p { font-size:1.1rem; opacity:.9; margin-bottom:30px; line-height:1.7; }
.full-content .btn-primary { box-shadow:0 10px 30px rgba(102,126,234,.4); }
.full-content .btn-primary:hover { transform:translateY(-3px); }
/* ===== SECTIONS ===== */
.section { padding:80px 0; }
.section-title { text-align:center; margin-bottom:50px; }
.section-title h2 { font-size:2.2rem; font-weight:700; margin-bottom:10px; }
.section-title h2 span { background:linear-gradient(135deg,var(--primary),var(--secondary)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; }
.section-title p { color:var(--text-light); font-size:1rem; max-width:600px; margin:0 auto; }
/* ===== CATEGORY CARDS ===== */
.cat-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:25px; }
.cat-card { background:#fff; border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); transition:var(--transition); cursor:pointer; text-align:center; padding:30px 20px; border:2px solid transparent; }
.cat-card:hover { transform:translateY(-8px); border-color:var(--primary); }
.cat-card .icon { width:80px; height:80px; margin:0 auto 15px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:2rem; }
.cat-card h3 { font-size:1.2rem; margin-bottom:8px; }
.cat-card p { color:var(--text-light); font-size:.85rem; margin-bottom:12px; }
.cat-card .count { color:var(--primary); font-weight:600; font-size:.85rem; }
/* ===== PRODUCT GRID ===== */
.product-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(270px,1fr)); gap:25px; }
.product-card { background:#fff; border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); transition:var(--transition); position:relative; }
.product-card:hover { transform:translateY(-5px); box-shadow:0 20px 50px rgba(0,0,0,.12); }
.product-badge { position:absolute; top:12px; left:12px; z-index:2; }
.product-badge span { display:inline-block; padding:4px 12px; border-radius:20px; font-size:.75rem; font-weight:600; }
.badge-sale { background:var(--accent); color:#fff; }
.badge-new { background:#00b894; color:#fff; }
.badge-discount { background:#fdcb6e; color:#2d3436; }
.product-img { position:relative; overflow:hidden; height:280px; background:var(--bg-alt); }
.product-img img { width:100%; height:100%; object-fit:cover; transition:transform .6s ease; }
.product-card:hover .product-img img { transform:scale(1.08); }
.product-actions { position:absolute; bottom:-50px; left:0; right:0; display:flex; justify-content:center; gap:8px; padding:15px; transition:var(--transition); background:linear-gradient(transparent,rgba(0,0,0,.5)); }
.product-card:hover .product-actions { bottom:0; }
.product-actions button, .product-actions a { width:42px; height:42px; border-radius:50%; border:none; background:#fff; color:var(--text); display:flex; align-items:center; justify-content:center; cursor:pointer; transition:var(--transition); font-size:.9rem; }
.product-actions button:hover, .product-actions a:hover { background:var(--primary); color:#fff; transform:scale(1.1); }
.product-info { padding:20px; }
.product-cat { font-size:.75rem; color:var(--primary); text-transform:uppercase; letter-spacing:1px; font-weight:600; margin-bottom:5px; }
.product-info h3 { font-size:1rem; font-weight:600; margin-bottom:8px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.product-info h3 a { transition:var(--transition); }
.product-info h3 a:hover { color:var(--primary); }
.product-price { display:flex; align-items:center; gap:10px; margin-bottom:8px; }
.current-price { font-size:1.2rem; font-weight:700; color:var(--dark); }
.old-price { font-size:.9rem; color:#bbb; text-decoration:line-through; }
.discount { font-size:.8rem; color:#00b894; font-weight:600; }
.pricing-info { display:flex; gap:10px; font-size:.75rem; margin-top:5px; }
.pricing-info .cod { color:#e17055; font-weight:600; }
.pricing-info .prepaid { color:#00b894; font-weight:600; }
.product-rating { color:#fdcb6e; font-size:.8rem; }
/* ===== FEATURES ===== */
.features { background:var(--bg-alt); }
.features-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:30px; }
.feature-card { text-align:center; padding:30px 20px; background:#fff; border-radius:var(--radius); transition:var(--transition); }
.feature-card:hover { transform:translateY(-5px); box-shadow:var(--shadow); }
.feature-card .icon { width:60px; height:60px; margin:0 auto 15px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:1.5rem; background:linear-gradient(135deg,var(--primary),var(--secondary)); color:#fff; }
.feature-card h3 { font-size:1.1rem; margin-bottom:8px; }
.feature-card p { color:var(--text-light); font-size:.85rem; }
/* ===== NEWSLETTER ===== */
.newsletter { background:linear-gradient(135deg,var(--primary),var(--secondary)); padding:60px 0; text-align:center; color:#fff; }
.newsletter h2 { font-size:2rem; margin-bottom:10px; }
.newsletter p { margin-bottom:25px; opacity:.9; }
.newsletter-form { display:flex; max-width:500px; margin:0 auto; }
.newsletter-form input { flex:1; padding:14px 20px; border:none; border-radius:50px 0 0 50px; font-size:.9rem; outline:none; }
.newsletter-form button { padding:14px 30px; background:var(--dark); color:#fff; border:none; border-radius:0 50px 50px 0; cursor:pointer; font-weight:600; transition:var(--transition); }
.newsletter-form button:hover { background:#000; }
/* ===== FOOTER ===== */
.footer { background:var(--dark); color:#b0b0c8; padding:60px 0 0; }
.footer-grid { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:40px; }
.footer-brand h3 { font-size:1.5rem; font-weight:800; background:linear-gradient(135deg,var(--primary),var(--secondary)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; margin-bottom:15px; }
.footer-brand p { font-size:.88rem; line-height:1.7; }
.footer-brand .social { display:flex; gap:12px; margin-top:20px; }
.footer-brand .social a { width:40px; height:40px; border-radius:50%; background:rgba(255,255,255,.08); color:#b0b0c8; display:flex; align-items:center; justify-content:center; transition:var(--transition); }
.footer-brand .social a:hover { background:var(--primary); color:#fff; transform:translateY(-3px); }
.footer h4 { color:#fff; font-size:1rem; margin-bottom:20px; }
.footer ul { list-style:none; }
.footer ul li { margin-bottom:10px; }
.footer ul li a { color:#b0b0c8; font-size:.88rem; transition:var(--transition); }
.footer ul li a:hover { color:#fff; padding-left:5px; }
.footer-bottom { border-top:1px solid rgba(255,255,255,.08); padding:20px 0; margin-top:40px; display:flex; justify-content:space-between; align-items:center; font-size:.82rem; flex-wrap:wrap; gap:10px; }
.footer-bottom .branding { display:flex; align-items:center; gap:10px; }
.footer-bottom .branding img { height:30px; }
/* ===== PRODUCT DETAIL PAGE ===== */
.product-detail { padding:40px 0; }
.breadcrumb { display:flex; gap:8px; font-size:.85rem; color:var(--text-light); margin-bottom:30px; }
.breadcrumb a { transition:var(--transition); }
.breadcrumb a:hover { color:var(--primary); }
.product-detail-grid { display:grid; grid-template-columns:1fr 1fr; gap:50px; }
.product-gallery { position:relative; }
.main-image { width:100%; height:450px; border-radius:var(--radius); overflow:hidden; cursor:crosshair; background:var(--bg-alt); }
.main-image img { width:100%; height:100%; object-fit:cover; transition:transform .3s ease; }
.zoom-lens { position:absolute; width:200px; height:200px; border:3px solid var(--primary); border-radius:12px; background-repeat:no-repeat; pointer-events:none; opacity:0; transition:opacity .2s; z-index:10; }
.product-gallery:hover .zoom-lens { opacity:1; }
.thumb-list { display:flex; gap:10px; margin-top:15px; }
.thumb-list img { width:80px; height:80px; object-fit:cover; border-radius:10px; cursor:pointer; border:3px solid transparent; transition:var(--transition); }
.thumb-list img.active, .thumb-list img:hover { border-color:var(--primary); }
.product-info-detail .product-cat { font-size:.8rem; }
.product-info-detail h1 { font-size:2rem; font-weight:700; margin:10px 0; }
.product-info-detail .rating { margin:10px 0; display:flex; align-items:center; gap:10px; }
.product-info-detail .rating i { color:#fdcb6e; }
.product-info-detail .rating span { color:var(--text-light); font-size:.85rem; }
.price-box { background:var(--bg-alt); padding:25px; border-radius:var(--radius); margin:20px 0; }
.price-row { display:flex; align-items:baseline; gap:15px; margin-bottom:5px; }
.price-row .price { font-size:2rem; font-weight:800; color:var(--dark); }
.price-row .old-price { font-size:1.1rem; color:#bbb; text-decoration:line-through; }
.price-row .discount-badge { background:#00b894; color:#fff; padding:3px 10px; border-radius:20px; font-size:.8rem; font-weight:600; }
.pricing-options { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:15px 0; }
.pricing-option { padding:12px; border-radius:10px; border:2px solid var(--border); text-align:center; cursor:pointer; transition:var(--transition); font-size:.85rem; }
.pricing-option:hover, .pricing-option.active { border-color:var(--primary); background:rgba(102,126,234,.05); }
.pricing-option .opt-label { font-weight:600; display:block; }
.pricing-option .opt-price { color:var(--primary); font-weight:700; }
.pricing-option .opt-note { display:block; color:#00b894; font-size:.75rem; }
.qty-selector { display:flex; align-items:center; gap:10px; margin:20px 0; }
.qty-selector button { width:40px; height:40px; border-radius:50%; border:2px solid var(--border); background:#fff; font-size:1.2rem; cursor:pointer; transition:var(--transition); }
.qty-selector button:hover { border-color:var(--primary); }
.qty-selector input { width:60px; text-align:center; font-size:1rem; font-weight:600; border:2px solid var(--border); border-radius:8px; padding:8px; }
.product-cta { display:flex; gap:15px; margin:20px 0; }
.product-cta .btn { flex:1; justify-content:center; padding:16px; }
.specs-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:20px 0; }
.spec-item { display:flex; justify-content:space-between; padding:12px; background:var(--bg-alt); border-radius:8px; font-size:.85rem; }
.spec-item .label { color:var(--text-light); }
.spec-item .value { font-weight:600; }
.product-description { margin:30px 0; }
.product-description h2 { font-size:1.3rem; margin-bottom:15px; }
.product-description p { color:var(--text-light); line-height:1.8; }
/* ===== SHOP ===== */
.shop-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:30px; flex-wrap:wrap; gap:15px; }
.shop-header h1 { font-size:1.8rem; }
.shop-controls { display:flex; gap:15px; align-items:center; }
.shop-controls select { padding:10px 15px; border:2px solid var(--border); border-radius:10px; font-size:.85rem; outline:none; }
.category-pills { display:flex; gap:10px; flex-wrap:wrap; margin-bottom:30px; }
.pill { padding:8px 20px; border-radius:50px; border:2px solid var(--border); font-size:.85rem; cursor:pointer; transition:var(--transition); background:#fff; }
.pill:hover, .pill.active { border-color:var(--primary); background:linear-gradient(135deg,var(--primary),var(--secondary)); color:#fff; }
.pagination { display:flex; justify-content:center; gap:10px; margin-top:40px; }
.pagination a { padding:10px 18px; border-radius:10px; border:2px solid var(--border); transition:var(--transition); font-size:.85rem; }
.pagination a:hover, .pagination a.active { border-color:var(--primary); background:var(--primary); color:#fff; }
/* ===== PAGE ===== */
.page-hero { background:linear-gradient(135deg,#667eea15,#764ba215); padding:60px 0; text-align:center; }
.page-hero h1 { font-size:2.5rem; font-weight:700; }
.page-hero p { color:var(--text-light); margin-top:10px; }
.page-content { padding:60px 0; }
.page-content h2 { margin:30px 0 15px; font-size:1.5rem; }
.page-content p { margin-bottom:15px; color:var(--text-light); line-height:1.8; }
.page-content ul { margin:15px 0; padding-left:20px; }
.page-content ul li { margin-bottom:8px; color:var(--text-light); }
/* ===== CART ===== */
.cart-section { padding:40px 0; }
.cart-empty { text-align:center; padding:60px 20px; }
.cart-empty i { font-size:4rem; color:#ddd; margin-bottom:20px; }
.cart-empty h2 { margin-bottom:10px; }
.cart-table { width:100%; border-collapse:collapse; }
.cart-table th { background:var(--bg-alt); padding:15px; text-align:left; font-size:.85rem; color:var(--text-light); }
.cart-table td { padding:15px; border-bottom:1px solid var(--border); vertical-align:middle; }
.cart-product { display:flex; align-items:center; gap:15px; }
.cart-product img { width:80px; height:80px; border-radius:10px; object-fit:cover; }
.cart-remove { color:#e74c3c; cursor:pointer; font-size:.85rem; }
.cart-total { text-align:right; margin-top:30px; padding:20px; background:var(--bg-alt); border-radius:var(--radius); }
.cart-total h3 { font-size:1.5rem; }
.cart-total .btn { margin-top:15px; }
/* ===== CHECKOUT ===== */
.checkout-grid { display:grid; grid-template-columns:1.5fr 1fr; gap:30px; }
.checkout-form { background:#fff; padding:30px; border-radius:var(--radius); box-shadow:var(--shadow); }
.checkout-form h2 { margin-bottom:20px; }
.checkout-form .form-group { margin-bottom:15px; }
.checkout-form .form-group label { display:block; margin-bottom:5px; font-weight:500; font-size:.85rem; }
.checkout-form .form-group input, .checkout-form .form-group select, .checkout-form .form-group textarea { width:100%; padding:12px 15px; border:2px solid var(--border); border-radius:10px; font-size:.9rem; outline:none; transition:var(--transition); }
.checkout-form .form-group input:focus, .checkout-form .form-group select:focus { border-color:var(--primary); }
.order-summary { background:var(--bg-alt); padding:30px; border-radius:var(--radius); position:sticky; top:100px; height:fit-content; }
.order-summary h2 { margin-bottom:20px; }
.order-item { display:flex; justify-content:space-between; padding:10px 0; border-bottom:1px solid var(--border); font-size:.85rem; }
.order-total { display:flex; justify-content:space-between; margin-top:15px; font-weight:700; font-size:1.1rem; }
/* ===== LOGIN/REGISTER ===== */
.auth-section { min-height:70vh; display:flex; align-items:center; justify-content:center; padding:60px 0; }
.auth-box { background:#fff; padding:40px; border-radius:var(--radius); box-shadow:var(--shadow); width:460px; max-width:90vw; }
.auth-box h2 { font-size:1.8rem; margin-bottom:10px; text-align:center; }
.auth-box .subtitle { text-align:center; color:var(--text-light); margin-bottom:30px; }
.auth-box .form-group { margin-bottom:15px; }
.auth-box .form-group label { display:block; margin-bottom:5px; font-weight:500; font-size:.85rem; }
.auth-box .form-group input { width:100%; padding:12px 15px; border:2px solid var(--border); border-radius:10px; font-size:.9rem; outline:none; transition:var(--transition); }
.auth-box .form-group input:focus { border-color:var(--primary); }
.auth-box .btn { width:100%; justify-content:center; padding:14px; }
.auth-divider { display:flex; align-items:center; gap:15px; margin:20px 0; color:var(--text-light); font-size:.85rem; }
.auth-divider::before, .auth-divider::after { content:''; flex:1; height:1px; background:var(--border); }
.social-login { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.social-btn { padding:12px; border-radius:10px; border:2px solid var(--border); display:flex; align-items:center; justify-content:center; gap:8px; cursor:pointer; transition:var(--transition); font-size:.85rem; font-weight:500; background:#fff; }
.social-btn.google:hover { border-color:#DB4437; color:#DB4437; }
.social-btn.facebook:hover { border-color:#1877F2; color:#1877F2; }
.auth-footer { text-align:center; margin-top:20px; font-size:.85rem; color:var(--text-light); }
.auth-footer a { color:var(--primary); font-weight:600; }
/* ===== ACCOUNT ===== */
.account-section { padding:40px 0; }
.account-grid { display:grid; grid-template-columns:280px 1fr; gap:30px; }
.account-sidebar { background:#fff; border-radius:var(--radius); box-shadow:var(--shadow); padding:25px; height:fit-content; }
.account-sidebar .user-info { text-align:center; padding-bottom:20px; border-bottom:1px solid var(--border); margin-bottom:20px; }
.account-sidebar .user-info img { width:80px; height:80px; border-radius:50%; margin-bottom:10px; }
.account-sidebar nav a { display:flex; align-items:center; gap:10px; padding:12px; border-radius:8px; color:var(--text); transition:var(--transition); font-size:.85rem; }
.account-sidebar nav a:hover, .account-sidebar nav a.active { background:var(--bg-alt); color:var(--primary); }
/* ===== 404 ===== */
.four-oh-four { text-align:center; padding:100px 20px; }
.four-oh-four h1 { font-size:8rem; font-weight:800; background:linear-gradient(135deg,var(--primary),var(--secondary)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; line-height:1; }
.four-oh-four p { font-size:1.2rem; color:var(--text-light); margin:20px 0 30px; }
/* ===== RESPONSIVE ===== */
/* Mobile Nav Overlay */
.nav-overlay { display:none; }
/* Tablets & small laptops */
@media(max-width:968px){
.product-detail-grid { grid-template-columns:1fr; }
.footer-grid { grid-template-columns:1fr 1fr; }
.checkout-grid { grid-template-columns:1fr; }
.account-grid { grid-template-columns:1fr; }
.hero-slide .hero-inner { grid-template-columns:1fr; text-align:center; padding:40px 0; min-height:auto; }
.hero-section, .hero-slide, .full-slide { min-height:350px; }
.hero-content p { margin:0 auto 30px; }
.hero-btns { justify-content:center; }
.nav-list { display:none; position:fixed; top:0; left:-280px; width:280px; height:100vh; background:#fff; flex-direction:column; box-shadow:4px 0 20px rgba(0,0,0,.1); z-index:1001; overflow-y:auto; transition:left .3s ease; padding-top:70px; }
.nav-list.open { left:0; display:flex; }
.nav-toggle { display:block; position:relative; z-index:1002; }
.nav-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:1000; }
.nav-overlay.active { display:block; }
.nav-list > li > a { padding:16px 24px; font-size:1rem; border-bottom:1px solid var(--border); }
.nav-list > li > a.active::after { display:none; }
.dropdown-menu { position:static; min-width:auto; border-radius:0; box-shadow:none; opacity:1; visibility:visible; transform:none; display:none; }
.nav-list li.open .dropdown-menu { display:block; }
.dropdown-menu a { padding:12px 36px; font-size:.9rem; }
.hero-content h1 { font-size:2.2rem; }
.hero-image img { max-height:300px; }
.full-content h1 { font-size:2.2rem; }
.about-hero h1 { font-size:2.2rem; }
.about-hero { padding:60px 0; }
.contact-hero h1 { font-size:2.2rem; }
.contact-hero { padding:60px 0; }
.stats-grid { grid-template-columns:1fr 1fr; }
.values-grid { grid-template-columns:1fr 1fr; }
.contact-info-grid { grid-template-columns:1fr 1fr; margin-top:-40px; }
.contact-main-grid { grid-template-columns:1fr; }
.story-grid { grid-template-columns:1fr; }
.story-image img { height:300px; }
.section-title h2 { font-size:1.7rem; }
.search-bar { max-width:300px; }
.order-summary { position:static; }
.product-actions { bottom:0; background:linear-gradient(transparent,rgba(0,0,0,.5)); }
.team-grid { grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); }
}
/* Mobile phones */
@media(max-width:768px){
.top-bar .container { flex-direction:column; gap:5px; }
.top-bar { font-size:.75rem; padding:6px 0; }
.header .container { gap:10px; }
.logo { font-size:1.2rem; }
.search-bar { max-width:200px; }
.search-bar input { padding:10px 14px; font-size:.8rem; }
.search-bar button { padding:6px 12px; font-size:.8rem; }
.header-icons { gap:12px; }
.header-icon { font-size:1rem; }
.hero-section, .hero-slide, .full-slide { min-height:auto; }
.hero-slide .hero-inner { padding:30px 0; gap:20px; }
.hero-content h1 { font-size:1.8rem; }
.hero-content p { font-size:.95rem; }
.hero-btns { flex-direction:column; gap:10px; align-items:center; }
.hero-btns .btn { width:100%; max-width:250px; justify-content:center; }
.hero-image img { max-height:220px; }
.full-slide { min-height:300px; }
.full-content h1 { font-size:1.6rem; }
.full-content p { font-size:.95rem; }
.full-content .btn { width:100%; max-width:250px; justify-content:center; }
.section { padding:30px 0; }
.section-title { margin-bottom:30px; }
.section-title h2 { font-size:1.4rem; }
.section-title p { font-size:.9rem; }
.cat-grid { gap:15px; }
.cat-card { padding:20px 15px; }
.cat-card .icon { width:60px; height:60px; font-size:1.5rem; }
.cat-card h3 { font-size:1rem; }
.product-grid { gap:12px; }
.product-img { height:160px; }
.product-info { padding:12px; }
.product-info h3 { font-size:.85rem; }
.current-price { font-size:1rem; }
.old-price { font-size:.8rem; }
.discount { font-size:.7rem; }
.pricing-info { flex-wrap:wrap; gap:5px; }
.product-actions button, .product-actions a { width:36px; height:36px; font-size:.8rem; }
.page-hero { padding:40px 0; }
.page-hero h1 { font-size:1.8rem; }
.page-content { padding:30px 0; }
.page-content h2 { font-size:1.3rem; }
.features-grid { gap:15px; }
.feature-card { padding:20px 15px; }
.feature-card .icon { width:50px; height:50px; font-size:1.2rem; }
.feature-card h3 { font-size:1rem; }
.newsletter { padding:40px 0; }
.newsletter h2 { font-size:1.5rem; }
.newsletter-form { flex-direction:column; max-width:100%; padding:0 20px; }
.newsletter-form input { border-radius:50px; margin-bottom:10px; text-align:center; }
.newsletter-form button { border-radius:50px; padding:12px; }
.footer { padding:40px 0 0; }
.footer-grid { gap:25px; }
.footer-bottom { flex-direction:column; text-align:center; gap:10px; }
.footer-brand .social { justify-content:center; }
/* Product detail mobile */
.product-detail { padding:20px 0; }
.breadcrumb { font-size:.8rem; margin-bottom:15px; flex-wrap:wrap; }
.main-image { height:300px; }
.thumb-list img { width:60px; height:60px; }
.zoom-lens { display:none !important; }
.product-info-detail h1 { font-size:1.4rem; }
.price-row .price { font-size:1.5rem; }
.price-row .old-price { font-size:1rem; }
.price-box { padding:15px; }
.pricing-options { grid-template-columns:1fr 1fr; gap:8px; }
.pricing-option { padding:10px; font-size:.8rem; }
.specs-grid { grid-template-columns:1fr; }
.product-cta { flex-direction:column; gap:10px; }
.product-cta .btn { padding:14px; }
/* Shop mobile */
.shop-header { flex-direction:column; align-items:flex-start; }
.shop-header h1 { font-size:1.4rem; }
.shop-controls { width:100%; }
.shop-controls select { flex:1; }
.category-pills { gap:6px; }
.pill { padding:6px 14px; font-size:.8rem; }
.pagination { gap:6px; }
.pagination a { padding:8px 14px; font-size:.8rem; }
/* Cart mobile */
.cart-section { padding:20px 0; }
.cart-table th { display:none; }
.cart-table, .cart-table tbody, .cart-table tr, .cart-table td { display:block; width:100%; }
.cart-table tr { padding:15px; border-radius:var(--radius); box-shadow:var(--shadow); margin-bottom:15px; background:#fff; }
.cart-table td { display:flex; justify-content:space-between; align-items:center; padding:8px 0; border-bottom:1px solid var(--border); }
.cart-table td:last-child { border-bottom:none; }
.cart-product { flex-direction:column; text-align:center; width:100%; }
.cart-product img { width:100px; height:100px; }
.cart-table td::before { content:attr(data-label); font-weight:600; font-size:.85rem; color:var(--text-light); }
.cart-total { text-align:left; }
.cart-total .btn { width:100%; justify-content:center; }
.cart-total .btn-outline { margin-left:0 !important; margin-top:10px; }
/* Checkout mobile */
.checkout-grid { gap:20px; }
.checkout-form { padding:20px; }
.order-summary { padding:20px; }
/* Auth mobile */
.auth-section { padding:30px 0; min-height:auto; }
.auth-box { padding:30px 20px; }
.auth-box h2 { font-size:1.4rem; }
.social-login { grid-template-columns:1fr 1fr; gap:8px; }
.social-btn { padding:10px; font-size:.8rem; }
/* Account mobile */
.account-section { padding:20px 0; }
.account-grid { gap:20px; }
.account-sidebar nav a { font-size:.9rem; padding:14px; }
.account-sidebar { padding:20px; }
.account-sidebar .user-info img { width:60px; height:60px; }
/* 404 mobile */
.four-oh-four { padding:60px 20px; }
.four-oh-four h1 { font-size:5rem; }
.four-oh-four p { font-size:1rem; }
/* Toast mobile */
.toast { bottom:20px; right:20px; left:20px; font-size:.85rem; text-align:center; border-radius:10px; }
/* About mobile */
.about-hero h1 { font-size:1.8rem; }
.about-hero p { font-size:1rem; }
.about-hero { padding:50px 0; }
.about-section { padding:40px 0; }
.story-content h2 { font-size:1.4rem; }
.story-content p { font-size:.9rem; }
.story-image img { height:220px; }
.stats-grid { gap:12px; }
.stat-card { padding:20px 15px; }
.stat-card .num { font-size:1.8rem; }
.stat-card .icon { font-size:1.5rem; }
.stat-card .label { font-size:.8rem; }
.values-grid { gap:15px; }
.value-card { padding:25px 18px; }
.value-card .icon { width:55px; height:55px; font-size:1.4rem; }
.value-card h3 { font-size:1.05rem; }
.cta-section { padding:50px 0; }
.cta-section h2 { font-size:1.4rem; }
.cta-section p { font-size:.95rem; }
.cta-section .btn { width:100%; max-width:250px; justify-content:center; }
.cta-section .btn:last-child { margin-left:0 !important; margin-top:10px; }
/* Contact mobile */
.contact-hero h1 { font-size:1.8rem; }
.contact-hero p { font-size:.95rem; }
.contact-hero { padding:50px 0; }
.contact-info-grid { gap:12px; }
.contact-info-card { padding:20px 15px; }
.contact-info-card .icon { width:45px; height:45px; font-size:1.1rem; }
.contact-info-card h3 { font-size:.9rem; }
.contact-info-card p { font-size:.8rem; }
.contact-form-card { padding:25px 20px; }
.contact-form-card h2 { font-size:1.2rem; }
.faq-section { padding:30px 0; }
.faq-q { padding:14px 16px; font-size:.9rem; }
.faq-a p { font-size:.85rem; }
.map-placeholder { height:250px; }
.map-placeholder i { font-size:2rem; }
/* Invoice mobile */
.invoice-header { flex-direction:column; text-align:center; gap:15px; padding:25px; }
.invoice-header .status { margin-top:5px; }
.invoice-header h1 { font-size:1.4rem; }
.invoice-body { padding:25px; }
.invoice-meta { grid-template-columns:1fr; gap:20px; }
.invoice-table th { display:none; }
.invoice-table, .invoice-table tbody, .invoice-table tr, .invoice-table td { display:block; width:100%; }
.invoice-table tr { padding:12px 0; }
.invoice-table td { display:flex; justify-content:space-between; align-items:center; padding:8px 0; border-bottom:1px solid var(--border); }
.invoice-table td::before { content:attr(data-label); font-weight:600; color:var(--text-light); }
.totals .row { gap:15px; }
.print-btn { bottom:15px; right:15px; padding:10px 20px; font-size:.9rem; left:15px; width:auto; justify-content:center; }
}
/* Small phones */
@media(max-width:400px){
.product-grid { gap:8px; }
.product-img { height:130px; }
.product-info { padding:8px; }
.product-info h3 { font-size:.8rem; }
.current-price { font-size:.9rem; }
.hero-content h1 { font-size:1.4rem; }
.hero-content p { font-size:.85rem; }
.cat-grid { grid-template-columns:1fr 1fr; }
.cat-card { padding:15px 10px; }
.cat-card .icon { width:45px; height:45px; font-size:1.2rem; }
.social-login { grid-template-columns:1fr; }
.btn { padding:12px 20px; font-size:.85rem; }
}
/* ===== ANIMATIONS ===== */
@keyframes float { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-15px); } }
@keyframes fadeIn { from { opacity:0; transform:translateY(30px); } to { opacity:1; transform:translateY(0); } }
@keyframes fadeInLeft { from { opacity:0; transform:translateX(-30px); } to { opacity:1; transform:translateX(0); } }
@keyframes fadeInRight { from { opacity:0; transform:translateX(30px); } to { opacity:1; transform:translateX(0); } }
@keyframes scaleIn { from { opacity:0; transform:scale(.8); } to { opacity:1; transform:scale(1); } }
@keyframes slideUp { from { opacity:0; transform:translateY(50px); } to { opacity:1; transform:translateY(0); } }
@keyframes zoomIn { from { opacity:0; transform:scale(.3); } to { opacity:1; transform:scale(1); } }
@keyframes flipIn { from { opacity:0; transform:perspective(400px) rotateX(90deg); } to { opacity:1; transform:perspective(400px) rotateX(0); } }
@keyframes bounceIn { 0%{opacity:0;transform:scale(.3)}50%{transform:scale(1.05)}70%{transform:scale(.9)}100%{opacity:1;transform:scale(1)} }
@keyframes slideDown { from { opacity:0; transform:translateY(-30px); } to { opacity:1; transform:translateY(0); } }
.animate { opacity:0; }
.animate.fadeIn { animation:fadeIn .6s ease forwards; }
.animate.fadeInLeft { animation:fadeInLeft .6s ease forwards; }
.animate.fadeInRight { animation:fadeInRight .6s ease forwards; }
.animate.scaleIn { animation:scaleIn .5s ease forwards; }
.animate.slideUp { animation:slideUp .6s ease forwards; }
.animate.zoomIn { animation:zoomIn .5s ease forwards; }
.animate.flipIn { animation:flipIn .6s ease forwards; }
.animate.bounceIn { animation:bounceIn .6s ease forwards; }
.animate.slideDown { animation:slideDown .5s ease forwards; }
.animate.delay-1 { animation-delay:.1s; }
.animate.delay-2 { animation-delay:.2s; }
.animate.delay-3 { animation-delay:.3s; }
.animate.delay-4 { animation-delay:.4s; }
.animate.delay-5 { animation-delay:.5s; }
/* Toast */
.toast { position:fixed; bottom:30px; right:30px; background:var(--dark); color:#fff; padding:15px 25px; border-radius:12px; font-size:.9rem; box-shadow:var(--shadow); z-index:9999; animation:slideUp .3s ease; transform:translateY(0); }
.toast.success { background:#00b894; }
.toast.error { background:#e74c3c; }
.extra-charge-note { display:block; font-size:.75rem; color:#e17055; margin-top:3px; }
/* ===== ABOUT PAGE ===== */
.about-hero { background:linear-gradient(135deg,#667eea,#764ba2); padding:100px 0; text-align:center; color:#fff; position:relative; overflow:hidden; }
.about-hero::before { content:''; position:absolute; inset:0; background:url('data:image/svg+xml,') no-repeat bottom; background-size:cover; }
.about-hero h1 { font-size:3rem; font-weight:800; margin-bottom:15px; position:relative; }
.about-hero p { font-size:1.15rem; opacity:.9; max-width:600px; margin:0 auto; position:relative; }
.about-section { padding:80px 0; }
.about-section:nth-child(even) { background:var(--bg-alt); }
.story-grid { display:grid; grid-template-columns:1fr 1fr; gap:50px; align-items:center; }
.story-image { border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); }
.story-image img { width:100%; height:400px; object-fit:cover; }
.story-content h2 { font-size:2rem; margin-bottom:15px; }
.story-content h2 span { background:linear-gradient(135deg,var(--primary),var(--secondary)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; }
.story-content p { color:var(--text-light); line-height:1.8; margin-bottom:15px; }
.story-content .btn { margin-top:10px; }
.stats-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:30px; margin-top:40px; }
.stat-card { text-align:center; padding:30px 20px; background:#fff; border-radius:var(--radius); box-shadow:var(--shadow); transition:var(--transition); }
.stat-card:hover { transform:translateY(-5px); }
.stat-card .num { font-size:2.5rem; font-weight:800; background:linear-gradient(135deg,var(--primary),var(--secondary)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; }
.stat-card .label { color:var(--text-light); font-size:.9rem; margin-top:5px; }
.stat-card .icon { font-size:2rem; margin-bottom:10px; color:var(--primary); }
.values-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:25px; }
.value-card { padding:35px 25px; background:#fff; border-radius:var(--radius); box-shadow:var(--shadow); text-align:center; transition:var(--transition); border:2px solid transparent; }
.value-card:hover { transform:translateY(-8px); border-color:var(--primary); }
.value-card .icon { width:70px; height:70px; margin:0 auto 20px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:1.8rem; color:#fff; }
.value-card h3 { font-size:1.2rem; margin-bottom:10px; }
.value-card p { color:var(--text-light); font-size:.88rem; line-height:1.6; }
.team-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:30px; }
.team-card { background:#fff; border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); text-align:center; transition:var(--transition); }
.team-card:hover { transform:translateY(-8px); }
.team-card img { width:100%; height:280px; object-fit:cover; }
.team-card .info { padding:20px; }
.team-card .info h3 { font-size:1.1rem; }
.team-card .info .role { color:var(--primary); font-size:.85rem; font-weight:600; margin:5px 0; }
.team-card .info p { color:var(--text-light); font-size:.82rem; }
.cta-section { background:linear-gradient(135deg,var(--primary),var(--secondary)); padding:80px 0; text-align:center; color:#fff; }
.cta-section h2 { font-size:2.2rem; margin-bottom:10px; }
.cta-section p { font-size:1.1rem; opacity:.9; margin-bottom:25px; }
.cta-section .btn-outline { border-color:#fff; color:#fff; }
.cta-section .btn-outline:hover { background:#fff; color:var(--primary); }
/* ===== CONTACT PAGE ===== */
.contact-hero { background:linear-gradient(135deg,#667eea,#764ba2); padding:80px 0; text-align:center; color:#fff; position:relative; overflow:hidden; }
.contact-hero::before { content:''; position:absolute; inset:0; background:url('data:image/svg+xml,') no-repeat bottom; background-size:cover; }
.contact-hero h1 { font-size:2.8rem; font-weight:800; position:relative; }
.contact-hero p { font-size:1.1rem; opacity:.9; max-width:550px; margin:10px auto 0; position:relative; }
.contact-info-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:25px; margin:-50px auto 60px; position:relative; z-index:2; }
.contact-info-card { background:#fff; padding:30px 20px; border-radius:var(--radius); box-shadow:var(--shadow); text-align:center; transition:var(--transition); }
.contact-info-card:hover { transform:translateY(-5px); }
.contact-info-card .icon { width:55px; height:55px; margin:0 auto 15px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:1.3rem; color:#fff; }
.contact-info-card h3 { font-size:1rem; margin-bottom:5px; }
.contact-info-card p { color:var(--text-light); font-size:.85rem; line-height:1.5; }
.contact-main-grid { display:grid; grid-template-columns:1.3fr 1fr; gap:40px; align-items:start; }
.contact-form-card { background:#fff; border-radius:var(--radius); box-shadow:var(--shadow); padding:40px; }
.contact-form-card h2 { font-size:1.5rem; margin-bottom:6px; }
.contact-form-card .subtitle { color:var(--text-light); font-size:.9rem; margin-bottom:25px; }
.contact-form-card .form-group { margin-bottom:18px; }
.contact-form-card .form-group label { display:block; font-weight:600; font-size:.85rem; margin-bottom:5px; color:var(--text); }
.contact-form-card .form-group input,.contact-form-card .form-group textarea,.contact-form-card .form-group select { width:100%; padding:12px 16px; border:2px solid var(--border); border-radius:10px; font-size:.9rem; outline:none; transition:var(--transition); font-family:inherit; }
.contact-form-card .form-group input:focus,.contact-form-card .form-group textarea:focus,.contact-form-card .form-group select:focus { border-color:var(--primary); box-shadow:0 0 0 4px rgba(102,126,234,.08); }
.contact-form-card .btn { width:100%; justify-content:center; padding:16px; }
.faq-section { padding:60px 0; background:var(--bg-alt); }
.faq-item { background:#fff; border-radius:12px; margin-bottom:12px; box-shadow:0 2px 12px rgba(0,0,0,.04); overflow:hidden; }
.faq-q { padding:18px 22px; cursor:pointer; display:flex; justify-content:space-between; align-items:center; font-weight:600; font-size:.95rem; transition:var(--transition); }
.faq-q:hover { color:var(--primary); }
.faq-q i { transition:var(--transition); font-size:.8rem; color:var(--text-light); }
.faq-item.open .faq-q i { transform:rotate(180deg); color:var(--primary); }
.faq-a { max-height:0; overflow:hidden; transition:max-height .3s ease, padding .3s ease; }
.faq-item.open .faq-a { max-height:300px; padding:0 22px 18px; }
.faq-a p { color:var(--text-light); font-size:.88rem; line-height:1.7; }
.map-section { padding:0 0 60px; }
.map-placeholder { width:100%; height:350px; border-radius:var(--radius); overflow:hidden; background:var(--bg-alt); display:flex; align-items:center; justify-content:center; flex-direction:column; gap:10px; color:var(--text-light); }
.map-placeholder i { font-size:3rem; opacity:.4; }
.map-placeholder p { font-size:.9rem; }
@media(max-width:968px){
.contact-info-grid { grid-template-columns:1fr 1fr; margin-top:-40px; }
.stats-grid { grid-template-columns:1fr 1fr; }
.values-grid { grid-template-columns:1fr 1fr; }
.contact-main-grid { grid-template-columns:1fr; }
.story-grid { grid-template-columns:1fr; }
}
@media(max-width:576px){
.stats-grid { grid-template-columns:1fr; }
.values-grid { grid-template-columns:1fr; }
.contact-info-grid { grid-template-columns:1fr; margin-top:-30px; }
}