/* ══════════════════════════════════════════
   VARIABLES & RESET — PROFESSIONAL THEME
══════════════════════════════════════════ */
:root {
  --primary:  #0e2a5c;
  --primary2: #1a3f7a;
  --accent:   #e8530a;
  --accent2:  #ff6b1a;
  --card:     #ffffff;
  --card-bg:  #f8fafc;
  --border:   #e2e8f0;
  --text:     #1e293b;
  --text2:    #475569;
  --muted:    #94a3b8;
  --red:      #ef4444;
  --green:    #25D366;
  --gold:     #e8530a;
  --gold2:    #ff6b1a;
  --white:    #ffffff;
  --navy:     #0e2a5c;
  --navy2:    #f1f5f9;
  --navy3:    #e2e8f0;
  --shadow:   rgba(14,22,40,.08);
  --shadow2:  rgba(14,22,40,.15);
  --radius:   10px;
  --radius-sm:6px;
  --transition:.2s ease;
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  font-family:'Plus Jakarta Sans',sans-serif;
  background:#f1f5f9;
  color:var(--text);
  overflow-x:hidden;
  min-height:100vh;
}

/* ══════════════════════════════════════════
   LOADING SCREEN
══════════════════════════════════════════ */
#pageLoader{
  position:fixed;inset:0;background:var(--primary);z-index:9999;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.2rem;
  transition:opacity .5s ease;
}
#pageLoader.fade-out{opacity:0;pointer-events:none;}
.loader-logo{font-family:'Syne',sans-serif;font-size:2rem;font-weight:800;color:#fff;}
.loader-logo span{color:var(--accent2);}
.loader-bar{width:200px;height:3px;background:rgba(255,255,255,.15);border-radius:10px;overflow:hidden;}
.loader-progress{height:100%;width:0%;background:linear-gradient(90deg,var(--accent),var(--accent2));border-radius:10px;animation:loadAnim 1.4s ease forwards;}
@keyframes loadAnim{0%{width:0%}70%{width:85%}100%{width:100%}}

/* ══════════════════════════════════════════
   TOAST
══════════════════════════════════════════ */
#toast{
  position:fixed;bottom:2rem;left:50%;transform:translateX(-50%) translateY(100px);
  background:var(--text);color:#fff;
  padding:.75rem 1.4rem;border-radius:8px;font-size:.85rem;font-weight:600;
  z-index:5000;transition:transform .35s cubic-bezier(.34,1.56,.64,1);
  box-shadow:0 8px 30px rgba(0,0,0,.2);white-space:nowrap;
}
#toast.show{transform:translateX(-50%) translateY(0);}
#toast.ok{background:#15803d;}
#toast.err{background:#dc2626;}

/* ══════════════════════════════════════════
   PROMO BAR
══════════════════════════════════════════ */
.promo-bar{
  background:var(--primary);
  padding:.45rem 1rem;
  text-align:center;
  font-size:.78rem;
  color:rgba(255,255,255,.85);
  font-weight:500;
  overflow:hidden;position:relative;
}
.promo-inner{display:inline-block;animation:marquee 24s linear infinite;}
.promo-inner b{color:var(--accent2);}
@keyframes marquee{0%{transform:translateX(60vw)}100%{transform:translateX(-100%)}}

/* ══════════════════════════════════════════
   ADMIN BAR
══════════════════════════════════════════ */
.admin-bar{
  display:none;
  background:#fffbeb;
  border-bottom:1px solid #fcd34d;
  padding:.5rem 1.5rem;
  text-align:center;
  font-size:.8rem;
  color:#92400e;
  font-weight:600;
}
body.admin-mode .admin-bar{display:block;}

/* ══════════════════════════════════════════
   HEADER
══════════════════════════════════════════ */
header{
  position:sticky;top:0;z-index:1000;
  background:#fff;
  box-shadow:0 1px 0 var(--border), 0 4px 20px var(--shadow);
}
.header-top{
  display:flex;align-items:center;justify-content:space-between;
  height:64px;padding:0 1.5rem;gap:1rem;
  max-width:1400px;margin:0 auto;
  border-bottom:1px solid var(--border);
}

/* Logo */
.logo-wrap{display:flex;align-items:center;gap:.5rem;text-decoration:none;flex-shrink:0;cursor:pointer;user-select:none;}
.logo-text{font-family:'Syne',sans-serif;font-size:1.45rem;font-weight:800;color:var(--primary);white-space:nowrap;}
.logo-text span{color:var(--accent);}
.logo-img{height:44px;width:auto;display:block;transition:transform var(--transition);}
.logo-wrap:hover .logo-img{transform:scale(1.05);}

/* Search */
.search-bar{flex:1;max-width:520px;position:relative;display:flex;}
.search-bar input{
  width:100%;padding:.6rem 1rem .6rem 1rem;
  border-radius:var(--radius-sm) 0 0 var(--radius-sm);
  border:2px solid var(--primary);border-right:none;
  background:#fff;color:var(--text);font-size:.88rem;
  font-family:'Plus Jakarta Sans',sans-serif;
  outline:none;transition:border-color var(--transition);
}
.search-bar input:focus{border-color:var(--accent);}
.search-bar input::placeholder{color:var(--muted);}
.search-submit{
  background:var(--accent);color:#fff;border:none;
  padding:0 1.2rem;border-radius:0 var(--radius-sm) var(--radius-sm) 0;
  font-size:.95rem;cursor:pointer;transition:background var(--transition);
  display:flex;align-items:center;
}
.search-submit:hover{background:var(--accent2);}
.search-icon{display:none;}

