/*
Theme Name:  Mol Taysir wal-Baraka
Theme URI:   #
Description: Catalogue de tapis bilingue (FR/AR), 4 thèmes visuels, WhatsApp par produit, filtres par catégorie.
Version:     1.0
Author:      Mol Taysir wal-Baraka
Text Domain: tapis
*/

/* =========================================================
   VARIABLES & THÈMES
   ========================================================= */
:root {
  --bg:#f7f4ef; --ink:#2c2620; --muted:#8d8478; --accent:#7a1d3a;
  --accent2:#b08d57; --line:#e7dfd3; --card:#fffdf9;
  --header:rgba(247,244,239,.84); --footer:#2a1118; --footer-ink:#f3e7da;
}
[data-theme="sable"] {
  --bg:#efe7da; --ink:#38301f; --muted:#8a7c63; --accent:#9c5b34;
  --accent2:#c2a06a; --line:#ddd1bd; --card:#fbf6ec;
  --header:rgba(239,231,218,.86); --footer:#2f2012; --footer-ink:#f1e7d6;
}
[data-theme="bordeaux"] {
  --bg:#faf5f4; --ink:#2a1d22; --muted:#94808a; --accent:#7a1d3a;
  --accent2:#b08d57; --line:#ecdde1; --card:#fffafb;
  --header:rgba(250,245,244,.86); --footer:#4a0f23; --footer-ink:#f6e6ea;
}
[data-theme="nuit"] {
  --bg:#15120e; --ink:#ece4d8; --muted:#9a9189; --accent:#d8b87a;
  --accent2:#c98aa0; --line:#2b2620; --card:#1e1a15;
  --header:rgba(21,18,14,.82); --footer:#0f0c09; --footer-ink:#e8dccb;
}

/* =========================================================
   RESET & BASE
   ========================================================= */
*, *::before, *::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
body {
  background:var(--bg); color:var(--ink);
  font-family:'Jost',sans-serif; font-weight:300; line-height:1.65;
  -webkit-font-smoothing:antialiased;
  transition:background .4s, color .4s;
}
html[dir="rtl"] body { font-family:'Tajawal',sans-serif; }
h1,h2,h3,.display { font-family:'Cormorant Garamond',serif; font-weight:500; }
html[dir="rtl"] h1, html[dir="rtl"] h2, html[dir="rtl"] h3 { font-family:'El Messiri',serif; }
a { color:inherit; text-decoration:none; }
img { display:block; max-width:100%; }
/* WP admin bar compensation */
.admin-bar .site-header { top:32px; }
@media screen and (max-width:782px) { .admin-bar .site-header { top:46px; } }

/* =========================================================
   HEADER
   ========================================================= */
.site-header {
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  gap:14px; padding:14px clamp(18px,5vw,60px);
  background:var(--header); backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
  transition:background .4s, border-color .4s;
}
.brand { display:flex; align-items:center; gap:12px; min-width:0; text-decoration:none; }
.brand img { height:40px; width:auto; border-radius:7px; }
.brand-names { display:flex; flex-direction:column; line-height:1.12; }
.brand-ar { font-family:'El Messiri',serif; font-weight:600; font-size:1.02rem; color:var(--accent); white-space:nowrap; }
.brand-lt { font-family:'Cormorant Garamond',serif; font-size:.74rem; letter-spacing:.22em; text-transform:uppercase; color:var(--muted); }
.controls { display:flex; align-items:center; gap:14px; }
/* Theme swatches */
.themes { display:flex; gap:7px; align-items:center; }
.swatch {
  width:20px; height:20px; border-radius:50%; cursor:pointer;
  border:2px solid transparent; padding:0;
  box-shadow:inset 0 0 0 1px rgba(120,90,60,.25);
  transition:.18s; outline:none;
}
.swatch:hover { transform:scale(1.12); }
.swatch.on { border-color:var(--accent); box-shadow:inset 0 0 0 1px rgba(120,90,60,.25), 0 0 0 2px var(--bg); }
/* Language toggle */
.lang-toggle {
  display:inline-flex; align-items:center;
  border:1px solid var(--accent); border-radius:999px;
  padding:3px; background:transparent; cursor:pointer;
}
.lang-toggle span {
  font-size:.72rem; font-weight:500; letter-spacing:.06em;
  padding:4px 10px; border-radius:999px; color:var(--accent); transition:.22s;
}
.lang-toggle span.on { background:var(--accent); color:var(--bg); }
html[dir="rtl"] .lang-toggle span { font-family:'Tajawal',sans-serif; }

