@media(max-width:900px){.burger{display:flex}#deskNav{display:none}}
@media(max-width:900px){.ft-grid{grid-template-columns:1fr 1fr}.modal{flex-direction:column;max-height:94vh}.m-img{width:100%;height:190px}}
@media(max-width:640px){
  .logo-en{display:none}.logo-ar{font-size:1.18rem}
  .sec{padding:2.4rem .95rem}
  .hbtns{flex-direction:column;gap:.54rem}.hbtns .btn{text-align:center;justify-content:center}
  .prod-grid{grid-template-columns:repeat(2,1fr);gap:.75rem}.pc-body{padding:.7rem .68rem .66rem}
  .p-name{font-size:.88rem}.p-price{font-size:1.18rem}
  .why-grid{grid-template-columns:1fr 1fr;gap:1.4rem}.test-grid{grid-template-columns:1fr}
  .cred-grid{grid-template-columns:1fr 1fr}.ft-grid{grid-template-columns:1fr}.ft-desc{max-width:100%}
  .cdrawer{width:100vw;inset-inline-end:-100vw}.cdrawer.open{inset-inline-end:0}
  .modal{border-radius:var(--r2)}
  #mainHdr .mob-nav{direction:inherit}.m-img{height:150px}
  .filter-bar{flex-direction:column;align-items:flex-start}
  .trust-in{gap:.8rem}.ti{font-size:10.5px}
  .cat-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:380px){.prod-grid{grid-template-columns:1fr}.cat-grid{grid-template-columns:1fr}.why-grid{grid-template-columns:1fr}.cred-grid{grid-template-columns:1fr}}
/* ── Mobile visual fixes ───────────────────────────────────────── */
@media(max-width:640px){
/* Hero dots: remove forced min-size so visual stays slim */
  .hdot{min-width:unset;min-height:unset;padding:6px 4px}
  /* Product card: disable hover image swap on touch screens */
  .pc:hover .img-b{opacity:0;transform:scale(1.05)}
  .pc:hover .img-a{opacity:1}
  /* Product card: keep quick-shop hidden (tap to open modal instead) */
  .pc:hover .qs-trig{bottom:-42px}
}


/* ================================================================
   MOBILE TARGETED POLISH — requested storefront fixes only
   ================================================================ */
@media(max-width:640px){
  /* Announcement bar: single authoritative implementation lives in main.css. */


  /* 3. The benefit strip becomes four actual visual cells, not one line of
     text. Keep the same four existing benefits and icons. */
  .trust{border-top:1px solid var(--border);border-bottom:1px solid var(--border);}
  .trust-in{
    display:grid!important;
    grid-template-columns:1fr 1fr;
    gap:0!important;
    padding:0!important;
    max-width:none!important;
  }
  .ti{
    min-height:96px;
    padding:.8rem .65rem!important;
    display:flex!important;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
    gap:.42rem;
    border:0;
    border-bottom:1px solid var(--border);
    color:var(--tx2)!important;
    font-size:.79rem!important;
    line-height:1.5;
    letter-spacing:0!important;
  }
  .ti:nth-child(odd){border-inline-end:1px solid var(--border)}
  .ti:nth-child(n+3){border-bottom:0}
  .ti svg{width:23px!important;height:23px!important;stroke:var(--burg)!important;flex:none}

  /* 4. Remove the search UI entirely; filter row stays functional. */
  .search-wrap{display:none!important}
  .filter-bar{margin-top:0!important;margin-bottom:.8rem!important}

  /* 5. Product cards: shorter image, tighter body and one-line option rows.
     Functionality stays intact; selections remain available. */
  .prod-sec{padding-top:2rem!important;padding-bottom:2.2rem!important}
  .prod-sec .sec-hd{margin-bottom:1.25rem!important}
  .prod-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:.7rem!important;
  }
  .pc-body{padding:.62rem .6rem .65rem!important}
  .p-stars{gap:.18rem;margin-bottom:.24rem}
  .stars-v{font-size:.63rem}
  .rev-ct{font-size:.57rem}
  body.ar .p-name{font-size:.98rem!important;line-height:1.25;margin-bottom:.2rem}
  /* No line-clamp here: the English .p-desc is never truncated on mobile
     cards, so clamping only the Arabic description to 2 lines was hiding
     the rest of the text for Arabic users while English showed it in full.
     Arabic now wraps to as many lines as it needs, same as English. */
  body.ar .p-desc{
    font-size:.72rem!important;
    line-height:1.5!important;
    margin-bottom:.38rem!important;
  }
  .sel-group{
    margin-bottom:.28rem!important;
    display:grid!important;
    grid-template-columns:31px minmax(0,1fr);
    align-items:center;
    column-gap:.25rem;
  }
  .sel-glbl{
    margin:0!important;
    font-size:.62rem!important;
    line-height:1.2;
  }
  body.ar .sel-glbl{font-size:.67rem!important}
  .sel-pills{display:flex!important;flex-wrap:nowrap!important;gap:.16rem!important;min-width:0}
  .spill{
    flex:0 0 auto;
    padding:.12rem .32rem!important;
    font-size:.61rem!important;
    line-height:1.25!important;
    white-space:nowrap;
  }
  body.ar .spill{font-size:.67rem!important}
  .p-price-row{margin:.35rem 0 .5rem!important}
  body.ar .p-price{font-size:1.18rem!important}
  .atc{min-height:39px!important;padding:.42rem .35rem!important;font-size:.82rem!important}

  /* 6. Tighten every post-product section so the page does not feel like
     one long sequence of oversized blocks. */
  #why.sec,
  .test-sec{
    padding-top:2rem!important;
    padding-bottom:2rem!important;
  }
  #why .sec-hd,
  .test-sec .sec-hd{margin-bottom:1.25rem!important}
  .why-grid{grid-template-columns:1fr 1fr!important;gap:.6rem!important}
  .wi{padding:.75rem .45rem!important}
  .w-ico{width:48px!important;height:48px!important;margin-bottom:.45rem!important}
  .w-ico svg{width:20px!important;height:20px!important}
  body.ar .wi h3{font-size:.95rem!important;margin-bottom:.15rem!important}
  body.ar .wi p{font-size:.77rem!important;line-height:1.55!important}

  /* 7. Reviews use the storefront surface instead of reading as a footer band. */
  .test-sec{
    background:var(--surf)!important;
    color:var(--tx)!important;
    border-top:1px solid var(--border);
    border-bottom:1px solid var(--border);
  }
  .test-sec .sec-title{color:var(--tx)!important}
  .test-sec .kicker{color:var(--burg)!important}
  .test-sec .sec-div{background:var(--gold)!important}
  .test-grid{grid-template-columns:1fr!important;gap:.7rem!important}
  .test-sec .tc{
    background:var(--surf)!important;
    color:var(--tx)!important;
    border:1px solid var(--border)!important;
    padding:.9rem!important;
    box-shadow:none!important;
  }
  .test-sec .t-text{color:var(--tx2)!important;font-size:.9rem!important;line-height:1.7!important}
  .test-sec .t-nm{color:var(--tx)!important;font-size:.82rem!important}
  .test-sec .t-lc{color:var(--tx3)!important;font-size:.7rem!important}
  .test-sec .t-av{background:var(--bg2)!important;color:var(--tx)!important;border-color:var(--border)!important}

  /* 8. Footer: larger, readable brand mark and type, with brand block on its
     own row and the two link columns side by side to reduce height. */
  footer{padding:2.25rem 1rem 1.2rem!important}
  .ft-grid{grid-template-columns:1fr 1fr!important;gap:1.15rem!important;margin-bottom:1.55rem!important}
  .ft-grid>div:first-child{grid-column:1/-1}
  .ft-logo-mark{height:56px!important;width:auto!important;margin-bottom:.65rem!important}
  .ft-logo-en{font-size:10px!important;letter-spacing:.08em!important;margin-bottom:.7rem!important}
  body.ar .ft-desc{font-size:1rem!important;line-height:1.7!important;max-width:100%!important;margin-bottom:.8rem!important}
  .ft-col h4,body.ar .ft-col h4{font-size:.9rem!important;margin-bottom:.55rem!important}
  .ft-col ul li{margin-bottom:.28rem!important}
  .ft-col ul li a,body.ar .ft-col ul li a{font-size:.95rem!important;line-height:1.6!important}
  .ft-bot{padding-top:.9rem!important;padding-inline-end:0!important}
  .ft-copy,body.ar .ft-copy{font-size:.78rem!important;line-height:1.6!important}
  .pi{font-size:.57rem!important}

  /* 9. Toast: when checkout is open, move the confirmation away from the
     submit button instead of sitting directly over it. */
  .toast{
    inset-inline-end:12px!important;
    bottom:76px!important;
    max-width:calc(100vw - 24px)!important;
  }
  .co-ov.open ~ .toast{
    top:76px!important;
    bottom:auto!important;
  }
}