/* Header actions */
.hdr-actions{display:flex;gap:.6rem;align-items:center;flex-shrink:0;}
.wa-btn{
  background:var(--green);color:#fff;border:none;
  padding:.48rem 1.1rem;border-radius:var(--radius-sm);font-size:.82rem;font-weight:700;
  cursor:pointer;text-decoration:none;display:flex;align-items:center;gap:.35rem;
  white-space:nowrap;transition:opacity var(--transition),transform var(--transition);
  font-family:'Plus Jakarta Sans',sans-serif;
}
.wa-btn:hover{opacity:.88;}
.admin-hdr-btn{
  background:#fff;color:var(--primary);
  border:1.5px solid var(--primary);
  padding:.45rem .9rem;border-radius:var(--radius-sm);font-size:.8rem;font-weight:700;
  cursor:pointer;white-space:nowrap;display:none;
  font-family:'Plus Jakarta Sans',sans-serif;
  transition:background var(--transition),color var(--transition);
}
.admin-hdr-btn:hover{background:var(--primary);color:#fff;}

/* User dropdown */
.user-wrap{position:relative;}
.user-btn{
  background:var(--primary);color:#fff;
  padding:.48rem .9rem;border-radius:var(--radius-sm);font-size:.8rem;
  font-weight:700;cursor:pointer;display:flex;align-items:center;gap:.35rem;
  white-space:nowrap;font-family:'Plus Jakarta Sans',sans-serif;border:none;
  transition:background var(--transition);
}
.user-btn:hover{background:var(--primary2);}
.user-dd{
  display:none;position:absolute;top:calc(100% + 10px);right:0;
  background:#fff;border:1px solid var(--border);
  border-radius:var(--radius);min-width:210px;
  box-shadow:0 12px 40px var(--shadow2);overflow:hidden;z-index:600;
  animation:dropIn .15s ease;
}
@keyframes dropIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}
.user-dd.open{display:block;}
.dd-head{padding:.9rem 1rem;border-bottom:1px solid var(--border);background:var(--card-bg);}
.dd-name{font-weight:700;color:var(--text);font-size:.88rem;}
.dd-email{font-size:.72rem;color:var(--muted);margin-top:.15rem;}
.dd-item{
  display:flex;align-items:center;gap:.6rem;padding:.65rem 1rem;
  color:var(--text2);font-size:.84rem;cursor:pointer;border:none;
  background:none;width:100%;text-align:left;
  font-family:'Plus Jakarta Sans',sans-serif;
  transition:background .12s;
}
.dd-item:hover{background:var(--card-bg);}
.dd-item.danger{color:var(--red);}
.dd-hr{border:none;border-top:1px solid var(--border);}

/* ── Category nav (sub-header) ── */
nav.cats{
  background:#fff;
  border-top:1px solid var(--border);
  padding:0 1.5rem;
  display:flex;overflow-x:auto;scrollbar-width:none;
  max-width:100%;
}
nav.cats::-webkit-scrollbar{display:none;}
nav.cats a{
  color:var(--text2);text-decoration:none;
  padding:.7rem 1.1rem;font-size:.82rem;font-weight:600;
  white-space:nowrap;border-bottom:2.5px solid transparent;
  transition:all var(--transition);flex-shrink:0;
}
nav.cats a:hover{color:var(--primary);}
nav.cats a.active{color:var(--accent);border-bottom-color:var(--accent);}
.float-assistant-wrap{display:none!important;}

/* ══════════════════════════════════════════
   HERO — BANNER STYLE (like Alibaba)
══════════════════════════════════════════ */
.hero{
  background:linear-gradient(120deg, var(--primary) 0%, var(--primary2) 55%, #0d3572 100%);
  padding:3.5rem 1.5rem 3.8rem;
  text-align:center;position:relative;overflow:hidden;
}
.hero::before{
  content:'';position:absolute;inset:0;
  background:url("data:image/svg+xml,%3Csvg width='80' height='80' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='40' cy='40' r='1' fill='rgba(255,255,255,.06)'/%3E%3C/svg%3E");
  pointer-events:auto;
}
.hero::after{
  content:'';position:absolute;top:-120px;right:-120px;
  width:500px;height:500px;
  background:radial-gradient(circle,rgba(232,83,10,.18) 0%,transparent 70%);
  pointer-events:none;
}
.hero-badge{
  display:inline-flex;align-items:center;gap:.4rem;
  background:rgba(255,255,255,.12);color:#fff;
  border:1px solid rgba(255,255,255,.2);
  font-size:.72rem;font-weight:700;padding:.3rem .9rem;
  border-radius:50px;letter-spacing:1.5px;text-transform:uppercase;
  margin-bottom:1.3rem;
}
.hero h1{
  font-family:'Syne',sans-serif;
  font-size:clamp(1.9rem,4.5vw,3.4rem);
  font-weight:800;color:#fff;
  line-height:1.15;margin-bottom:.9rem;position:relative;
}
.hero h1 em{font-style:normal;color:var(--accent2);}
.hero p{
  font-size:.95rem;color:rgba(255,255,255,.7);
  max-width:440px;margin:0 auto 2rem;line-height:1.8;
}
.hero-btns{display:flex;gap:.8rem;justify-content:center;flex-wrap:wrap;}
.btn-gold{
  background:var(--accent);color:#fff;border:none;
  padding:.8rem 1.8rem;border-radius:var(--radius-sm);
  font-size:.9rem;font-weight:700;cursor:pointer;text-decoration:none;
  display:inline-flex;align-items:center;gap:.4rem;
  transition:background var(--transition),transform var(--transition),box-shadow var(--transition);
  font-family:'Plus Jakarta Sans',sans-serif;
}
.btn-gold:hover{background:var(--accent2);transform:translateY(-1px);box-shadow:0 6px 20px rgba(232,83,10,.35);}
.btn-outline{
  background:rgba(255,255,255,.1);color:#fff;
  border:1.5px solid rgba(255,255,255,.3);
  padding:.8rem 1.8rem;border-radius:var(--radius-sm);font-size:.9rem;font-weight:600;
  cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;gap:.4rem;
  transition:all var(--transition);font-family:'Plus Jakarta Sans',sans-serif;
}
.btn-outline:hover{background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.55);}

