@media (max-width:768px){
  .nav{flex-wrap:nowrap !important;overflow-x:auto !important;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .nav::-webkit-scrollbar{display:none}
  .nav>*{flex:0 0 auto !important;white-space:nowrap}
  .vgrid{display:flex !important;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;gap:12px;padding:2px 2px 10px;scrollbar-width:none}
  .vgrid::-webkit-scrollbar{display:none}
  .vgrid>.vcard{flex:0 0 74% !important;max-width:290px;scroll-snap-align:start}
  .how-grid{display:flex !important;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;gap:12px;padding:2px 2px 10px;scrollbar-width:none}
  .how-grid::-webkit-scrollbar{display:none}
  .how-grid>.how-step{flex:0 0 72%;max-width:280px;scroll-snap-align:start}

  /* HEADER STIL APP: ☰ logo panye / rechèch anba */
  html.ma-hdr .nav{display:none !important}
  html.ma-hdr .hdr-top{flex-wrap:wrap !important;height:auto !important;padding:8px 12px !important;gap:8px !important;align-items:center}
  html.ma-hdr #ma-burger{order:1;display:flex;flex-direction:column;justify-content:center;gap:5px;width:42px;height:42px;padding:0 9px;background:none;border:0;cursor:pointer}
  html.ma-hdr #ma-burger i{display:block;height:3px;background:#fff;border-radius:2px}
  html.ma-hdr .logo{order:2;margin-right:auto}
  html.ma-hdr .logo img{height:44px !important}
  html.ma-hdr .hdr-right{order:3;margin-left:0 !important}
  html.ma-hdr .hdr-right>a.hbtn,html.ma-hdr .hdr-right>form{display:none !important}
  html.ma-hdr .cart-btn>span{display:none !important}
  html.ma-hdr .srch{order:4;flex:0 0 100% !important;width:100% !important;max-width:none !important;margin:0 !important}

  /* PANÈL SOU KOTE (goch) */
  #ma-ov{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:99998;opacity:0;pointer-events:none;transition:opacity .25s}
  #ma-ov.on{opacity:1;pointer-events:auto}
  #ma-dr{position:fixed;top:0;left:0;bottom:0;width:86%;max-width:360px;background:#fff;z-index:99999;transform:translateX(-100%);transition:transform .28s;display:flex;flex-direction:column;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);box-shadow:4px 0 20px rgba(0,0,0,.35)}
  #ma-dr.on{transform:translateX(0)}
  #ma-dr .mh{background:#131921;color:#fff;display:flex;align-items:center;gap:14px;padding:14px 16px;font-weight:800;font-size:18px}
  #ma-dr .mh button{background:none;border:0;color:#fff;font-size:26px;line-height:1;padding:0}
  #ma-dr .mbody{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;color:#222}
  #ma-dr .mbts{display:flex;gap:8px;padding:12px 14px;background:#f0f2f2}
  #ma-dr .mbts button{flex:1;border:0;border-radius:8px;padding:12px;font-size:15px;font-weight:700;background:#ddd;color:#333}
  #ma-dr .mbts button.pri{background:#003366;color:#fff}
  #ma-dr .msec{padding:14px 16px 8px;font-size:12px;letter-spacing:.5px;text-transform:uppercase;color:#777;background:#fafafa;border-bottom:1px solid #eee}
  #ma-dr .mrow{display:flex;align-items:center;justify-content:space-between;padding:16px;font-size:17px;color:#333;text-decoration:none;border-bottom:1px solid #eee;cursor:pointer}
  #ma-dr .mrow b{color:#999;font-size:22px;font-weight:400}
  #ma-dr .mrow.open b{transform:rotate(90deg)}
  #ma-dr .msub{display:none;background:#f7f7f7}
  #ma-dr .msub.on{display:block}
  #ma-dr .msub a{display:block;padding:14px 16px 14px 30px;color:#333;text-decoration:none;font-size:16px;border-bottom:1px solid #eee}
  #ma-dr .mlo button{width:calc(100% - 32px);margin:16px;background:#003366;color:#fff;border:0;border-radius:20px;padding:13px;font-size:16px;font-weight:700}
  #ma-dr .mpad{padding:16px}
  #ma-dr .mpad a.mbtn{display:block;text-align:center;background:#003366;color:#fff;text-decoration:none;border-radius:20px;padding:14px;font-weight:700;margin-bottom:10px}
  #ma-dr .mpad a.mfull,#ma-dr .mpad button.mlnk{display:block;text-align:center;color:#003366;font-size:14px;margin:14px auto 0;background:none;border:0;text-decoration:underline}
  #ma-dr .mpad form input:not([type=checkbox]):not([type=radio]):not([type=hidden]){width:100%;box-sizing:border-box;padding:12px;border:1px solid #bbb;border-radius:8px;font-size:16px;margin:4px 0 10px}
  #ma-dr .mpad form button,#ma-dr .mpad form input[type=submit]{width:100%;background:#003366;color:#fff;border:0;border-radius:20px;padding:13px;font-size:16px;font-weight:700;margin-top:6px}
  #ma-dr .mpad form label{font-size:14px;font-weight:600}
  #ma-dr .mpad form a{color:#003366;font-size:13px}

  /* PYE PAJ: seksyon ki louvri/fèmen */
  html.ma-on .footer-grid{grid-template-columns:1fr !important;gap:0 !important}
  html.ma-on .footer-col{border-bottom:1px solid #232F3E}
  html.ma-on .footer-col h4{display:flex;justify-content:space-between;align-items:center;margin:0 !important;padding:15px 0 !important;border-bottom:0 !important;cursor:pointer;font-size:13px !important}
  html.ma-on .footer-col h4::after{content:"+";font-size:20px;font-weight:400}
  html.ma-on .footer-col.ma-open h4::after{content:"\2212"}
  html.ma-on .footer-col>a,html.ma-on .footer-col>p{display:none !important}
  html.ma-on .footer-col.ma-open>a{display:block !important;padding:6px 0 10px;font-size:14px !important}
  html.ma-on .footer-col.ma-open>p{display:block !important}
}
@media (min-width:769px){#ma-ov,#ma-dr,#ma-burger{display:none !important}}
@media (max-width:768px){
  /* header: san panye (li nan meni an) */
  html.ma-hdr .hdr-right{display:none !important}
  html.ma-hdr .logo{margin-right:auto;margin-left:6px}

  /* pye paj: san Mon Compte */
  html.ma-on .footer-grid>.footer-col:nth-child(2){display:none !important}

  /* Comment fonctionne: ti kat nimerote */
  .how-grid{display:flex !important;flex-direction:column !important;overflow:visible !important;scroll-snap-type:none !important;gap:10px !important;padding:0 !important;counter-reset:mh}
  .how-grid>.how-step{flex:none !important;max-width:none !important;display:grid !important;grid-template-columns:42px 1fr;column-gap:12px;align-items:center;text-align:left !important;padding:12px 14px !important;border-radius:14px !important;background:#fff !important;border:1px solid #e8ebef !important;box-shadow:0 2px 8px rgba(19,25,33,.07);counter-increment:mh}
  .how-step::before{content:counter(mh);grid-row:1/3;width:42px;height:42px;border-radius:50%;background:linear-gradient(135deg,#FF9900,#ffbe5c);color:#131921;font-weight:800;font-size:19px;display:flex;align-items:center;justify-content:center}
  .how-step .ico{display:none !important}
  .how-step h3{font-size:15px !important;margin:0 !important}
  .how-step p{font-size:12.5px !important;margin:2px 0 0 !important;line-height:1.4 !important}
  .how-inner h2{font-size:18px !important;margin-bottom:14px !important}

  /* meni: pi bèl, ak ikòn */
  #ma-dr{width:84%;border-radius:0 22px 22px 0}
  #ma-dr .mh{background:linear-gradient(135deg,#131921,#263445);padding:20px 16px;font-size:19px;letter-spacing:.2px}
  #ma-dr .mbts{background:#fff;padding:14px;border-bottom:1px solid #eef0f2}
  #ma-dr .mbts button{border-radius:12px;padding:13px;font-size:15px;background:#eef2f7;color:#003366}
  #ma-dr .mbts button.pri{background:linear-gradient(135deg,#003366,#0a4d94);color:#fff;box-shadow:0 4px 12px rgba(0,51,102,.3)}
  #ma-dr .mrow{gap:14px;padding:13px 16px;font-size:16px;font-weight:600;color:#1f2933}
  #ma-dr .mrow span{flex:1}
  #ma-dr .mrow::before{content:"\2022";width:36px;height:36px;border-radius:11px;background:#eef2f7;display:flex;align-items:center;justify-content:center;font-size:18px;flex:0 0 36px}
  #ma-dr .mrow[href="/"]::before{content:"\1F3E0"}
  #ma-dr .mrow[href="/products"]::before{content:"\1F6CD"}
  #ma-dr .mrow[data-acc="2"]::before{content:"\1F5C2"}
  #ma-dr .mrow[data-acc="3"]::before{content:"\1F3EA";background:#fff3dc}
  #ma-dr .mrow[href="/diaspora/gift"]::before{content:"\1F381";background:#e6f0ff}
  #ma-dr .mrow[href="/cart"]::before{content:"\1F6D2"}
  #ma-dr .mrow[href="/profile"]::before{content:"\1F464"}
  #ma-dr .mrow[href="/my-orders"]::before{content:"\1F4E6"}
  #ma-dr .mrow[href="/wishlist"]::before{content:"\2764\FE0F"}
  #ma-dr .mrow[href="/vendor/dashboard"]::before{content:"\1F3EC"}
  #ma-dr .msec{padding:16px 16px 8px;color:#8a94a0;font-weight:700}
  #ma-dr .msub a{padding:13px 16px 13px 66px;font-size:15px}
  #ma-dr .mlo button{border-radius:12px;background:#fff0f0;color:#c62828;border:1px solid #f3c7c7}
}

/* ===== UI: badge Vérifié kache + kat vandè klas ===== */
.vcard-badge,.badge-verified,.v-verified{display:none !important}
.vgrid{grid-template-columns:repeat(auto-fill,minmax(180px,1fr)) !important;gap:12px !important}
.vcard{padding:12px 14px !important;gap:11px !important;border-radius:12px !important;border:1px solid #e6e9ee !important;box-shadow:0 1px 4px rgba(19,25,33,.05)}
.vcard-img{flex:0 0 42px;width:42px;height:42px;border-radius:50%;background:linear-gradient(135deg,#131921,#2d3e55);color:#FF9900;font-weight:800;font-size:18px;display:flex;align-items:center;justify-content:center;text-transform:uppercase}
.vcard-name{font-size:13.5px !important;line-height:1.25;margin-bottom:2px !important}
.vcard-loc,.vcard-cnt{font-size:11.5px !important;margin:0 !important}

/* ===== UI: kat pwodwi pi piti ak klas ===== */
.pgrid{gap:12px !important}
.pc{border-radius:12px !important;border:1px solid #e6e9ee !important;box-shadow:0 1px 4px rgba(19,25,33,.06) !important}
.pc:hover{box-shadow:0 8px 22px rgba(19,25,33,.12) !important}
.pc-img{height:150px !important;background:#fff !important}
.pc-img .eico{font-size:56px !important}
.pc-body{padding:9px 11px 11px !important}
.pc-cat{font-size:10px !important;margin-bottom:2px !important}
.pc-name{font-size:13px !important;line-height:1.35 !important;margin-bottom:4px !important;font-weight:600 !important}
.pc-price{margin:2px 0 6px !important}
.pc-price .amt{font-size:17px !important}
.pc-vend{font-size:10.5px !important;padding-top:3px !important;margin-bottom:6px !important}
.pc .abtn{padding:7px 10px !important;font-size:12.5px !important;border-radius:18px !important}
@media(max-width:600px){.pc-img{height:125px !important}}