/* ============================================================
   ELENGI MALL — Design System v1.0
   Dark mode (par défaut) + Light mode ([data-theme="light"])
   Couleurs basées sur design_color.md
   ============================================================ */

/* -------- CSS VARIABLES (Dark Mode par défaut) -------- */
:root {
  /* Accent */
  --accent: #F57C00;
  --accent-h: #FF9100;
  --accent-l: #FFB74D;
  --accent-d: #E65100;
  --ag: rgba(245,124,0,0.2);
  --ags: rgba(245,124,0,0.35);

  /* Surfaces */
  --bg: #0A0A0A;
  --bg-el: #111111;
  --card: #161616;
  --card-h: #1E1E1E;
  --fg: #F5F2EE;
  --fg-s: #C8C3BB;
  --fg-m: #6E6A64;
  --border: #222222;
  --border-l: #2C2C2C;

  /* Semantic */
  --green: #43A047;
  --green-l: #66BB6A;
  --red: #E53935;
  --red-l: #EF5350;
  --blue: #1E88E5;
  --blue-l: #42A5F5;
  --purple: #7C4DFF;
  --purple-l: #B388FF;
  --cyan: #00ACC1;
  --cyan-l: #26C6DA;
  --pink: #E91E63;
  --yellow: #FDD835;

  /* Layout */
  --sidebar-w: 260px;
  --header-h: 64px;
  --r: 14px;
  --rs: 10px;
  --rx: 6px;
  --sh: 0 8px 32px rgba(0,0,0,0.5);
  --sh-s: 0 2px 12px rgba(0,0,0,0.3);
  --tr: 0.3s cubic-bezier(0.4,0,0.2,1);
}

/* -------- LIGHT MODE -------- */
[data-theme="light"] {
  --bg: #F5F2ED;
  --bg-el: #FFFFFF;
  --card: #FFFFFF;
  --card-h: #FAF8F5;
  --fg: #1A1715;
  --fg-s: #5C5650;
  --fg-m: #9A9490;
  --border: #E5E0DA;
  --border-l: #D8D3CC;
  --ag: rgba(245,124,0,0.1);
  --ags: rgba(245,124,0,0.2);
  --sh: 0 8px 32px rgba(0,0,0,0.08);
  --sh-s: 0 2px 12px rgba(0,0,0,0.05);
}

/* -------- RESET -------- */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  font-family:'DM Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  background:var(--bg);color:var(--fg);
  min-height:100vh;overflow-x:hidden;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4,h5,h6,.ff-heading{
  font-family:'Outfit',-apple-system,BlinkMacSystemFont,sans-serif;
}
a{color:inherit;text-decoration:none;}
img{max-width:100%;height:auto;display:block;}
button{cursor:pointer;font-family:inherit;}
input,select,textarea{font-family:inherit;}

/* -------- SCROLLBAR -------- */
::-webkit-scrollbar{width:5px;height:5px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px;}
::-webkit-scrollbar-thumb:hover{background:var(--fg-m);}
.scrollbar-hide::-webkit-scrollbar{display:none;}
.scrollbar-hide{-ms-overflow-style:none;scrollbar-width:none;}

/* -------- AMBIENT ORBS -------- */
.ambient{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden;}
.ambient .orb{position:absolute;border-radius:50%;filter:blur(140px);opacity:0.06;}
.orb-1{width:600px;height:600px;background:var(--accent);top:-200px;right:-100px;animation:orbFloat1 20s ease-in-out infinite;}
.orb-2{width:400px;height:400px;background:var(--accent-d);bottom:-150px;left:-80px;animation:orbFloat2 26s ease-in-out infinite;}
@keyframes orbFloat1{0%,100%{transform:translate(0,0)}50%{transform:translate(-80px,60px)}}
@keyframes orbFloat2{0%,100%{transform:translate(0,0)}50%{transform:translate(60px,-80px)}}

/* -------- ANIMATIONS -------- */
@keyframes fadeInUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes scaleIn{from{opacity:0;transform:scale(0.95)}to{opacity:1;transform:scale(1)}}
@keyframes slideInRight{from{transform:translateX(100%)}to{transform:translateX(0)}}
@keyframes slideInLeft{from{transform:translateX(-100%)}to{transform:translateX(0)}}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 var(--ags)}50%{box-shadow:0 0 0 12px transparent}}
@keyframes shimmer{0%{background-position:-1000px 0}100%{background-position:1000px 0}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes pageIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
@keyframes toastIn{from{opacity:0;transform:translateX(50px)}to{opacity:1;transform:translateX(0)}}
@keyframes toastOut{from{opacity:1;transform:translateX(0)}to{opacity:0;transform:translateX(50px)}}

.animate-fade-in-up{animation:fadeInUp .5s ease-out forwards;}
.animate-scale-in{animation:scaleIn .3s ease-out forwards;}
.animate-float{animation:float 3s ease-in-out infinite;}

/* -------- TOPBAR (Header public) -------- */
.topbar{
  position:sticky;top:0;z-index:50;
  background:rgba(10,10,10,0.85);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border-bottom:1px solid var(--border);
  height:var(--header-h);display:flex;align-items:center;padding:0 24px;gap:16px;
}
[data-theme="light"] .topbar{background:rgba(245,242,237,0.88);}

.topbar-logo{
  display:flex;align-items:center;gap:8px;flex-shrink:0;
  font-family:'Outfit',sans-serif;font-weight:800;font-size:1.05rem;
}
.topbar-logo img{width:36px;height:36px;border-radius:var(--rs);object-fit:cover;}
.topbar-logo span{color:var(--accent);}

.topbar-search{
  flex:1;max-width:500px;position:relative;
}
.topbar-search input{
  width:100%;padding:10px 16px 10px 40px;
  background:var(--card);border:1px solid var(--border);
  border-radius:50px;color:var(--fg);font-size:0.88rem;
  transition:var(--tr);
}
.topbar-search input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--ag);}
.topbar-search input::placeholder{color:var(--fg-m);}
.topbar-search i{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--fg-m);font-size:0.85rem;}

.topbar-actions{display:flex;align-items:center;gap:6px;flex-shrink:0;}