/* ── Trust badges ── */
.trust-bar{
  background:#fff;
  border-bottom:1px solid var(--border);
}
.trust-inner{
  display:flex;justify-content:center;gap:0;
  max-width:1000px;margin:0 auto;flex-wrap:wrap;
  divide-x:1px solid var(--border);
}
.trust-item{
  display:flex;align-items:center;gap:.6rem;
  padding:.85rem 1.5rem;
  border-right:1px solid var(--border);
  flex:1;min-width:160px;justify-content:center;
}
.trust-item:last-child{border-right:none;}
.trust-icon{font-size:1.3rem;}
.trust-text{font-size:.78rem;font-weight:600;color:var(--text2);}
.trust-text b{display:block;color:var(--primary);font-size:.82rem;}

/* Stats strip (hidden, replaced by trust bar) */
.stats-strip{display:none;}

/* ══════════════════════════════════════════
   CATALOGUE SECTIONS
══════════════════════════════════════════ */
.sec-wrap{
  background:#fff;
  border:1px solid var(--border);
  border-radius:var(--radius);
  margin:1.2rem auto;
  max-width:1400px;
  overflow:hidden;
}
section.cat-sec{
  padding:1.5rem 1.5rem 1rem;
}
.sec-head{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:1.4rem;padding-bottom:.85rem;
  border-bottom:2px solid var(--border);
  gap:1rem;flex-wrap:wrap;
}
.sec-lbl{font-size:.68rem;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--accent);margin-bottom:.2rem;}
.sec-title{font-family:'Syne',sans-serif;font-size:1.3rem;font-weight:800;color:var(--primary);}
.see-all{
  color:var(--accent);font-weight:600;font-size:.82rem;text-decoration:none;
  display:flex;align-items:center;gap:.3rem;
  border:1.5px solid var(--accent);padding:.3rem .8rem;border-radius:50px;
  transition:all var(--transition);
}
.see-all:hover{background:var(--accent);color:#fff;}

/* Product grid */
.prod-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:1rem;}
.empty-cat{
  color:var(--muted);font-size:.86rem;padding:2rem 0;
  display:flex;align-items:center;gap:.6rem;
  border:2px dashed var(--border);border-radius:var(--radius);
  justify-content:center;
}

/* ══════════════════════════════════════════
   PRODUCT CARD — CLEAN MARKETPLACE STYLE
══════════════════════════════════════════ */
.prod-card{
  background:#fff;border:1px solid var(--border);
  border-radius:var(--radius);overflow:hidden;
  display:flex;flex-direction:column;
  transition:transform var(--transition),box-shadow var(--transition),border-color var(--transition);
  position:relative;
}
.prod-card:hover{
  transform:translateY(-3px);
  box-shadow:0 10px 35px var(--shadow2);
  border-color:rgba(14,42,92,.15);
}
.img-wrap{position:relative;background:var(--card-bg);aspect-ratio:3/4;overflow:hidden;}
.img-wrap img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease;display:block;}
.prod-card:hover .img-wrap img{transform:scale(1.04);}
.img-wrap img[src=""]{display:none;}

