/* ===== Base ===== */
:root{
  --wood:#6b4a32;
  --wood-dark:#4e3422;
  --gold:#c9a227;
  --bg:#faf7f2;
  --ink:#2a2118;
  --muted:#7a6f63;
  --line:#e7ddcf;
  --green:#25d366;
  --green-dark:#1da851;
  --radius:14px;
  --shadow:0 6px 24px rgba(60,40,20,.10);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:'Segoe UI',system-ui,-apple-system,'Helvetica Neue',Arial,'Noto Naskh Arabic',sans-serif;
  color:var(--ink);
  background:var(--bg);
  line-height:1.6;
}
img{max-width:100%;display:block}
.container{width:100%;max-width:1080px;margin:0 auto;padding:0 18px}
a{color:inherit}

/* ===== Topbar ===== */
.topbar{background:var(--wood-dark);color:#fff;position:sticky;top:0;z-index:50}
.topbar__inner{display:flex;align-items:center;justify-content:space-between;height:56px}
.brand{font-size:1.25rem;font-weight:700;letter-spacing:.5px}
.brand__dot{color:var(--gold)}
.topbar__right{display:flex;align-items:center;gap:12px}
.badge-cod{font-size:.8rem;background:rgba(255,255,255,.12);padding:5px 10px;border-radius:20px;white-space:nowrap}
.lang-btn{background:var(--gold);color:#000;border:0;padding:6px 12px;border-radius:20px;font-weight:700;cursor:pointer;font-size:.85rem}
.lang-btn:hover{filter:brightness(1.05)}

/* ===== Hero ===== */
.hero{padding:26px 0 10px}
.hero__grid{display:grid;grid-template-columns:1fr 1fr;gap:34px;align-items:start}

.gallery__main{position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)}
.gallery__main img{width:100%;aspect-ratio:1/1;object-fit:contain;padding:14px}
.flag-bestseller{position:absolute;top:12px;left:12px;background:var(--gold);color:#000;font-weight:700;font-size:.8rem;padding:5px 10px;border-radius:8px}
.gallery__thumbs{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}
.thumb{flex:1 1 calc(16.666% - 9px);min-width:56px;background:#fff;border:1px solid var(--line);border-radius:10px;padding:4px;cursor:pointer;transition:.15s}
.thumb img{aspect-ratio:1/1;object-fit:contain}
.thumb.is-active{border-color:var(--wood);box-shadow:0 0 0 2px var(--wood)}

.product__title{font-size:1.55rem;line-height:1.3;margin:0 0 10px}
.rating{display:flex;align-items:center;gap:8px;margin-bottom:14px}
.stars{color:var(--gold);letter-spacing:2px}
.rating__text{color:var(--muted);font-size:.9rem}
.features{list-style:none;padding:0;margin:0 0 18px}
.features li{padding:7px 0;border-bottom:1px dashed var(--line);font-size:1rem}

.price-box{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:16px}
.price{font-size:2.2rem;font-weight:800;color:var(--wood-dark)}
.price__cur{font-size:1.1rem}
.price-old{color:var(--muted);text-decoration:line-through;font-size:1.1rem}
.price-save{background:#ffe9e6;color:#c0392b;font-weight:700;font-size:.8rem;padding:5px 10px;border-radius:8px}

.trust{display:flex;flex-direction:column;gap:6px;color:var(--muted);font-size:.92rem;margin-bottom:20px}

/* ===== Buttons ===== */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:12px;font-weight:700;cursor:pointer;text-decoration:none;transition:.15s;font-size:1rem}
.btn--big{padding:15px 26px;font-size:1.1rem;width:100%}
.btn--primary{background:var(--wood);color:#fff}
.btn--primary:hover{background:var(--wood-dark)}
.btn--whatsapp{background:var(--green);color:#fff}
.btn--whatsapp:hover{background:var(--green-dark)}
.btn--whatsapp::before{content:"";display:inline-block;width:22px;height:22px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M12.04 2C6.58 2 2.13 6.45 2.13 11.91c0 1.75.46 3.45 1.32 4.95L2 22l5.25-1.38a9.9 9.9 0 0 0 4.79 1.22h.01c5.46 0 9.91-4.45 9.91-9.91S17.5 2 12.04 2zm5.8 14.18c-.24.68-1.4 1.3-1.94 1.34-.5.04-1.13.27-3.8-.8-3.2-1.26-5.23-4.5-5.39-4.71-.16-.21-1.29-1.72-1.29-3.28 0-1.56.82-2.33 1.11-2.65.29-.32.63-.4.84-.4.21 0 .42.002.6.01.19.008.45-.07.7.54.24.61.84 2.1.91 2.25.07.15.12.32.02.53-.1.21-.15.32-.3.5-.15.18-.32.39-.45.52-.15.15-.3.31-.13.6.17.29.77 1.27 1.65 2.06 1.14 1.02 2.1 1.34 2.4 1.49.3.15.47.13.64-.08.17-.21.74-.86.94-1.16.2-.3.4-.25.67-.15.27.1 1.72.81 2.01.96.29.15.49.22.56.34.07.12.07.69-.17 1.37z'/%3E%3C/svg%3E") center/contain no-repeat}

/* ===== Détails ===== */
.details{padding:44px 0}
.details__title{text-align:center;font-size:1.7rem;margin:0 0 28px}
.details__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.dcard{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:22px 20px;box-shadow:var(--shadow)}
.dcard__ico{font-size:2rem;display:block;margin-bottom:8px}
.dcard h3{margin:0 0 8px;font-size:1.1rem;color:var(--wood-dark)}
.dcard p{margin:0;color:var(--muted);font-size:.95rem}
.details__note{margin:24px auto 0;max-width:760px;text-align:center;background:#fff7e6;border:1px dashed var(--gold);border-radius:12px;padding:16px 18px;font-size:.92rem;color:#7a5c12}

/* ===== Order form ===== */
.order{background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:40px 0;margin-top:30px}
.order__title{font-size:1.6rem;margin:0 0 6px;text-align:center}
.order__sub{color:var(--muted);text-align:center;max-width:560px;margin:0 auto 26px}
.order__form{display:grid;grid-template-columns:1fr 1fr;gap:16px;max-width:620px;margin:0 auto}
.field{display:flex;flex-direction:column;gap:6px}
.field--full{grid-column:1 / -1}
.field label{font-weight:600;font-size:.92rem}
.field input,.field select{padding:13px;border:1px solid var(--line);border-radius:10px;font-size:1rem;background:#fff;font-family:inherit}
.field input:focus,.field select:focus{outline:none;border-color:var(--wood);box-shadow:0 0 0 3px rgba(107,74,50,.12)}
.field input.invalid{border-color:#c0392b;box-shadow:0 0 0 3px rgba(192,57,43,.12)}
.field--summary{grid-column:1 / -1;flex-direction:row;align-items:center;justify-content:space-between;background:var(--bg);border:1px dashed var(--line);border-radius:10px;padding:14px}
.field--summary strong{font-size:1.4rem;color:var(--wood-dark)}
.form-note{grid-column:1 / -1;text-align:center;color:var(--muted);font-size:.85rem;margin:0}

/* ===== Why ===== */
.why{padding:42px 0}
.why__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;text-align:center}
.why__item{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:24px 16px}
.why__ico{font-size:2rem}
.why__item h3{margin:10px 0 4px;font-size:1.05rem}
.why__item p{margin:0;color:var(--muted);font-size:.92rem}

/* ===== Footer ===== */
.footer{background:var(--wood-dark);color:#fff;text-align:center;padding:20px 0;font-size:.9rem}

/* ===== FAB ===== */
.fab{position:fixed;bottom:18px;right:18px;background:var(--green);color:#fff;padding:14px 22px;border-radius:30px;font-weight:700;box-shadow:0 6px 20px rgba(0,0,0,.25);z-index:60;text-decoration:none;display:none}
.fab:hover{background:var(--green-dark)}

/* ===== RTL (Arabe) ===== */
html[dir="rtl"] .topbar__inner{flex-direction:row-reverse}
html[dir="rtl"] .flag-bestseller{left:auto;right:12px}
html[dir="rtl"] .fab{right:auto;left:18px}
html[dir="rtl"] body{font-family:'Noto Naskh Arabic','Segoe UI',Tahoma,sans-serif}

/* ===== Responsive ===== */
@media (max-width:780px){
  .hero__grid{grid-template-columns:1fr;gap:22px}
  .order__form{grid-template-columns:1fr}
  .why__grid{grid-template-columns:1fr}
  .details__grid{grid-template-columns:1fr}
  .product__title{font-size:1.3rem}
  .badge-cod{display:none}
  .fab{display:inline-flex}
}