/* -------- BUTTONS -------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:10px 20px;border-radius:50px;font-weight:600;font-size:0.9rem;
  border:none;transition:var(--tr);white-space:nowrap;text-decoration:none;
}
.btn:disabled{opacity:0.4;cursor:not-allowed;transform:none!important;box-shadow:none!important;}

.btn-primary{background:var(--accent);color:#000;}
.btn-primary:hover{background:var(--accent-h);transform:translateY(-2px);box-shadow:0 8px 24px var(--ags);}
.btn-primary:active{transform:translateY(0);}

.btn-secondary{background:var(--card);color:var(--fg);border:1px solid var(--border);}
.btn-secondary:hover{border-color:var(--fg-m);color:var(--fg);transform:translateY(-2px);}

.btn-outline{background:transparent;color:var(--fg);border:1px solid var(--border);}
.btn-outline:hover{border-color:var(--accent);color:var(--accent);}

.btn-ghost{background:transparent;color:var(--fg-m);border:none;}
.btn-ghost:hover{color:var(--fg);background:rgba(255,255,255,0.04);}

.btn-icon{
  position:relative;width:40px;height:40px;border-radius:50%;
  background:none;border:1px solid transparent;color:var(--fg-m);
  font-size:1rem;display:flex;align-items:center;justify-content:center;
  transition:var(--tr);
}
.btn-icon:hover{color:var(--accent);background:var(--ag);}

.btn-icon .badge{
  position:absolute;top:2px;right:2px;
  min-width:18px;height:18px;border-radius:9px;
  background:var(--accent);color:#000;
  font-size:0.6rem;font-weight:700;
  display:flex;align-items:center;justify-content:center;
  padding:0 5px;transform:scale(0);transition:var(--tr);
}
.btn-icon .badge.show{transform:scale(1);}

.btn-theme{
  width:40px;height:40px;border-radius:50%;
  background:none;border:1px solid transparent;color:var(--fg-m);
  font-size:1rem;cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:var(--tr);
}
.btn-theme:hover{color:var(--accent);background:var(--ag);}

/* -------- ANNOUNCEMENT BAR -------- */
.announce-bar{
  background:var(--accent-d);color:#fff;font-size:0.75rem;font-weight:600;
  padding:6px 0;overflow:hidden;white-space:nowrap;
}
.announce-track{display:flex;animation:marquee 35s linear infinite;}
.announce-track span{margin:0 32px;display:flex;align-items:center;gap:8px;}
.announce-track i{color:#fff;opacity:0.8;}

/* -------- HERO CAROUSEL -------- */
.hero-section{padding:16px 24px;position:relative;z-index:1;}

.hero-carousel{
  position:relative;height:280px;border-radius:var(--r);
  overflow:hidden;max-width:1400px;margin:0 auto;
}
.hero-slide{
  position:absolute;inset:0;opacity:0;transition:opacity 0.6s ease-in-out;
  display:flex;align-items:center;justify-content:space-between;padding:32px 48px;
}
.hero-slide.active{opacity:1;}
.hero-slide-content{color:#fff;max-width:480px;z-index:2;}
.hero-slide-badge{
  font-size:0.7rem;text-transform:uppercase;letter-spacing:3px;
  font-weight:700;opacity:0.85;margin-bottom:12px;
}
.hero-slide-title{font-family:'Outfit',sans-serif;font-size:2.5rem;font-weight:900;line-height:1.15;margin-bottom:12px;}
.hero-slide-sub{font-size:1rem;opacity:0.9;margin-bottom:20px;}
.hero-slide-icon{font-size:8rem;opacity:0.2;display:none;}
.hero-carousel-dots{position:absolute;bottom:20px;left:50%;transform:translateX(-50%);display:flex;gap:6px;z-index:5;}
.hero-dot{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,0.4);cursor:pointer;transition:all 0.3s;border:none;}
.hero-dot.active{width:24px;border-radius:4px;background:#fff;}
.hero-arrow{
  position:absolute;top:50%;transform:translateY(-50%);
  width:40px;height:40px;border-radius:50%;
  background:rgba(255,255,255,0.15);backdrop-filter:blur(10px);
  border:none;color:#fff;font-size:0.9rem;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:var(--tr);z-index:5;
}
.hero-arrow:hover{background:rgba(255,255,255,0.3);}
.hero-arrow.prev{left:16px;}.hero-arrow.next{right:16px;}

/* -------- CATEGORIES GRID -------- */
.categories-section{padding:24px 24px 8px;position:relative;z-index:1;max-width:1400px;margin:0 auto;}
.cat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;}
.cat-item{
  display:flex;flex-direction:column;align-items:center;gap:8px;
  padding:14px 8px;border-radius:var(--r);cursor:pointer;
  transition:var(--tr);text-align:center;background:var(--card);
  border:1px solid var(--border);
}
.cat-item:hover{transform:translateY(-4px);border-color:var(--accent);box-shadow:var(--sh-s);}
.cat-icon{
  width:52px;height:52px;border-radius:50%;
  background:var(--ag);color:var(--accent);
  display:flex;align-items:center;justify-content:center;
  font-size:1.2rem;transition:var(--tr);
}
.cat-item:hover .cat-icon{background:var(--accent);color:#000;}
.cat-name{font-size:0.78rem;font-weight:600;}

/* -------- SECTION HEADER -------- */
.section-header{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:16px;flex-wrap:wrap;gap:12px;
}
.section-title{font-family:'Outfit',sans-serif;font-size:1.5rem;font-weight:800;}
.section-sub{font-size:0.85rem;color:var(--fg-m);margin-top:2px;}

/* -------- FLASH SALE -------- */
.flash-section{padding:8px 24px;position:relative;z-index:1;max-width:1400px;margin:0 auto;}
.flash-card{border-radius:var(--r);overflow:hidden;border:1px solid var(--border);}
.flash-header{
  background:var(--accent);color:#000;padding:14px 20px;
  display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;
}
.flash-header-left{display:flex;align-items:center;gap:12px;}
.flash-header h2{font-family:'Outfit',sans-serif;font-size:1.3rem;font-weight:800;}
.flash-countdown{display:flex;align-items:center;gap:4px;background:rgba(0,0,0,0.2);padding:6px 12px;border-radius:var(--rx);}
.flash-cd{background:rgba(0,0,0,0.3);color:#fff;padding:3px 7px;border-radius:4px;font-family:'Outfit',monospace;font-weight:700;font-size:0.85rem;min-width:28px;text-align:center;}
.flash-cd-sep{color:#fff;font-weight:700;}
.flash-scroll{display:flex;gap:12px;overflow-x:auto;padding:16px;}

/* -------- PRODUCT CARD -------- */
.p-card{
  background:var(--card);border:1px solid var(--border);
  border-radius:var(--r);overflow:hidden;cursor:pointer;
  transition:var(--tr);position:relative;min-width:0;
}
.p-card:hover{border-color:rgba(245,124,0,0.25);transform:translateY(-4px);box-shadow:0 12px 40px rgba(0,0,0,0.3);}
.p-card-img{position:relative;overflow:hidden;aspect-ratio:1;background:#0D0D0D;}
[data-theme="light"] .p-card-img{background:#EDEAE5;}
.p-card-img img{width:100%;height:100%;object-fit:cover;transition:transform 0.6s ease;}
.p-card:hover .p-card-img img{transform:scale(1.07);}

/* Badges */
.p-badge{
  position:absolute;top:10px;left:10px;
  padding:3px 10px;border-radius:20px;
  font-size:0.65rem;font-weight:700;text-transform:uppercase;
  letter-spacing:0.5px;z-index:2;
}
.badge-promo{background:var(--red);color:#fff;}
.badge-new{background:var(--green);color:#fff;}
.badge-top{background:var(--accent);color:#000;}

/* Wishlist heart */
.p-wish{
  position:absolute;top:10px;right:10px;
  width:32px;height:32px;border-radius:50%;
  background:rgba(0,0,0,0.5);backdrop-filter:blur(6px);
  border:none;color:#fff;cursor:pointer;font-size:0.8rem;
  display:flex;align-items:center;justify-content:center;
  transition:var(--tr);opacity:0;transform:scale(0.8);z-index:2;
}
.p-card:hover .p-wish{opacity:1;transform:scale(1);}
.p-wish.liked{color:var(--red);opacity:1;transform:scale(1);}

.p-info{padding:12px 14px 14px;}
.p-cat{font-size:0.65rem;text-transform:uppercase;letter-spacing:1px;color:var(--accent);font-weight:600;margin-bottom:3px;}
.p-name{font-family:'Outfit',sans-serif;font-size:0.9rem;font-weight:700;line-height:1.3;margin-bottom:6px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.p-rating{display:flex;align-items:center;gap:4px;margin-bottom:8px;}
.p-rating .stars{color:var(--accent);font-size:0.65rem;letter-spacing:1px;}
.p-rating .num{font-size:0.78rem;font-weight:600;}
.p-rating .cnt{font-size:0.7rem;color:var(--fg-m);}
.p-bottom{display:flex;align-items:center;gap:8px;}
.p-price{font-family:'Outfit',sans-serif;font-size:1.05rem;font-weight:800;}
.p-old{font-size:0.78rem;color:var(--fg-m);text-decoration:line-through;}
.p-add{
  margin-left:auto;width:32px;height:32px;border-radius:50%;
  background:var(--accent);border:none;color:#000;cursor:pointer;
  font-size:0.75rem;display:flex;align-items:center;justify-content:center;
  transition:var(--tr);flex-shrink:0;
}
.p-add:hover{background:var(--accent-h);transform:scale(1.1);}

/* Sold bar */
.p-sold-bar{height:4px;background:var(--border);border-radius:2px;margin-top:8px;overflow:hidden;}
.p-sold-fill{height:100%;background:var(--accent);border-radius:2px;transition:width 0.6s ease;}
.p-sold-text{font-size:0.65rem;color:var(--fg-m);margin-top:3px;}

/* -------- PRODUCTS GRID -------- */
.products-section{padding:24px;position:relative;z-index:1;max-width:1400px;margin:0 auto;}
.products-grid{
  display:grid;grid-template-columns:repeat(5,1fr);gap:14px;
}
.products-grid.list{grid-template-columns:1fr;}
.products-grid.list .p-card{display:grid;grid-template-columns:200px 1fr;}
.products-grid.list .p-card-img{aspect-ratio:auto;height:100%;}

/* -------- FILTERS -------- */
.filter-bar{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:16px;}
.filter-chip{
  padding:6px 14px;border-radius:50px;font-size:0.8rem;font-weight:500;
  background:var(--card);border:1px solid var(--border);color:var(--fg-s);
  cursor:pointer;transition:var(--tr);
}
.filter-chip:hover{border-color:var(--accent);color:var(--accent);}
.filter-chip.active{background:var(--accent);color:#000;border-color:var(--accent);font-weight:700;}

/* -------- SHOP FILTERS SIDEBAR -------- */
.shop-layout{display:flex;gap:20px;}
.shop-filters{
  width:250px;min-width:250px;
  background:var(--card);border:1px solid var(--border);
  border-radius:var(--r);padding:20px;height:fit-content;
  position:sticky;top:calc(var(--header-h) + 24px);
}
.filter-title{
  font-family:'Outfit',sans-serif;font-weight:700;font-size:1rem;
  margin-bottom:18px;display:flex;align-items:center;gap:8px;
}
.filter-title i{color:var(--accent);font-size:0.85rem;}
.filter-group{margin-bottom:18px;}
.filter-group:last-child{margin-bottom:0;}
.filter-label{
  font-size:0.65rem;font-weight:700;text-transform:uppercase;
  letter-spacing:1.2px;color:var(--fg-m);margin-bottom:8px;
}
.filter-opt{
  display:flex;align-items:center;gap:8px;
  padding:6px 8px;border-radius:var(--rx);
  cursor:pointer;transition:var(--tr);font-size:0.83rem;color:var(--fg-s);
  margin-bottom:1px;
}
.filter-opt:hover{background:rgba(255,255,255,0.03);color:var(--fg);}
.filter-opt.active{background:var(--ag);color:var(--accent);}
.filter-opt .cbox{
  width:16px;height:16px;border-radius:4px;
  border:2px solid var(--border);display:flex;
  align-items:center;justify-content:center;transition:var(--tr);flex-shrink:0;
}
.filter-opt.active .cbox{background:var(--accent);border-color:var(--accent);}
.filter-opt .cbox i{font-size:0.5rem;color:#000;opacity:0;transition:var(--tr);}
.filter-opt.active .cbox i{opacity:1;}
.filter-opt .cnt{margin-left:auto;font-size:0.68rem;color:var(--fg-m);background:rgba(255,255,255,0.04);padding:1px 6px;border-radius:10px;}

.price-range-wrap{padding:0 2px;}
.price-val{font-size:0.9rem;font-weight:700;color:var(--accent);margin-bottom:8px;}
input[type="range"]{
  -webkit-appearance:none;width:100%;height:4px;
  background:var(--border);border-radius:4px;outline:none;
}
input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none;width:18px;height:18px;
  background:var(--accent);border-radius:50%;cursor:pointer;
  box-shadow:0 0 12px var(--ag);transition:var(--tr);
}

.shop-main{flex:1;min-width:0;}
.shop-toolbar{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:16px;flex-wrap:wrap;gap:12px;
}
.shop-count{font-size:0.83rem;color:var(--fg-m);}
.shop-count strong{color:var(--fg);}
.sort-select{
  padding:8px 32px 8px 12px;
  background:var(--card);border:1px solid var(--border);
  border-radius:var(--rx);color:var(--fg);font-size:0.8rem;
  cursor:pointer;appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' fill='%236E6A64' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10z'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 10px center;
  transition:var(--tr);
}
.sort-select:focus{outline:none;border-color:var(--accent);}

.view-btn{
  width:34px;height:34px;border-radius:var(--rx);
  background:var(--card);border:1px solid var(--border);
  color:var(--fg-m);cursor:pointer;font-size:0.8rem;
  display:flex;align-items:center;justify-content:center;transition:var(--tr);
}
.view-btn.active{background:var(--accent);color:#000;border-color:var(--accent);}

/* -------- SIDEBAR (Dashboard) -------- */
.sidebar{
  position:fixed;left:0;top:0;bottom:0;
  width:var(--sidebar-w);z-index:100;
  background:var(--bg-el);border-right:1px solid var(--border);
  display:flex;flex-direction:column;transition:var(--tr);
}
.sidebar-brand{
  height:var(--header-h);display:flex;align-items:center;gap:10px;
  padding:0 16px;border-bottom:1px solid var(--border);flex-shrink:0;
}
.sidebar-brand-icon{
  width:34px;height:34px;border-radius:var(--rs);
  background:linear-gradient(135deg,var(--accent),var(--accent-d));
  display:flex;align-items:center;justify-content:center;
  font-size:0.95rem;color:#fff;flex-shrink:0;
}
.sidebar-brand-icon img{width:100%;height:100%;border-radius:var(--rs);object-fit:cover;}
.sidebar-brand-txt{font-family:'Outfit',sans-serif;font-weight:800;font-size:0.95rem;line-height:1.15;}
.sidebar-brand-txt span{color:var(--accent);}

.sidebar-nav{flex:1;overflow-y:auto;padding:12px 8px;}
.nav-section-label{
  font-size:0.6rem;font-weight:700;text-transform:uppercase;
  letter-spacing:1.5px;color:var(--fg-m);padding:12px 12px 6px;
}
.nav-item{
  display:flex;align-items:center;gap:10px;
  padding:9px 12px;border-radius:var(--rs);cursor:pointer;
  transition:var(--tr);color:var(--fg-s);font-size:0.84rem;
  font-weight:500;margin-bottom:1px;border:1px solid transparent;
}
.nav-item i{width:18px;text-align:center;font-size:0.85rem;transition:var(--tr);}
.nav-item:hover{background:rgba(255,255,255,0.04);color:var(--fg);}
[data-theme="light"] .nav-item:hover{background:rgba(0,0,0,0.04);}
.nav-item.active{background:var(--ag);color:var(--accent);border-color:rgba(245,124,0,0.12);}
.nav-item.active i{color:var(--accent);}
.nav-badge{
  margin-left:auto;font-size:0.58rem;font-weight:700;
  min-width:18px;height:18px;border-radius:9px;
  display:flex;align-items:center;justify-content:center;padding:0 5px;
}
.nav-badge:empty,.nav-badge.empty{display:none;}
.nav-badge.red{background:var(--red);color:#fff;}
.nav-badge.orange{background:var(--accent);color:#000;}

.sidebar-footer{padding:12px;border-top:1px solid var(--border);flex-shrink:0;}
.sidebar-user{
  display:flex;align-items:center;gap:10px;padding:8px;
  border-radius:var(--rs);cursor:pointer;transition:var(--tr);
}
.sidebar-user:hover{background:rgba(255,255,255,0.04);}
.sidebar-avatar{
  width:34px;height:34px;border-radius:50%;
  background:linear-gradient(135deg,var(--accent),var(--accent-d));
  display:flex;align-items:center;justify-content:center;
  font-weight:700;font-size:0.78rem;color:#fff;flex-shrink:0;
}

/* -------- MAIN AREA (Dashboard) -------- */
.main-area{margin-left:var(--sidebar-w);min-height:100vh;position:relative;z-index:1;}
.top-header{
  height:var(--header-h);position:sticky;top:0;z-index:50;
  background:rgba(10,10,10,0.8);backdrop-filter:blur(20px);
  border-bottom:1px solid var(--border);
  display:flex;align-items:center;padding:0 24px;gap:14px;
}
[data-theme="light"] .top-header{background:rgba(245,242,237,0.85);}
.mobile-menu-btn{
  display:none;background:none;border:none;color:var(--fg);
  font-size:1.2rem;cursor:pointer;padding:8px;
}
.page-title-bar{flex:1;}
.page-title{font-family:'Outfit',sans-serif;font-weight:700;font-size:1.15rem;}
.page-subtitle{font-size:0.73rem;color:var(--fg-m);margin-top:1px;}

/* Dashboard pages */
.page{display:none;padding:24px;animation:pageIn 0.35s ease;}
.page.active{display:block;}

/* -------- STATS CARDS -------- */
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:20px;}
.stat-card{
  background:var(--card);border:1px solid var(--border);
  border-radius:var(--r);padding:18px;transition:var(--tr);position:relative;overflow:hidden;
}
.stat-card:hover{border-color:var(--border-l);transform:translateY(-3px);box-shadow:var(--sh-s);}
.stat-card::after{
  content:'';position:absolute;top:-15px;right:-15px;
  width:60px;height:60px;border-radius:50%;filter:blur(30px);opacity:0.1;
}
.stat-card:nth-child(1)::after{background:var(--accent);}
.stat-card:nth-child(2)::after{background:var(--green);}
.stat-card:nth-child(3)::after{background:var(--blue);}
.stat-card:nth-child(4)::after{background:var(--purple);}

.stat-icon{
  width:38px;height:38px;border-radius:var(--rs);
  display:flex;align-items:center;justify-content:center;
  font-size:0.9rem;margin-bottom:12px;
}
.stat-card:nth-child(1) .stat-icon{background:var(--ag);color:var(--accent);}
.stat-card:nth-child(2) .stat-icon{background:rgba(67,160,71,0.15);color:var(--green-l);}
.stat-card:nth-child(3) .stat-icon{background:rgba(30,136,229,0.15);color:var(--blue-l);}
.stat-card:nth-child(4) .stat-icon{background:rgba(124,77,255,0.15);color:var(--purple-l);}

.stat-value{font-family:'Outfit',sans-serif;font-size:1.5rem;font-weight:800;margin-bottom:2px;}
.stat-label{font-size:0.72rem;color:var(--fg-m);font-weight:500;}

/* -------- CARD (generic) -------- */
.dash-card{
  background:var(--card);border:1px solid var(--border);
  border-radius:var(--r);overflow:hidden;transition:var(--tr);
}
.dash-card:hover{border-color:var(--border-l);}
.dash-card-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 18px;border-bottom:1px solid var(--border);
}
.dash-card-title{font-family:'Outfit',sans-serif;font-weight:700;font-size:0.92rem;}
.dash-card-action{
  font-size:0.73rem;color:var(--accent);cursor:pointer;
  font-weight:600;background:none;border:none;font-family:'DM Sans',sans-serif;
  transition:var(--tr);
}
.dash-card-action:hover{color:var(--accent-h);}
.dash-grid{display:grid;grid-template-columns:1.5fr 1fr;gap:16px;}

/* -------- FORMS -------- */
.form-group{margin-bottom:16px;}
.form-group:last-child{margin-bottom:0;}
.form-group label{
  display:block;font-size:0.73rem;font-weight:600;color:var(--fg-m);
  margin-bottom:5px;text-transform:uppercase;letter-spacing:0.8px;
}
.form-group label .required{color:var(--red);}
.form-group input,
.form-group select,
.form-group textarea{
  width:100%;padding:10px 14px;
  background:var(--bg);border:1px solid var(--border);
  border-radius:var(--rx);color:var(--fg);font-size:0.88rem;
  transition:var(--tr);
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus{
  outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--ag);
}
.form-group input::placeholder{color:var(--fg-m);}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;}

.form-error{color:var(--red-l);font-size:0.75rem;margin-top:4px;}
.form-section{
  background:var(--card);border:1px solid var(--border);
  border-radius:var(--r);padding:22px;margin-bottom:16px;
}
.form-section h3{font-family:'Outfit',sans-serif;font-weight:700;font-size:1rem;margin-bottom:16px;display:flex;align-items:center;gap:8px;}
.form-section h3 i{color:var(--accent);font-size:0.85rem;}

/* -------- MODAL -------- */
.modal-overlay{
  position:fixed;inset:0;z-index:1000;
  background:rgba(0,0,0,0.75);backdrop-filter:blur(10px);
  display:flex;align-items:center;justify-content:center;
  opacity:0;pointer-events:none;transition:opacity 0.35s ease;padding:20px;
}
.modal-overlay.open{opacity:1;pointer-events:all;}
.modal-box{
  background:var(--bg-el);border:1px solid var(--border);
  border-radius:18px;max-width:900px;width:100%;max-height:90vh;
  overflow-y:auto;transform:translateY(30px) scale(0.96);
  transition:transform 0.4s cubic-bezier(0.4,0,0.2,1);position:relative;
}
.modal-overlay.open .modal-box{transform:translateY(0) scale(1);}
.modal-close{
  position:sticky;top:0;float:right;
  width:38px;height:38px;border-radius:50%;
  background:var(--card);border:1px solid var(--border);
  color:var(--fg);cursor:pointer;font-size:0.9rem;
  display:flex;align-items:center;justify-content:center;
  z-index:10;margin:14px 14px 0 0;transition:var(--tr);
}
.modal-close:hover{background:var(--red);border-color:var(--red);color:#fff;}
.modal-inner{display:grid;grid-template-columns:1fr 1fr;}
.modal-gallery{background:#0D0D0D;position:relative;}
.modal-main-img{width:100%;aspect-ratio:1;object-fit:cover;}
.modal-thumbs{display:flex;gap:6px;padding:10px;overflow-x:auto;}
.modal-thumb{
  width:56px;height:56px;border-radius:var(--rx);overflow:hidden;
  cursor:pointer;border:2px solid transparent;transition:var(--tr);flex-shrink:0;
}
.modal-thumb.active{border-color:var(--accent);}
.modal-thumb img{width:100%;height:100%;object-fit:cover;}
.modal-detail{padding:24px 24px 24px 0;}

/* -------- STEPPER (Checkout) -------- */
.stepper-wrap{
  background:var(--bg-el);border-bottom:1px solid var(--border);
  padding:0 24px;position:sticky;top:var(--header-h);z-index:40;
}
.stepper{display:flex;align-items:center;justify-content:center;max-width:700px;margin:0 auto;padding:16px 0;}
.step{display:flex;flex-direction:column;align-items:center;gap:6px;position:relative;flex:1;max-width:140px;}
.step-circle{
  width:36px;height:36px;border-radius:50%;display:flex;align-items:center;
  justify-content:center;font-size:0.82rem;font-weight:700;
  border:2px solid var(--border);color:var(--fg-m);transition:var(--tr);
  position:relative;z-index:2;background:var(--bg-el);
}
.step.active .step-circle{border-color:var(--accent);color:var(--accent);background:var(--ag);}
.step.done .step-circle{border-color:var(--green);background:var(--green);color:#fff;}
.step-label{font-size:0.72rem;font-weight:600;color:var(--fg-m);text-align:center;transition:var(--tr);}
.step.active .step-label{color:var(--accent);}
.step.done .step-label{color:var(--green);}
.step-line{
  position:absolute;top:18px;left:calc(50% + 20px);
  width:calc(100% - 40px);height:2px;background:var(--border);z-index:1;
}
.step:last-child .step-line{display:none;}
.step.done .step-line{background:var(--green);}

.step-content{display:none;animation:pageIn 0.4s ease;}
.step-content.active{display:block;}

/* -------- SHIPPING OPTIONS -------- */
.ship-options{display:flex;flex-direction:column;gap:10px;}
.ship-opt{
  display:flex;align-items:center;gap:12px;padding:14px;
  border:2px solid var(--border);border-radius:var(--rs);
  cursor:pointer;transition:var(--tr);position:relative;
}
.ship-opt:hover{border-color:var(--border-l);}
.ship-opt.selected{border-color:var(--accent);background:var(--ag);}
.ship-radio{
  width:20px;height:20px;border-radius:50%;border:2px solid var(--border);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:var(--tr);
}
.ship-opt.selected .ship-radio{border-color:var(--accent);}
.ship-opt.selected .ship-radio::after{
  content:'';width:10px;height:10px;border-radius:50%;background:var(--accent);
}
.ship-info{flex:1;}
.ship-name{font-weight:700;font-size:0.88rem;margin-bottom:2px;}
.ship-desc{font-size:0.76rem;color:var(--fg-m);}
.ship-price{font-family:'Outfit',sans-serif;font-weight:800;font-size:1rem;flex-shrink:0;}
.ship-price.free{color:var(--green-l);}
.ship-tag{
  position:absolute;top:-1px;right:12px;
  background:var(--green);color:#fff;font-size:0.6rem;font-weight:700;
  padding:2px 8px;border-radius:0 0 var(--rx) var(--rx);
  text-transform:uppercase;letter-spacing:0.5px;
}

/* -------- PAYMENT OPTIONS -------- */
.pay-options{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.pay-opt{
  display:flex;align-items:center;gap:10px;padding:14px;
  border:2px solid var(--border);border-radius:var(--rs);
  cursor:pointer;transition:var(--tr);
}
.pay-opt:hover{border-color:var(--border-l);}
.pay-opt.selected{border-color:var(--accent);background:var(--ag);}
.pay-opt i{font-size:1.2rem;color:var(--fg-m);width:24px;text-align:center;transition:var(--tr);}
.pay-opt.selected i{color:var(--accent);}

/* -------- DETAIL / CHECKOUT LAYOUT -------- */
.detail-layout{display:grid;grid-template-columns:1fr 360px;gap:24px}
.checkout-container{max-width:1000px;margin:0 auto;padding:28px 24px 60px;position:relative;z-index:1}
.checkout-layout{display:grid;grid-template-columns:1fr 340px;gap:24px}
.checkout-main{min-width:0}
.checkout-sidebar{}

/* Cart items step 1 */
.checkout-cart-item{
  display:flex;align-items:center;gap:14px;padding:12px 0;
  border-bottom:1px solid var(--border);
}
.checkout-cart-item img{
  width:64px;height:64px;border-radius:var(--rx);object-fit:cover;
  background:#0D0D0D;flex-shrink:0;
}
.checkout-cart-info{flex:1;min-width:0;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px}
.checkout-cart-name{font-weight:600;font-size:0.88rem}
.checkout-cart-controls{display:flex;align-items:center;gap:16px;font-size:0.85rem;color:var(--fg-m);flex-shrink:0}
.checkout-cart-price{font-weight:700;font-size:0.95rem;color:var(--fg)}

/* Confirm row */
.confirm-row{display:flex;justify-content:space-between;padding:6px 0;font-size:0.88rem}
.confirm-row .label{color:var(--fg-m)}

/* -------- CART DRAWER (public) -------- */
.cart-drawer-overlay{
  position:fixed;inset:0;background:rgba(0,0,0,0.5);
  z-index:200;display:none;backdrop-filter:blur(4px);
}
.cart-drawer-overlay.open{display:block;}
.cart-drawer{
  position:fixed;top:0;right:0;height:100%;width:100%;max-width:420px;
  background:var(--bg-el);z-index:201;box-shadow:var(--sh);
  display:flex;flex-direction:column;
  transform:translateX(100%);transition:transform 0.35s cubic-bezier(0.4,0,0.2,1);
}
.cart-drawer.open{transform:translateX(0);}
.cart-drawer-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:16px 20px;border-bottom:1px solid var(--border);
}
.cart-drawer-body{flex:1;overflow-y:auto;padding:12px;}
.cart-drawer-footer{padding:16px 20px;border-top:1px solid var(--border);}

/* -------- TIMELINE -------- */
.timeline-item{display:flex;gap:14px;padding-bottom:20px;position:relative;}
.timeline-item:last-child{padding-bottom:0;}
.timeline-item::before{
  content:'';position:absolute;left:15px;top:32px;bottom:0;
  width:2px;background:var(--border);
}
.timeline-item:last-child::before{display:none;}
.timeline-dot{
  width:32px;height:32px;border-radius:50%;display:flex;
  align-items:center;justify-content:center;flex-shrink:0;
  font-size:0.7rem;z-index:2;position:relative;
}
.timeline-dot.done{background:var(--green);color:#fff;}
.timeline-dot.current{background:var(--accent);color:#000;animation:pulse 2s ease-in-out infinite;}
.timeline-dot.pending{background:var(--bg);border:2px solid var(--border);color:var(--fg-m);}
.timeline-info{flex:1;padding-top:4px;}
.timeline-title{font-weight:600;font-size:0.85rem;}
.timeline-desc{font-size:0.76rem;color:var(--fg-m);}

/* -------- TOAST -------- */
.toast-box{position:fixed;bottom:24px;right:24px;z-index:2000;display:flex;flex-direction:column;gap:8px;}
.toast{
  background:var(--card);border:1px solid var(--border);border-radius:var(--rs);
  padding:12px 18px;display:flex;align-items:center;gap:10px;font-size:0.85rem;
  box-shadow:var(--sh);min-width:260px;
  animation:toastIn 0.4s ease,toastOut 0.4s ease 2.6s forwards;
}
.toast.success i{color:var(--green-l);}
.toast.info i{color:var(--accent);}
.toast.error i{color:var(--red-l);}

/* -------- EMPTY STATE -------- */
.empty-state{text-align:center;padding:60px 20px;grid-column:1/-1;}
.empty-state i{font-size:2.5rem;color:var(--fg-m);margin-bottom:14px;opacity:0.3;}
.empty-state h3{font-family:'Outfit',sans-serif;font-size:1.2rem;margin-bottom:6px;}
.empty-state p{color:var(--fg-m);font-size:0.85rem;margin-bottom:18px;}

/* -------- ORDER STATUS -------- */
.status-badge{
  padding:4px 10px;border-radius:20px;font-size:0.68rem;font-weight:600;
  display:inline-flex;align-items:center;gap:4px;
}
.status-pending{background:var(--ag);color:var(--accent-l);}
.status-confirmed{background:rgba(30,136,229,0.12);color:var(--blue-l);}
.status-processing{background:rgba(124,77,255,0.12);color:var(--purple-l);}
.status-shipped{background:rgba(0,172,193,0.12);color:var(--cyan-l);}
.status-delivered{background:rgba(67,160,71,0.12);color:var(--green-l);}
.status-cancelled{background:rgba(229,57,53,0.12);color:var(--red-l);}

/* -------- NEWSLETTER -------- */
.newsletter{
  padding:48px 24px;position:relative;z-index:1;max-width:1400px;margin:0 auto;
}
.newsletter-card{
  background:var(--bg-el);border:1px solid var(--border);
  border-radius:var(--r);padding:48px 32px;text-align:center;
  position:relative;overflow:hidden;
}
.newsletter-card::before{
  content:'';position:absolute;top:-80px;right:-80px;
  width:200px;height:200px;border-radius:50%;
  background:var(--accent);opacity:0.06;filter:blur(40px);
}
.newsletter-card h2{font-family:'Outfit',sans-serif;font-size:1.6rem;font-weight:800;margin-bottom:8px;}
.newsletter-card p{color:var(--fg-m);margin-bottom:20px;max-width:500px;margin-left:auto;margin-right:auto;}
.newsletter-form{display:flex;gap:8px;max-width:440px;margin:0 auto;}
.newsletter-form input{flex:1;padding:12px 16px;background:var(--bg);border:1px solid var(--border);border-radius:50px;color:var(--fg);font-size:0.9rem;}
.newsletter-form input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--ag);}

/* -------- FOOTER -------- */
.site-footer{background:var(--bg-el);border-top:1px solid var(--border);position:relative;z-index:1;}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:32px;padding:48px 24px;max-width:1400px;margin:0 auto;}
.footer-brand-desc{color:var(--fg-s);font-size:0.85rem;margin:12px 0;max-width:300px;line-height:1.6;}
.footer-social{display:flex;gap:8px;}
.footer-social a{
  width:38px;height:38px;border-radius:50%;
  background:rgba(255,255,255,0.05);border:1px solid var(--border);
  color:var(--fg-m);display:flex;align-items:center;justify-content:center;
  transition:var(--tr);font-size:0.85rem;
}
.footer-social a:hover{background:var(--accent);color:#000;border-color:var(--accent);}
.footer-col h4{font-family:'Outfit',sans-serif;font-weight:700;font-size:0.85rem;margin-bottom:16px;text-transform:uppercase;letter-spacing:1px;}
.footer-col ul{list-style:none;display:flex;flex-direction:column;gap:8px;}
.footer-col ul li a{color:var(--fg-m);font-size:0.83rem;transition:var(--tr);}
.footer-col ul li a:hover{color:var(--accent);}
.footer-bottom{
  border-top:1px solid var(--border);padding:18px 24px;
  display:flex;justify-content:space-between;align-items:center;
  flex-wrap:wrap;gap:12px;max-width:1400px;margin:0 auto;
  font-size:0.78rem;color:var(--fg-m);
}

/* -------- AUTH PAGES -------- */
.auth-page{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px;position:relative;z-index:1;}
.auth-card{
  background:var(--card);border:1px solid var(--border);
  border-radius:var(--r);padding:40px 32px;width:100%;max-width:440px;
}
.auth-card h1{font-family:'Outfit',sans-serif;font-size:1.6rem;font-weight:800;text-align:center;margin-bottom:6px;}
.auth-card .auth-sub{text-align:center;color:var(--fg-m);font-size:0.88rem;margin-bottom:28px;}
.auth-alt{text-align:center;margin-top:20px;font-size:0.85rem;color:var(--fg-m);}
.auth-alt a{color:var(--accent);font-weight:600;}
.auth-alt a:hover{text-decoration:underline;}

/* -------- SUCCESS PAGE -------- */
.success-wrap{text-align:center;padding:40px 20px;max-width:600px;margin:0 auto;}
.success-icon-big{
  width:90px;height:90px;border-radius:50%;
  background:rgba(67,160,71,0.12);display:flex;align-items:center;
  justify-content:center;margin:0 auto 24px;
  animation:scaleIn 0.6s cubic-bezier(0.175,0.885,0.32,1.275);
}
.success-icon-big i{font-size:2.5rem;color:var(--green-l);}
.success-title{font-family:'Outfit',sans-serif;font-weight:900;font-size:2rem;margin-bottom:8px;}
.success-sub{color:var(--fg-m);font-size:0.95rem;margin-bottom:28px;line-height:1.5;}

/* -------- TABLEAUX ADMIN -------- */
.tbl{width:100%;border-collapse:collapse;background:var(--card);border:1px solid var(--border);border-radius:var(--r);overflow:hidden}
.tbl thead{background:var(--bg-el)}
.tbl th{padding:10px 12px;font-size:0.65rem;font-weight:700;text-transform:uppercase;letter-spacing:1px;color:var(--fg-m);text-align:left;white-space:nowrap}
.tbl td{padding:10px 12px;font-size:0.8rem;border-top:1px solid var(--border);vertical-align:middle}
.tbl tr:hover td{background:rgba(255,255,255,0.02)}
[data-theme="light"] .tbl tr:hover td{background:rgba(0,0,0,0.02)}
.tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 -1px}
.tid{font-family:'Outfit',sans-serif;font-weight:700;color:var(--accent);cursor:pointer}
.tid:hover{text-decoration:underline}
.tcust{display:flex;align-items:center;gap:8px}
.tcust-av{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:0.65rem;font-weight:700;flex-shrink:0}
.tacts{display:flex;gap:4px}
.tab{width:28px;height:28px;border-radius:var(--rx);background:var(--bg);border:1px solid var(--border);color:var(--fg-m);cursor:pointer;font-size:0.7rem;display:flex;align-items:center;justify-content:center;transition:var(--tr)}
.tab:hover{border-color:var(--accent);color:var(--accent)}
.tab.dg:hover{border-color:var(--red);color:var(--red)}
.tab.gr:hover{border-color:var(--green);color:var(--green)}

/* Filtres bar */
.ot-bar{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;flex-wrap:wrap;gap:10px}
.ot-f{display:flex;gap:6px;flex-wrap:wrap}
.ob{padding:6px 12px;border-radius:20px;font-size:0.72rem;font-weight:600;cursor:pointer;border:1px solid var(--border);background:transparent;color:var(--fg-m);font-family:inherit;text-decoration:none;transition:var(--tr);display:inline-flex;align-items:center;gap:4px}
.ob.active{background:var(--accent);color:#000;border-color:var(--accent)}
.ob:hover:not(.active){border-color:var(--fg-m);color:var(--fg)}
.ot-c{font-size:0.82rem;color:var(--fg-m)}
.ot-c strong{color:var(--fg)}

/* Profil card */
.profile-card{background:var(--card);border:1px solid var(--border);border-radius:var(--r);padding:28px;max-width:600px}
.profile-avatar-big{width:80px;height:80px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:Outfit,sans-serif;font-weight:800;font-size:1.8rem;color:#fff;margin-bottom:18px}

/* -------- SKELETON -------- */
.skeleton{
  background:linear-gradient(90deg,var(--card) 25%,var(--card-h) 50%,var(--card) 75%);
  background-size:1000px 100%;animation:shimmer 2s infinite;border-radius:var(--rx);
}

/* -------- BACK TO TOP -------- */
.back-to-top{
  position:fixed;bottom:24px;right:24px;z-index:150;
  width:44px;height:44px;border-radius:50%;
  background:var(--accent);color:#000;border:none;
  font-size:1rem;cursor:pointer;display:flex;align-items:center;justify-content:center;
  box-shadow:var(--sh);transition:var(--tr);
  opacity:0;transform:translateY(20px);pointer-events:none;
}
.back-to-top.visible{opacity:1;transform:translateY(0);pointer-events:all;}
.back-to-top:hover{background:var(--accent-h);transform:translateY(-3px);}

/* -------- SIDEBAR OVERLAY (mobile) -------- */
.sidebar-overlay{
  display:none;position:fixed;inset:0;z-index:99;
  background:rgba(0,0,0,0.6);
}
.sidebar-overlay.show{display:block;}

/* -------- RESPONSIVE -------- */
@media(max-width:1200px){
  .products-grid{grid-template-columns:repeat(4,1fr);}
}
@media(max-width:1100px){
  .stats-grid{grid-template-columns:repeat(2,1fr);}
  .dash-grid{grid-template-columns:1fr;}
  .footer-grid{grid-template-columns:1fr 1fr;}
}
@media(max-width:768px){
  /* ======== DETAIL / CHECKOUT MOBILE ======== */
  .detail-layout{grid-template-columns:1fr}
  .checkout-layout{grid-template-columns:1fr}
  .checkout-container{padding:16px 12px 80px}
  .checkout-cart-item{gap:10px;padding:10px 0}
  .checkout-cart-item img{width:48px;height:48px}
  .checkout-cart-name{font-size:0.8rem}
  .checkout-cart-controls{font-size:0.78rem;gap:8px}
  .checkout-cart-price{font-size:0.85rem}
  .pay-options{grid-template-columns:1fr}

  /* Stepper */
  .stepper-wrap{padding:0 8px}
  .stepper{padding:12px 0;gap:0}
  .step{max-width:100px}
  .step-circle{width:28px;height:28px;font-size:0.68rem}
  .step-label{font-size:0.55rem;white-space:nowrap}
  .step-line{top:14px;left:calc(50% + 16px);width:calc(100% - 32px)}

  /* Shipping options */
  .ship-opt{padding:10px 12px;gap:8px;flex-wrap:wrap}
  .ship-name{font-size:0.8rem}
  .ship-desc{font-size:0.7rem}
  .ship-price{font-size:0.85rem;width:100%;text-align:right}
  .ship-radio{width:18px;height:18px}

  /* Form sections */
  .form-section{padding:16px}
  .form-section h3{font-size:0.9rem}
  .form-row{grid-template-columns:1fr;gap:0}

  /* Confirm */
  .confirm-row{font-size:0.8rem}

  /* Success */
  .success-wrap{padding:20px 8px}
  .success-title{font-size:1.4rem}
  .success-sub{font-size:0.85rem}
  .success-icon-big{width:70px;height:70px}
  .success-icon-big i{font-size:2rem}

  /* Steps content */
  .step-content .section-title{font-size:1.2rem}
  .step-content .section-sub{font-size:0.8rem;margin-bottom:16px}

  /* Checkout sidebar (step2 summary) */
  .checkout-sidebar .form-section{position:static !important}

  /* Sidebar mobile */
  .sidebar{left:calc(-1 * var(--sidebar-w));}
  .sidebar.open{left:0;}
  .main-area{margin-left:0;}
  .mobile-menu-btn{display:flex;}
  .sidebar-overlay{display:none;}
  .sidebar-overlay.show{display:block;}

  /* Topbar */
  .topbar{padding:0 14px;}
  .topbar-search{max-width:none;}

  /* Hero */
  .hero-carousel{height:220px;border-radius:var(--rs);}
  .hero-slide{padding:24px;}
  .hero-slide-title{font-size:1.6rem;}
  .hero-slide-icon{display:none;}
  .hero-arrow{width:32px;height:32px;font-size:0.7rem;}

  /* Catégories */
  .cat-grid{grid-template-columns:repeat(4,1fr);gap:8px;}
  .cat-icon{width:44px;height:44px;font-size:1rem;}
  .cat-name{font-size:0.7rem;}

  /* Produits */
  .products-grid{grid-template-columns:repeat(2,1fr);gap:10px;}
  .p-info{padding:10px;}
  .p-name{font-size:0.82rem;}
  .p-price{font-size:0.95rem;}

  /* Shop */
  .shop-layout{flex-direction:column;}
  .shop-filters{width:100%;min-width:0;position:static;}

  /* Modal */
  .modal-inner{grid-template-columns:1fr;}
  .modal-detail{padding:20px;}
  .products-grid.list .p-card{grid-template-columns:140px 1fr;}

  /* Stepper */
  .step-label{font-size:0.6rem;}
  .step-circle{width:30px;height:30px;font-size:0.7rem;}

  /* Stepper wrap */
  .stepper-wrap{top:var(--header-h);}

  /* Footer */
  .footer-grid{grid-template-columns:1fr;gap:24px;}

  /* Form */
  .form-row{grid-template-columns:1fr;}
  .pay-options{grid-template-columns:1fr;}

  /* Cart drawer */
  .cart-drawer{max-width:100%;}

  /* Newsletter */
  .newsletter-form{flex-direction:column;}
}

@media(max-width:480px){
  .topbar-search{display:none;}
  .hero-carousel{height:200px;}
  .hero-slide{padding:16px;}
  .hero-slide-title{font-size:1.3rem;}
  .hero-slide-sub{font-size:0.8rem;}
  .stats-grid{grid-template-columns:1fr;}
  .products-grid{grid-template-columns:1fr 1fr;gap:8px;}
  .cat-grid{grid-template-columns:repeat(3,1fr);}

  /* Checkout small phones */
  .checkout-container{padding:12px 8px 80px}
  .stepper-wrap{padding:0 4px}
  .step{max-width:80px}
  .step-circle{width:24px;height:24px;font-size:0.6rem}
  .step-label{font-size:0.5rem}
  .step-line{top:12px;left:calc(50% + 14px);width:calc(100% - 28px)}

  .step-content .section-title{font-size:1.1rem}
  .checkout-cart-item img{width:42px;height:42px}
  .checkout-cart-name{font-size:0.75rem}
  .checkout-cart-controls{font-size:0.72rem;flex-direction:column;align-items:flex-start;gap:4px}

  .ship-opt{padding:8px 10px}
  .ship-name{font-size:0.75rem}
  .ship-desc{font-size:0.68rem}
  .ship-price{font-size:0.78rem}

  .form-section{padding:12px}
  .btn{padding:10px 14px;font-size:0.82rem}

  .success-title{font-size:1.3rem}
  .success-icon-big{width:60px;height:60px}
  .modal-inner{grid-template-columns:1fr}
  .modal-detail{padding:14px}

  /* Stepper */
  .step-label{font-size:0.5rem}
}

/* -------- REDUCED MOTION -------- */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:0.01ms!important;transition-duration:0.01ms!important;}
}