/* =========================================================
   Filtres boutique sur mobile : tiroir lateral
   =========================================================
   Le panneau est fait de 5 blocs qui vivent normalement dans
   .cv-sidebar (la colonne de droite) et que le site place en
   position:fixed, cales sur left:20px / right:20px : il occupe donc
   presque tout l'ecran.

   A l'ouverture, l'extrait JS "MDV - Filtres mobile : tiroir detache"
   deplace ces 5 blocs dans un conteneur .mdv-filters-drawer place
   directement sous <body>, puis les remet en place a la fermeture.

   Deux benefices :
   - .cv-sidebar reste dans la page : la barre de recherche et TRIER
     restent visibles derriere le tiroir ;
   - enfant direct de <body>, le tiroir n'est plus prisonnier du widget
     Elementor sticky qui l'entoure (un ancetre transforme devient le
     referentiel des enfants en position:fixed).
   ========================================================= */

@media (max-width: 767px) {

  /* ---------- le tiroir ---------- */
  .mdv-filters-drawer {
    position: fixed;
    top: 50%;
    right: 0;
    left: auto;
    transform: translateY(-50%);
    width: 86%;
    max-width: 340px;
    height: auto;
    max-height: 88vh;
    max-height: 88dvh;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    background: #fffbf0;
    border-radius: 14px 0 0 14px;
    box-shadow: -10px 0 30px rgba(46, 36, 23, .25);
    overflow: hidden;
    z-index: 2147483000;
    animation: mdvDrawerIn .32s cubic-bezier(.22, .61, .36, 1) both;
  }

  body:not(.cv-filters-modal-open) .mdv-filters-drawer { display: none; }

  /* ---------- les blocs reprennent le flux normal ---------- */
  .mdv-filters-drawer > * {
    position: static !important;
    inset: auto !important;
    width: auto !important;
    max-width: none !important;
    max-height: none !important;
    z-index: auto !important;
    border-radius: 0 !important;
    flex: 0 0 auto;
  }

  .mdv-filters-drawer .cv-filters-modal-header { position: relative !important; }

  .mdv-filters-drawer #cv-attr-filters-mount {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    padding: 10px 20px 14px !important;
  }


  /* ---------- pastilles etiquettes ----------
     Elles ne sont plus dans .cv-sidebar une fois dans le tiroir : la
     regle qui les affinait ne les atteignait plus, d'ou leur retour en
     gras, pleine largeur. */
  .mdv-filters-drawer .cv-pills {
    /* grille 2 colonnes : Vin du Mois + Vin en Ritournelle sur la 1re
       ligne, Bio + Premier Cru sur la 2e, quelle que soit la largeur
       du telephone (en flex, le retour a la ligne dependait du texte) */
    /* meme disposition que la colonne de droite en desktop :
       les deux premieres pastilles sur toute la largeur, les deux
       dernieres cote a cote (Bio a la taille de son texte, Premier Cru
       prend le reste). */
    display: grid !important;
    grid-template-columns: auto 1fr !important;
    justify-items: stretch !important;
    align-items: center !important;
    gap: 7px !important;
    padding: 2px 16px 0 !important;
  }
  .mdv-filters-drawer .cv-pill:nth-child(-n+2) {
    grid-column: 1 / -1 !important;
  }
  .mdv-filters-drawer .cv-pill {
    width: auto !important;
    text-align: center !important;
    font-weight: 400 !important;
    font-size: 11px !important;
    padding: 7px 14px !important;
    letter-spacing: .04em !important;
    line-height: 1.25 !important;
  }

  /* ---------- pied : deux boutons empiles ---------- */
  .mdv-filters-drawer .cv-filters-modal-footer {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
    padding: 12px 20px 14px !important;
  }

  .mdv-filters-drawer .mdv-filters-apply {
    display: block;
    width: 100%;
    padding: 9px 14px;
    background: #B29760;
    color: #fffbf0;
    border: 1px solid #B29760;
    font-family: "Alegreya SC", serif;
    text-transform: uppercase;
    font-size: 13px;
    letter-spacing: .08em;
    line-height: 1.25;
    text-align: center;
    cursor: pointer;
    transition: background-color .3s ease, color .3s ease;
  }
  .mdv-filters-drawer .mdv-filters-apply:active {
    background: #fffbf0;
    color: #B29760;
  }

  .mdv-filters-drawer .cv-filters-clear-all {
    width: 100% !important;
    padding: 6px 14px !important;
    font-size: 12px !important;
    line-height: 1.25 !important;
    text-align: center !important;
  }

  /* ---------- le voile ---------- */
  body.cv-filters-modal-open::before {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    background: rgba(46, 36, 23, .38) !important;
    z-index: 2147482000 !important;
    animation: mdvVeilIn .32s ease both;
  }

  /* ---------- sortie ---------- */
  body.cv-filters-modal-closing .mdv-filters-drawer {
    animation: none !important;
    transform: translate(105%, -50%);
    transition: transform .3s cubic-bezier(.55, 0, .55, .2);
  }
  body.cv-filters-modal-closing::before {
    animation: none !important;
    opacity: 0;
    transition: opacity .28s ease;
  }

  @keyframes mdvDrawerIn {
    from { transform: translate(105%, -50%); }
    to   { transform: translate(0, -50%); }
  }
  @keyframes mdvVeilIn {
    from { opacity: 0; }
    to   { opacity: 1; }
  }

  @media (prefers-reduced-motion: reduce) {
    .mdv-filters-drawer,
    body.cv-filters-modal-open::before,
    body.cv-filters-modal-closing .mdv-filters-drawer,
    body.cv-filters-modal-closing::before {
      animation: none !important;
      transition: none !important;
    }
    .mdv-filters-drawer { transform: translateY(-50%) !important; }
  }
}