/* ===== dz-store — متجر جزائري عصري ===== */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'Tajawal','Segoe UI',Tahoma,sans-serif;background:#fafafa;color:#222;line-height:1.7}
img{max-width:100%}

/* ---- Hero ---- */
.hero{display:flex;align-items:center;justify-content:space-between;gap:30px;
padding:70px 8% 80px;background:linear-gradient(135deg,#0f5132 0%,#146c43 55%,#198754 100%);
color:#fff;position:relative;overflow:hidden}
.hero-badge{position:absolute;top:22px;right:50%;transform:translateX(50%);
background:#ffc107;color:#3b2b00;font-weight:bold;font-size:14px;
padding:7px 20px;border-radius:30px;box-shadow:0 3px 10px rgba(0,0,0,.25)}
.hero-content{flex:1;min-width:280px}
.hero-content h1{font-size:clamp(28px,5vw,46px);font-weight:900;line-height:1.25;margin-top:26px}
.hero-sub{color:#ffd54f}
.hero-desc{margin:16px 0 22px;font-size:17px;color:#e9f5ee;max-width:520px}
.hero-price{display:flex;align-items:center;gap:14px;margin-bottom:26px}
.price-current{font-size:32px;font-weight:900;color:#ffd54f}
.price-old{font-size:19px;text-decoration:line-through;opacity:.65}
.btn-primary{display:inline-block;background:#ffc107;color:#1d1d1d;font-size:18px;font-weight:800;
padding:14px 42px;border-radius:40px;text-decoration:none;border:none;cursor:pointer;
box-shadow:0 6px 18px rgba(0,0,0,.28);transition:.2s}
.btn-primary:hover{transform:translateY(-2px);background:#ffca28}
.hero-image{flex:1;display:flex;justify-content:center}
.hero-image-placeholder{width:min(360px,100%);aspect-ratio:1;border-radius:24px;
background:rgba(255,255,255,.12);border:2px dashed rgba(255,255,255,.45);
display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;font-size:15px}

/* ---- Sections ---- */
.container{max-width:1080px;margin:0 auto;padding:0 20px}
.section-title{text-align:center;font-size:clamp(22px,3.5vw,30px);font-weight:900;
color:#14532d;margin-bottom:34px}
section{padding:64px 0}

/* ---- Features ---- */
.features{background:#fff}
.features-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px}
.feature-card{background:#f6fbf7;border:1px solid #dbeee2;border-radius:16px;padding:26px 20px;
text-align:center;transition:.2s}
.feature-card:hover{transform:translateY(-4px);box-shadow:0 8px 20px rgba(20,83,45,.1)}
.feature-icon{font-size:34px;margin-bottom:10px}
.feature-card h3{font-size:17px;font-weight:800;color:#14532d;margin-bottom:6px}
.feature-card p{font-size:14px;color:#555}

/* ---- Gallery ---- */
.gallery-grid{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:150px;gap:12px}
.gallery-item{border-radius:14px;background:#eef4f0;border:1px solid #d8e6dc;
display:flex;align-items:center;justify-content:center;flex-direction:column;gap:4px;
color:#7aa88c;font-size:14px}
.gallery-main{grid-column:span 2;grid-row:span 2;font-size:16px}

/* ---- Reviews ---- */
.reviews{background:#fff}
.reviews-slider{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:16px}
.review-card{background:#fbfdfc;border:1px solid #e3efe7;border-radius:16px;padding:22px}
.review-stars{color:#f5a623;font-size:17px;letter-spacing:2px;margin-bottom:10px}
.review-text{font-size:14.5px;color:#444;margin-bottom:16px}
.review-author{display:flex;align-items:center;gap:10px}
.review-avatar{width:40px;height:40px;border-radius:50%;background:#198754;color:#fff;
font-weight:800;display:flex;align-items:center;justify-content:center}
.review-author strong{display:block;font-size:14px}
.review-author span{font-size:12px;color:#888}

/* ---- Order form ---- */
.order{background:linear-gradient(180deg,#fafafa,#eef6f1)}
.order-subtitle{text-align:center;color:#666;margin:-22px 0 28px;font-size:15px}
.order-form{max-width:520px;margin:0 auto;background:#fff;border-radius:18px;padding:30px;
box-shadow:0 10px 30px rgba(0,0,0,.08)}
.form-group{margin-bottom:16px}
.form-group label{display:block;font-weight:700;font-size:14px;margin-bottom:6px;color:#14532d}
.form-group input,.form-group select{width:100%;padding:12px 14px;border:1.5px solid #d5e3da;
border-radius:10px;font-family:inherit;font-size:15px;background:#fcfefd;transition:.2s}
.form-group input:focus,.form-group select:focus{outline:none;border-color:#198754;
box-shadow:0 0 0 3px rgba(25,135,84,.12)}
.btn-submit{width:100%;margin-top:8px}

/* ---- Footer ---- */
.footer{background:#0f2e1d;color:#bcd6c6;text-align:center;padding:26px 16px;font-size:14px}
.footer strong{color:#fff}

/* ---- Toast ---- */
.toast{position:fixed;bottom:24px;right:50%;transform:translateX(50%) translateY(120px);
background:#fff;border-radius:14px;padding:14px 22px;display:flex;align-items:center;gap:12px;
box-shadow:0 10px 30px rgba(0,0,0,.22);opacity:0;transition:.35s;z-index:99;max-width:92vw}
.toast.show{transform:translateX(50%) translateY(0);opacity:1}
.toast-icon{font-size:26px}
.toast-content h3{font-size:15px;color:#14532d}
.toast-content p{font-size:13px;color:#666}

@media(max-width:820px){
  .hero{flex-direction:column-reverse;text-align:center;padding:56px 6% 60px}
  .hero-price{justify-content:center}
  .hero-desc{margin-inline:auto}
  .gallery-grid{grid-template-columns:repeat(2,1fr)}
  .gallery-main{grid-column:span 2}
}