/* ========================================================================
   FINAL RESPONSIVE CORRECTIONS — shared non-header geometry
   ======================================================================== */
@media(max-width:900px){

  /* The product/search area uses the title + filter only. */
  .search-wrap{display:none!important;}
  .prod-sec .sec-hd,
  #why .sec-hd,
  .test-sec .sec-hd{
    width:100%;
    max-width:none;
    margin-inline:auto;
    text-align:center!important;
  }
  .prod-sec .sec-div,
  #why .sec-div,
  .test-sec .sec-div{margin:.9rem auto!important;}

  /* Keep the mobile page visually light without changing functionality. */
  #why.sec,
  .test-sec{padding-top:1.8rem!important;padding-bottom:1.8rem!important;}
  #why .sec-hd,
  .test-sec .sec-hd{margin-bottom:1rem!important;}

  /* Footer remains readable without becoming a giant dark block. */
  footer{padding:2rem 1rem 1.1rem!important;}
  .ft-logo-mark{height:54px!important;max-width:220px!important;}
  .ft-logo-en{font-size:9px!important;}
  body.ar .ft-desc,
  .ft-desc{font-size:.95rem!important;line-height:1.7!important;}
  .ft-col h4,
  body.ar .ft-col h4{font-size:.95rem!important;}
  .ft-col ul li a,
  body.ar .ft-col ul li a{font-size:.95rem!important;}
  .ft-copy,
  body.ar .ft-copy{font-size:.78rem!important;}
  .pi{font-size:.82rem!important;padding:.3rem .58rem!important;}
}



/* Announcement bar: single authoritative implementation lives in main.css. */