/* ============================================
   KOP SERVICES - Complete E-Commerce Stylesheet
   Colors: Blue #0B6EA8, Cyan #00B4D8, Pink #E91E8C
   ============================================ */
:root {
    --primary: #0B6EA8;
    --primary-dark: #084d75;
    --primary-light: #0d8fd4;
    --secondary: #E91E8C;
    --accent: #00B4D8;
    --accent-light: #48cae4;
    --dark: #0a1628;
    --dark-2: #111d33;
    --gray-900: #1a1a2e;
    --gray-700: #444466;
    --gray-600: #666688;
    --gray-500: #8888aa;
    --gray-400: #aaaacc;
    --gray-300: #d0d0e0;
    --gray-200: #e8e8f0;
    --gray-100: #f4f4f8;
    --white: #ffffff;
    --success: #10b981;
    --warning: #f59e0b;
    --danger: #ef4444;
    --gradient: linear-gradient(135deg, var(--primary), var(--accent), var(--secondary));
    --gradient-btn: linear-gradient(135deg, var(--primary), var(--accent));
    --shadow-sm: 0 1px 3px rgba(0,0,0,.08);
    --shadow: 0 4px 15px rgba(0,0,0,.1);
    --shadow-lg: 0 10px 40px rgba(0,0,0,.15);
    --shadow-xl: 0 20px 60px rgba(0,0,0,.2);
    --radius: 12px;
    --radius-lg: 20px;
    --radius-full: 50px;
    --transition: all .3s cubic-bezier(.4,0,.2,1);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'Segoe UI',system-ui,-apple-system,BlinkMacSystemFont,sans-serif;color:var(--gray-900);background:var(--white);line-height:1.6;overflow-x:hidden}
a{text-decoration:none;color:inherit;transition:var(--transition)}
ul{list-style:none}
img{max-width:100%;height:auto}
.container{max-width:1280px;margin:0 auto;padding:0 20px}
.text-center{text-align:center}
.text-gradient{background:var(--gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.page-hidden{display:none!important}

/* LOADER */
.loader{position:fixed;top:0;left:0;width:100%;height:100%;background:var(--dark);display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:99999;transition:opacity .5s}
.loader.hide{opacity:0;pointer-events:none}
.loader-spinner{width:50px;height:50px;border:4px solid rgba(255,255,255,.1);border-top-color:var(--accent);border-radius:50%;animation:spin 1s linear infinite}
.loader p{color:var(--white);margin-top:15px;font-weight:600;letter-spacing:2px}
@keyframes spin{to{transform:rotate(360deg)}}

/* TOP BAR */
.top-bar{background:var(--dark);color:var(--gray-300);font-size:.8rem;padding:8px 0}
.top-bar-content{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px}
.top-bar-left{display:flex;gap:20px;flex-wrap:wrap}
.top-bar-left span{display:flex;align-items:center;gap:6px}
.top-bar-left i{color:var(--accent)}
.top-bar-right{display:flex;gap:12px}
.top-bar-right a{color:var(--gray-400);font-size:.9rem}
.top-bar-right a:hover{color:var(--accent)}

/* HEADER */
.header{background:var(--white);box-shadow:var(--shadow-sm);position:sticky;top:0;z-index:4005;transition:var(--transition)}
.header.scrolled{box-shadow:var(--shadow)}
.header-content{display:flex;align-items:center;justify-content:space-between;padding:10px 20px;gap:15px}
.header,.header *{pointer-events:auto}
.logo{display:flex;align-items:center;gap:10px;cursor:pointer}
.logo-icon{width:42px;height:42px;background:transparent;border-radius:8px;display:flex;align-items:center;justify-content:center;color:var(--white);font-weight:800;font-size:1.2rem;flex-shrink:0;overflow:visible}
.logo-icon img{width:100%;height:100%;object-fit:contain}
.logo-text strong{display:block;font-size:1rem;color:var(--dark);line-height:1.2}
.logo-text small{font-size:.65rem;color:var(--gray-500);text-transform:uppercase;letter-spacing:1px}
.nav{display:flex;gap:3px}
.nav-link{padding:8px 14px;color:var(--gray-700);font-weight:500;font-size:.9rem;border-radius:var(--radius);position:relative;transition:var(--transition)}
.nav-link:hover,.nav-link.active{color:var(--primary);background:rgba(11,110,168,.08)}
.nav-link.active::after{content:'';position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:20px;height:3px;background:var(--gradient-btn);border-radius:3px}
.nav-admin-link{color:var(--secondary)!important}
.header-actions{display:flex;align-items:center;gap:6px}
.search-toggle,.cart-toggle,.user-toggle,.wishlist-toggle{width:40px;height:40px;display:flex;align-items:center;justify-content:center;border-radius:50%;cursor:pointer;color:var(--gray-700);transition:var(--transition);position:relative}
.search-toggle:hover,.cart-toggle:hover,.user-toggle:hover,.wishlist-toggle:hover{background:var(--gray-100);color:var(--primary)}
.cart-count,.wishlist-count{position:absolute;top:2px;right:2px;width:18px;height:18px;background:var(--secondary);color:var(--white);font-size:.6rem;font-weight:700;border-radius:50%;display:flex;align-items:center;justify-content:center}
.wishlist-count{background:var(--danger)}
.menu-toggle{display:none;flex-direction:column;gap:5px;cursor:pointer;padding:8px;z-index:1001}
.menu-toggle span{width:24px;height:2.5px;background:var(--gray-700);border-radius:2px;transition:var(--transition)}
.menu-toggle.active span:nth-child(1){transform:rotate(45deg) translate(5px,5px)}
.menu-toggle.active span:nth-child(2){opacity:0}
.menu-toggle.active span:nth-child(3){transform:rotate(-45deg) translate(5px,-5px)}

/* User Dropdown */
.user-toggle{position:relative}
.user-dropdown{position:absolute;top:50px;right:0;background:var(--white);border-radius:var(--radius);box-shadow:var(--shadow-lg);min-width:220px;opacity:0;visibility:hidden;transform:translateY(-10px);transition:var(--transition);z-index:100}
.user-dropdown.active{opacity:1;visibility:visible;transform:translateY(0)}
.user-dropdown button{display:flex;align-items:center;gap:10px;width:100%;padding:10px 18px;border:none;background:none;font-family:inherit;font-size:.88rem;color:var(--gray-700);cursor:pointer;transition:var(--transition);text-align:left}
.user-dropdown button:hover{background:var(--gray-100);color:var(--primary)}
.user-dropdown hr{border:none;border-top:1px solid var(--gray-200);margin:4px 0}
.user-dropdown-info{padding:12px 18px;border-bottom:1px solid var(--gray-200);font-size:.85rem}
.user-dropdown-info strong{display:block;color:var(--dark)}
.user-dropdown-info span{color:var(--gray-500);font-size:.8rem}

/* Search */
.search-bar{position:absolute;top:100%;left:0;right:0;background:var(--white);padding:15px 0;box-shadow:var(--shadow);transform:translateY(-10px);opacity:0;visibility:hidden;transition:var(--transition);z-index:999}
.search-bar.active{transform:translateY(0);opacity:1;visibility:visible}
.search-form{display:flex;gap:10px;max-width:600px;margin:0 auto}
.search-form input{flex:1;padding:12px 20px;border:2px solid var(--gray-200);border-radius:var(--radius-full);font-size:1rem;font-family:inherit;outline:none;transition:var(--transition)}
.search-form input:focus{border-color:var(--primary)}
.search-form button{width:44px;height:44px;border-radius:50%;border:none;background:var(--gradient-btn);color:var(--white);cursor:pointer;font-size:1rem;display:flex;align-items:center;justify-content:center}
.search-close{background:var(--gray-200)!important;color:var(--gray-700)!important}
.search-suggestions{max-width:600px;margin:8px auto 0;background:var(--white);border-radius:var(--radius);box-shadow:var(--shadow);display:none}
.search-suggestions.active{display:block}
.search-suggestion{padding:10px 18px;cursor:pointer;font-size:.9rem;border-bottom:1px solid var(--gray-100);display:flex;align-items:center;gap:10px}
.search-suggestion:hover{background:var(--gray-100)}
.search-suggestion i{color:var(--gray-400)}

/* BUTTONS */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:11px 26px;border:none;border-radius:var(--radius-full);font-family:inherit;font-size:.9rem;font-weight:600;cursor:pointer;transition:var(--transition);white-space:nowrap}
.btn-primary{background:var(--gradient-btn);color:var(--white);box-shadow:0 4px 15px rgba(11,110,168,.3)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 6px 25px rgba(11,110,168,.4)}
.btn-secondary{background:var(--secondary);color:var(--white)}
.btn-outline{background:transparent;border:2px solid var(--primary);color:var(--primary)}
.btn-outline:hover{background:var(--primary);color:var(--white)}
.btn-outline-light{background:transparent;border:2px solid var(--white);color:var(--white)}
.btn-outline-light:hover{background:var(--white);color:var(--primary)}
.btn-light{background:var(--white);color:var(--primary)}
.btn-light:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}
.btn-danger{background:var(--danger);color:var(--white)}
.btn-success{background:var(--success);color:var(--white)}
.btn-sm{padding:7px 16px;font-size:.8rem}
.btn-lg{padding:14px 32px;font-size:1rem}
.btn-block{width:100%}
.btn:disabled{opacity:.6;cursor:not-allowed;transform:none!important}

/* HERO */
.hero{position:relative;overflow:hidden}
.hero-slider{position:relative;height:520px}
.hero-slide{position:absolute;top:0;left:0;width:100%;height:100%;opacity:0;transition:opacity .8s ease}
.hero-slide.active{opacity:1}
.hero-content{display:flex;align-items:center;justify-content:space-between;height:100%;gap:40px}
.hero-text{flex:1;color:var(--white);z-index:2}
.hero-badge{display:inline-block;background:rgba(255,255,255,.15);backdrop-filter:blur(10px);padding:5px 16px;border-radius:var(--radius-full);font-size:.82rem;font-weight:500;margin-bottom:18px;border:1px solid rgba(255,255,255,.2)}
.hero-text h1{font-size:2.8rem;font-weight:800;line-height:1.15;margin-bottom:15px}
.hero-text p{font-size:1.05rem;opacity:.85;margin-bottom:25px;max-width:480px;line-height:1.7}
.hero-buttons{display:flex;gap:12px;flex-wrap:wrap}
.hero-image{flex:0 0 auto;z-index:2}
.hero-mockup{width:240px;height:240px;background:rgba(255,255,255,.08);backdrop-filter:blur(20px);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:4.5rem;color:rgba(255,255,255,.5);border:2px solid rgba(255,255,255,.15);animation:float 6s ease-in-out infinite;overflow:hidden}
.hero-mockup img{width:100%;height:100%;object-fit:cover;border-radius:50%}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-18px)}}
.hero-dots{position:absolute;bottom:25px;left:50%;transform:translateX(-50%);display:flex;gap:10px;z-index:10}
.dot{width:12px;height:12px;border-radius:50%;background:rgba(255,255,255,.4);cursor:pointer;transition:var(--transition)}
.dot.active{background:var(--white);width:32px;border-radius:6px}
.hero-arrow{position:absolute;top:50%;transform:translateY(-50%);width:42px;height:42px;border-radius:50%;background:rgba(255,255,255,.15);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.2);color:var(--white);font-size:1rem;cursor:pointer;z-index:10;transition:var(--transition);display:flex;align-items:center;justify-content:center}
.hero-arrow:hover{background:rgba(255,255,255,.3)}
.hero-prev{left:15px}.hero-next{right:15px}

/* FEATURES */
.features{padding:0;margin-top:-35px;position:relative;z-index:5}
.features-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.feature-card{background:var(--white);padding:22px;border-radius:var(--radius);text-align:center;box-shadow:var(--shadow);transition:var(--transition)}
.feature-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg)}
.feature-icon{width:50px;height:50px;margin:0 auto 10px;background:var(--gray-100);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.2rem;color:var(--primary);transition:var(--transition)}
.feature-card:hover .feature-icon{background:var(--gradient-btn);color:var(--white)}
.feature-card h4{font-size:.9rem;margin-bottom:4px;color:var(--dark)}
.feature-card p{font-size:.75rem;color:var(--gray-500)}

/* SECTIONS */
.section{padding:70px 0}
.section-gray{background:var(--gray-100)}
.section-header{text-align:center;margin-bottom:40px}
.section-header h2{font-size:2rem;font-weight:700;margin-bottom:8px;color:var(--dark)}
.section-header p{font-size:1rem;color:var(--gray-500)}

/* CATEGORIES */
.categories-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.category-card{background:var(--white);padding:30px 20px;border-radius:var(--radius-lg);text-align:center;cursor:pointer;transition:var(--transition);border:2px solid var(--gray-200);position:relative;overflow:hidden}
.category-card::before{content:'';position:absolute;top:0;left:0;right:0;height:4px;background:var(--gradient);transform:scaleX(0);transition:var(--transition)}
.category-card:hover{border-color:var(--primary);transform:translateY(-6px);box-shadow:var(--shadow-lg)}
.category-card:hover::before{transform:scaleX(1)}
.category-icon{width:65px;height:65px;margin:0 auto 14px;background:linear-gradient(135deg,rgba(11,110,168,.1),rgba(0,180,216,.1));border-radius:var(--radius);display:flex;align-items:center;justify-content:center;font-size:1.6rem;color:var(--primary);transition:var(--transition)}
.category-card:hover .category-icon{background:var(--gradient-btn);color:var(--white);transform:scale(1.1)}
.category-card h3{font-size:1.05rem;margin-bottom:8px;color:var(--dark)}
.category-link{font-size:.82rem;color:var(--primary);font-weight:600}

