/* =====================================================================
   HAMDOUNE — Derb Ghalef  |  Styles responsive / mobile
   ===================================================================== */

/* ---- Large desktops ---- */
@media (max-width:1200px){
  .product-grid{grid-template-columns:repeat(3,1fr)}
  .tech-grid{grid-template-columns:repeat(3,1fr)}
}

/* ---- Tablet ( <= 1024px ) : hamburger menu ---- */
@media (max-width:1024px){
  .burger{
    display:grid;place-items:center;width:44px;height:44px;border-radius:10px;
    background:var(--bg-2);border:1px solid var(--line);color:#fff;
  }
  .burger svg{width:24px;height:24px}

  .nav-links{
    position:fixed;top:var(--header-h);right:0;height:calc(100vh - var(--header-h));
    width:min(330px,86vw);background:var(--bg-1);border-left:1px solid var(--line);
    flex-direction:column;align-items:stretch;gap:4px;padding:22px;
    transform:translateX(100%);transition:transform .35s ease;overflow-y:auto;
    box-shadow:-20px 0 50px rgba(0,0,0,.5);
  }
  .nav-links.open{transform:translateX(0)}
  .nav-links a{padding:13px 14px;font-size:1rem;border-radius:10px}
  .nav-links a.active::after{display:none}
  .nav-links a.active{background:rgba(0,168,255,.1)}
  .has-drop .drop{
    position:static;opacity:1;visibility:visible;transform:none;
    background:var(--bg-0);box-shadow:none;border:none;padding:4px 0 4px 14px;margin-top:2px;
    min-width:0;
  }
  .has-drop>a::after{content:" ▾";opacity:.5}
  .has-drop:not(.exp) .drop{display:none}

  .nav-actions .desktop-only{display:none}
  .feature-grid{grid-template-columns:repeat(2,1fr)}
  .cat-grid{grid-template-columns:repeat(2,1fr)}
  .about-grid{grid-template-columns:1fr;gap:34px}
  .about-visual img{height:320px}
  .contact-grid{grid-template-columns:1fr}
  .tst-grid{grid-template-columns:1fr;max-width:560px;margin:0 auto}
  .foot-grid{grid-template-columns:1fr 1fr;gap:32px}
  .product-grid{grid-template-columns:repeat(2,1fr)}
  .product-grid.cols-3{grid-template-columns:repeat(2,1fr)}
}

/* ---- Mobile large ( <= 768px ) ---- */
@media (max-width:768px){
  .section{padding:60px 0}
  .wrap{padding:0 18px}
  .hero{min-height:auto;padding:calc(var(--header-h) + 30px) 0 70px}
  .hero-grid{padding:0}
  .hero h1{font-size:2.3rem}
  .hero-cta{flex-direction:column}
  .hero-cta .btn{width:100%}
  .hero-stats{gap:22px}
  .hero-stat .num{font-size:1.6rem}
  .trusted-row{flex-direction:column;gap:16px;align-items:flex-start;padding:22px 0}
  .trusted-item{width:100%}
  .counters{flex-direction:column;gap:18px}
  .cta{padding:48px 24px}
  .tech-grid{grid-template-columns:repeat(2,1fr)}
  .form-row{grid-template-columns:1fr}
  .page-head{padding:calc(var(--header-h) + 40px) 0 36px}
  .countdown{gap:8px}
  .cd-box{min-width:64px;padding:12px 6px}
  .cd-box .num{font-size:1.5rem}
}

/* ---- Small phones ( <= 480px ) ---- */
@media (max-width:480px){
  .feature-grid,.cat-grid,.product-grid,.product-grid.cols-3{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr}
  .card-actions{flex-direction:column}
  .section-head{margin-bottom:32px}
  .wa-box{width:min(300px,84vw);right:-6px}
  .about-list{grid-template-columns:1fr}
  .lang-switch button{padding:6px 9px;font-size:.72rem}
  .logo img{height:36px}
}

/* RTL support for Arabic */
html[dir="rtl"] body{font-family:'Tajawal','Inter','Segoe UI',system-ui,sans-serif}
html[dir="rtl"] h1,html[dir="rtl"] h2,html[dir="rtl"] h3,html[dir="rtl"] h4{font-family:'Tajawal','Poppins',sans-serif}

