/* Jida Market : menu MOBILE custom (assets separes du desktop).
   Depend des variables :root definies dans jida-menu.css (charge lui aussi). */

/* ============ MENU MOBILE (dans le panneau Goya) ============ */
.jm2m-holder, .jm2m-holder-li { list-style: none !important; margin: 0 !important; padding: 0 !important; }
.jm2m { font-family: inherit; }
.jm2m-pane[hidden] { display: none; }
.jm2m-pane { animation: jm2m-in .18s ease-out; }
@keyframes jm2m-in { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .jm2m-pane { animation: none; } }

.jm2m-rows { list-style: none; margin: 0; padding: 0; }
.jm2m-rows li { border-bottom: 1px solid var(--jm2-line); list-style: none; }
.jm2m-rows button, .jm2m-rows a {
  appearance: none; background: none; border: none; cursor: pointer; font: inherit;
  width: 100%; text-align: left; display: flex; align-items: center; gap: 10px;
  padding: 10px 6px; color: var(--jm2-ink); font-weight: 600; font-size: 17px;
  text-decoration: none;
}
.jm2m-em { width: 24px; text-align: center; flex: none; }
.jm2m-chev { margin-left: auto; color: var(--jm2-muted); }
.jm2m-cnt { margin-left: auto; color: var(--jm2-muted); font-size: 12px; font-weight: 500; }
.jm2m-hot { color: var(--jm2-orange-deep) !important; }

.jm2m-back {
  appearance: none; border: none; cursor: pointer; font: inherit; width: 100%;
  display: flex; align-items: center; text-align: left;
  background: var(--jm2-cream-deep); padding: 11px 12px; font-weight: 700;
  color: var(--jm2-green); font-size: 14px; border-radius: 8px; margin: 2px 0 8px;
}
.jm2m-voirtout {
  display: block; margin: 4px 0 6px; padding: 11px; text-align: center;
  background: var(--jm2-green); color: #F3EFE6 !important; border-radius: 9px;
  font-weight: 700; font-size: 13.5px; text-decoration: none;
}
.jm2m-sect {
  font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--jm2-muted); margin: 14px 2px 4px;
}
.jm2m-tiles { display: flex; flex-direction: column; gap: 8px; padding-top: 4px; }
.jm2m-tiles .jm2-tile { padding: 9px 30px 9px 10px; }
.jm2m-tiles .jm2-chip-img img, .jm2m-tiles .jm2-chip-emoji { width: 40px; height: 40px; }