/* PRODUCTS */
.products-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.products-loading{grid-column:1/-1;text-align:center;padding:60px;color:var(--gray-400);font-size:1.1rem}
.product-card{background:var(--white);border-radius:var(--radius-lg);overflow:hidden;transition:var(--transition);border:1px solid var(--gray-200);position:relative}
.product-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg);border-color:transparent}
.product-badge{position:absolute;top:10px;left:10px;padding:3px 10px;border-radius:var(--radius-full);font-size:.7rem;font-weight:600;z-index:2}
.badge-new{background:var(--success);color:var(--white)}
.badge-promo{background:var(--secondary);color:var(--white)}
.badge-hot{background:var(--warning);color:var(--white)}
.product-wishlist-btn{position:absolute;top:10px;right:10px;width:32px;height:32px;border-radius:50%;border:none;background:rgba(255,255,255,.9);color:var(--gray-400);cursor:pointer;z-index:2;transition:var(--transition);display:flex;align-items:center;justify-content:center;font-size:.85rem}
.product-wishlist-btn:hover,.product-wishlist-btn.active{color:var(--danger);background:var(--white)}
.product-image{height:200px;background:var(--gray-100);display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}
.product-image i{font-size:3.5rem;color:var(--gray-300)}
.product-image img{width:100%;height:100%;object-fit:cover}
.product-actions{position:absolute;bottom:-50px;left:0;right:0;display:flex;justify-content:center;gap:8px;padding:12px;background:linear-gradient(transparent,rgba(0,0,0,.5));transition:var(--transition)}
.product-card:hover .product-actions{bottom:0}
.product-action-btn{width:36px;height:36px;border-radius:50%;border:none;background:var(--white);color:var(--gray-700);cursor:pointer;transition:var(--transition);display:flex;align-items:center;justify-content:center;font-size:.85rem}
.product-action-btn:hover{background:var(--primary);color:var(--white)}
.product-info{padding:15px}
.product-category{font-size:.7rem;color:var(--accent);text-transform:uppercase;font-weight:600;letter-spacing:.5px}
.product-name{font-size:.9rem;font-weight:600;color:var(--dark);margin:5px 0;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;cursor:pointer}
.product-name:hover{color:var(--primary)}
.product-rating{display:flex;align-items:center;gap:4px;margin-bottom:6px}
.product-rating i{font-size:.7rem;color:var(--warning)}
.product-rating span{font-size:.75rem;color:var(--gray-500)}
.product-price{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.price-current{font-size:1.05rem;font-weight:700;color:var(--primary)}
.price-old{font-size:.8rem;color:var(--gray-400);text-decoration:line-through}
.product-discount{font-size:.7rem;background:rgba(239,68,68,.1);color:var(--danger);padding:2px 8px;border-radius:var(--radius-full);font-weight:600}
.product-footer{padding:0 15px 15px}
.btn-add-cart{width:100%;padding:9px;border:2px solid var(--primary);border-radius:var(--radius);background:transparent;color:var(--primary);font-family:inherit;font-weight:600;font-size:.82rem;cursor:pointer;transition:var(--transition);display:flex;align-items:center;justify-content:center;gap:6px}
.btn-add-cart:hover{background:var(--gradient-btn);color:var(--white);border-color:transparent}

/* PROMO BANNER */
.promo-banner{background:var(--gradient);padding:50px 0}
.promo-content{display:flex;align-items:center;justify-content:space-between;gap:30px}
.promo-text{color:var(--white)}
.promo-badge{display:inline-block;background:rgba(255,255,255,.2);padding:4px 14px;border-radius:var(--radius-full);font-size:.82rem;margin-bottom:12px}
.promo-text h2{font-size:1.8rem;font-weight:700;margin-bottom:10px}
.promo-text p{font-size:1rem;opacity:.9;margin-bottom:20px;max-width:450px}
.promo-icon{font-size:7rem;color:rgba(255,255,255,.15)}

/* TESTIMONIALS */
.testimonials-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.testimonial-card{background:var(--white);padding:25px;border-radius:var(--radius-lg);box-shadow:var(--shadow);transition:var(--transition)}
.testimonial-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.testimonial-stars{margin-bottom:12px;color:var(--warning);font-size:.85rem}
.testimonial-card>p{font-size:.9rem;color:var(--gray-700);line-height:1.7;margin-bottom:18px;font-style:italic}
.testimonial-author{display:flex;align-items:center;gap:10px}
.author-avatar{width:40px;height:40px;background:var(--gradient-btn);border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--white);font-weight:700;font-size:.85rem;flex-shrink:0}
.testimonial-author strong{display:block;font-size:.85rem;color:var(--dark)}
.testimonial-author span{font-size:.75rem;color:var(--gray-500)}

/* NEWSLETTER */
.newsletter{background:var(--dark);padding:50px 0}
.newsletter-content{text-align:center;color:var(--white)}
.newsletter-content h2{font-size:1.6rem;margin-bottom:6px}
.newsletter-content p{color:var(--gray-400);margin-bottom:20px}
.newsletter-form{display:flex;gap:10px;max-width:460px;margin:0 auto}
.newsletter-form input{flex:1;padding:12px 20px;border:2px solid var(--gray-700);border-radius:var(--radius-full);background:var(--dark-2);color:var(--white);font-family:inherit;font-size:.9rem;outline:none;transition:var(--transition)}
.newsletter-form input:focus{border-color:var(--primary)}
.newsletter-form input::placeholder{color:var(--gray-600)}

/* PAGE HERO */
.page-hero{background:var(--dark);padding:50px 0;text-align:center;margin-bottom:40px}
.page-hero h1{font-size:2.2rem;font-weight:800;color:var(--white);margin-bottom:6px}
.page-hero p{color:var(--gray-400);font-size:1rem}

/* SHOP */
.shop-layout{display:grid;grid-template-columns:240px 1fr;gap:30px;padding-bottom:50px}
.shop-sidebar{position:sticky;top:80px;align-self:start}
.sidebar-close{display:none;position:absolute;top:10px;right:10px;width:32px;height:32px;border-radius:50%;border:none;background:var(--gray-100);cursor:pointer}
.sidebar-section{margin-bottom:25px;background:var(--white);padding:18px;border-radius:var(--radius);border:1px solid var(--gray-200)}
.sidebar-section h3{font-size:.95rem;margin-bottom:12px;color:var(--dark);padding-bottom:8px;border-bottom:2px solid var(--gray-100)}
.filter-list a,.filter-list label{display:flex;align-items:center;gap:8px;padding:7px 10px;border-radius:8px;font-size:.85rem;color:var(--gray-700);cursor:pointer;transition:var(--transition)}
.filter-list a:hover,.filter-list a.active{background:rgba(11,110,168,.08);color:var(--primary)}
.filter-list input[type="checkbox"]{accent-color:var(--primary)}
.price-filter input[type="range"]{width:100%;accent-color:var(--primary)}
.price-labels{display:flex;justify-content:space-between;font-size:.75rem;color:var(--gray-500);margin-top:6px}
.filter-toggle-btn{display:none;padding:8px 16px;border:2px solid var(--gray-200);border-radius:var(--radius);background:var(--white);font-family:inherit;font-size:.85rem;cursor:pointer;color:var(--gray-700)}
.shop-toolbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;flex-wrap:wrap;gap:10px}
.shop-results{font-size:.85rem;color:var(--gray-500)}
.shop-sort select{padding:8px 14px;border:2px solid var(--gray-200);border-radius:8px;font-family:inherit;font-size:.82rem;outline:none;cursor:pointer;color:var(--gray-700)}
.shop-content .products-grid{grid-template-columns:repeat(3,1fr)}
.pagination{display:flex;justify-content:center;gap:6px;margin-top:30px}
.pagination button{width:38px;height:38px;border-radius:10px;border:2px solid var(--gray-200);background:var(--white);color:var(--gray-700);font-family:inherit;font-weight:600;cursor:pointer;transition:var(--transition);display:flex;align-items:center;justify-content:center}
.pagination button.active,.pagination button:hover{background:var(--gradient-btn);color:var(--white);border-color:transparent}

/* PRODUCT DETAIL */
.breadcrumb{display:flex;align-items:center;gap:8px;padding:15px 0;font-size:.82rem;color:var(--gray-500);flex-wrap:wrap}
.breadcrumb a{color:var(--primary)}
.breadcrumb a:hover{text-decoration:underline}
.product-detail{display:grid;grid-template-columns:1fr 1fr;gap:40px;padding:25px 0 50px}
.detail-gallery{background:var(--gray-100);border-radius:var(--radius-lg);display:flex;align-items:center;justify-content:center;min-height:400px;overflow:hidden;position:relative}
.detail-gallery i{font-size:7rem;color:var(--gray-300)}
.detail-gallery img{width:100%;height:100%;object-fit:contain;max-height:500px}
.detail-info h1{font-size:1.6rem;font-weight:700;color:var(--dark);margin-bottom:8px;line-height:1.3}
.detail-rating{display:flex;align-items:center;gap:6px;margin-bottom:12px}
.detail-rating i{color:var(--warning)}
.detail-rating span{color:var(--gray-500);font-size:.85rem}
.detail-price{display:flex;align-items:center;gap:12px;margin-bottom:18px;flex-wrap:wrap}
.detail-price .price-current{font-size:1.8rem;font-weight:800;color:var(--primary)}
.detail-price .price-old{font-size:1rem}
.detail-badge{display:inline-block;background:var(--success);color:var(--white);padding:3px 12px;border-radius:var(--radius-full);font-size:.78rem;font-weight:600}
.detail-description{margin:16px 0;color:var(--gray-700);line-height:1.8;font-size:.92rem}
.detail-specs{margin:18px 0;border-top:1px solid var(--gray-200);padding-top:18px}
.detail-specs h3{font-size:.95rem;margin-bottom:10px}
.spec-row{display:flex;padding:7px 0;border-bottom:1px solid var(--gray-100);font-size:.88rem}
.spec-label{width:130px;color:var(--gray-500);flex-shrink:0}
.spec-value{color:var(--dark);font-weight:500}
.detail-quantity{display:flex;align-items:center;gap:12px;margin:20px 0}
.qty-control{display:flex;align-items:center;border:2px solid var(--gray-200);border-radius:var(--radius);overflow:hidden}
.qty-control button{width:38px;height:38px;border:none;background:var(--gray-100);color:var(--gray-700);font-size:1rem;cursor:pointer;transition:var(--transition)}
.qty-control button:hover{background:var(--primary);color:var(--white)}
.qty-control input{width:48px;height:38px;text-align:center;border:none;font-family:inherit;font-size:.95rem;font-weight:600;outline:none}
.detail-buttons{display:flex;gap:10px;flex-wrap:wrap}

/* REVIEWS */
.review-card{background:var(--white);border:1px solid var(--gray-200);border-radius:var(--radius);padding:20px;margin-bottom:15px}
.review-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.review-author{font-weight:600;font-size:.9rem}
.review-date{font-size:.78rem;color:var(--gray-500)}
.review-stars{color:var(--warning);font-size:.8rem;margin-bottom:8px}
.review-text{font-size:.88rem;color:var(--gray-700);line-height:1.6}
.review-photo{display:block;max-width:100%;max-height:220px;border-radius:var(--radius);margin-bottom:10px;object-fit:cover}
.review-form{background:var(--gray-100);border-radius:var(--radius);padding:25px;margin-top:20px}
.review-form h3{margin-bottom:15px;font-size:1rem}
.star-rating{display:flex;gap:5px;margin-bottom:12px}
.star-rating i{font-size:1.3rem;color:var(--gray-300);cursor:pointer;transition:var(--transition)}
.star-rating i.active,.star-rating i:hover{color:var(--warning)}

/* SERVICES */
.services-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;padding-bottom:50px}
.service-card{background:var(--white);padding:30px;border-radius:var(--radius-lg);border:1px solid var(--gray-200);transition:var(--transition);text-align:center}
.service-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg);border-color:transparent}
.service-icon{width:70px;height:70px;margin:0 auto 16px;background:linear-gradient(135deg,rgba(11,110,168,.1),rgba(0,180,216,.1));border-radius:var(--radius-lg);display:flex;align-items:center;justify-content:center;font-size:1.8rem;color:var(--primary);transition:var(--transition)}
.service-card:hover .service-icon{background:var(--gradient-btn);color:var(--white);transform:scale(1.1)}
.service-card h3{font-size:1.1rem;margin-bottom:10px;color:var(--dark)}
.service-card>p{font-size:.85rem;color:var(--gray-600);line-height:1.6;margin-bottom:14px}
.service-features{text-align:left;margin-bottom:20px}
.service-features li{padding:5px 0;font-size:.84rem;color:var(--gray-700);display:flex;align-items:center;gap:8px}
.service-features li i{color:var(--success);font-size:.75rem}

/* RACHAT */
.rachat-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:25px;margin-bottom:40px}
.rachat-step{text-align:center;padding:25px}
.step-number{width:55px;height:55px;margin:0 auto 14px;background:var(--gradient-btn);border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--white);font-size:1.4rem;font-weight:800}
.rachat-step h3{font-size:1.05rem;margin-bottom:6px;color:var(--dark)}
.rachat-step p{font-size:.85rem;color:var(--gray-600)}
.rachat-form-container{max-width:750px;margin:0 auto;padding:35px;background:var(--white);border-radius:var(--radius-lg);box-shadow:var(--shadow);margin-bottom:50px}
.rachat-form-container h2{font-size:1.4rem;margin-bottom:20px;color:var(--dark)}

/* FORMS */
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.form-group{margin-bottom:16px}
.form-group label{display:block;margin-bottom:5px;font-size:.85rem;font-weight:500;color:var(--gray-700)}
.form-group input,.form-group select,.form-group textarea{width:100%;padding:11px 14px;border:2px solid var(--gray-200);border-radius:var(--radius);font-family:inherit;font-size:.9rem;outline:none;transition:var(--transition);background:var(--white);color:var(--gray-900)}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(11,110,168,.1)}
.form-group textarea{resize:vertical}
.form-hint{display:block;margin-top:6px;font-size:.75rem;color:var(--gray-500)}
.geo-locate-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.geo-status{font-size:.8rem;color:var(--gray-600)}
.auth-error{background:rgba(239,68,68,.1);color:var(--danger);padding:10px 15px;border-radius:var(--radius);font-size:.85rem;margin-bottom:15px}
.auth-link{text-align:center;font-size:.85rem;color:var(--gray-500);margin-top:15px}
.auth-link a{color:var(--primary);font-weight:600}

/* CONTACT */
.contact-layout{display:grid;grid-template-columns:1fr 1.5fr;gap:35px;padding-bottom:50px}
.contact-card{background:var(--white);padding:22px;border-radius:var(--radius);border:1px solid var(--gray-200);margin-bottom:12px;transition:var(--transition)}
.contact-card:hover{box-shadow:var(--shadow);border-color:var(--primary)}
.contact-icon{width:42px;height:42px;background:linear-gradient(135deg,rgba(11,110,168,.1),rgba(0,180,216,.1));border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--primary);margin-bottom:10px}
.contact-card h3{font-size:.95rem;margin-bottom:5px;color:var(--dark)}
.contact-card p{font-size:.85rem;color:var(--gray-600)}
.contact-socials{display:flex;flex-direction:column;gap:8px;margin-top:15px}
.social-btn{display:flex;align-items:center;gap:10px;padding:10px 18px;border-radius:var(--radius);border:1px solid var(--gray-200);font-weight:500;font-size:.88rem;transition:var(--transition)}
.social-btn:hover{background:var(--primary);color:var(--white);border-color:var(--primary)}
.contact-form-container{background:var(--white);padding:30px;border-radius:var(--radius-lg);box-shadow:var(--shadow)}
.contact-form-container h2{font-size:1.3rem;margin-bottom:20px;color:var(--dark)}