/* =========================================================
   HERO
   ========================================================= */
.hero {
  position:relative; min-height:clamp(420px,66vh,600px);
  display:flex; align-items:flex-end; overflow:hidden;
}
.hero-bg {
  position:absolute; inset:0;
  background-size:cover; background-position:center;
  transform:scale(1.05); animation:kb 18s ease-out forwards;
}
@keyframes kb { to { transform:scale(1.13); } }
.hero::after {
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(20,12,8,.05) 0%, rgba(20,12,8,.06) 40%, rgba(20,12,8,.68) 100%);
}
.hero-inner { position:relative; z-index:2; padding:clamp(28px,5vw,70px); max-width:720px; color:#fff; }
.hero-eyebrow {
  font-size:.76rem; letter-spacing:.4em; text-transform:uppercase;
  color:#f0e4cf; margin-bottom:16px;
  opacity:0; animation:rise .9s .15s forwards;
}
.hero-inner h1 {
  font-size:clamp(2.6rem,6.5vw,4.8rem); line-height:1.02;
  opacity:0; animation:rise .9s .3s forwards;
}
.hero-inner p {
  margin-top:18px; font-size:clamp(1rem,1.5vw,1.16rem);
  max-width:480px; color:rgba(255,255,255,.92);
  opacity:0; animation:rise .9s .45s forwards;
}
.hero-cta { margin-top:28px; opacity:0; animation:rise .9s .6s forwards; }
@keyframes rise { from { opacity:0; transform:translateY(20px); } to { opacity:1; transform:translateY(0); } }
.btn-hero {
  display:inline-flex; align-items:center; gap:8px;
  font-size:.78rem; font-weight:500; letter-spacing:.16em; text-transform:uppercase;
  padding:14px 30px; border:1px solid rgba(255,255,255,.7); color:#fff;
  transition:.25s;
}
.btn-hero:hover { background:#fff; color:#2c2620; }
html[dir="rtl"] .btn-hero { font-family:'Tajawal',sans-serif; letter-spacing:.04em; text-transform:none; }

/* =========================================================
   SECTIONS
   ========================================================= */
.site-main { padding:clamp(50px,8vw,100px) clamp(18px,5vw,60px); }
.section-head { text-align:center; max-width:620px; margin:0 auto clamp(36px,5vw,60px); }
.section-kicker {
  font-size:.74rem; letter-spacing:.36em; text-transform:uppercase;
  color:var(--accent2); display:inline-block; margin-bottom:14px;
}
.section-head h2 { font-size:clamp(2.1rem,4.4vw,3.2rem); color:var(--accent); }
.section-rule { width:50px; height:1px; background:var(--accent2); margin:18px auto 0; opacity:.7; }
.section-head p { margin-top:16px; color:var(--muted); }

/* =========================================================
   FILTRES
   ========================================================= */
.filters, .subfilters {
  max-width:1100px; margin:0 auto;
  display:flex; flex-wrap:wrap; gap:9px; justify-content:center;
}
.subfilters { margin-top:11px; }
.cat-note { max-width:680px; margin:16px auto 0; text-align:center; color:var(--muted); font-size:.9rem; font-style:italic; }
.pill {
  cursor:pointer; border:1px solid var(--line); background:transparent;
  color:var(--ink); font-family:inherit; font-weight:400;
  font-size:.82rem; letter-spacing:.02em;
  padding:8px 17px; border-radius:999px; transition:.2s; line-height:1;
}
.pill:hover { border-color:var(--accent); color:var(--accent); }
.pill.on { background:var(--accent); color:var(--bg); border-color:var(--accent); }
.pill.sub { padding:6px 13px; font-size:.78rem; }
.pill.sub.on { background:var(--accent2); color:#332507; border-color:var(--accent2); }
html[dir="rtl"] .pill { font-family:'Tajawal',sans-serif; }

/* =========================================================
   GRID PRODUITS
   ========================================================= */
.products-grid {
  max-width:1180px; margin:clamp(30px,3.5vw,46px) auto 0;
  display:grid; grid-template-columns:repeat(auto-fill,minmax(275px,1fr));
  gap:clamp(22px,2.6vw,40px);
}
.no-products { grid-column:1/-1; text-align:center; color:var(--muted); padding:50px 0; }

/* =========================================================
   CARTES PRODUIT
   ========================================================= */
.product-card {
  background:var(--card); border:1px solid var(--line);
  overflow:hidden; display:flex; flex-direction:column;
  opacity:0; transform:translateY(24px);
  transition:transform .6s cubic-bezier(.2,.7,.2,1), opacity .6s, border-color .3s;
}
.product-card.visible { opacity:1; transform:translateY(0); }
.product-card:hover { border-color:var(--accent2); }
.card-media { position:relative; aspect-ratio:3/4; overflow:hidden; background:var(--line); }
.card-media img { width:100%; height:100%; object-fit:cover; transition:transform .8s cubic-bezier(.2,.7,.2,1); }
.product-card:hover .card-media img { transform:scale(1.06); }
.card-body { padding:20px 20px 22px; display:flex; flex-direction:column; flex:1; }
.card-meta {
  display:flex; align-items:center; gap:10px;
  font-size:.68rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--muted); margin-bottom:9px;
}
.card-meta .ref { color:var(--accent); }
.card-meta .dot { width:3px; height:3px; border-radius:50%; background:var(--accent2); flex:none; }
.card-body h3 { font-size:1.55rem; color:var(--ink); line-height:1.12; }
.card-desc { margin-top:9px; color:var(--muted); font-size:.9rem; flex:1; line-height:1.5; }
.card-wa {
  margin-top:20px; display:inline-flex; align-items:center; justify-content:center;
  gap:9px; background:transparent; color:var(--ink);
  border:1px solid var(--ink); font-weight:400;
  font-size:.78rem; letter-spacing:.06em; text-transform:uppercase;
  padding:13px 16px; transition:.25s; cursor:pointer; font-family:inherit;
  text-decoration:none;
}
.card-wa:hover { background:#1f9d55; border-color:#1f9d55; color:#fff; }
.card-wa svg { width:17px; height:17px; flex:none; }
html[dir="rtl"] .card-wa { font-family:'Tajawal',sans-serif; letter-spacing:.02em; text-transform:none; font-size:.88rem; }

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer {
  background:var(--footer); color:var(--footer-ink);
  padding:clamp(44px,6vw,72px) clamp(18px,5vw,60px) 32px;
  transition:background .4s;
}
.footer-grid {
  max-width:1080px; margin:0 auto;
  display:flex; flex-wrap:wrap; gap:34px;
  justify-content:space-between; align-items:center;
}
.footer-brand { display:flex; align-items:center; gap:14px; }
.footer-brand img { height:60px; border-radius:9px; background:#fff; padding:4px; }
.footer-brand-ar { font-family:'El Messiri',serif; font-size:1.25rem; font-weight:600; color:#fff; }
.footer-brand-lt { font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; opacity:.7; }
.footer-contact .lbl {
  font-size:.7rem; letter-spacing:.3em; text-transform:uppercase; opacity:.7; margin-bottom:9px;
}
.footer-contact a.tel {
  display:inline-flex; align-items:center; gap:9px;
  font-size:1.15rem; color:#fff; direction:ltr; text-decoration:none;
}
.footer-copy {
  max-width:1080px; margin:36px auto 0; padding-top:22px;
  border-top:1px solid rgba(255,255,255,.13);
  font-size:.78rem; opacity:.6; text-align:center;
}
html[dir="rtl"] .footer-contact, html[dir="rtl"] .footer-copy { font-family:'Tajawal',sans-serif; }

/* =========================================================
   FAB WHATSAPP
   ========================================================= */
.fab-wa {
  position:fixed; inset-block-end:22px; inset-inline-end:22px; z-index:60;
  width:56px; height:56px; border-radius:50%;
  background:#1f9d55; display:grid; place-items:center;
  box-shadow:0 12px 28px -8px rgba(31,157,85,.7);
  transition:transform .2s; text-decoration:none;
}
.fab-wa:hover { transform:scale(1.08); }
.fab-wa svg { width:28px; height:28px; }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media(max-width:900px) { .hero { min-height:clamp(360px,58vh,520px); } }
@media(max-width:620px) {
  .site-header { padding:11px 16px; gap:10px; }
  .brand img { height:34px; }
  .brand-lt, .nav-links { display:none; }
  .brand-ar { font-size:.95rem; }
  .controls { gap:10px; }
  .swatch { width:18px; height:18px; }
  .filters, .subfilters { gap:8px; }
  .pill { padding:7px 13px; font-size:.78rem; }
  .pill.sub { padding:6px 11px; font-size:.74rem; }
}
@media(max-width:600px) {
  .products-grid { grid-template-columns:1fr; max-width:420px; }
}
@media(max-width:480px) {
  .site-main { padding:42px 16px; }
  .hero-inner { padding:26px 18px; }
  .hero-inner h1 { font-size:clamp(2.2rem,9vw,2.9rem); }
  .fab-wa { width:50px; height:50px; inset-block-end:16px; inset-inline-end:16px; }
  .fab-wa svg { width:25px; height:25px; }
  .footer-grid { flex-direction:column; align-items:flex-start; gap:22px; }
}

/* =========================================================
   CARD v2 — overlay + coloris dots + cta button
   ========================================================= */
.card-media { position:relative; }
.card-overlay {
  position:absolute; inset:0;
  background:rgba(20,12,8,.42);
  display:flex; align-items:center; justify-content:center;
  opacity:0; transition:opacity .3s;
}
.product-card:hover .card-overlay,
.product-card:focus .card-overlay { opacity:1; }
.card-overlay span {
  color:#fff; font-size:.82rem; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase; border:1px solid rgba(255,255,255,.8);
  padding:10px 20px;
}
html[dir="rtl"] .card-overlay span { font-family:'Tajawal',sans-serif; letter-spacing:.02em; text-transform:none; }
.card-coloris-dots { display:flex; gap:6px; flex-wrap:wrap; margin:10px 0 0; }
.coloris-dot {
  width:22px; height:22px; border-radius:50%;
  background:#e0d8cc center/cover; border:2px solid var(--line);
  cursor:pointer; transition:.18s; flex:none;
}
.coloris-dot:hover { border-color:var(--accent); transform:scale(1.12); }
.card-cta {
  margin-top:14px; width:100%; background:transparent;
  border:1px solid var(--ink); color:var(--ink);
  font-family:inherit; font-size:.78rem; font-weight:400;
  letter-spacing:.08em; text-transform:uppercase;
  padding:12px 16px; cursor:pointer; transition:.25s;
}
.card-cta:hover { background:var(--accent); border-color:var(--accent); color:var(--bg); }
html[dir="rtl"] .card-cta { font-family:'Tajawal',sans-serif; letter-spacing:.02em; text-transform:none; font-size:.9rem; }
.no-img-placeholder {
  width:100%; height:100%; display:grid; place-items:center;
  background:var(--line); color:var(--muted); font-size:.85rem;
}

/* =========================================================
   MODAL
   ========================================================= */
.modal-bg {
  position:fixed; inset:0; z-index:200;
  background:rgba(15,10,8,.72); backdrop-filter:blur(6px);
  display:none; align-items:flex-start; justify-content:center;
  overflow-y:auto; padding:clamp(14px,4vw,40px) clamp(10px,3vw,24px);
}
.modal-bg.open { display:flex; }
.modal-box {
  background:var(--card); width:100%; max-width:940px;
  border:1px solid var(--line); position:relative;
  margin:auto; animation:modalIn .28s ease;
}
@keyframes modalIn { from{opacity:0;transform:translateY(22px)} to{opacity:1;transform:translateY(0)} }
.modal-close {
  position:absolute; top:14px; inset-inline-end:14px; z-index:10;
  width:36px; height:36px; border-radius:50%; border:1px solid var(--line);
  background:var(--card); color:var(--ink); font-size:1rem;
  cursor:pointer; display:grid; place-items:center; transition:.2s;
}
.modal-close:hover { background:var(--accent); color:#fff; border-color:var(--accent); }
.modal-layout {
  display:grid; grid-template-columns:1fr 1fr;
  gap:0; min-height:500px;
}
.modal-gallery { position:sticky; top:0; }
.modal-img-wrap { aspect-ratio:3/4; overflow:hidden; background:var(--line); }
.modal-img-wrap img { width:100%; height:100%; object-fit:cover; transition:opacity .3s; }
.modal-thumbs { display:flex; flex-wrap:wrap; gap:6px; padding:10px; background:var(--bg); }
.modal-thumb {
  width:56px; height:56px; object-fit:cover; cursor:pointer;
  border:2px solid transparent; transition:.18s; opacity:.75;
}
.modal-thumb:hover, .modal-thumb.active { border-color:var(--accent); opacity:1; }
.modal-info { padding:clamp(20px,3vw,36px); display:flex; flex-direction:column; gap:0; overflow-y:auto; }
.modal-meta-bar { font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); margin-bottom:8px; }
.modal-title { font-size:clamp(1.8rem,3.5vw,2.6rem); color:var(--ink); line-height:1.1; margin-bottom:10px; }
.modal-desc { color:var(--muted); font-size:.95rem; line-height:1.6; margin-bottom:18px; }
.modal-section { margin-bottom:22px; }
.modal-label { font-size:.74rem; letter-spacing:.18em; text-transform:uppercase; color:var(--accent2); margin-bottom:10px; }
html[dir="rtl"] .modal-label { font-family:'Tajawal',sans-serif; letter-spacing:.04em; text-transform:none; }
/* Coloris choices */
.modal-coloris-list { display:flex; flex-wrap:wrap; gap:8px; }
.coloris-btn {
  border:1px solid var(--line); background:transparent; font-family:inherit;
  font-size:.8rem; padding:7px 14px; border-radius:999px; cursor:pointer;
  display:flex; align-items:center; gap:7px; transition:.2s; color:var(--ink);
}
.coloris-btn:hover { border-color:var(--accent); }
.coloris-btn.active { border-color:var(--accent); background:var(--accent); color:var(--bg); }
.coloris-btn .swatch-mini {
  width:18px; height:18px; border-radius:50%; border:1px solid rgba(0,0,0,.12);
  background:center/cover; flex:none;
}
html[dir="rtl"] .coloris-btn { font-family:'Tajawal',sans-serif; }
/* Dimensions */
.dim-row { display:flex; align-items:center; gap:10px; margin-bottom:12px; }
.dim-field { flex:1; }
.dim-field label { display:block; font-size:.75rem; letter-spacing:.08em; color:var(--muted); margin-bottom:5px; }
.dim-field input {
  width:100%; padding:10px 12px; border:1px solid var(--line);
  background:var(--bg); color:var(--ink); font-family:inherit; font-size:1rem;
  border-radius:0; transition:border-color .2s;
}
.dim-field input:focus { outline:none; border-color:var(--accent); }
.dim-sep { color:var(--muted); font-size:1.2rem; flex:none; margin-top:20px; }
.prix-result {
  background:var(--accent); color:#fff;
  padding:14px 18px; font-family:'Cormorant Garamond',serif; font-size:1.6rem;
  line-height:1.2; margin-bottom:8px; display:none;
}
html[dir="rtl"] .prix-result { font-family:'El Messiri',serif; }
.prix-note { font-size:.78rem; color:var(--muted); font-style:italic; margin-bottom:20px; }
/* WA button in modal */
.modal-wa-btn {
  display:flex; align-items:center; justify-content:center; gap:10px;
  background:#1f9d55; color:#fff; border:none; width:100%;
  font-family:inherit; font-size:.92rem; font-weight:500; letter-spacing:.06em;
  text-transform:uppercase; padding:16px; cursor:pointer; transition:.25s; margin-top:auto;
}
.modal-wa-btn:hover { background:#178a45; }
html[dir="rtl"] .modal-wa-btn { font-family:'Tajawal',sans-serif; letter-spacing:.02em; text-transform:none; font-size:1rem; }

@media(max-width:700px) {
  .modal-layout { grid-template-columns:1fr; }
  .modal-gallery { position:static; }
  .modal-img-wrap { aspect-ratio:4/3; }
  .modal-info { padding:18px; }
  .modal-title { font-size:1.6rem; }
}

/* =========================================================
   Dimension select dropdown
   ========================================================= */
.dim-select {
  width:100%; padding:12px 14px; font-family:inherit; font-size:1rem;
  border:1px solid var(--line); background:var(--bg); color:var(--ink);
  border-radius:0; cursor:pointer; appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238d8478' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:calc(100% - 14px) center;
  transition:border-color .2s; margin-bottom:12px;
}
html[dir="rtl"] .dim-select {
  background-position:14px center; font-family:'Tajawal',sans-serif;
}
.dim-select:focus { outline:none; border-color:var(--accent); }

/* =========================================================
   CARD SLIDESHOW — hover arrows + auto-slide
   ========================================================= */
.card-media { position:relative; overflow:hidden; }

/* Slides wrapper */
.card-slides { position:absolute; inset:0; display:flex; transition:none; }
.card-slide  { min-width:100%; height:100%; flex:none; background:center/cover no-repeat; }

/* Arrow buttons */
.card-arrow {
  position:absolute; top:50%; transform:translateY(-50%);
  z-index:5; width:34px; height:34px; border-radius:50%;
  background:rgba(255,255,255,.82); border:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  opacity:0; transition:opacity .2s, background .2s;
  box-shadow:0 2px 8px rgba(0,0,0,.18);
}
.card-arrow svg { width:14px; height:14px; stroke:var(--ink); stroke-width:2; fill:none; }
.card-arrow.prev { inset-inline-start:8px; }
.card-arrow.next { inset-inline-end:8px; }
.product-card:hover .card-arrow,
.product-card:focus-within .card-arrow { opacity:1; }
.card-arrow:hover { background:rgba(255,255,255,1); }

/* Dots indicator */
.card-dots {
  position:absolute; bottom:10px; left:50%; transform:translateX(-50%);
  display:flex; gap:5px; z-index:4;
  opacity:0; transition:opacity .2s;
}
.product-card:hover .card-dots { opacity:1; }
.card-dot-ind {
  width:6px; height:6px; border-radius:50%;
  background:rgba(255,255,255,.5); border:none; padding:0; cursor:pointer; transition:.2s;
}
.card-dot-ind.on { background:#fff; transform:scale(1.2); }

/* Keep overlay on top */
.card-overlay { z-index:3; }

/* =========================================================
   VIDEO — modal player
   ========================================================= */
.modal-img-wrap { position:relative; }
#modalMainVideo {
  width:100%; height:100%; object-fit:cover;
  background:#000; display:none;
  position:absolute; inset:0;
}