.jm2m-vedette {
  margin-top: 14px; background: linear-gradient(160deg, var(--jm2-green), var(--jm2-green-deep));
  border-radius: 13px; padding: 14px; color: #F3EFE6 !important;
  display: flex; flex-direction: column; gap: 10px; text-decoration: none;
}
.jm2m-v-top { display: flex; gap: 12px; align-items: center; }
.jm2m-v-img { flex: none; }
.jm2m-v-img img { width: 64px; height: 64px; border-radius: 10px; object-fit: contain; background: #FFF; padding: 4px; display: block; box-sizing: border-box; }
.jm2m-v-t { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.jm2m-v-eyebrow { font-size: 9px; letter-spacing: .13em; text-transform: uppercase; color: #FFC9B5; font-weight: 700; }
.jm2m-v-t b { font-size: 14.5px; line-height: 1.25; color: #F3EFE6; }
.jm2m-v-t .jm2-stars-v { color: #F3EFE6; }
.jm2m-v-t .jm2-stars-n { color: #C9D8CC; }
.jm2m-v-price { display: flex; gap: 14px; align-items: baseline; flex-wrap: wrap; }
.jm2m-v-price, .jm2m-v-price .amount, .jm2m-v-price bdi { color: #FFC9B5 !important; font-weight: 700; font-size: 15px; }
.jm2m-v-price .ywcrbp_regular_price, .jm2m-v-price .ywcrbp_regular_price .amount,
.jm2m-v-price .ywcrbp_regular_price bdi { color: #C9D8CC !important; font-weight: 500; font-size: 12.5px; }
.jm2m-v-go {
  display: block; text-align: center; background: var(--jm2-orange);
  border-radius: 9px; padding: 11px; font-weight: 700; font-size: 13px;
  color: #FFF;
}

.jm2m-cta {
  margin: 14px 0 4px; display: block; text-align: center; background: var(--jm2-green);
  color: #F3EFE6 !important; border-radius: 9px; padding: 12px; font-weight: 700;
  text-decoration: none; font-size: 14px;
}
.jm2m-reassure { padding: 12px 2px 4px; font-size: 11.5px; color: var(--jm2-muted); text-align: center; }
.jm2m-reassure b { color: var(--jm2-green); }


/* ============ PANNEAU GOYA : opacite, largeur et epure (comme la maquette) ============ */
#mobile-menu.side-panel,
#mobile-menu .side-panel-content,
#mobile-menu .side-panel-content .container {
  background: #FDF6EE !important;
  opacity: 1 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
/* pseudo-elements decoratifs eventuels du theme : supprimes */
#mobile-menu::before, #mobile-menu::after,
#mobile-menu .side-panel-content::before, #mobile-menu .side-panel-content::after { content: none !important; }
/* largeur du tiroir : 86 % de l'ecran, la page assombrie reste visible derriere */
@media (max-width: 1024px) {
  #mobile-menu.side-panel { width: 86% !important; max-width: 380px !important; }
}
/* texte des lignes : encre foncee, quels que soient les styles du panneau Goya */
#mobile-menu .jm2m-rows button, #mobile-menu .jm2m-rows a { color: #22312A !important; }
#mobile-menu .jm2m-rows .jm2m-hot { color: #E05A34 !important; }
#mobile-menu .jm2m-cnt, #mobile-menu .jm2m-chev { color: #7A8078 !important; }
#mobile-menu .jm2m-back { color: #254636 !important; }
#mobile-menu .mobile-bar {
  background: var(--jm2-cream) !important;
  border-bottom: 1px solid var(--jm2-line);
}
/* extras Goya (liens annexes, compte, reseaux sociaux) : masques, le menu reste pur */
#mobile-menu .mobile-top-extras,
#mobile-menu .bottom-extras { display: none !important; }
#mobile-menu .side-panel-content { padding-bottom: 10px; }

/* voile sombre derriere le tiroir (pilote par jida-menu-mobile.js) */
.jm2m-scrim {
  position: fixed; inset: 0; background: rgb(0 0 0 / 63%);
  opacity: 0; pointer-events: none; transition: opacity .18s ease; z-index: 99998;
}
.jm2m-scrim.on { opacity: 1; pointer-events: auto; }
@media (prefers-reduced-motion: reduce) { .jm2m-scrim { transition: none; } }
#mobile-menu.side-panel { z-index: 99999 !important; }


/* acces compte client en bas du niveau 1 */
.jm2m-account { border-top: 1px solid var(--jm2-line); margin-top: 10px; }


/* note globale de la boutique en pied de menu */
.jm2m-rating {
  padding: 12px 2px 4px; text-align: center; font-size: 12.5px; color: var(--jm2-muted);
}
.jm2m-rating .st { color: #F5A623; margin-right: 3px; }
.jm2m-rating b { color: var(--jm2-ink); }


/* padding du panneau (valeurs validees par Fehed, surcharge du core.css Goya) */
@media only screen and (max-width: 575px) {
  #mobile-menu .side-panel-content { padding: 10px 20px 20px !important; }
}


/* ============ SCROLL DU TIROIR : comportements intuitifs ============ */
/* le defilement reste confine au panneau, sans entrainer la page derriere */
#mobile-menu .side-panel-content {
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
/* la barre du haut (fermer, recherche, panier) reste visible pendant le defilement */
#mobile-menu .mobile-bar {
  position: sticky !important;
  top: 0;
  z-index: 5;
}
/* le voile ne transmet aucun geste de defilement a la page */
.jm2m-scrim { touch-action: none; }
/* la page derriere est verrouillee quand le tiroir est ouvert (classe posee par le JS) */
body.jm2m-lock { overflow: hidden !important; }


/* ============ SCROLL NATIF (perfect-scrollbar de Goya neutralise) ============ */
#mobile-menu .side-panel-content {
  overflow-y: auto !important;
  overflow-x: hidden !important;
}
#mobile-menu .side-panel-content .ps-scrollbar-y-rail,
#mobile-menu .side-panel-content .ps-scrollbar-x-rail,
#mobile-menu .side-panel-content .ps__rail-y,
#mobile-menu .side-panel-content .ps__rail-x { display: none !important; }


/* ============ TUILES UNIVERS/GUIDES : textes forces face aux styles du panneau ============ */
#mobile-menu .jm2-tile { display: flex !important; align-items: center; }
#mobile-menu .jm2-tile .jm2-tile-t { display: flex !important; flex-direction: column; gap: 2px; min-width: 0; }
#mobile-menu .jm2-tile .jm2-tile-t b {
  display: block !important; color: #22312A !important;
  font-size: 14px !important; line-height: 1.25 !important; font-weight: 700 !important;
}
#mobile-menu .jm2-tile .jm2-tile-t small {
  display: block !important; color: #7A8078 !important; font-size: 11.5px !important;
}
#mobile-menu .jm2-tile-guide .jm2-tile-t b { color: #F3EFE6 !important; }
#mobile-menu .jm2-tile-guide .jm2-tile-t small { color: #C9D8CC !important; }