/* CHECKOUT */
.checkout-layout{display:grid;grid-template-columns:1.2fr .8fr;gap:35px;padding-bottom:50px}
.checkout-form-container{background:var(--white);padding:30px;border-radius:var(--radius-lg);box-shadow:var(--shadow)}
.checkout-form-container h2{font-size:1.15rem;margin-bottom:16px;color:var(--dark);display:flex;align-items:center;gap:8px}
.payment-methods{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:20px}
.payment-option input{display:none}
.payment-card{padding:18px;border:2px solid var(--gray-200);border-radius:var(--radius);text-align:center;cursor:pointer;transition:var(--transition)}
.payment-option input:checked+.payment-card{border-color:var(--primary);background:rgba(11,110,168,.05)}
.payment-card i{font-size:1.4rem;color:var(--primary);margin-bottom:6px;display:block}
.payment-card span{display:block;font-weight:600;font-size:.88rem;color:var(--dark)}
.payment-card small{display:block;font-size:.75rem;color:var(--gray-500);margin-top:3px}
.checkout-summary{position:sticky;top:80px;align-self:start;background:var(--white);padding:25px;border-radius:var(--radius-lg);box-shadow:var(--shadow)}
.checkout-summary h2{font-size:1.15rem;margin-bottom:16px;padding-bottom:12px;border-bottom:2px solid var(--gray-100)}
.checkout-item{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--gray-100)}
.checkout-item-img{width:50px;height:50px;background:var(--gray-100);border-radius:8px;display:flex;align-items:center;justify-content:center;color:var(--gray-400);font-size:1.2rem;flex-shrink:0;overflow:hidden}
.checkout-item-img img{width:100%;height:100%;object-fit:cover}
.checkout-item-info{flex:1}
.checkout-item-info strong{font-size:.82rem;display:block;margin-bottom:2px}
.checkout-item-info span{font-size:.75rem;color:var(--gray-500)}
.checkout-item-price{font-weight:600;font-size:.85rem;color:var(--primary)}
.checkout-totals{margin-top:16px}
.checkout-row{display:flex;justify-content:space-between;padding:8px 0;font-size:.88rem;color:var(--gray-700)}
.checkout-total{border-top:2px solid var(--gray-200);padding-top:12px;margin-top:4px;font-size:1.1rem;font-weight:700;color:var(--dark)}

/* DISCOUNT ROW */
.discount-row{display:flex;gap:8px;margin-bottom:12px}
.discount-row input{flex:1;padding:8px 12px;border:2px solid var(--gray-200);border-radius:8px;font-family:inherit;font-size:.82rem;outline:none}
.discount-row input:focus{border-color:var(--primary)}
.discount-row button{padding:8px 14px;border:none;background:var(--gradient-btn);color:var(--white);border-radius:8px;font-family:inherit;font-size:.8rem;font-weight:600;cursor:pointer}
.cart-discount{font-size:.82rem;color:var(--success);margin-bottom:8px;padding:6px 10px;background:rgba(16,185,129,.1);border-radius:8px}

/* CART SIDEBAR */
.cart-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.5);z-index:2000;opacity:0;visibility:hidden;transition:var(--transition)}
.cart-overlay.active{opacity:1;visibility:visible}
.cart-sidebar{position:fixed;top:0;right:-420px;width:400px;max-width:90vw;height:100vh;background:var(--white);z-index:2001;display:flex;flex-direction:column;transition:var(--transition);box-shadow:var(--shadow-xl)}
.cart-sidebar.active{right:0}
.cart-header{display:flex;justify-content:space-between;align-items:center;padding:18px 22px;border-bottom:1px solid var(--gray-200);flex-shrink:0}
.cart-header h3{font-size:1.05rem;display:flex;align-items:center;gap:8px}
.cart-close{width:32px;height:32px;border-radius:50%;border:none;background:var(--gray-100);cursor:pointer;transition:var(--transition);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.cart-close:hover{background:var(--danger);color:var(--white)}
.cart-items{flex:1;overflow-y:auto;overflow-x:hidden;padding:12px 22px;-webkit-overflow-scrolling:touch}
.cart-empty{text-align:center;padding:40px 0;color:var(--gray-400)}
.cart-empty i{font-size:2.5rem;margin-bottom:12px}
.cart-item{display:flex;gap:10px;padding:12px 0;border-bottom:1px solid var(--gray-100);align-items:center}
.cart-item-img{width:58px;height:58px;background:var(--gray-100);border-radius:8px;display:flex;align-items:center;justify-content:center;color:var(--gray-400);font-size:1.3rem;flex-shrink:0;overflow:hidden}
.cart-item-img img{width:100%;height:100%;object-fit:cover}
.cart-item-details{flex:1;min-width:0}
.cart-item-name{font-size:.85rem;font-weight:600;color:var(--dark);margin-bottom:3px;line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cart-item-price{font-size:.82rem;color:var(--primary);font-weight:600}
.cart-item-qty{display:flex;align-items:center;gap:5px;margin-top:6px}
.cart-item-qty button{width:24px;height:24px;border-radius:5px;border:1px solid var(--gray-200);background:var(--white);cursor:pointer;transition:var(--transition);display:flex;align-items:center;justify-content:center;font-size:.75rem;flex-shrink:0}
.cart-item-qty button:hover{background:var(--primary);color:var(--white);border-color:var(--primary)}
.cart-item-qty span{font-size:.82rem;font-weight:600;min-width:18px;text-align:center}
.cart-item-remove{width:28px;height:28px;border-radius:50%;border:none;background:transparent;color:var(--gray-400);cursor:pointer;transition:var(--transition);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.cart-item-remove:hover{background:rgba(239,68,68,.1);color:var(--danger)}
.cart-footer{padding:18px 22px;border-top:1px solid var(--gray-200);background:var(--gray-100);flex-shrink:0}
.cart-total{display:flex;justify-content:space-between;font-size:1.05rem;font-weight:700;margin-bottom:12px;color:var(--dark)}
.cart-footer .btn{margin-bottom:6px}

/* Mobile cart sidebar adjustments */
@media(max-width:767px){
    .cart-sidebar{width:100%;max-width:100%;right:-100%}
    .cart-header{padding:15px 18px}
    .cart-items{padding:10px 18px}
    .cart-footer{padding:15px 18px}
    .cart-item-img{width:50px;height:50px}
    .cart-item-name{font-size:.8rem}
    .cart-item-price{font-size:.78rem}
    .cart-item-qty button{width:22px;height:22px;font-size:.7rem}
    .cart-item-remove{width:26px;height:26px}
}

/* AUTH MODAL */
.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.55);z-index:5000;display:flex;align-items:flex-start;justify-content:center;overflow-y:auto;overflow-x:hidden;opacity:0;visibility:hidden;transition:var(--transition);padding:20px}
.modal-overlay.active{opacity:1;visibility:visible}
.modal{background:var(--white);border-radius:var(--radius-lg);padding:30px;width:100%;max-width:420px;position:relative;transform:translateY(20px);transition:var(--transition);margin:auto;flex-shrink:0}
.modal-overlay.active .modal{transform:translateY(0)}
.modal-lg{max-width:700px}
.modal-close{position:absolute;top:12px;right:12px;width:32px;height:32px;border-radius:50%;border:none;background:var(--gray-100);cursor:pointer;transition:var(--transition);display:flex;align-items:center;justify-content:center;z-index:1}
.modal-close:hover{background:var(--danger);color:var(--white)}
.modal-tabs{display:flex;gap:4px;margin-bottom:20px;background:var(--gray-100);border-radius:var(--radius);padding:4px}
.modal-tab{flex:1;padding:9px;border:none;background:transparent;border-radius:8px;font-family:inherit;font-weight:600;font-size:.88rem;cursor:pointer;transition:var(--transition);color:var(--gray-600)}
.modal-tab.active{background:var(--white);color:var(--primary);box-shadow:var(--shadow-sm)}

/* PROFILE */
.profile-layout{display:grid;grid-template-columns:.8fr 1.2fr;gap:35px;padding-bottom:50px}
.profile-card{background:var(--white);padding:35px;border-radius:var(--radius-lg);box-shadow:var(--shadow);text-align:center}
.profile-avatar{width:80px;height:80px;background:var(--gradient-btn);border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--white);font-size:2rem;font-weight:700;margin:0 auto 15px}
.profile-card h2{font-size:1.2rem;color:var(--dark);margin-bottom:4px}
.profile-card p{font-size:.88rem;color:var(--gray-500)}
.profile-since{font-size:.78rem;margin-top:8px}
.profile-form-container{background:var(--white);padding:30px;border-radius:var(--radius-lg);box-shadow:var(--shadow)}
.profile-form-container h2{font-size:1.2rem;margin-bottom:20px;color:var(--dark)}

/* ORDERS LIST */
.orders-list{padding-bottom:50px}
.order-card{background:var(--white);border:1px solid var(--gray-200);border-radius:var(--radius);padding:20px;margin-bottom:15px;cursor:pointer;transition:var(--transition)}
.order-card:hover{box-shadow:var(--shadow);border-color:var(--primary)}
.order-card-header{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px;margin-bottom:10px}
.order-id{font-weight:700;font-size:.9rem;color:var(--primary)}
.order-status{padding:4px 12px;border-radius:var(--radius-full);font-size:.75rem;font-weight:600;text-transform:capitalize}
.status-pending{background:rgba(245,158,11,.1);color:var(--warning)}
.status-confirmed{background:rgba(11,110,168,.1);color:var(--primary)}
.status-shipping{background:rgba(0,180,216,.1);color:var(--accent)}
.status-delivered{background:rgba(16,185,129,.1);color:var(--success)}
.status-cancelled{background:rgba(239,68,68,.1);color:var(--danger)}
.order-meta{display:flex;gap:20px;font-size:.82rem;color:var(--gray-500)}

/* IMAGE UPLOAD */
.image-upload-area{position:relative;border:2px dashed var(--gray-300);border-radius:var(--radius);overflow:hidden;cursor:pointer;transition:var(--transition)}
.image-upload-area:hover{border-color:var(--primary)}
.image-upload-area input[type="file"]{position:absolute;top:0;left:0;width:100%;height:100%;opacity:0;cursor:pointer}
.image-preview{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:150px;color:var(--gray-400);gap:8px}
.image-preview i{font-size:2.5rem}
.image-preview p{font-size:.85rem}
.image-preview img{max-height:200px;object-fit:contain}

/* ============ ADMIN PANEL ============ */
.admin-layout{display:grid;grid-template-columns:240px 1fr;min-height:100vh}
.admin-sidebar{background:var(--dark);padding:20px 0;position:sticky;top:0;height:100vh;overflow-y:auto}
.admin-logo{display:flex;align-items:center;gap:10px;padding:0 20px 20px;border-bottom:1px solid rgba(255,255,255,.08);margin-bottom:10px}
.admin-logo .logo-icon{width:36px;height:36px;font-size:1rem}
.admin-logo strong{color:var(--white);font-size:1rem}
.admin-nav{padding:10px 0}
.admin-nav-link{display:flex;align-items:center;gap:10px;padding:10px 20px;color:var(--gray-400);font-size:.88rem;font-weight:500;transition:var(--transition);border-left:3px solid transparent}
.admin-nav-link:hover{color:var(--white);background:rgba(255,255,255,.05)}
.admin-nav-link.active{color:var(--accent);border-left-color:var(--accent);background:rgba(0,180,216,.08)}
.admin-nav-link i{width:20px;text-align:center}
.admin-content{padding:25px 30px;background:var(--gray-100);overflow-y:auto}
.admin-tab{display:none}
.admin-tab.active{display:block}
.admin-tab h1{font-size:1.6rem;color:var(--dark);margin-bottom:25px}
.admin-tab-header{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;margin-bottom:25px}
.admin-tab-header h1{margin-bottom:0}