.badge{
  position:absolute;top:8px;left:8px;
  padding:.2rem .6rem;border-radius:4px;
  font-size:.65rem;font-weight:700;text-transform:uppercase;z-index:2;
  letter-spacing:.4px;
}
.b-new{background:var(--primary);color:#fff;}
.b-promo{background:var(--red);color:#fff;}
.b-top{background:var(--accent);color:#fff;}

/* Admin card buttons */
.del-btn,.edit-btn{
  display:none;position:absolute;width:30px;height:30px;border-radius:6px;
  border:none;cursor:pointer;font-size:.8rem;z-index:5;
  align-items:center;justify-content:center;
  transition:opacity .15s;
}
.del-btn:hover,.edit-btn:hover{opacity:.85;}
.del-btn{top:8px;right:8px;background:var(--red);color:#fff;}
.edit-btn{top:8px;right:44px;background:var(--primary);color:#fff;}
body.admin-mode .del-btn{display:flex;}
body.admin-mode .edit-btn{display:flex;}

.prod-body{padding:.85rem .85rem .5rem;flex:1;}
.prod-name{font-weight:600;font-size:.84rem;color:var(--text);margin-bottom:.4rem;line-height:1.45;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.prod-price{font-weight:800;font-size:1.05rem;color:var(--accent);margin-bottom:.6rem;
  display:flex;align-items:center;flex-wrap:wrap;gap:.4rem;}
.old-p{font-size:.76rem;color:var(--muted);text-decoration:line-through;font-weight:400;}

.sz-row{display:flex;gap:.3rem;flex-wrap:wrap;margin-bottom:.5rem;}
.sz-btn{
  border:1px solid var(--border);background:#fff;
  color:var(--text2);font-size:.67rem;font-weight:600;padding:.16rem .42rem;
  border-radius:4px;cursor:pointer;transition:all .12s;
  font-family:'Plus Jakarta Sans',sans-serif;
}
.sz-btn:hover,.sz-btn.sel{background:var(--primary);color:#fff;border-color:var(--primary);}

.cl-row{display:flex;gap:.4rem;margin-bottom:.7rem;align-items:center;flex-wrap:wrap;}
.cl-dot{
  width:16px;height:16px;border-radius:50%;border:2px solid transparent;
  cursor:pointer;transition:transform .12s;outline:2.5px solid transparent;
  flex-shrink:0;
}
.cl-dot:hover{transform:scale(1.2);}
.cl-dot.sel{outline:2.5px solid var(--primary);outline-offset:2px;}

/* Order button */
.cmd-btn{
  background:var(--primary);color:#fff;border:none;
  width:100%;padding:.75rem;font-size:.82rem;font-weight:700;
  cursor:pointer;font-family:'Plus Jakarta Sans',sans-serif;
  display:flex;align-items:center;justify-content:center;gap:.4rem;
  transition:background var(--transition);
  margin-top:auto;
}
.cmd-btn:hover{background:var(--accent);}

/* ══════════════════════════════════════════
   ADD PRODUCT BUTTON (admin)
══════════════════════════════════════════ */
.add-wrap{
  display:none;
  border-top:1px dashed var(--border);
  background:var(--card-bg);
  padding:.65rem 1.5rem;
}
body.admin-mode .add-wrap{display:block;}
.add-btn{
  background:none;border:1.5px dashed #cbd5e1;color:var(--muted);
  padding:.5rem 1.2rem;border-radius:var(--radius-sm);font-size:.8rem;font-weight:600;
  cursor:pointer;font-family:'Plus Jakarta Sans',sans-serif;
  transition:all var(--transition);
}
.add-btn:hover{border-color:var(--accent);color:var(--accent);background:rgba(232,83,10,.04);}

/* ══════════════════════════════════════════
   FLOAT WHATSAPP
══════════════════════════════════════════ */
.float-wa{
  position:fixed;bottom:1.5rem;right:1.5rem;z-index:900;
  width:54px;height:54px;border-radius:50%;
  background:var(--green);color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-size:1.5rem;text-decoration:none;
  box-shadow:0 6px 24px rgba(37,211,102,.45);
  transition:transform .2s,box-shadow .2s;
}
.float-wa:hover{transform:scale(1.08);box-shadow:0 10px 30px rgba(37,211,102,.55);}

/* ══════════════════════════════════════════
   FOOTER
══════════════════════════════════════════ */
footer{
  background:var(--primary);
  color:rgba(255,255,255,.75);
  padding:3rem 1.5rem 1.5rem;
  margin-top:2rem;
}
.ft-grid{
  display:grid;grid-template-columns:2fr 1fr 1fr;gap:2.5rem;
  max-width:1000px;margin:0 auto 2rem;
}
.ft-brand .logo-text{color:#fff;font-size:1.3rem;}
.ft-brand .logo-text span{color:var(--accent2);}
.ft-brand p{font-size:.82rem;color:rgba(255,255,255,.55);line-height:1.75;margin-top:.75rem;max-width:280px;}
.ft-col h4{color:#fff;font-size:.85rem;font-weight:700;margin-bottom:.9rem;letter-spacing:.5px;text-transform:uppercase;}
.ft-col a{display:block;color:rgba(255,255,255,.55);text-decoration:none;font-size:.82rem;margin-bottom:.5rem;transition:color .15s;}
.ft-col a:hover{color:#fff;}
.ft-bot{
  border-top:1px solid rgba(255,255,255,.1);
  padding-top:1.2rem;
  display:flex;justify-content:space-between;align-items:center;
  flex-wrap:wrap;gap:.5rem;
  max-width:1000px;margin:0 auto;
  font-size:.75rem;color:rgba(255,255,255,.35);
}
.ft-bot a{color:rgba(255,255,255,.45);text-decoration:none;}
.ft-bot a:hover{color:#fff;}

/* ══════════════════════════════════════════
   OVERLAYS / PANELS (Auth + Admin)
══════════════════════════════════════════ */
.overlay{
  display:none;position:fixed;inset:0;background:rgba(0,0,0,.45);
  z-index:2000;align-items:center;justify-content:center;
  padding:1rem;backdrop-filter:blur(3px);
}
.overlay.open{display:flex;}
.panel{
  background:#fff;border-radius:12px;
  width:100%;max-width:500px;max-height:92vh;overflow-y:auto;
  padding:2rem;position:relative;
  box-shadow:0 24px 60px rgba(0,0,0,.2);
  animation:panelIn .22s ease;
}
@keyframes panelIn{from{opacity:0;transform:translateY(16px) scale(.98)}to{opacity:1;transform:none}}
.p-close{
  position:absolute;top:1.2rem;right:1.2rem;
  background:#f1f5f9;border:none;color:var(--text2);
  width:32px;height:32px;border-radius:50%;
  font-size:.9rem;cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:background .15s;
}
.p-close:hover{background:var(--border);}
.panel h2{font-family:'Syne',sans-serif;font-size:1.35rem;font-weight:800;color:var(--primary);margin-bottom:.3rem;}
.panel-sub{font-size:.82rem;color:var(--muted);margin-bottom:1.4rem;}

/* Form fields */
.fg{display:flex;flex-direction:column;gap:.4rem;margin-bottom:1rem;}
.fg label{font-size:.78rem;font-weight:700;color:var(--text2);text-transform:uppercase;letter-spacing:.3px;}
.fg input,.fg select,.fg textarea{
  border:1.5px solid var(--border);border-radius:var(--radius-sm);
  padding:.62rem .85rem;font-size:.88rem;color:var(--text);
  background:#fff;font-family:'Plus Jakarta Sans',sans-serif;
  outline:none;transition:border-color .15s;
}
.fg input:focus,.fg select:focus,.fg textarea:focus{border-color:var(--primary);}
.fg input::placeholder{color:var(--muted);}
.f2{display:grid;grid-template-columns:1fr 1fr;gap:.75rem;}

/* Error */
.err-msg{display:none;font-size:.78rem;color:var(--red);margin-top:.15rem;font-weight:600;}
.err-msg.show{display:block;}

/* Panel actions */
.p-actions{display:flex;gap:.75rem;margin-top:1.4rem;justify-content:flex-end;}
.p-cancel{
  background:#f1f5f9;color:var(--text2);border:none;
  padding:.62rem 1.3rem;border-radius:var(--radius-sm);font-size:.85rem;font-weight:600;
  cursor:pointer;font-family:'Plus Jakarta Sans',sans-serif;transition:background .15s;
}
.p-cancel:hover{background:var(--border);}
.p-save{
  background:var(--primary);color:#fff;border:none;
  padding:.62rem 1.5rem;border-radius:var(--radius-sm);font-size:.85rem;font-weight:700;
  cursor:pointer;font-family:'Plus Jakarta Sans',sans-serif;
  transition:background .15s;
}
.p-save:hover{background:var(--accent);}

/* Badge selector */
.badge-sel{display:flex;gap:.5rem;flex-wrap:wrap;}
.bo{
  padding:.3rem .8rem;border-radius:4px;font-size:.76rem;font-weight:700;
  cursor:pointer;border:1.5px solid transparent;opacity:.55;transition:all .15s;
  font-family:'Plus Jakarta Sans',sans-serif;
}
.bo.active{opacity:1;border-color:rgba(0,0,0,.2);}
.bo.bn{background:var(--primary);color:#fff;}
.bo.bp{background:var(--red);color:#fff;}
.bo.bt{background:var(--accent);color:#fff;}
.bo.b0{background:#f1f5f9;color:var(--text2);border-color:var(--border);}

/* Size chips */
.szc{display:flex;flex-wrap:wrap;gap:.4rem;}
.szck{
  padding:.28rem .65rem;border:1.5px solid var(--border);
  border-radius:4px;font-size:.76rem;font-weight:600;cursor:pointer;
  background:#fff;color:var(--text2);
  transition:all .15s;user-select:none;
  font-family:'Plus Jakarta Sans',sans-serif;
}
.szck.on{background:var(--primary);color:#fff;border-color:var(--primary);}

/* Colors */
.ci{display:flex;flex-direction:column;gap:.5rem;}
.cir{display:flex;gap:.5rem;align-items:center;}
.cir input[type=color]{width:40px;height:36px;border-radius:6px;border:1px solid var(--border);background:none;cursor:pointer;padding:2px;flex-shrink:0;}
.cir input[type=text]{flex:1;}
.crm{background:#fef2f2;border:1px solid #fecaca;color:var(--red);width:30px;height:30px;border-radius:6px;cursor:pointer;font-size:1rem;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.ac-btn{background:#f8fafc;border:1.5px dashed var(--border);color:var(--muted);padding:.4rem 1rem;border-radius:6px;cursor:pointer;font-size:.79rem;margin-top:.3rem;font-family:'Plus Jakarta Sans',sans-serif;transition:all .15s;}
.ac-btn:hover{border-color:var(--primary);color:var(--primary);}

/* Image upload */
.img-tabs{display:flex;gap:.4rem;margin-bottom:.6rem;}
.img-tab{flex:1;padding:.38rem;border:1.5px solid var(--border);background:#f8fafc;color:var(--muted);border-radius:6px;font-size:.77rem;font-weight:600;cursor:pointer;font-family:'Plus Jakarta Sans',sans-serif;transition:all .15s;}
.img-tab.active{background:var(--primary);border-color:var(--primary);color:#fff;}
.img-upload-zone{
  border:2px dashed var(--border);border-radius:8px;
  padding:1.2rem;text-align:center;cursor:pointer;
  transition:all var(--transition);background:#f8fafc;
  margin-bottom:.5rem;position:relative;
}
.img-upload-zone:hover,.img-upload-zone.drag{border-color:var(--accent);background:rgba(232,83,10,.03);}
.img-upload-zone input[type=file]{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%;}
.img-upload-icon{font-size:1.8rem;margin-bottom:.4rem;}
.img-upload-txt{font-size:.8rem;color:var(--muted);line-height:1.5;}
.img-upload-txt strong{color:var(--text);display:block;font-size:.85rem;}
.iprev{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:8px;margin-top:.5rem;border:1px solid var(--border);display:none;}
.iprev.show{display:block;}
.ihint{font-size:.72rem;color:var(--muted);margin-top:.4rem;}
.ihint a{color:var(--accent);}

/* ══════════════════════════════════════════
   RESPONSIVE — MOBILE
══════════════════════════════════════════ */
@media(max-width:768px){
  .header-top{height:56px;padding:0 .75rem;gap:.5rem;}
  .logo-img{height:36px;}
  .logo-text{font-size:1.15rem;}
  .search-bar{flex:1;max-width:none;}
  .search-bar input{font-size:.82rem;padding:.52rem .8rem;}
  .wa-btn span{display:none;}
  .wa-btn{padding:.42rem .65rem;}
  .hdr-actions{gap:.3rem;}
  .user-btn{font-size:.76rem;padding:.42rem .65rem;}
  nav.cats a{padding:.62rem .75rem;font-size:.76rem;}
  .hero{padding:2rem .9rem 2.5rem;}
  .hero h1{font-size:1.75rem;}
  .hero p{font-size:.86rem;}
  .hero-btns{flex-direction:column;align-items:stretch;gap:.55rem;}
  .btn-gold,.btn-outline{justify-content:center;}
  .trust-item{padding:.6rem .8rem;min-width:120px;}
  .trust-text{font-size:.72rem;}
  .trust-icon{font-size:1.1rem;}
  .sec-wrap{margin:.75rem .75rem;border-radius:var(--radius);}
  section.cat-sec{padding:1.2rem .9rem .8rem;}
  .prod-grid{grid-template-columns:repeat(2,1fr);gap:.65rem;}
  .img-wrap{aspect-ratio:1/1;}
  .prod-body{padding:.6rem .6rem .3rem;}
  .prod-name{font-size:.78rem;}
  .prod-price{font-size:.9rem;}
  .cmd-btn{font-size:.76rem;padding:.65rem;}
  .badge{font-size:.6rem;padding:.16rem .45rem;}
  footer{padding:2rem .9rem 1.2rem;}
  .ft-grid{grid-template-columns:1fr;gap:1.5rem;}
  .ft-brand p{max-width:100%;}
  .panel{padding:1.4rem;border-radius:10px;}
  .f2{grid-template-columns:1fr;}
  .panel h2{font-size:1.15rem;}
  .add-wrap{padding:.5rem .75rem;}
}
@media(max-width:400px){
  .prod-grid{gap:.45rem;}
  .prod-name{font-size:.73rem;}
  .hero h1{font-size:1.5rem;}
  nav.cats a{font-size:.7rem;padding:.55rem .6rem;}
}



/* ══════════════════════════════════════════
   MOBILE RESPONSIVE — COMPLET
══════════════════════════════════════════ */

/* Fix input font-size ≥ 16px prevents iOS zoom */
input, select, textarea { font-size: 16px !important; }

/* Smooth touch scrolling everywhere */
* { -webkit-tap-highlight-color: transparent; }
body { -webkit-overflow-scrolling: touch; }

/* Nav cats horizontal scroll mobile */
nav.cats {
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
}
nav.cats a { scroll-snap-align: start; }

@media(max-width:768px){
  /* ── Header ── */
  .header-top{
    height:auto; padding:.55rem .75rem;
    flex-wrap:wrap; gap:.4rem;
  }
  .logo-text{ font-size:1.05rem; }
  .logo-img{ height:32px; }
  .hdr-actions{ gap:.35rem; }

  /* Search full width on mobile */
  .search-bar{
    order:3; width:100%; flex:none;
    max-width:100%; margin:0;
  }
  .search-bar input{ font-size:15px !important; }

  /* Compact action buttons */
  .wa-btn{ padding:.38rem .6rem; font-size:.72rem; }
  .wa-btn .wa-label{ display:none; }
  .admin-hdr-btn{ padding:.38rem .6rem; font-size:.72rem; }
  .user-btn{ padding:.38rem .6rem; font-size:.72rem; }

  /* User dropdown full width */
  .user-dd{
    right:0; left:auto; min-width:200px;
    max-width:92vw;
  }

  /* ── Navigation cats ── */
  nav.cats{ padding:0 .3rem; gap:.3rem; }
  nav.cats a{ padding:.5rem .7rem; font-size:.72rem; white-space:nowrap; }

  /* ── Hero ── */
  .hero{ padding:1.8rem .85rem 2rem; text-align:center; }
  .hero h1{ font-size:1.5rem; line-height:1.25; }
  .hero p{ font-size:.82rem; }
  .hero-badge{ font-size:.72rem; }
  .hero-btns{
    flex-direction:column; align-items:center;
    gap:.6rem; margin-top:1.2rem;
  }
  .btn-gold, .btn-outline{
    width:100%; max-width:280px;
    justify-content:center;
    padding:.75rem 1rem; font-size:.88rem;
  }

  /* ── Trust bar ── */
  .trust-bar{ gap:.5rem; padding:.75rem .5rem; }
  .trust-item{ min-width:120px; padding:.55rem .7rem; flex-shrink:0; }
  .trust-icon{ font-size:1.2rem; }
  .trust-text{ font-size:.67rem; }

  /* ── Category sections ── */
  .sec-wrap{ margin:.6rem .4rem; }
  section.cat-sec{ padding:.9rem .75rem .7rem; border-radius:12px; }
  .sec-title{ font-size:1rem; }

  /* ── Product grid — 2 cols ── */
  .prod-grid{
    grid-template-columns: repeat(2, 1fr);
    gap:.55rem;
  }

  /* ── Product card ── */
  .prod-card{ border-radius:10px; }
  .prod-card .img-wrap{ border-radius:8px 8px 0 0; }
  .prod-card .prod-body{ padding:.55rem .6rem .6rem; }
  .prod-card .prod-name{
    font-size:.75rem; line-height:1.3;
    -webkit-line-clamp:2;
    display:-webkit-box; -webkit-box-orient:vertical;
    overflow:hidden;
  }
  .prod-card .prod-price{ font-size:.88rem; }
  .prod-card .prod-old{ font-size:.68rem; }
  .prod-card .prod-cat{ font-size:.62rem; }

  /* ── Order button ── */
  .cmd-btn{
    font-size:.73rem; padding:.5rem .4rem;
    border-radius:7px; gap:.25rem;
  }

  /* ── Size & color chips ── */
  .sz-btn{ font-size:.6rem; padding:.12rem .32rem; }
  .cl-dot{ width:13px; height:13px; }

  /* ── Delete/edit buttons on card ── */
  .del-btn{ width:25px; height:25px; font-size:.65rem; top:6px; right:6px; }
  .edit-btn{
    width:25px; height:25px; font-size:.6rem;
    top:6px; right:36px;
  }

  /* ── Admin overlay panel ── */
  .panel{
    width:97vw; max-width:100%;
    max-height:90vh; padding:1.1rem 1rem;
    border-radius:16px 16px 0 0;
    overflow-y:auto; -webkit-overflow-scrolling:touch;
    position:fixed; bottom:0; left:50%;
    transform:translateX(-50%);
  }
  .panel h2{ font-size:1rem; margin-bottom:.8rem; }
  .f2{ grid-template-columns:1fr !important; gap:.6rem; }
  .fg label{ font-size:.75rem; }
  .fg input, .fg select, .fg textarea{
    padding:.6rem .75rem;
  }
  .p-actions{ flex-direction:column; gap:.5rem; }
  .p-cancel, .p-save{
    width:100%; padding:.7rem; font-size:.85rem;
  }

  /* ── Auth box ── */
  .auth-box{
    width:94vw; padding:1.3rem 1rem;
    max-height:90vh; overflow-y:auto;
  }
  .auth-box h2{ font-size:1.05rem; }

  /* ── Size chips in admin ── */
  .szc{ gap:.3rem; }
  .szck{ font-size:.7rem; padding:.22rem .5rem; }

  /* ── Badge selector ── */
  .badge-sel{ flex-wrap:wrap; gap:.3rem; }
  .bo{ font-size:.72rem; padding:.3rem .6rem; }

  /* ── Dropzone ── */
  .img-dropzone{ padding:1rem .75rem; }
  .img-upload-txt{ font-size:.75rem; }

  /* ── Image tabs ── */
  .img-tab{ font-size:.72rem; padding:.35rem .6rem; }

  /* ── Add product button ── */
  .add-wrap{ padding:.45rem .75rem; }
  .add-btn{ font-size:.74rem; padding:.5rem .75rem; }

  /* ── Footer ── */
  footer{ padding:2rem .85rem 1.5rem; }
}

/* ── Very small phones ── */
@media(max-width:360px){
  .prod-grid{ grid-template-columns:repeat(2,1fr); gap:.4rem; }
  .prod-card .prod-name{ font-size:.7rem; }
  .hero h1{ font-size:1.3rem; }
  .cmd-btn{ font-size:.68rem; }
}


/* ══════════════════════════════════════════
   MODAL À PROPOS — PREMIUM
══════════════════════════════════════════ */
.about-trigger{
  display:inline-flex;align-items:center;gap:.45rem;
  background:rgba(255,255,255,.10);
  border:1.5px solid rgba(255,255,255,.25);
  color:#fff;font-size:.82rem;font-weight:600;
  padding:.55rem 1.1rem;border-radius:50px;
  cursor:pointer;transition:all .2s;
  backdrop-filter:blur(8px);
  letter-spacing:.01em;
  font-family:'Plus Jakarta Sans',sans-serif;
  margin-top:.9rem;
}
.about-trigger:hover{
  background:rgba(255,255,255,.18);
  border-color:rgba(255,255,255,.5);
  transform:translateY(-1px);
}
.about-trigger .at-dot{
  width:7px;height:7px;border-radius:50%;
  background:var(--accent2);
  box-shadow:0 0 0 3px rgba(232,83,10,.25);
  animation:pulseDot 2s infinite;
  flex-shrink:0;
}
@keyframes pulseDot{
  0%,100%{box-shadow:0 0 0 3px rgba(232,83,10,.25);}
  50%{box-shadow:0 0 0 6px rgba(232,83,10,.08);}
}

/* Overlay */
.about-overlay{
  position:fixed;inset:0;z-index:4000;
  background:rgba(8,20,45,.65);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  display:flex;align-items:center;justify-content:center;
  padding:1rem;
  opacity:0;pointer-events:none;
  transition:opacity .3s ease;
}
.about-overlay.open{
  opacity:1;pointer-events:all;
}

/* Modal box */
.about-box{
  background:#fff;
  border-radius:20px;
  width:100%;max-width:560px;
  max-height:88vh;
  overflow-y:auto;
  position:relative;
  transform:translateY(24px) scale(.97);
  transition:transform .35s cubic-bezier(.22,.68,0,1.2);
  box-shadow:0 24px 80px rgba(8,20,45,.35);
}
.about-overlay.open .about-box{
  transform:translateY(0) scale(1);
}

/* Header gradient */
.about-head{
  background:linear-gradient(120deg,var(--primary) 0%,var(--primary2) 60%,#0d3572 100%);
  border-radius:20px 20px 0 0;
  padding:2rem 1.8rem 1.6rem;
  position:relative;overflow:hidden;
}
.about-head::before{
  content:'';position:absolute;inset:0;
  background:url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.04'%3E%3Ccircle cx='30' cy='30' r='28'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
.about-logo-row{
  display:flex;align-items:center;gap:.75rem;
  margin-bottom:1rem;position:relative;
}
.about-logo-badge{
  width:44px;height:44px;border-radius:12px;
  background:var(--accent);
  display:flex;align-items:center;justify-content:center;
  font-size:1.3rem;
  box-shadow:0 4px 16px rgba(232,83,10,.4);
}
.about-brand{
  font-family:'Syne',sans-serif;
  font-size:1.35rem;font-weight:800;color:#fff;
  line-height:1;
}
.about-brand span{color:var(--accent2);}
.about-tagline{
  font-size:.78rem;color:rgba(255,255,255,.65);
  margin-top:.15rem;
}
.about-head-desc{
  font-size:.88rem;color:rgba(255,255,255,.85);
  line-height:1.6;position:relative;
}

/* Close btn */
.about-close{
  position:absolute;top:1rem;right:1rem;
  width:34px;height:34px;border-radius:50%;
  background:rgba(255,255,255,.12);border:1.5px solid rgba(255,255,255,.2);
  color:#fff;font-size:1rem;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:all .2s;z-index:1;
  font-family:sans-serif;
}
.about-close:hover{background:rgba(255,255,255,.22);}

/* Body */
.about-body{padding:1.6rem 1.8rem 2rem;}

/* Sections */
.about-section{margin-bottom:1.4rem;}
.about-section:last-child{margin-bottom:0;}
.about-sec-title{
  font-size:.7rem;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--accent);
  margin-bottom:.75rem;display:flex;align-items:center;gap:.4rem;
}
.about-sec-title::after{
  content:'';flex:1;height:1px;
  background:linear-gradient(90deg,rgba(232,83,10,.2),transparent);
}

/* Feature cards */
.about-features{display:grid;grid-template-columns:1fr 1fr;gap:.6rem;}
.about-feat{
  background:#f8fafc;border:1px solid #e8eef6;
  border-radius:12px;padding:.85rem .9rem;
  display:flex;flex-direction:column;gap:.3rem;
}
.about-feat-icon{font-size:1.3rem;line-height:1;}
.about-feat-label{font-size:.75rem;font-weight:600;color:var(--primary);line-height:1.3;}
.about-feat-sub{font-size:.68rem;color:#64748b;line-height:1.4;}

/* Categories pills */
.about-cats{display:flex;flex-wrap:wrap;gap:.4rem;}
.about-cat{
  display:inline-flex;align-items:center;gap:.3rem;
  background:#f1f5f9;border:1px solid #e2e8f0;
  border-radius:50px;padding:.3rem .75rem;
  font-size:.72rem;font-weight:600;color:var(--primary);
  transition:all .15s;
}
.about-cat:hover{background:var(--primary);color:#fff;border-color:var(--primary);}

/* CTA WhatsApp */
.about-wa{
  background:linear-gradient(120deg,#0e2a5c,#1a3f7a);
  border-radius:14px;padding:1.1rem 1.2rem;
  display:flex;align-items:center;gap:.9rem;
}
.about-wa-icon{font-size:1.8rem;flex-shrink:0;}
.about-wa-text{flex:1;}
.about-wa-text b{display:block;font-size:.88rem;color:#fff;margin-bottom:.15rem;}
.about-wa-text span{font-size:.75rem;color:rgba(255,255,255,.65);}
.about-wa-btn{
  background:#25D366;color:#fff;border:none;
  border-radius:10px;padding:.55rem 1rem;
  font-size:.78rem;font-weight:700;cursor:pointer;
  white-space:nowrap;transition:all .15s;
  font-family:'Plus Jakarta Sans',sans-serif;
  text-decoration:none;display:inline-flex;
  align-items:center;gap:.3rem;
}
.about-wa-btn:hover{background:#1db954;transform:scale(1.03);}

/* Mobile */
@media(max-width:560px){
  .about-box{border-radius:20px 20px 0 0;margin-top:auto;max-height:92vh;}
  .about-overlay{align-items:flex-end;padding:0;}
  .about-head{padding:1.5rem 1.3rem 1.3rem;border-radius:20px 20px 0 0;}
  .about-body{padding:1.2rem 1.3rem 1.6rem;}
  .about-features{grid-template-columns:1fr 1fr;}
  .about-wa{flex-wrap:wrap;gap:.6rem;}
  .about-wa-btn{width:100%;justify-content:center;}
}

/* ══ Fiche produit (style Alibaba) ══ */
.prod-card{cursor:pointer;}
.pd-ov{display:none;position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:2100;align-items:center;justify-content:center;padding:1rem;backdrop-filter:blur(3px);}
.pd-ov.open{display:flex;}
.pd-box{position:relative;background:#fff;width:100%;max-width:980px;max-height:92vh;overflow-y:auto;border-radius:14px;box-shadow:0 24px 60px rgba(0,0,0,.25);animation:panelIn .22s ease;}
.pd-x{position:absolute;top:.8rem;right:.8rem;z-index:3;width:36px;height:36px;border:none;border-radius:50%;background:rgba(255,255,255,.92);box-shadow:0 2px 8px var(--shadow2);cursor:pointer;font-size:1rem;color:var(--text);}
.pd-main{display:grid;grid-template-columns:1.05fr 1fr;}
.pd-img{position:relative;background:var(--card-bg);min-height:320px;}
.pd-img img{width:100%;height:100%;object-fit:cover;display:block;}
.pd-off{position:absolute;top:1rem;left:1rem;background:var(--red);color:#fff;font-weight:800;font-size:.85rem;padding:.3rem .65rem;border-radius:6px;}
.pd-info{padding:1.6rem 1.6rem 0;display:flex;flex-direction:column;}
.pd-cat{font-size:.78rem;color:var(--muted);margin-bottom:.4rem;}
.pd-name{font-size:1.25rem;line-height:1.35;color:var(--text);margin-bottom:.9rem;padding-right:2rem;}
.pd-pricebox{display:flex;align-items:baseline;gap:.7rem;background:var(--navy2);padding:.9rem 1rem;border-radius:var(--radius);margin-bottom:1.1rem;}
.pd-price{font-size:1.7rem;font-weight:800;color:var(--accent);}
.pd-lbl{font-size:.82rem;font-weight:600;color:var(--text2);margin:.9rem 0 .45rem;}
.pd-info .cl-dot{width:30px;height:30px;}
.pd-info .sz-btn{padding:.45rem .9rem;font-size:.82rem;}
.pd-qty{display:inline-flex;align-items:center;border:1.5px solid var(--border);border-radius:8px;width:max-content;}
.pd-qty button{width:38px;height:38px;border:none;background:none;font-size:1.2rem;cursor:pointer;color:var(--primary);}
.pd-qty span{min-width:40px;text-align:center;font-weight:700;}
.pd-total{margin-top:1rem;display:flex;justify-content:space-between;font-size:.92rem;color:var(--text2);border-top:1px solid var(--border);padding-top:.9rem;}
.pd-total b{color:var(--text);font-size:1.1rem;}
.pd-bar{position:sticky;bottom:0;background:#fff;padding:1rem 0 1.2rem;margin-top:auto;}
.pd-wa{width:100%;padding:.95rem;border:none;border-radius:999px;background:var(--green);color:#fff;font-weight:800;font-size:1rem;cursor:pointer;}
.pd-wa:hover{filter:brightness(.93);}
.pd-sim{padding:1.2rem 1.6rem 1.6rem;border-top:1px solid var(--border);}
.pd-sim h3{font-size:.95rem;margin-bottom:.8rem;color:var(--text);}
.pd-sim-row{display:grid;grid-template-columns:repeat(4,1fr);gap:.8rem;}
.pd-sim-it{cursor:pointer;font-size:.76rem;display:flex;flex-direction:column;gap:.25rem;}
.pd-sim-it img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:8px;background:var(--card-bg);}
.pd-sim-it span{color:var(--text2);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.pd-sim-it b{color:var(--accent);}
@media(max-width:700px){
  .pd-ov{padding:0;align-items:flex-end;}
  .pd-box{max-height:94vh;border-radius:16px 16px 0 0;}
  .pd-main{grid-template-columns:1fr;}
  .pd-img{min-height:0;aspect-ratio:1;}
  .pd-info{padding:1.1rem 1rem 0;}
  .pd-sim{padding:1rem;}
  .pd-sim-row{grid-template-columns:repeat(2,1fr);}
}

/* ══ Téléphone : produits plus petits (3 par ligne) ══ */
@media(max-width:768px){
  .prod-grid{grid-template-columns:repeat(3,1fr);gap:.4rem;}
  .prod-card .prod-body{padding:.4rem .4rem .35rem;}
  .prod-card .prod-name{font-size:.66rem;margin-bottom:.25rem;line-height:1.3;}
  .prod-card .prod-price{font-size:.74rem;margin-bottom:.35rem;gap:.2rem;}
  .prod-card .old-p,.prod-card .prod-old{font-size:.58rem;}
  .prod-card .sz-row{gap:.2rem;margin-bottom:.3rem;}
  .prod-card .sz-btn{font-size:.56rem;padding:.1rem .28rem;}
  .prod-card .cmd-btn{font-size:.58rem;padding:.5rem .3rem;line-height:1.2;gap:.2rem;}
  .prod-card .badge{font-size:.5rem;padding:.12rem .3rem;}
  .prod-card .del-btn,.prod-card .edit-btn{width:22px;height:22px;font-size:.58rem;}
}
@media(max-width:360px){ .prod-grid{grid-template-columns:repeat(2,1fr);} }

/* ══ Collaboration : boutons WhatsApp + Email ══ */
.about-wa-btns{display:flex;gap:.5rem;flex-wrap:wrap;}
.about-wa-btn.mail{background:#fff;color:#0e2a5c;}
.about-wa-btn.mail:hover{background:#e8eefb;transform:scale(1.03);}
@media(max-width:560px){
  .about-wa-btns{width:100%;}
  .about-wa-btns .about-wa-btn{flex:1;}
}