/* === HEADER & NAV (inversion complète) === */
html[dir="rtl"] .hero-grid{margin-right:0;margin-left:auto}
/* le menu déroulant "Produits" s'ouvre à droite en RTL */
html[dir="rtl"] .drop{left:auto;right:0}
/* panneau mobile : glisse depuis la gauche en RTL */
html[dir="rtl"] .nav-links{right:auto;left:0;border-left:none;border-right:1px solid var(--line);transform:translateX(-100%)}
html[dir="rtl"] .nav-links.open{transform:translateX(0)}
/* les flèches/boutons directionnels s'inversent */
html[dir="rtl"] .cat-link svg{transform:scaleX(-1)}
html[dir="rtl"] .lang-dd-menu{right:auto;left:0}
html[dir="rtl"] .lang-chev{transform:scaleX(-1)}
html[dir="rtl"] .lang-dd.open .lang-dd-btn .lang-chev{transform:scaleX(-1) rotate(180deg)}

/* === WHATSAPP FLOAT passe à gauche en RTL === */
html[dir="rtl"] .wa-float{right:auto;left:24px}
html[dir="rtl"] .wa-box{right:auto;left:0;border-radius:16px}

/* === DÉTAILS DE MISE EN PAGE === */
html[dir="rtl"] .hero-bg::after{background:linear-gradient(270deg,var(--bg-0) 0%,rgba(11,11,15,.85) 45%,rgba(11,11,15,.4) 100%),radial-gradient(circle at 25% 30%,rgba(0,168,255,.22),transparent 50%),linear-gradient(0deg,var(--bg-0) 2%,transparent 35%)}
html[dir="rtl"] .badges{left:auto;right:12px}
html[dir="rtl"] .fav{right:auto;left:12px}
html[dir="rtl"] .about-badge{left:auto;right:20px}
html[dir="rtl"] .feature::before{transform-origin:right}

/* === CARTES PRODUITS EN ARABE (alignement propre) === */
html[dir="rtl"] .card-body{text-align:right}
html[dir="rtl"] .card-cat{text-align:right}
html[dir="rtl"] .card h3{text-align:right}
html[dir="rtl"] .card .spec{text-align:right}
html[dir="rtl"] .rating{justify-content:flex-start;flex-direction:row-reverse}
html[dir="rtl"] .price{justify-content:flex-end;flex-direction:row-reverse}
html[dir="rtl"] .price .now .cur{margin-left:0;margin-right:2px}
html[dir="rtl"] .card-actions{flex-direction:row-reverse}
html[dir="rtl"] .tst-author{flex-direction:row-reverse}
html[dir="rtl"] .tst{text-align:right}
html[dir="rtl"] .tst p{text-align:right}

/* === TOOLBAR / CHIPS / TRI en arabe === */
html[dir="rtl"] .products-toolbar{flex-direction:row-reverse}
html[dir="rtl"] .chips{flex-direction:row-reverse}
html[dir="rtl"] .feature-ico{margin-left:auto;margin-right:0}
html[dir="rtl"] .feature{text-align:right}
html[dir="rtl"] .feature h3,html[dir="rtl"] .feature p{text-align:right}

/* === TIROIR PANIER en arabe === */
html[dir="rtl"] .cart-item{grid-template-columns:auto 1fr 54px;direction:rtl}
html[dir="rtl"] .cart-head h3{flex-direction:row-reverse}
html[dir="rtl"] .cart-foot{text-align:right}
html[dir="rtl"] .cart-total{flex-direction:row-reverse}
html[dir="rtl"] .ci-right{align-items:flex-start}

/* === SECTION HEAD & éléments centrés === */
html[dir="rtl"] .section-head.center{text-align:center}
html[dir="rtl"] .section-head:not(.center){text-align:right}

/* === CONTACT / FORM en arabe === */
html[dir="rtl"] .contact-info-card{text-align:right}
html[dir="rtl"] .contact-list .ci-ico{margin-left:0}
html[dir="rtl"] .form-card{text-align:right}
html[dir="rtl"] .field label{text-align:right}
html[dir="rtl"] .faq-q{flex-direction:row-reverse;text-align:right}
html[dir="rtl"] .faq-a p{text-align:right}
html[dir="rtl"] .crumb{text-align:right}

/* === CATEGORIES & TECH === */
html[dir="rtl"] .cat-card{text-align:right}
html[dir="rtl"] .cat-link{justify-content:flex-end;flex-direction:row-reverse}
html[dir="rtl"] .tech-item{text-align:center}

/* === FOOTER en arabe === */
html[dir="rtl"] .foot-col{text-align:right}
html[dir="rtl"] .foot-links a{flex-direction:row-reverse}
html[dir="rtl"] .foot-links a:hover{transform:translateX(-3px)}
html[dir="rtl"] .foot-contact li{flex-direction:row-reverse;text-align:right}
html[dir="rtl"] .foot-bottom{flex-direction:row-reverse;text-align:right}
html[dir="rtl"] .pay{flex-direction:row-reverse}

@media (max-width:480px){
  .splash-logo{height:60px}
  .splash-tag{font-size:.7rem;letter-spacing:.2em}
  .splash-bar{width:140px}
}