/* Admin Stats */
.admin-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-bottom:30px}
.stat-card{background:var(--white);padding:22px;border-radius:var(--radius);display:flex;align-items:center;gap:15px;box-shadow:var(--shadow-sm);transition:var(--transition)}
.stat-card:hover{box-shadow:var(--shadow)}
.stat-icon{width:50px;height:50px;border-radius:var(--radius);display:flex;align-items:center;justify-content:center;font-size:1.3rem;color:var(--white);flex-shrink:0}
.bg-blue{background:linear-gradient(135deg,var(--primary),var(--accent))}
.bg-green{background:linear-gradient(135deg,#10b981,#34d399)}
.bg-purple{background:linear-gradient(135deg,#8b5cf6,#a78bfa)}
.bg-orange{background:linear-gradient(135deg,#f59e0b,#fbbf24)}
.bg-teal{background:linear-gradient(135deg,#14b8a6,#2dd4bf)}
.bg-red{background:linear-gradient(135deg,#ef4444,#fb7185)}
.bg-cyan{background:linear-gradient(135deg,#06b6d4,#22d3ee)}
.stat-number{display:block;font-size:1.6rem;font-weight:700;color:var(--dark);line-height:1.2}
.stat-label{display:block;font-size:.78rem;color:var(--gray-500)}

/* Admin Tables */
.admin-table-container{background:var(--white);border-radius:var(--radius);box-shadow:var(--shadow-sm);overflow-x:auto}
.admin-table{width:100%;border-collapse:collapse}
.admin-table th{background:var(--gray-100);padding:12px 15px;text-align:left;font-size:.82rem;font-weight:600;color:var(--gray-700);white-space:nowrap;border-bottom:2px solid var(--gray-200)}
.admin-table td{padding:10px 15px;font-size:.85rem;border-bottom:1px solid var(--gray-100);vertical-align:middle}
.admin-table tr:hover{background:var(--gray-100)}
.admin-table img{width:40px;height:40px;border-radius:8px;object-fit:cover}
.admin-table .product-thumb{width:40px;height:40px;background:var(--gray-100);border-radius:8px;display:flex;align-items:center;justify-content:center;color:var(--gray-400);font-size:1rem;overflow:hidden;flex-shrink:0}
.admin-table .product-thumb img{width:100%;height:100%;object-fit:cover}
.table-actions{display:flex;gap:6px}
.table-actions button{width:30px;height:30px;border-radius:6px;border:none;cursor:pointer;transition:var(--transition);display:flex;align-items:center;justify-content:center;font-size:.8rem}
.btn-edit{background:rgba(11,110,168,.1);color:var(--primary)}
.btn-edit:hover{background:var(--primary);color:var(--white)}
.btn-delete{background:rgba(239,68,68,.1);color:var(--danger)}
.btn-delete:hover{background:var(--danger);color:var(--white)}
.admin-recent{background:var(--white);padding:25px;border-radius:var(--radius);box-shadow:var(--shadow-sm)}
.admin-recent h2{font-size:1.1rem;margin-bottom:15px;color:var(--dark)}
.admin-settings-form{max-width:600px;background:var(--white);padding:30px;border-radius:var(--radius);box-shadow:var(--shadow-sm)}

/* ============ ANALYTICS BUBBLE ============ */
.analytics-bubble{position:fixed;bottom:100px;left:20px;z-index:998;cursor:grab;user-select:none;touch-action:none}
.analytics-bubble.dragging{cursor:grabbing}
.bubble-expanded{background:var(--white);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);padding:15px;min-width:180px;animation:fadeInUp .3s ease}
.bubble-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;font-weight:600;font-size:.85rem;color:var(--dark)}
.bubble-header button{width:24px;height:24px;border-radius:50%;border:none;background:var(--gray-100);cursor:pointer;font-size:.7rem;display:flex;align-items:center;justify-content:center;transition:var(--transition)}
.bubble-header button:hover{background:var(--gray-200)}
.bubble-stats{display:flex;gap:12px;margin-bottom:10px}
.bubble-stat{text-align:center;flex:1}
.bubble-stat i{font-size:1rem;color:var(--primary);display:block;margin-bottom:3px}
.bubble-stat span{font-size:1.1rem;font-weight:700;color:var(--dark);display:block}
.bubble-stat small{font-size:.65rem;color:var(--gray-500)}
.bubble-actions{display:flex;gap:6px;justify-content:center}
.bubble-actions button{width:34px;height:34px;border-radius:50%;border:none;cursor:pointer;transition:var(--transition);display:flex;align-items:center;justify-content:center;font-size:.85rem}
.bubble-actions button:first-child{background:rgba(239,68,68,.1);color:var(--danger)}
.bubble-actions button:first-child:hover,.bubble-actions button:first-child.liked{background:var(--danger);color:var(--white)}
.bubble-actions button:last-child{background:rgba(11,110,168,.1);color:var(--primary)}
.bubble-actions button:last-child:hover{background:var(--primary);color:var(--white)}
.bubble-collapsed{background:var(--gradient-btn);width:50px;height:50px;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--white);cursor:pointer;box-shadow:var(--shadow);transition:var(--transition);gap:2px}
.bubble-collapsed:hover{transform:scale(1.1)}
.bubble-collapsed i{font-size:.9rem}
.bubble-collapsed span{font-size:.6rem;font-weight:700}
@keyframes fadeInUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}

/* WHATSAPP */
.whatsapp-float{width:55px;height:55px;background:#25D366;border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--white);font-size:1.6rem;box-shadow:0 4px 20px rgba(37,211,102,.4);z-index:999;transition:var(--transition);animation:pulse 2s infinite;text-decoration:none}
.whatsapp-float:hover{transform:scale(1.1)}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(37,211,102,.4)}70%{box-shadow:0 0 0 12px rgba(37,211,102,0)}100%{box-shadow:0 0 0 0 rgba(37,211,102,0)}}

/* TOAST */
.toast{position:fixed;bottom:25px;left:50%;transform:translateX(-50%) translateY(80px);background:var(--dark);color:var(--white);padding:12px 24px;border-radius:var(--radius-full);display:flex;align-items:center;gap:8px;font-size:.88rem;font-weight:500;z-index:9999;transition:var(--transition);box-shadow:var(--shadow-lg)}
.toast.active{transform:translateX(-50%) translateY(0)}
.toast i{font-size:1rem}
.toast .fa-check-circle{color:var(--success)}
.toast .fa-exclamation-circle{color:var(--warning)}
.toast .fa-times-circle{color:var(--danger)}

/* BACK TO TOP */
.back-to-top{position:fixed;bottom:90px;right:25px;width:42px;height:42px;border-radius:50%;background:var(--gradient-btn);color:var(--white);border:none;cursor:pointer;z-index:998;opacity:0;visibility:hidden;transition:var(--transition);display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow)}
.back-to-top.active{opacity:1;visibility:visible}
.back-to-top:hover{transform:translateY(-3px)}

/* FOOTER */
.footer{background:var(--dark);color:var(--gray-300);padding-top:50px}
.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:35px;padding-bottom:35px}
.footer-logo{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.footer-logo .logo-icon{width:36px;height:36px;font-size:1rem}
.footer-logo .logo-text strong{color:var(--white);font-size:.95rem}
.footer-logo .logo-text small{color:var(--gray-500)}
.footer-col>p{font-size:.85rem;line-height:1.7;color:var(--gray-400);margin-bottom:15px}
.footer-socials{display:flex;gap:8px}
.footer-socials a{width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.08);display:flex;align-items:center;justify-content:center;color:var(--gray-400);transition:var(--transition);font-size:.85rem}
.footer-socials a:hover{background:var(--gradient-btn);color:var(--white)}
.footer-col h4{color:var(--white);font-size:.95rem;margin-bottom:14px;position:relative;padding-bottom:8px}
.footer-col h4::after{content:'';position:absolute;bottom:0;left:0;width:28px;height:3px;background:var(--gradient-btn);border-radius:3px}
.footer-col ul li{margin-bottom:7px}
.footer-col ul li a{font-size:.85rem;color:var(--gray-400);transition:var(--transition)}
.footer-col ul li a:hover{color:var(--accent);padding-left:4px}
.contact-list li{display:flex;align-items:flex-start;gap:8px;font-size:.85rem;color:var(--gray-400);margin-bottom:8px}
.contact-list li i{color:var(--accent);margin-top:3px}
.footer-bottom{border-top:1px solid rgba(255,255,255,.08);padding:16px 0;text-align:center}
.footer-bottom p{font-size:.82rem;color:var(--gray-500)}

/* ============ RESPONSIVE ============ */
@media(max-width:1024px){
    .products-grid{grid-template-columns:repeat(3,1fr)}
    .hero-text h1{font-size:2.2rem}
    .footer-grid{grid-template-columns:repeat(2,1fr)}
    .services-grid{grid-template-columns:repeat(2,1fr)}
    .checkout-layout{grid-template-columns:1fr}
    .checkout-summary{position:static}
    .admin-stats{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:768px){
    .top-bar-left{display:none}
    .menu-toggle{display:flex}
    .nav{position:fixed;top:0;left:-100%;width:270px;height:100vh;background:var(--white);flex-direction:column;padding:70px 20px 20px;box-shadow:var(--shadow-xl);z-index:1000;transition:var(--transition)}
    .nav.active{left:0}
    .nav-link{padding:11px 14px;font-size:.95rem}
    .hero-slider{height:460px}
    .hero-content{flex-direction:column;text-align:center;justify-content:center}
    .hero-text h1{font-size:1.8rem}
    .hero-text p{margin:0 auto 20px}
    .hero-buttons{justify-content:center}
    .hero-image{display:none}
    .hero-arrow{display:none}
    .features-grid{grid-template-columns:repeat(2,1fr)}
    .categories-grid{grid-template-columns:repeat(2,1fr)}
    .products-grid,.shop-content .products-grid{grid-template-columns:repeat(2,1fr);gap:12px}
    .testimonials-grid{grid-template-columns:1fr}
    .promo-icon{display:none}
    .shop-layout{grid-template-columns:1fr}
    .shop-sidebar{position:fixed;top:0;left:-300px;width:280px;height:100vh;z-index:2000;background:var(--white);padding:20px;box-shadow:var(--shadow-xl);transition:var(--transition);overflow-y:auto}
    .shop-sidebar.active{left:0}
    .sidebar-close{display:flex}
    .filter-toggle-btn{display:flex}
    .product-detail{grid-template-columns:1fr;gap:25px}
    .contact-layout{grid-template-columns:1fr}
    .services-grid{grid-template-columns:1fr}
    .rachat-steps{grid-template-columns:1fr}
    .form-row{grid-template-columns:1fr;gap:0}
    .section-header h2{font-size:1.6rem}
    .page-hero h1{font-size:1.8rem}
    .newsletter-form{flex-direction:column}
    .payment-methods{grid-template-columns:1fr}
    .footer-grid{grid-template-columns:1fr;gap:25px}
    .profile-layout{grid-template-columns:1fr}
    .admin-layout{grid-template-columns:1fr}
    .admin-sidebar{position:fixed;top:0;left:-260px;width:240px;z-index:2000;transition:var(--transition)}
    .admin-sidebar.active{left:0}
    .admin-content{padding:20px 15px}
    .admin-stats{grid-template-columns:1fr 1fr}
    .wishlist-toggle{display:none!important}
}
/* ========== RESPONSIVE PETITS ÉCRANS MOBILES ========== */
@media(max-width:430px){
    .container{padding:0 8px}
    .logo-text strong{font-size:.65rem}
    .logo-icon{width:28px;height:28px}
    .header-actions{gap:1px}
    .search-toggle,.cart-toggle,.user-toggle{width:32px;height:32px;font-size:.85rem}
    .hero-slider{height:240px}
    .hero-text h1{font-size:1.2rem}
    .hero-text p{font-size:.75rem}
    .section{padding:20px 0}
    .section-header h2{font-size:1.1rem}
    .categories-grid{grid-template-columns:repeat(3,1fr);gap:6px}
    .category-card{padding:10px 4px}
    .category-icon{width:32px;height:32px;font-size:.9rem}
    .category-card h3{font-size:.65rem}
    .products-grid{grid-template-columns:repeat(2,1fr);gap:12px}
    .product-image{height:150px}
    .product-info{padding:12px}
    .product-name{font-size:.85rem}
    .bottom-nav{height:58px}
    .bn-item i{font-size:1rem}
    .bn-item>span:last-child{font-size:9px}
}

@media(max-width:414px){
    .logo-text{max-width:60px}
    .logo-text strong{font-size:.6rem}
    .hero-slider{height:230px}
    .hero-text h1{font-size:1.15rem}
    .categories-grid{gap:5px}
    .category-card{padding:8px 3px}
    .products-grid{gap:10px}
    .product-image{height:140px}
}

@media(max-width:390px){
    .header-content{padding:5px 8px;gap:4px}
    .logo-icon{width:26px;height:26px}
    .logo-text{max-width:55px}
    .logo-text strong{font-size:.58rem}
    .header-actions{gap:0}
    .search-toggle,.cart-toggle,.user-toggle{width:30px;height:30px;font-size:.8rem}
    .hero-slider{height:220px}
    .hero-text h1{font-size:1.1rem}
    .hero-text p{font-size:.7rem}
    .btn{padding:8px 16px;font-size:.8rem}
    .categories-grid{grid-template-columns:repeat(3,1fr);gap:4px}
    .category-card{padding:6px 2px;border-radius:8px}
    .category-icon{width:28px;height:28px;font-size:.8rem}
    .category-card h3{font-size:.6rem}
    .products-grid{grid-template-columns:repeat(2,1fr);gap:8px}
    .product-image{height:130px}
    .product-info{padding:10px}
    .product-name{font-size:.8rem;-webkit-line-clamp:2}
    .product-price{font-size:.9rem}
    .bottom-nav{height:56px}
    .bn-item i{font-size:.95rem}
}

@media(max-width:375px){
    .logo-text{max-width:50px}
    .logo-text strong{font-size:.55rem}
    .hero-slider{height:210px}
    .hero-text h1{font-size:1.05rem}
    .section-header h2{font-size:1rem}
    .category-card h3{font-size:.55rem}
    .product-name{font-size:.75rem}
    .product-price{font-size:.85rem}
    .feature-card{padding:8px 3px}
    .feature-icon{width:26px;height:26px;font-size:.75rem}
    .feature-card h4{font-size:.58rem}
}

@media(max-width:360px){
    .header-content{padding:4px 6px;gap:3px}
    .logo-icon{width:24px;height:24px}
    .logo-text{max-width:45px}
    .logo-text strong{font-size:.5rem}
    .search-toggle,.cart-toggle,.user-toggle{width:28px;height:28px;font-size:.75rem}
    .hero-slider{height:200px}
    .hero-text h1{font-size:1rem}
    .hero-text p{font-size:.65rem;display:none}
    .btn{padding:7px 14px;font-size:.75rem}
    .categories-grid{gap:3px}
    .category-card{padding:5px 2px}
    .category-icon{width:26px;height:26px;font-size:.75rem}
    .category-card h3{font-size:.5rem}
    .products-grid{gap:6px}
    .product-image{height:120px}
    .product-info{padding:8px}
    .product-name{font-size:.7rem}
    .product-price{font-size:.8rem}
    .bottom-nav{height:54px}
    .bn-item i{font-size:.9rem}
    .bn-item>span:last-child{font-size:8px}
}

@media(max-width:320px){
    .container{padding:0 6px}
    .logo-icon{width:22px;height:22px}
    .logo-text{max-width:40px}
    .logo-text strong{font-size:.45rem}
    .header-actions{gap:0}
    .search-toggle,.cart-toggle,.user-toggle{width:26px;height:26px;font-size:.7rem}
    .hero-slider{height:180px}
    .hero-text h1{font-size:.9rem}
    .btn{padding:6px 12px;font-size:.7rem}
    .categories-grid{grid-template-columns:repeat(2,1fr);gap:4px}
    .category-card{padding:8px 4px}
    .category-icon{width:30px;height:30px;font-size:.85rem}
    .category-card h3{font-size:.55rem}
    .products-grid{grid-template-columns:repeat(2,1fr);gap:5px}
    .product-image{height:110px}
    .product-info{padding:6px}
    .product-name{font-size:.65rem}
    .product-price{font-size:.75rem}
    .bottom-nav{height:52px}
    .bn-item i{font-size:.85rem}
    .bn-item>span:last-child{font-size:7px}
}

@media(max-width:480px){
    .products-grid,.shop-content .products-grid{grid-template-columns:repeat(2,1fr)}
    .features-grid,.categories-grid{grid-template-columns:repeat(2,1fr)}
    .hero-slider{height:400px}
    .hero-text h1{font-size:1.5rem}
    .btn-lg{padding:11px 22px;font-size:.9rem}
    .product-image{height:170px}
    .admin-stats{grid-template-columns:1fr}
}

/* ========== ADDITIONAL STYLES V2 ========== */

/* Toast types */
.toast.toast-error{background:var(--danger);color:#fff}
.toast.toast-error i{color:#fff}
.toast.toast-warning{background:var(--warning);color:#fff}
.toast.toast-warning i{color:#fff}

/* Image upload improvements */
.image-upload-area{cursor:pointer;position:relative;transition:var(--transition)}
.image-upload-area.drag-over{border-color:var(--primary);background:rgba(11,110,168,.05);transform:scale(1.02)}
.image-upload-area.drag-over .image-preview{opacity:.7}
.image-options{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
.ai-generate-btn{display:inline-flex;align-items:center;gap:6px;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff!important;border:none!important;font-size:.85rem;padding:8px 16px;border-radius:8px;cursor:pointer;transition:var(--transition)}
.ai-generate-btn:hover{transform:translateY(-1px);box-shadow:0 4px 15px rgba(102,126,234,.4)}
.ai-generate-btn i{font-size:.9rem}

/* WhatsApp button on product detail */
.btn-whatsapp{background:#25d366!important;color:#fff!important;border:none!important;display:inline-flex;align-items:center;gap:8px}
.btn-whatsapp:hover{background:#1ebe5a!important;transform:translateY(-2px)}

/* Stock status */
.detail-stock{display:inline-flex;align-items:center;gap:5px;padding:5px 12px;border-radius:20px;font-size:.85rem;font-weight:500}
.detail-stock.in-stock{background:#e8fdf0;color:var(--success)}
.detail-stock.out-of-stock{background:#fef2f2;color:var(--danger)}

/* Empty state */
.empty-state{text-align:center;padding:60px 20px;color:var(--gray-500)}
.empty-state i{font-size:3.5rem;margin-bottom:15px;display:block;color:var(--gray-300)}
.empty-state p{font-size:1.1rem;margin-bottom:20px}

/* Admin role badge */
.role-badge{padding:3px 10px;border-radius:12px;font-size:.75rem;font-weight:600;text-transform:uppercase}
.role-badge.role-admin{background:linear-gradient(135deg,var(--primary),var(--accent));color:#fff}
.role-badge.role-user{background:var(--gray-200);color:var(--gray-700)}

/* Message type badge */
.msg-type{padding:3px 10px;border-radius:8px;font-size:.75rem;font-weight:600}
.msg-type-contact{background:#e8f4fd;color:var(--primary)}
.msg-type-rachat{background:#fce8f3;color:var(--secondary)}

/* Unread message row */
.unread-row{background:rgba(11,110,168,.03)!important;font-weight:600}

/* Status select in admin */
.status-select{padding:5px 10px;border-radius:8px;border:1px solid var(--gray-300);font-size:.8rem;font-family:inherit;cursor:pointer;background:var(--white)}
.status-select:focus{outline:none;border-color:var(--primary)}

/* Order detail grid */
.order-detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:15px;margin:15px 0;padding:15px;background:var(--gray-100);border-radius:var(--radius)}
.order-detail-grid p{margin:5px 0;font-size:.9rem}

/* Product card improvements */
.product-image{cursor:pointer}
.product-card{will-change:transform}

/* Search suggestion price */
.search-suggestion small{margin-left:auto;color:var(--primary);font-weight:600;white-space:nowrap}
.search-suggestion{display:flex;align-items:center;gap:10px}
.search-suggestion.no-result{color:var(--gray-500);justify-content:center}

/* Better button states */
.btn:disabled{opacity:.6;cursor:not-allowed;transform:none!important}

/* Analytics bubble fix - z-index and button clicks */
.analytics-bubble{z-index:998}
.analytics-bubble button{position:relative;z-index:999}
.analytics-bubble.dragging{opacity:.8;cursor:grabbing}
.analytics-bubble .bubble-header button,.analytics-bubble .bubble-actions button{pointer-events:auto}
.analytics-bubble .bubble-collapsed,.analytics-bubble .bubble-expanded,.chatbot-toggle,.chatbot-close,.chatbot-input button,.chat-quick-actions button,.wa-float-container .whatsapp-float,.wa-minimize-btn,.chatbot-minimize-btn{pointer-events:auto}

/* Admin table improvements */
.admin-table{font-size:.85rem}
.admin-table th{position:sticky;top:0;z-index:1}
.btn-edit,.btn-delete{width:32px;height:32px;border:none;border-radius:8px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:var(--transition);font-size:.85rem}
.btn-edit{background:#e8f4fd;color:var(--primary)}
.btn-edit:hover{background:var(--primary);color:#fff}
.btn-delete{background:#fef2f2;color:var(--danger)}
.btn-delete:hover{background:var(--danger);color:#fff}

/* Small button */
.btn-sm{padding:6px 14px;font-size:.8rem;border-radius:8px}

/* Admin code field - discret */
.admin-code-group{border-top:1px dashed var(--gray-300);padding-top:12px;margin-top:8px}
.admin-code-group label{font-size:.85rem;color:var(--gray-500)}
.admin-code-group small{color:var(--gray-400);font-weight:400}
.admin-code-group input{border-style:dashed;font-size:.85rem}

@media(max-width:768px){
    .order-detail-grid{grid-template-columns:1fr}
    .image-options{justify-content:center}
    .detail-buttons{flex-direction:column;gap:10px}
    .detail-buttons .btn{width:100%}
}

/* ============================================
   V3 - CHATBOT, NOTIFICATIONS, ADMIN ENHANCEMENTS
   ============================================ */

/* ========== NOTIFICATIONS ========== */
.notif-toggle{position:relative;cursor:pointer;padding:8px;font-size:1.1rem;color:var(--gray-700)}
.notif-toggle:hover{color:var(--primary)}
.notif-count{position:absolute;top:0;right:0;background:var(--danger);color:#fff;width:18px;height:18px;border-radius:50%;font-size:.65rem;display:flex;align-items:center;justify-content:center;font-weight:700;animation:notifPulse 2s infinite}
@keyframes notifPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.15)}}
.notif-dropdown{position:absolute;top:calc(100% + 10px);right:-20px;width:340px;background:#fff;border-radius:var(--radius-lg);box-shadow:0 10px 40px rgba(0,0,0,.15);z-index:1001;display:none;overflow:hidden}
.notif-dropdown.active{display:block;animation:fadeSlideDown .2s ease}
@keyframes fadeSlideDown{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}
.notif-dropdown-header{display:flex;justify-content:space-between;align-items:center;padding:14px 16px;border-bottom:1px solid var(--gray-200);background:var(--gray-50)}
.notif-dropdown-header strong{font-size:.95rem}
.notif-clear-btn{background:none;border:none;color:var(--primary);font-size:.8rem;cursor:pointer;font-weight:500}
.notif-clear-btn:hover{text-decoration:underline}
.notif-dropdown-body{max-height:350px;overflow-y:auto}
.notif-empty{text-align:center;padding:30px;color:var(--gray-400);font-size:.9rem}
.notif-item{display:flex;gap:12px;padding:12px 16px;border-bottom:1px solid var(--gray-100);cursor:pointer;transition:background .2s}
.notif-item:hover{background:var(--gray-50)}
.notif-item.unread{background:#f0f7ff;border-left:3px solid var(--primary)}
.notif-item-icon{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.85rem;flex-shrink:0}
.notif-item-icon.notif-order{background:#e8f5e9;color:#4caf50}
.notif-item-icon.notif-user{background:#e3f2fd;color:var(--primary)}
.notif-item-icon.notif-msg{background:#fff3e0;color:#ff9800}
.notif-item-icon.notif-system{background:#f3e5f5;color:#9c27b0}
.notif-item-text{flex:1;min-width:0}
.notif-item-text p{font-size:.85rem;margin:0;color:var(--gray-700);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.notif-item-text small{color:var(--gray-400);font-size:.75rem}

/* ========== CHATBOT WIDGET ========== */
.chatbot-widget{position:fixed;bottom:90px;right:24px;z-index:997}
.chatbot-toggle{width:56px;height:56px;border-radius:50%;border:none;background:linear-gradient(135deg,var(--primary),var(--secondary));color:#fff;font-size:1.4rem;cursor:pointer;box-shadow:0 4px 20px rgba(11,110,168,.4);transition:all .3s;display:flex;align-items:center;justify-content:center;position:relative}
.chatbot-toggle:hover{transform:scale(1.1);box-shadow:0 6px 25px rgba(11,110,168,.5)}
.chatbot-badge{position:absolute;top:-4px;right:-4px;background:var(--danger);color:#fff;width:20px;height:20px;border-radius:50%;font-size:.7rem;display:flex;align-items:center;justify-content:center;font-weight:700;border:2px solid #fff}
.chatbot-window{position:absolute;bottom:70px;right:0;width:380px;height:520px;background:#fff;border-radius:var(--radius-lg);box-shadow:0 10px 50px rgba(0,0,0,.2);display:flex;flex-direction:column;overflow:hidden;animation:chatSlideUp .3s ease}
@keyframes chatSlideUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
.chatbot-header{background:linear-gradient(135deg,var(--primary),var(--secondary));color:#fff;padding:14px 16px;display:flex;justify-content:space-between;align-items:center}
.chatbot-header-info{display:flex;align-items:center;gap:10px}
.chatbot-avatar{width:38px;height:38px;background:rgba(255,255,255,.2);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.1rem}
.chatbot-header-info strong{font-size:.95rem;display:block}
.chatbot-header-info small{font-size:.75rem;opacity:.8}
.chatbot-close{background:none;border:none;color:#fff;font-size:1.2rem;cursor:pointer;opacity:.8;transition:opacity .2s}
.chatbot-close:hover{opacity:1}
.chatbot-messages{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:12px;background:#f8fafc}
.chat-msg{display:flex;gap:8px;max-width:85%}
.chat-msg.bot{align-self:flex-start}
.chat-msg.user{align-self:flex-end;flex-direction:row-reverse}
.chat-msg-content{padding:10px 14px;border-radius:16px;font-size:.88rem;line-height:1.5;word-break:break-word}
.chat-msg.bot .chat-msg-content{background:#fff;color:var(--gray-700);border:1px solid var(--gray-200);border-bottom-left-radius:4px}
.chat-msg.user .chat-msg-content{background:linear-gradient(135deg,var(--primary),var(--secondary));color:#fff;border-bottom-right-radius:4px}
.chat-msg-time{font-size:.65rem;color:var(--gray-400);margin-top:4px;align-self:flex-end}
.chat-quick-actions{display:flex;flex-wrap:wrap;gap:6px;padding:4px 0}
.chat-quick-actions button{background:#fff;border:1px solid var(--primary);color:var(--primary);padding:6px 14px;border-radius:20px;font-size:.78rem;cursor:pointer;transition:all .2s;font-family:inherit}
.chat-quick-actions button:hover{background:var(--primary);color:#fff}
.chat-typing{display:flex;gap:4px;padding:10px 14px;background:#fff;border-radius:16px;border:1px solid var(--gray-200);align-self:flex-start;border-bottom-left-radius:4px}
.chat-typing span{width:8px;height:8px;background:var(--gray-300);border-radius:50%;animation:typingBounce .6s infinite}
.chat-typing span:nth-child(2){animation-delay:.15s}
.chat-typing span:nth-child(3){animation-delay:.3s}
@keyframes typingBounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
.chatbot-input{display:flex;padding:12px;border-top:1px solid var(--gray-200);background:#fff;gap:8px}
.chatbot-input input{flex:1;border:1px solid var(--gray-200);border-radius:24px;padding:10px 16px;font-size:.88rem;font-family:inherit;outline:none;transition:border-color .2s}
.chatbot-input input:focus{border-color:var(--primary)}
.chatbot-input button{width:40px;height:40px;border:none;border-radius:50%;background:var(--primary);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s;font-size:.9rem}
.chatbot-input button:hover{background:var(--primary-dark)}

/* ========== ADMIN USER MANAGEMENT ========== */
.admin-user-count{font-size:.85rem;color:var(--gray-500);font-weight:400;margin-left:10px}
.user-actions{display:flex;gap:4px}
.btn-warn{width:32px;height:32px;border:none;border-radius:8px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:var(--transition);font-size:.85rem;background:#fff3e0;color:#ff9800}
.btn-warn:hover{background:#ff9800;color:#fff}

/* ========== ADMIN SETTINGS ENHANCED ========== */
.settings-section{background:#fff;border:1px solid var(--gray-200);border-radius:var(--radius-lg);padding:20px;margin-bottom:20px}
.settings-section h3{font-size:1rem;color:var(--primary);margin-bottom:15px;display:flex;align-items:center;gap:8px;padding-bottom:10px;border-bottom:1px solid var(--gray-100)}
.logo-upload-area{width:120px;height:120px;border:2px dashed var(--gray-300);border-radius:var(--radius-lg);cursor:pointer;display:flex;align-items:center;justify-content:center;overflow:hidden;transition:border-color .2s}
.logo-upload-area:hover{border-color:var(--primary)}
.logo-preview{text-align:center}
.logo-preview p{font-size:.7rem;color:var(--gray-400);margin-top:6px}
.logo-preview img{width:100%;height:100%;object-fit:contain}
.logo-preview .logo-icon{width:60px;height:60px;font-size:1.5rem;margin:0 auto}

/* ========== ADMIN CHAT CONVERSATIONS ========== */
.chat-conversation{padding:16px;border:1px solid var(--gray-200);border-radius:var(--radius);margin-bottom:12px;cursor:pointer;transition:all .2s}
.chat-conversation:hover{border-color:var(--primary);background:var(--gray-50)}
.chat-conversation-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.chat-conversation-header strong{color:var(--gray-700)}
.chat-conversation-header small{color:var(--gray-400)}
.chat-conversation-preview{font-size:.85rem;color:var(--gray-500);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chat-conversation-msgs{max-height:300px;overflow-y:auto;padding:10px;background:var(--gray-50);border-radius:var(--radius);margin-top:10px}
.chat-conversation-msgs .chat-msg{max-width:90%;margin-bottom:8px}

/* ========== WHATSAPP MINIMIZABLE ========== */
.wa-float-container{position:fixed;bottom:24px;right:24px;z-index:996;display:flex;flex-direction:column;align-items:center;gap:4px}
.wa-float-container .whatsapp-float{position:static;transition:all .3s}
.wa-minimize-btn{width:20px;height:20px;border-radius:50%;border:none;background:rgba(0,0,0,.3);color:#fff;font-size:.55rem;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s;opacity:0}
.wa-float-container:hover .wa-minimize-btn{opacity:1}
.wa-float-container.minimized .whatsapp-float{width:32px;height:32px;font-size:.9rem;opacity:.5}
.wa-float-container.minimized .wa-minimize-btn{display:none}
.wa-float-container.minimized:hover .whatsapp-float{opacity:1}
.chatbot-minimize-btn{position:absolute;top:-4px;right:-4px;width:20px;height:20px;border-radius:50%;border:none;background:rgba(0,0,0,.3);color:#fff;font-size:.55rem;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s;opacity:0;z-index:3}
.chatbot-widget:hover .chatbot-minimize-btn{opacity:1}
.chatbot-widget.minimized .chatbot-toggle{width:36px;height:36px;font-size:.95rem;opacity:.5}
.chatbot-widget.minimized .chatbot-minimize-btn{display:none}
.chatbot-widget.minimized:hover .chatbot-toggle{opacity:1}

/* ========== OCCASION SECTION ========== */
.section-occasion{background:linear-gradient(135deg,#f0f9ff,#e8f4fd)}
.occasion-badges{display:flex;gap:16px;justify-content:center;margin-bottom:2rem;flex-wrap:wrap}
.occasion-badge{background:#fff;padding:8px 18px;border-radius:30px;font-size:.85rem;font-weight:600;color:#0B6EA8;box-shadow:0 2px 8px rgba(0,0,0,.06);display:flex;align-items:center;gap:8px}
.occasion-badge i{color:#00B4D8}

/* ========== PARTNERS SECTION ========== */
.partners-section{background:#fff;overflow:hidden}
.partners-scroll-wrapper{overflow:hidden;position:relative;width:100%;mask-image:linear-gradient(to right,transparent 0%,#000 10%,#000 90%,transparent 100%);-webkit-mask-image:linear-gradient(to right,transparent 0%,#000 10%,#000 90%,transparent 100%)}
.partners-grid{display:flex;gap:24px;align-items:center;animation:partnersScroll 20s linear infinite;width:max-content}
.partners-grid:hover{animation-play-state:paused}
@keyframes partnersScroll{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
.partner-card{background:#f8fafc;border-radius:12px;padding:24px 20px;text-align:center;transition:all .3s;border:1px solid #eee;min-width:140px;flex-shrink:0}
.partner-card:hover{transform:translateY(-4px);box-shadow:0 8px 20px rgba(0,0,0,.08);border-color:#00B4D8}
.partner-logo{width:60px;height:60px;margin:0 auto 10px;border-radius:50%;background:linear-gradient(135deg,#0B6EA8,#00B4D8);display:flex;align-items:center;justify-content:center;color:#fff;font-size:1.4rem}
.partner-card span{font-size:.8rem;font-weight:600;color:#333}
@media(max-width:768px){.partner-card{min-width:120px;padding:16px 10px}}
@media(max-width:480px){.partner-card{min-width:100px}}

/* ========== FEATURE CARD HOVER ========== */
.feature-card:hover{transform:translateY(-6px);box-shadow:0 12px 30px rgba(11,110,168,.15)}
.feature-card{transition:all .3s}

/* ========== SECTION TOGGLE CONTROLS ========== */
.section-toggles{display:flex;flex-direction:column;gap:10px}
.toggle-row{display:flex;align-items:center;gap:12px;cursor:pointer;padding:8px 12px;border-radius:8px;transition:background .2s}
.toggle-row:hover{background:#f0f9ff}
.toggle-row input[type="checkbox"]{display:none}
.toggle-slider{width:44px;height:24px;background:#ccc;border-radius:12px;position:relative;transition:background .3s;flex-shrink:0}
.toggle-slider::after{content:'';width:20px;height:20px;background:#fff;border-radius:50%;position:absolute;top:2px;left:2px;transition:transform .3s;box-shadow:0 1px 3px rgba(0,0,0,.2)}
.toggle-row input:checked+.toggle-slider{background:var(--primary)}
.toggle-row input:checked+.toggle-slider::after{transform:translateX(20px)}
.toggle-row span:last-child{font-size:.9rem;font-weight:500;color:#333}
[data-section].section-hidden{display:none!important}

/* ========== MULTI PHOTO UPLOAD ========== */
.multi-photo-upload{display:flex;flex-wrap:wrap;gap:10px;padding:12px;background:#f8fafc;border-radius:10px;border:2px dashed #ddd;min-height:80px}
.multi-photo-upload .photo-item{width:80px;height:80px;border-radius:8px;overflow:hidden;position:relative;border:2px solid #eee}
.multi-photo-upload .photo-item img{width:100%;height:100%;object-fit:cover}
.multi-photo-upload .photo-item .photo-remove{position:absolute;top:2px;right:2px;width:20px;height:20px;border-radius:50%;background:rgba(220,38,38,.9);color:#fff;border:none;font-size:.6rem;cursor:pointer;display:flex;align-items:center;justify-content:center}
.photo-add-btn{width:80px;height:80px;border-radius:8px;border:2px dashed #0B6EA8;display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;color:#0B6EA8;transition:all .2s;gap:4px;font-size:1.2rem}
.photo-add-btn:hover{background:#f0f9ff;border-color:#00B4D8}
.photo-add-btn small{font-size:.6rem}
.multi-photo-grid{display:flex;flex-wrap:wrap;gap:8px}

/* ========== GALLERY URL INPUTS ========== */
.gallery-url-row{display:flex;gap:8px;margin-top:6px;align-items:center}
.gallery-url-row input{flex:1}
.gallery-url-row button{width:30px;height:30px;border-radius:50%;border:none;background:#ef4444;color:#fff;cursor:pointer;font-size:.7rem;flex-shrink:0}

/* ========== DRAGGABLE FLOATS ========== */
.wa-float-container.dragging,.chatbot-widget.dragging{opacity:.8;z-index:10001;transition:none}
.wa-float-container,.chatbot-widget{touch-action:none}

/* ========== RESPONSIVE CHATBOT ========== */
@media(max-width:480px){
    .chatbot-window{width:calc(100vw - 20px);right:-14px;bottom:65px;height:calc(100vh - 160px)}
    .notif-dropdown{width:calc(100vw - 30px);right:-60px}
}
@media(max-width:768px){
    .chatbot-widget{bottom:80px;right:16px}
    .wa-float-container{bottom:16px;right:16px}
    .notif-dropdown{width:300px}
}

/* ========== CATALOG & ADMIN ENHANCEMENTS ========== */
.filter-hint{font-size:.78rem;color:var(--gray-500);margin-top:10px;line-height:1.45}
.shop-quick-groups{display:flex;gap:10px;flex-wrap:wrap;margin:0 0 18px}
.shop-quick-chip{border:none;border-radius:999px;padding:10px 14px;background:#eef6ff;color:#0B6EA8;font-weight:700;font-size:.82rem;cursor:pointer;transition:var(--transition)}
.shop-quick-chip:hover,.shop-quick-chip.active{background:linear-gradient(135deg,#0B6EA8,#00B4D8);color:#fff;transform:translateY(-1px)}
.catalog-group-section{grid-column:1/-1;background:linear-gradient(180deg,#fff,#f8fbff);border:1px solid #e8f1f8;border-radius:22px;padding:24px;margin-bottom:8px}
.catalog-group-header{display:flex;justify-content:space-between;align-items:flex-end;gap:14px;flex-wrap:wrap;margin-bottom:18px}
.catalog-group-header h3{margin:0;font-size:1.35rem;color:var(--dark)}
.catalog-group-header p{margin:4px 0 0;color:var(--gray-600);font-size:.9rem}
.catalog-subgroup{padding:16px 0;border-top:1px dashed #d8e5ef}
.catalog-subgroup:first-of-type{border-top:none;padding-top:0}
.catalog-subgroup-head{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.catalog-subgroup-head h4{margin:0;font-size:1rem;color:#0f172a}
.catalog-subgroup-head span{font-size:.8rem;color:var(--gray-500);font-weight:600}
.catalog-subgroup-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.catalog-overview-note{grid-column:1/-1;background:#f8fafc;border-radius:16px;padding:14px 16px;color:var(--gray-600);font-size:.86rem;line-height:1.5}
.admin-action-row{display:flex;gap:10px;flex-wrap:wrap}
.product-meta-row{display:flex;justify-content:space-between;align-items:center;gap:10px;margin:10px 0 6px}
.product-status-chip{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;font-size:.72rem;font-weight:700;letter-spacing:.02em;background:#eef6ff;color:#0B6EA8}
.product-status-chip.status-old{background:#f3f4f6;color:#475569}
.product-status-chip.status-occasion{background:#ecfdf3;color:#047857}
.product-status-chip.status-preorder{background:#fff7ed;color:#c2410c}
.product-status-chip.status-special-order{background:#fdf2f8;color:#be185d}
.stock-state{font-size:.78rem;font-weight:700}
.stock-state.in{color:#15803d}
.stock-state.out{color:#dc2626}
.stock-state.low{color:#d97706}
.btn-request-device{background:var(--white);color:var(--primary);border:1px solid rgba(11,110,168,.18)}
.btn-request-device:hover{background:#eef8ff}
.request-note{font-size:.82rem;color:var(--gray-600);line-height:1.45}
.notification-list{display:flex;flex-direction:column}
.notification-item{display:flex;gap:14px;padding:16px 18px;border-bottom:1px solid var(--gray-100);align-items:flex-start}
.notification-item.unread{background:#f8fbff}
.notification-item i{width:38px;height:38px;border-radius:12px;display:flex;align-items:center;justify-content:center;background:#eef6ff;color:var(--primary);flex-shrink:0}
.notification-item strong{display:block;font-size:.92rem;color:var(--dark)}
.notification-item p{margin:4px 0 0;color:var(--gray-600);font-size:.84rem;line-height:1.45}
.notification-item small{display:block;margin-top:6px;color:var(--gray-500)}
.trash-toolbar{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:16px 18px;border-bottom:1px solid var(--gray-100);background:var(--gray-100)}
.trash-toolbar label{display:flex;align-items:center;gap:8px;font-size:.84rem;color:var(--gray-700)}
.trash-expired{color:#dc2626;font-weight:700}
.table-check-cell{width:38px}
.table-check-cell input{width:16px;height:16px;cursor:pointer}
.detail-extra-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
.checkout-alt-actions{display:flex;flex-direction:column;gap:10px;margin-top:16px}
.partner-logo img{width:100%;height:100%;object-fit:contain;border-radius:50%}
.stock-adjuster{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.stock-adjuster .btn-edit{min-width:34px}
.stock-number-input{width:90px;padding:6px 10px;border:1px solid var(--gray-300);border-radius:8px;font-family:inherit}
.stock-number-input:focus{outline:none;border-color:var(--primary)}
#stockDashboardContent .admin-recent{background:var(--white);border-radius:var(--radius);padding:20px;box-shadow:var(--shadow-sm)}
#stockDashboardContent .admin-recent h2{font-size:1.1rem;margin-bottom:15px;color:var(--dark);display:flex;align-items:center;gap:8px}
#stockDashboardContent .admin-recent h2 i{color:var(--primary)}
#adminTab-partners .admin-settings-form{max-width:none}
.admin-products-toolbar{display:flex;flex-direction:column;gap:14px;padding:18px;background:#f8fbff;border:1px solid #dfeaf4;border-radius:18px;margin-bottom:16px}
.admin-products-toolbar-top{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.admin-products-toolbar-top input,.admin-products-toolbar-top select{min-height:42px;border:1px solid var(--gray-300);border-radius:12px;padding:10px 14px;font-family:inherit;font-size:.9rem;background:#fff}
.admin-products-toolbar-top input{flex:1;min-width:240px}
.admin-products-toolbar-top select{min-width:180px}
.admin-products-toolbar-top input:focus,.admin-products-toolbar-top select:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px rgba(11,110,168,.08)}
.admin-products-toolbar-actions{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;align-items:center}
.admin-products-toolbar-actions p{margin:0;color:var(--gray-600);font-size:.84rem;line-height:1.5}
.admin-products-bulk-actions{display:flex;gap:10px;flex-wrap:wrap}
.admin-products-empty{padding:44px 20px;text-align:center;color:#888}
.admin-products-empty i{font-size:3rem;display:block;margin-bottom:12px;opacity:.35}
.admin-group-row td{background:linear-gradient(135deg,#eff7ff,#f8fbff);padding:0;border-top:1px solid #d8e7f3}
.admin-group-pill{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:14px 18px;font-weight:700;color:#0f172a}
.admin-group-pill span{font-size:.8rem;color:#0B6EA8;font-weight:700}
.admin-subgroup-row td{background:#fbfdff;padding:12px 18px;font-size:.82rem;color:var(--gray-600);font-weight:700;border-top:1px dashed #e3edf5}
.admin-product-name{display:flex;align-items:center;gap:12px}
.admin-product-name .product-thumb{width:48px;height:48px;flex-shrink:0}
.admin-product-meta{display:flex;flex-direction:column;gap:4px}
.admin-product-meta small{color:var(--gray-500);font-size:.76rem}
.search-ai-hint{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:999px;background:#eef6ff;color:#0B6EA8;font-size:.78rem;font-weight:700}
.admin-row-clickable{cursor:pointer}
.admin-row-clickable:hover td{background:#eef7ff}

@media(max-width:768px){
    .product-meta-row{align-items:flex-start;flex-direction:column}
    .admin-action-row{width:100%}
    .admin-action-row .btn{flex:1}
    .trash-toolbar{padding:14px}
    .catalog-subgroup-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
    .admin-products-toolbar-top input,.admin-products-toolbar-top select{width:100%;min-width:0}
    .admin-products-toolbar-actions{align-items:flex-start}
    .admin-products-bulk-actions{width:100%}
    .admin-products-bulk-actions .btn{flex:1}
}

@media(max-width:560px){
    .shop-quick-chip{width:100%;text-align:center}
    .catalog-group-section{padding:18px}
    .catalog-subgroup-grid{grid-template-columns:1fr}
}

/* AI Image Generation */
#btnGenerateAiImage{transition:all .3s;background:linear-gradient(135deg,rgba(11,110,168,.05),rgba(0,180,216,.08))}
#btnGenerateAiImage:hover{background:linear-gradient(135deg,rgba(11,110,168,.12),rgba(0,180,216,.15));transform:translateY(-1px);box-shadow:0 4px 12px rgba(11,110,168,.15)}
#btnGenerateAiImage:disabled{opacity:.6;cursor:wait;transform:none}
#aiImageStatus{animation:fadeIn .3s ease}

/* Occasions section enhancements */
.section-occasion{background:linear-gradient(135deg,#fef9f0 0%,#fff5eb 100%)}
.occasion-badges{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-bottom:24px}
.occasion-badge{background:#fff;border:1px solid #f0c14b;color:#c77d00;padding:6px 16px;border-radius:20px;font-size:.8rem;font-weight:600;display:flex;align-items:center;gap:6px}
.occasion-badge i{color:#f0c14b}

/* ============================================================
   V4 — MOBILE JUMIA SLIDER + GPS FIX
   ============================================================ */

/* ------- CORRECTIF GPS : bouton invisible sauf dans la page checkout active ------- */
.geo-locate-row{display:none!important}
#page-checkout:not(.page-hidden) .geo-locate-row{display:flex!important}

/* ------- SLIDER HORIZONTAL PRODUITS STYLE JUMIA (accueil, < 768 px) ------- */
@media(max-width:767px){

    /* --- Conteneur : flex horizontal avec snap et scrollbar masquée --- */
    #page-home .products-grid{
        display:flex!important;
        flex-direction:row!important;
        flex-wrap:nowrap!important;
        overflow-x:auto!important;
        overflow-y:hidden;
        scroll-snap-type:x mandatory;
        -webkit-overflow-scrolling:touch;
        gap:10px;
        padding:4px 4px 16px;
        /* masquer la scrollbar brute */
        scrollbar-width:none;
        -ms-overflow-style:none;
        /* annuler les grilles héritées */
        grid-template-columns:none!important;
    }
    #page-home .products-grid::-webkit-scrollbar{display:none}

    /* --- Chaque carte : largeur fixe + snap --- */
    #page-home .products-grid .product-card{
        flex:0 0 152px;
        width:152px;
        min-width:152px;
        scroll-snap-align:start;
        border-radius:12px;
        border:1px solid var(--gray-200);
        box-shadow:0 2px 8px rgba(0,0,0,.07);
        will-change:transform;
    }
    /* espace de respiration après la dernière carte */
    #page-home .products-grid .product-card:last-child{margin-right:12px}

    /* --- Image centrée, hauteur fixe --- */
    #page-home .products-grid .product-image{
        height:138px;
        border-radius:12px 12px 0 0;
        overflow:hidden;
    }
    #page-home .products-grid .product-image img{
        width:100%;
        height:100%;
        object-fit:cover;
    }
    #page-home .products-grid .product-image i{font-size:2.4rem}

    /* Actions hover : désactivées en mobile (tactile) */
    #page-home .products-grid .product-actions{display:none}

    /* --- Infos produit compactes --- */
    #page-home .products-grid .product-info{padding:7px 9px 3px}
    #page-home .products-grid .product-category{font-size:.58rem;letter-spacing:.3px}
    #page-home .products-grid .product-name{
        font-size:.76rem;
        margin:3px 0 5px;
        line-height:1.3;
        -webkit-line-clamp:2;
    }

    /* Rating compact */
    #page-home .products-grid .product-rating{margin-bottom:4px}
    #page-home .products-grid .product-rating i{font-size:.58rem}
    #page-home .products-grid .product-rating span{font-size:.62rem}

    /* --- Prix : current rouge vif (Jumia) / old barré discret --- */
    #page-home .products-grid .product-price{gap:4px;flex-wrap:wrap;align-items:center}
    #page-home .products-grid .price-current{
        font-size:.88rem;
        font-weight:800;
        color:#d92b2b;
    }
    #page-home .products-grid .price-old{
        font-size:.66rem;
        color:var(--gray-400);
    }

    /* --- Badge remise : fond rouge vif, texte blanc, compact --- */
    #page-home .products-grid .product-discount{
        font-size:.62rem;
        background:#d92b2b;
        color:#fff;
        padding:1px 5px;
        border-radius:3px;
        font-weight:700;
    }

    /* --- Bouton Ajouter au panier compact --- */
    #page-home .products-grid .product-footer{padding:2px 9px 9px}
    #page-home .products-grid .btn-add-cart{
        padding:6px 4px;
        font-size:.68rem;
        gap:3px;
        border-radius:8px;
    }

    /* --- Badge image "Nouveau / Promo" réduit --- */
    #page-home .products-grid .product-badge{
        font-size:.6rem;
        padding:2px 6px;
        top:7px;
        left:7px;
    }

    /* --- Bouton wishlist plus petit --- */
    #page-home .products-grid .product-wishlist-btn{
        width:26px;
        height:26px;
        font-size:.68rem;
        top:7px;
        right:7px;
    }

    /* --- Placeholder de chargement --- */
    #page-home .products-grid .products-loading{
        flex:0 0 100%;
        min-width:240px;
    }

    /* --- Réduction de la marge inférieure des section-header sur l'accueil mobile --- */
    #page-home .section-header{margin-bottom:18px}
}

/* --- Indicateur visuel de défilement : dégradé droit sur les sections slider --- */
@media(max-width:767px){
    #page-home section[data-section="featured"],
    #page-home section[data-section="new"],
    #page-home section[data-section="occasions"]{
        position:relative;
        overflow:hidden; /* clip le dégradé sans affecter le scroll intérieur */
    }
    /* Le dégradé est appliqué sur la section, qui a overflow:hidden.
       Le .products-grid a overflow-x:auto ; le clip de la section
       ne coupe pas le scroll car le scroll est géré par le flex-container. */
    #page-home section[data-section="featured"]::after,
    #page-home section[data-section="new"]::after,
    #page-home section[data-section="occasions"]::after{
        content:'';
        position:absolute;
        top:0;right:0;bottom:0;
        width:36px;
        background:linear-gradient(to right,transparent,rgba(255,255,255,.88));
        pointer-events:none;
        z-index:3;
    }
    /* section-gray a un fond gris : adapter la couleur du dégradé */
    #page-home section[data-section="featured"]::after{
        background:linear-gradient(to right,transparent,rgba(244,244,248,.92));
    }
    /* section-occasion a un fond crème : adapter */
    #page-home section[data-section="occasions"]::after{
        background:linear-gradient(to right,transparent,rgba(254,249,240,.92));
    }
}

/* ============================================================
   V5 — BOTTOM NAVIGATION BAR (MOBILE UNIQUEMENT)
   ============================================================ */

/* Invisible sur desktop — la media query l'active sur mobile */
.bottom-nav { display: none }

@media (max-width: 767px) {

    /* ----- La barre ----- */
    .bottom-nav {
        display: flex;
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 62px;
        background: #fff;
        border-top: 1px solid rgba(0,0,0,.08);
        box-shadow: 0 -3px 18px rgba(0,0,0,.09);
        z-index: 9999;
        align-items: stretch;
        /* Respect du notch iPhone / Android */
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }

    /* ----- Chaque onglet ----- */
    .bn-item {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        background: none;
        border: none;
        cursor: pointer;
        font-family: inherit;
        color: #bbb;
        transition: color .15s;
        padding: 0;
        position: relative;
        outline: none;
        -webkit-tap-highlight-color: transparent;
    }
    .bn-item i { font-size: 1.15rem; line-height: 1 }
    .bn-item > span:last-child {
        font-size: 10px;
        font-weight: 600;
        letter-spacing: .1px;
        line-height: 1;
    }

    /* ----- Onglet actif ----- */
    .bn-item.active { color: var(--primary) }
    .bn-item.active i { transform: translateY(-1px) }
    .bn-item.active::before {
        content: '';
        position: absolute;
        top: 0;
        left: 15%;
        width: 70%;
        height: 2.5px;
        background: var(--primary);
        border-radius: 0 0 3px 3px;
    }

    /* ----- Feedback tap ----- */
    .bn-item:active { transform: scale(.88) }

    /* ----- Wrapper icône panier + badge ----- */
    .bn-icon-wrap {
        position: relative;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    .bn-badge {
        position: absolute;
        top: -8px;
        right: -10px;
        min-width: 17px;
        height: 17px;
        padding: 0 3px;
        background: var(--secondary); /* rose #E91E8C */
        color: #fff;
        font-size: .58rem;
        font-weight: 700;
        border-radius: 9px;
        display: none; /* JS gère display:flex quand count > 0 */
        align-items: center;
        justify-content: center;
        line-height: 1;
        border: 1.5px solid #fff;
        animation: bnBadgePop .2s ease;
    }
    @keyframes bnBadgePop {
        0%   { transform: scale(0) }
        70%  { transform: scale(1.18) }
        100% { transform: scale(1) }
    }

    /* ----- Icône panier légèrement plus grande ----- */
    .bn-cart-tab .bn-icon-wrap i { font-size: 1.28rem }

    /* ----- Padding body : empêche la barre de masquer le contenu ----- */
    body {
        padding-bottom: calc(62px + env(safe-area-inset-bottom, 0px)) !important;
    }

    /* ----- Remonter les éléments flottants existants ----- */
    /* Les valeurs sont les originales mobiles + 62px de la barre */
    .wa-float-container { bottom: 78px !important }
    .chatbot-widget     { bottom: 142px !important }
    .back-to-top        { bottom: 78px !important }
    .analytics-bubble   { bottom: 78px !important }
}

/* ============================================================
   V6 — ROBUSTESSE UX (ÉTAPE 3) : FEEDBACK BOUTON + FALLBACK IMAGE
   ============================================================ */

/* Retour visuel "Ajouté !" — bouton vert 1,5 s après ajout au panier */
.btn-add-cart.kop-btn-added {
    background: #22c55e !important;
    border-color: #22c55e !important;
    color: #fff !important;
    transform: scale(1.04);
    transition: background .15s ease, transform .1s ease, border-color .15s ease;
    pointer-events: none; /* bloque les clics doubles pendant l'animation */
}

/* Icône de remplacement quand une image produit est cassée (404 / URL invalide) */
.kop-img-fallback {
    font-size: 2.6rem;
    color: var(--gray-300, #d1d5db);
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    min-height: 80px;
}

/* ============================================================
   V7 — HARMONISATION BARRE DU HAUT + HEADER
   ============================================================ */

/* Desktop : barre du haut plus compacte */
.top-bar { padding: 5px 0; font-size: .75rem }

/* Mobile : cacher la barre du haut + header compact style Jumia */
@media (max-width: 767px) {
    .top-bar { display: none !important }

    /* Header compact : logo petit + icônes alignés sur une seule ligne */
    .header-content { padding: 8px 12px; gap: 8px }
    .logo { gap: 6px }
    .logo-icon { width: 32px; height: 32px }
    .logo-text strong { font-size: .85rem }
    .logo-text small { display: none }
    .header-actions { gap: 4px }
    .header-actions .action-btn { width: 36px; height: 36px; font-size: .9rem }
}

/* ============================================================
   V8 — REFONTE E-COMMERCE PREMIUM (JUMIA/AMAZON/TEMU)
   Phases 2, 3, 6, 7, 9, 11, 13
   ============================================================ */

/* ────────── PHASE 2 : HEADER COMPACT DESKTOP ────────── */

/* Desktop : header plus serré, recherche toujours visible */
.header-content { padding: 8px 20px }
.logo-icon { width: 36px; height: 36px }
.logo-text strong { font-size: .95rem }
.logo-text small { font-size: .55rem; letter-spacing: .5px }

/* Barre de recherche intégrée style Amazon/Jumia (desktop) */
.header-search {
    flex: 1;
    max-width: 480px;
    margin: 0 16px;
    position: relative;
}
.header-search-form {
    display: flex;
    border: 2px solid var(--primary);
    border-radius: var(--radius-full);
    overflow: hidden;
    background: var(--gray-100);
    transition: var(--transition);
}
.header-search-form:focus-within {
    border-color: var(--accent);
    background: var(--white);
    box-shadow: 0 0 0 3px rgba(11,110,168,.12);
}
.header-search-form input {
    flex: 1;
    border: none;
    padding: 9px 16px;
    font-size: .88rem;
    font-family: inherit;
    background: transparent;
    outline: none;
    min-width: 0;
}
.header-search-form button {
    width: 42px;
    border: none;
    background: var(--gradient-btn);
    color: var(--white);
    cursor: pointer;
    font-size: .9rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.header-search-suggestions {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--white);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    margin-top: 4px;
    display: none;
    z-index: 999;
    max-height: 360px;
    overflow-y: auto;
}
.header-search-suggestions.active { display: block }
/* Icône loupe uniquement sur mobile */
.search-toggle-mobile { display: none }

/* ────────── PHASE 11 : BLOCS DE CONFIANCE COMPACTS ────────── */

.features { margin-top: -25px }
.feature-card { padding: 14px 10px }
.feature-icon { width: 38px; height: 38px; margin-bottom: 6px; font-size: 1rem }
.feature-card h4 { font-size: .78rem; margin-bottom: 2px }
.feature-card p { font-size: .68rem }

/* ────────── PHASE 13 : SECTIONS COMPACTES ────────── */

.section { padding: 40px 0 }
.section-header { margin-bottom: 24px }
.section-header h2 { font-size: 1.5rem }
.section-header p { font-size: .88rem }
.promo-banner { padding: 30px 0 }
.promo-text h2 { font-size: 1.4rem }
.promo-icon { font-size: 5rem }
.newsletter-content h2 { font-size: 1.4rem }

/* ────────── PHASE 6 : CATÉGORIES COMPACTES ────────── */

.categories-grid { gap: 14px }
.category-card { padding: 18px 14px; border-width: 1px }
.category-icon { width: 48px; height: 48px; margin-bottom: 10px; font-size: 1.3rem }
.category-card h3 { font-size: .9rem; margin-bottom: 4px }
.category-link { font-size: .75rem }

/* ────────── PHASE 7 : PRODUITS — GRILLE DENSE ────────── */

.products-grid { gap: 14px }
.product-image { height: 180px }
.product-info { padding: 10px 12px }
.product-name { font-size: .84rem; margin: 3px 0 }
.product-footer { padding: 0 12px 10px }
.btn-add-cart { padding: 7px; font-size: .78rem }
.products-loading { padding: 30px }

/* ────────── PHASE 9 : PANIER AMÉLIORÉ ────────── */

.cart-sidebar { display: flex; flex-direction: column }
.cart-items { flex: 1; overflow-y: auto }
.cart-footer { flex-shrink: 0 }

/* ────────── PHASE 5 : HERO COMPACT ────────── */

.hero-slider { height: 380px }
.hero-text h1 { font-size: 2rem }

/* ────────── AVIS CLIENTS COMPACTS ────────── */

.testimonial-card { padding: 20px }
.testimonial-card p { font-size: .88rem }

/* ────────── PARTENAIRES COMPACTS ────────── */

.partner-card { min-width: 100px; padding: 14px 10px }

/* ===========================================================
   V8 — RESPONSIVE TABLETTE (768px - 1024px)
   =========================================================== */

@media (min-width: 768px) and (max-width: 1024px) {
    .products-grid { grid-template-columns: repeat(3, 1fr) }
    .categories-grid { grid-template-columns: repeat(3, 1fr) }
    .features-grid { grid-template-columns: repeat(4, 1fr); gap: 10px }
    .hero-slider { height: 320px }
    .hero-text h1 { font-size: 1.6rem }
}

/* ===========================================================
   V8 — RESPONSIVE MOBILE PREMIUM (<768px)
   =========================================================== */

@media (max-width: 767px) {

    /* ----- PHASE 2 MOBILE : HEADER JUMIA-STYLE ----- */
    .header-content {
        padding: 6px 10px;
        gap: 6px;
        flex-wrap: nowrap;
    }
    .logo { gap: 5px; flex-shrink: 0 }
    .logo-icon { width: 30px; height: 30px }
    .logo-text { max-width: 70px; overflow: hidden }
    .logo-text strong { font-size: .7rem; white-space: nowrap; display: block; line-height: 1.2 }
    .logo-text small,
    .header .logo-text small,
    header .logo-text small { display: none !important; height: 0 !important; overflow: hidden !important; font-size: 0 !important }

    /* Cacher la recherche inline sur mobile, montrer l'icône loupe */
    .header-search { display: none !important }
    .search-toggle-mobile { display: flex !important }

    .header-actions {
        gap: 2px;
        flex-shrink: 0;
    }
    .search-toggle,
    .notif-toggle,
    .cart-toggle,
    .user-toggle {
        width: 34px;
        height: 34px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: .9rem;
    }

    /* ----- PHASE 5 MOBILE : HERO COMPACT ----- */
    .hero-slider { height: 260px }
    .hero-text h1 { font-size: 1.3rem }
    .hero-text p { font-size: .8rem; margin-bottom: 12px }
    .hero-badge { font-size: .7rem; padding: 3px 10px }
    .btn-lg { padding: 10px 20px; font-size: .85rem }
    .hero-dots { bottom: 10px; gap: 6px }

    /* ----- PHASE 11 MOBILE : BLOCS CONFIANCE COMPACTS ----- */
    .features { margin-top: -18px }
    .features-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 6px;
    }
    .feature-card {
        padding: 10px 4px;
        border-radius: 8px;
    }
    .feature-icon {
        width: 30px;
        height: 30px;
        margin-bottom: 4px;
        font-size: .8rem;
    }
    .feature-card h4 { font-size: .62rem }
    .feature-card p { display: none }

    /* ----- PHASE 13 MOBILE : SECTIONS RESSERRÉES ----- */
    .section { padding: 24px 0 }
    .section-header { margin-bottom: 14px }
    .section-header h2 { font-size: 1.15rem }
    .section-header p { font-size: .78rem; margin-bottom: 0 }
    .container { padding: 0 10px }

    /* ----- PHASE 6 MOBILE : CATÉGORIES 3 COLONNES COMPACTES ----- */
    .categories-grid {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 8px;
    }
    .category-card {
        padding: 12px 6px;
        border-radius: 10px;
        border-width: 1px;
    }
    .category-icon {
        width: 36px;
        height: 36px;
        margin-bottom: 6px;
        font-size: 1rem;
        border-radius: 8px;
    }
    .category-card h3 { font-size: .7rem; margin-bottom: 2px }
    .category-link { font-size: .6rem }
    .category-card::before { display: none }

    /* ----- PHASE 7 MOBILE : PRODUITS 2 COLONNES DENSES ----- */
    .products-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px;
    }
    .product-image { height: 140px }
    .product-info { padding: 8px }
    .product-category { font-size: .6rem }
    .product-name { font-size: .75rem; -webkit-line-clamp: 2 }
    .product-rating { margin-bottom: 4px }
    .product-rating i { font-size: .6rem }
    .product-rating span { font-size: .65rem }
    .price-current { font-size: .88rem }
    .price-old { font-size: .68rem }
    .product-discount { font-size: .6rem; padding: 1px 5px }
    .product-footer { padding: 0 8px 8px }
    .btn-add-cart { padding: 6px; font-size: .72rem; border-width: 1.5px }
    .product-badge { top: 6px; left: 6px; padding: 2px 7px; font-size: .6rem }
    .product-wishlist-btn { top: 6px; right: 6px; width: 26px; height: 26px; font-size: .7rem }
    .product-actions { display: none }
    .product-card:hover { transform: none }

    /* ----- PHASE 5 MOBILE : PROMO BANNER COMPACT ----- */
    .promo-banner { padding: 20px 0 }
    .promo-text h2 { font-size: 1.1rem }
    .promo-text p { font-size: .82rem; margin-bottom: 12px }
    .promo-icon { display: none }

    /* ----- AVIS CLIENTS COMPACTS MOBILE ----- */
    .testimonials-grid { gap: 10px }
    .testimonial-card { padding: 14px }
    .testimonial-card p { font-size: .82rem }
    .author-avatar { width: 32px; height: 32px; font-size: .7rem }

    /* ----- PHASE 9 MOBILE : PANIER PLEIN ÉCRAN ----- */
    .cart-sidebar {
        width: 100% !important;
        max-width: 100%;
    }
    .cart-header { padding: 12px 14px }
    .cart-header h3 { font-size: 1rem }
    .cart-footer {
        position: sticky;
        bottom: 0;
        background: var(--white);
        border-top: 1px solid var(--gray-200);
        padding: 10px 14px;
        padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
        z-index: 10;
    }

    /* ----- NEWSLETTER COMPACT ----- */
    .newsletter { padding: 24px 0 }
    .newsletter-content h2 { font-size: 1.1rem }
    .newsletter-content p { font-size: .82rem }

    /* ----- PARTENAIRES COMPACT ----- */
    .partner-card { min-width: 80px; padding: 10px 6px }
    .partner-card span { font-size: .65rem }
    .partner-logo { width: 32px; height: 32px; font-size: .9rem }

    /* ----- CHECKOUT COMPACT ----- */
    .page-hero { padding: 20px 0 }
    .page-hero h1 { font-size: 1.3rem }
    .page-hero p { font-size: .82rem }

    /* ----- FOOTER COMPACT ----- */
    .footer { padding: 30px 0 10px }
    .footer-grid { gap: 20px }

    /* ----- OCCASIONS BADGES COMPACT ----- */
    .occasion-badges { gap: 6px; margin-bottom: 14px }
    .occasion-badge { font-size: .7rem; padding: 4px 8px }

    /* ----- CORRECTION 9 : BOUTONS FLOTTANTS COMPACTS ----- */
    .wa-float-container { bottom: 70px; right: 12px }
    .whatsapp-float { width: 40px !important; height: 40px !important; font-size: 1.1rem !important }
    .chatbot-widget { bottom: 118px; right: 12px }
    .chatbot-toggle { width: 40px !important; height: 40px !important; font-size: 1.1rem !important }
    .chatbot-badge { width: 16px; height: 16px; font-size: .6rem }
    .back-to-top { bottom: 70px; right: 60px; width: 34px; height: 34px; font-size: .8rem }
    .analytics-bubble { bottom: 70px !important; right: 12px !important }

    /* ----- CORRECTION 10 : CHATBOT WINDOW MOBILE ----- */
    .chatbot-window {
        width: calc(100vw - 20px) !important;
        height: 70vh !important;
        right: -10px;
        bottom: 50px;
    }

    /* ----- CORRECTION 11 : MODAL AUTH COMPACT MOBILE ----- */
    .modal { padding: 20px; margin: 10px; max-height: 90vh; overflow-y: auto }
    .modal-tabs { margin-bottom: 14px }

    /* ----- CORRECTION 12 : SHOP SIDEBAR COMPACT ----- */
    .shop-sidebar { width: 260px; padding: 16px }
    .filter-list a { padding: 8px 10px; font-size: .85rem }

    /* ----- CORRECTION 13 : FICHE PRODUIT MOBILE ----- */
    .product-detail-content { padding: 14px }
    .detail-price { font-size: 1.3rem }
    .detail-buttons { gap: 8px }
    .detail-buttons .btn { padding: 10px; font-size: .88rem }
}

/* ===========================================================
   V8 — CORRECTIONS DESKTOP ADDITIONNELLES
   =========================================================== */

/* CORRECTION 9 DESKTOP : Boutons flottants plus discrets */
.whatsapp-float { width: 48px; height: 48px; font-size: 1.3rem }
.chatbot-toggle { width: 48px; height: 48px; font-size: 1.2rem }
.back-to-top { width: 38px; height: 38px }

/* CORRECTION 14 : Grille produits desktop 4-5 colonnes */
@media (min-width: 1025px) {
    .products-grid { grid-template-columns: repeat(4, 1fr) }
}
@media (min-width: 1400px) {
    .products-grid { grid-template-columns: repeat(5, 1fr) }
}

/* ============================================================
   V9 — FONCTIONNALITÉS JUMIA/AMAZON
   Galerie zoom, ventes flash, filtres, performance
   ============================================================ */

/* ────────── GALERIE PRODUIT + ZOOM ────────── */
.kop-gallery { position: relative; background: var(--gray-100); border-radius: var(--radius-lg); overflow: hidden }
.kop-gallery-main {
    width: 100%; aspect-ratio: 1; display: flex; align-items: center;
    justify-content: center; cursor: zoom-in; overflow: hidden;
    position: relative;
}
.kop-gallery-main img {
    width: 100%; height: 100%; object-fit: contain;
    transition: transform .3s ease;
}
.kop-gallery-main.zoomed { cursor: zoom-out }
.kop-gallery-main.zoomed img { transform: scale(2.2); cursor: zoom-out }
.kop-gallery-thumbs {
    display: flex; gap: 6px; padding: 8px;
    overflow-x: auto; justify-content: center;
}
.kop-gallery-thumb {
    width: 52px; height: 52px; border-radius: 6px;
    border: 2px solid transparent; overflow: hidden;
    cursor: pointer; flex-shrink: 0; background: #fff;
}
.kop-gallery-thumb.active { border-color: var(--primary) }
.kop-gallery-thumb img { width: 100%; height: 100%; object-fit: cover }
.kop-gallery-badge {
    position: absolute; top: 10px; left: 10px; z-index: 2;
    padding: 4px 12px; border-radius: var(--radius-full);
    font-size: .72rem; font-weight: 700; color: #fff;
}
.kop-gallery-fullscreen {
    position: absolute; top: 10px; right: 10px; z-index: 2;
    width: 34px; height: 34px; border-radius: 50%;
    background: rgba(0,0,0,.4); color: #fff; border: none;
    cursor: pointer; display: flex; align-items: center;
    justify-content: center; font-size: .9rem;
}

/* ────────── PRODUITS SIMILAIRES AMÉLIORÉS ────────── */
.kop-similar-section { margin-top: 30px; padding-top: 24px; border-top: 1px solid var(--gray-200) }
.kop-similar-section h3 { font-size: 1.1rem; margin-bottom: 14px; color: var(--dark) }
.kop-similar-grid {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px;
}

/* ────────── VENTES FLASH ────────── */
.kop-flash-section { background: linear-gradient(135deg, #dc2626 0%, #ef4444 100%); padding: 24px 0 }
.kop-flash-header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 16px; color: #fff; flex-wrap: wrap; gap: 10px;
}
.kop-flash-title {
    display: flex; align-items: center; gap: 10px;
    font-size: 1.2rem; font-weight: 700;
}
.kop-flash-title i { font-size: 1.4rem; animation: kopFlashPulse 1s infinite }
@keyframes kopFlashPulse { 0%,100% { opacity: 1 } 50% { opacity: .5 } }
.kop-flash-countdown {
    display: flex; gap: 4px; align-items: center;
}
.kop-flash-countdown span {
    background: rgba(0,0,0,.3); color: #fff; padding: 4px 8px;
    border-radius: 4px; font-size: .9rem; font-weight: 700;
    min-width: 32px; text-align: center; font-variant-numeric: tabular-nums;
}
.kop-flash-countdown small { color: rgba(255,255,255,.7); font-size: .7rem }
.kop-flash-seeall {
    color: #fff; text-decoration: none; font-size: .85rem;
    font-weight: 600; display: flex; align-items: center; gap: 4px;
}
.kop-flash-grid {
    display: flex; gap: 10px; overflow-x: auto;
    scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
    scrollbar-width: none; padding-bottom: 4px;
}
.kop-flash-grid::-webkit-scrollbar { display: none }
.kop-flash-card {
    flex: 0 0 150px; background: #fff; border-radius: 10px;
    overflow: hidden; scroll-snap-align: start; position: relative;
}
.kop-flash-card-img {
    width: 100%; aspect-ratio: 1; overflow: hidden;
    display: flex; align-items: center; justify-content: center;
    background: var(--gray-100);
}
.kop-flash-card-img img { width: 100%; height: 100%; object-fit: cover }
.kop-flash-card-info { padding: 8px }
.kop-flash-card-name {
    font-size: .72rem; font-weight: 500; color: var(--dark);
    display: -webkit-box; -webkit-line-clamp: 2;
    -webkit-box-orient: vertical; overflow: hidden; margin-bottom: 4px;
}
.kop-flash-card-price { font-size: .85rem; font-weight: 700; color: var(--danger) }
.kop-flash-card-old { font-size: .68rem; color: var(--gray-400); text-decoration: line-through }
.kop-flash-card-badge {
    position: absolute; top: 6px; right: 6px;
    background: var(--danger); color: #fff; font-size: .6rem;
    font-weight: 700; padding: 2px 6px; border-radius: 3px;
}

/* ────────── FILTRES INSTANTANÉS ────────── */
.kop-filter-chips {
    display: flex; flex-wrap: wrap; gap: 6px;
    margin-bottom: 14px; padding: 0 10px;
}
.kop-filter-chip {
    padding: 5px 12px; border-radius: var(--radius-full);
    border: 1px solid var(--gray-300); background: #fff;
    font-size: .75rem; cursor: pointer; transition: var(--transition);
    font-family: inherit; color: var(--gray-700);
}
.kop-filter-chip:hover { border-color: var(--primary); color: var(--primary) }
.kop-filter-chip.active {
    background: var(--primary); color: #fff;
    border-color: var(--primary);
}
.kop-filter-chip .chip-count {
    font-size: .65rem; color: var(--gray-400); margin-left: 4px;
}
.kop-filter-chip.active .chip-count { color: rgba(255,255,255,.7) }

/* ────────── RESPONSIVE V9 ────────── */
@media (max-width: 767px) {
    .kop-gallery-main { aspect-ratio: 4/3 }
    .kop-gallery-thumb { width: 42px; height: 42px }
    .kop-similar-grid { grid-template-columns: repeat(2, 1fr); gap: 8px }
    .kop-flash-card { flex: 0 0 130px }
    .kop-flash-title { font-size: 1rem }
    .kop-flash-countdown span { padding: 3px 6px; font-size: .78rem }
    .kop-filter-chips { padding: 0 }
}

@media (min-width: 768px) and (max-width: 1024px) {
    .kop-similar-grid { grid-template-columns: repeat(3, 1fr) }
}

/* ────────── QA FIX : toast au-dessus de la bottom-nav mobile ────────── */
@media (max-width: 767px) {
    .toast { bottom: 80px !important }
}

/* ============================================================
   CORRECTIFS V10 — RESPONSIVE DEFINITIF + PANIER MOBILE
   ============================================================ */

/* --- FIX : Logo + texte KOP SERVICES jamais tronques --- */
@media (max-width: 480px) {
    .logo { gap: 6px; flex-shrink: 0; min-width: 0 }
    .logo-text { max-width: none; overflow: hidden }
    .logo-text strong { font-size: .7rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; max-width: 90px }
    .logo-text small { font-size: .55rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block }
}
@media (max-width: 375px) {
    .logo-text strong { font-size: .62rem; max-width: 75px }
    .logo-text small { font-size: .5rem }
    .logo-icon { width: 28px; height: 28px; flex-shrink: 0 }
}
@media (max-width: 320px) {
    .logo-text strong { font-size: .55rem; max-width: 65px }
    .logo-text small { display: none }
    .logo-icon { width: 24px; height: 24px }
}

/* --- FIX : aucun debordement horizontal --- */
* { box-sizing: border-box }
body { overflow-x: hidden; max-width: 100vw }
.container { max-width: 100%; overflow-x: hidden }
img { max-width: 100%; height: auto }

/* --- FIX : texte jamais coupe dans les cartes produits --- */
.product-card { overflow: hidden; word-wrap: break-word; overflow-wrap: break-word }
.product-name { word-wrap: break-word; overflow-wrap: break-word; hyphens: auto }
.product-info { overflow: hidden }
.product-price .price-current { word-break: break-all }

/* --- FIX : footer responsive propre --- */
@media (max-width: 480px) {
    .footer { padding: 24px 0 80px }
    .footer-grid { grid-template-columns: 1fr; gap: 20px; padding-bottom: 20px }
    .footer-col h4 { font-size: .88rem; margin-bottom: 10px }
    .footer-col ul li a { font-size: .8rem }
    .footer-bottom { padding: 12px 0 }
    .footer-bottom p { font-size: .75rem }
    .footer-logo .logo-text strong { font-size: .85rem }
}

/* --- FIX : panier mobile — scroll correct + boutons accessibles --- */
@media (max-width: 767px) {
    .cart-sidebar {
        width: 100vw !important;
        max-width: 100vw;
        height: 100vh;
        height: 100dvh;
        display: flex;
        flex-direction: column;
    }
    .cart-items {
        flex: 1;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 20px;
        min-height: 0;
    }
    .cart-footer {
        flex-shrink: 0;
        padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px));
        position: relative;
        z-index: 10;
    }
    .cart-footer .btn { min-height: 44px; font-size: .9rem }
}

/* --- FIX : checkout page pas cache derriere bottom-nav --- */
@media (max-width: 767px) {
    #page-checkout { padding-bottom: 80px }
    #page-panier { padding-bottom: 80px }
    #page-wishlist { padding-bottom: 80px }
    #page-my-orders { padding-bottom: 80px }
}

/* --- FIX : cartes produits — pas de debordement sur petits ecrans --- */
@media (max-width: 390px) {
    .products-grid { gap: 6px }
    .product-image { height: 140px }
    .product-info { padding: 8px }
    .product-category { font-size: .6rem }
    .product-rating { font-size: .6rem }
    .product-meta-row { flex-wrap: wrap; gap: 3px }
    .product-status-chip { font-size: .55rem; padding: 1px 5px }
    .stock-state { font-size: .55rem; padding: 1px 5px }
    .product-footer .btn-add-cart { font-size: .65rem; padding: 6px 8px }
}

/* --- FIX : detail produit ne deborde pas --- */
@media (max-width: 480px) {
    .detail-layout { gap: 16px }
    .detail-info h1 { font-size: 1.1rem; word-wrap: break-word }
    .detail-actions { flex-wrap: wrap; gap: 8px }
    .detail-actions .btn { flex: 1; min-width: 120px; min-height: 44px }
}

/* --- FIX : admin responsive --- */
@media (max-width: 480px) {
    .admin-table { font-size: .7rem }
    .admin-table th, .admin-table td { padding: 6px 4px }
    .admin-tab-header { flex-wrap: wrap; gap: 8px }
    .admin-tab-header h1 { font-size: 1rem }
    .admin-products-toolbar-top { flex-direction: column; gap: 6px }
    .admin-products-toolbar-top input,
    .admin-products-toolbar-top select { width: 100%; min-height: 36px }
}