/*
Theme Name: Loire Child
Theme URI: https://loire.qodeinteractive.com
Description: A child theme of Loire
Author: Mikado Themes
Author URI: https://qodeinteractive.com
Version: 1.0
Text Domain: loire
Template: loire
*/

/* Mohammed */
@import url("./mohammed_clean.css");

/* Styles des pages */
@import url("assets/css/pages/page-produit.min.css");

/* Styles des modales */
@import url("assets/css/modales/modale-verification-age.min.css");

/* Styles de base des pages */
.elementor-column-gap-default > .elementor-column > .elementor-element-populated {
  padding: 0;
}

.qodef-m-title {
  @media (width <= 768px) {
    font-size: 2.75rem;
  }

  @media (width <= 425px) {
    font-size: 2.5rem;
  }
}

/* Affiche la quantité d'articles dans le Panier dans le menu */
@media (width <= 1024px) {
  #menu-main-menu-3 {
    z-index: 101;
    display: flex;
    flex-flow: column nowrap;
    gap: 1rem;
    color: white;

    > li {
      margin: 0;
    }
  }

  #menu-main-menu-3 > span {
    position: absolute;
    inset-block-end: 2.05rem;
    inset-inline-start: 13.5ch;
    inline-size: fit-content;
    font-size: 13px;
    color: inherit;
  }
}

/* Corrige l'apparence du bouton « Découvrir » sur le héro */
.qodef-shortcode.qodef-m.qodef-button.qodef-layout--filled.qodef-html--link {
  inline-size: fit-content !important;
  padding: 0.75rem 2rem !important;
}

/* Grille des Produits */
.elementor-grid {
  gap: 1rem !important;

  .product-type-simple {
    margin-block-start: 0 !important;
  }
}

#qodef-page-inner {
  padding: 0;
}

/* .archive #qodef-page-wrapper { */
body:not(.home) #qodef-page-wrapper {
  #instagram-feed-widget-2 {
    display: none;
  }

  & .qodef-woo-results {
    margin-bottom: 0;

    & p {
      margin: 0;
    }
  }

  & .qodef-content-grid {
    inline-size: initial !important;
    margin: 0 !important;
  }

  & .clear::before, .clear::after {
    content: unset !important;
  }

  & .qodef-grid {
    margin: 0;

    & > .qodef-grid-inner {
      display: flex;
      flex-flow: row wrap;
      gap: 3rem;
      margin: 0;
      padding-inline: 4rem;

      & > .qodef-grid-item {
        margin: 0;
        padding: 0;
      }

      & > .qodef-page-content-section {
        flex: 1;
      }

      & > .qodef-page-sidebar-section {
        flex-basis: 25%;
        min-inline-size: 28ch;

        & > #qodef-page-sidebar {
          margin-block-end: 0;
        }

        & .product-categories {
          & li {
            list-style: disc;
          }
        }
      }
    }

    & .products:not(.related) {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(min(310px, 100%), 1fr));
      gap: 1rem;
      margin: 0;

      & .product {
        inline-size: fit-content;
        margin: 0;
        padding: 0;
      }

      & .qodef-e-inner, .qodef-woo-product-content {
        & > * + * {
          margin-block-start: 1rem;
        }

        & .button {
          margin-block: 1rem;
        }
      }
    }

    & .qodef-woo-product-content {
      margin: 0;
    }

    & h3 {
      min-block-size: 2lh;
    }

    & .price {
      margin: 0;
      padding: 0 !important;
    }
  }

  .elementor-1149 .elementor-element.elementor-element-fff4e44 > .elementor-element-populated {
    padding: 1rem;
  }

  @media (width <= 1280px) {
    & .qodef-grid > .qodef-grid-inner {
      padding-inline: 3rem;
    }
  }

  @media (width <= 800px) {
    & .qodef-grid > .qodef-grid-inner {
      padding-inline: 2rem;
    }

    & .qodef-grid .qodef-grid-inner .qodef-page-content-section {
      order: 1;
    }

    & .qodef-grid .qodef-grid-inner .qodef-page-sidebar-section {
      flex-basis: 100%;
      order: 0;

      #woocommerce_product_categories-2 {
        display: none;
      }
    }
  }
}

/* Cartes des produits */
.sameh {
  div {
    margin: 0 !important;
  }

  .elementor-widget-woocommerce-product-price .price {
    margin: 0;
  }

  & .elementor-element.elementor-element-7b3e95a > .elementor-element-populated {
    padding: 1rem !important;

    h1 {
      min-block-size: 2lh;
    }
  }
}

.elementor-grid-4 .elementor-grid {
  grid-template-columns: repeat(auto-fill, minmax(min(355px, 100%), 1fr)) !important;

  @media (width <= 400px) {
    grid-template-columns: 1fr !important;
  }
}

/* Applique une marge constante aux composants d'une boîte Produit */
.e-loop-item {
  .elementor-widget-wrap {
    &.elementor-element-populated > * + * {
      margin-block-start: 1rem !important;
    }

    .elementor-element:last-of-type {
      margin-block-end: 1rem !important;
    }
  }
}

/* Illustrations de l'accueil */
.illustration-accueil {
  max-block-size: 80vb;

  img {
    block-size: 80vb;
    object-fit: cover;
    object-position: center;
  }
}

/* Section « Une Coopérative c'est l'Alliance [...] » */
.section-storytelling {
  & .qodef-section-title .qodef-m-title {
    font-size: 2rem;
    font-weight: 600;
    line-height: 1.2;
    hyphens: auto;
    text-wrap: pretty;
    letter-spacing: 0;
  }

  p {
    margin: 0;
  }

  & > .elementor-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(40ch, 100%), 1fr));
    gap: 2rem;

    & .elementor-column {
      inline-size: fit-content !important;

      .elementor-widget {
        margin: 0;
      }

      /* Applique une marge uniformes */
      & * + * {
        margin-block-start: 1em !important;
      }

      /* N'applique pas de marge en trop après le titre */
      .elementor-element-2de575e {
        margin-block-start: 0 !important;
      }
    }
  }

  @media (width <= 850px) {
    & > .elementor-container {
      gap: 1rem;
    }
  }
}

/* Flux Instagram */
.flux-instagram {
  & .elementor-widget.elementor-widget-shortcode {
    margin-block-end: 0;
  }

  & #sb_instagram {
    padding: 0 !important;

    & #sbi_images {
      padding: 0;
    }
  }
}

/* Ensemble de quatre icônes avant le menu du bas */
.footer-icones {
  > .elementor-container {
    display: flex;
    flex-flow: row wrap;
    gap: 2rem;
    inline-size: 100% !important;

    > .elementor-column {
      flex: 1;
      flex-basis: calc(25% - 2rem);
    }
  }

  .qodef-m-content {
    display: inline-flex;
    flex-flow: row wrap;
    justify-content: center;
    text-align: center;

    .qodef-m-text {
      max-inline-size: 17ch;
    }
  }

  @media (width <= 940px) {
    > .elementor-container > .elementor-column {
      flex-basis: calc(50% - 2rem);
    }
  }

  @media (width <= 375px) {
    > .elementor-container > .elementor-column {
      flex-basis: 100%;
    }
  }
}

/* Pied de page avec le logo et le menu */
.footer {
  background: #000;

  > .elementor-container {
    display: flex;
    flex-flow: row nowrap;
    gap: 1rem 2rem;
    padding: 2rem;

    > .elementor-column {
      flex: 1;
      inline-size: initial;
      min-inline-size: 20ch;
    }
  }

  /* Cartes bancaires */
  .footer__cartes__ligne {
    /* Conteneur de la ligne */
    .elementor-container {
      gap: 0.33rem;
    }

    /* Colonne avec une carte */
    .elementor-column {
      flex: 0;
      inline-size: fit-content;
    }
  }

  @media (width <= 940px) {
    > .elementor-container {
      flex-flow: row wrap;

      > .elementor-column {
        flex-basis: calc(33% - 2rem);

        &:first-of-type {
          flex-basis: 100%;
        }
      }
    }

    .elementor-widget-image {
      text-align: center !important;
    }
  }

  @media (width <= 450px) {
    > .elementor-container {
      padding-inline: 2rem;
    }
  }
}

/* Aligne les deux dernières lignes du pied de page au centre */
footer {
  ul {
    justify-content: center;
    margin: 0 !important;
  }
}

/* Cookies */
.cc-type-opt-in {
  font-family: Belleza, serif;
}

/* Icônes pour le volume */
.zze {
  position: absolute;
  z-index: 100;
  inset-block-start: 50px;
  inset-inline-end: 20px;
}

/*
 * BUG: Cache le second prix des cartes Produits sur les Pages d'Archives et le Panier.
 */
.qodef-woo-product-content .price:nth-of-type(2) {
  display: none !important;
}

/*
 * FONC: Grille des Produits similaires à divers endroits du site (notamment le Panier).
 */
.top-selling-products {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr));
  gap: 1rem;

  /* TOFIX: Difficile de surcharger la spécificité */
  margin-bottom: 2rem !important;

  & .product {
    position: relative;
    overflow: hidden;
    display: inline-block;
    width: 100%;
    padding: 1rem;
    text-align: center;
    border: 1px solid #ccc;

    & h3 {
      margin: initial;
      padding: initial;
      font-size: 18px;
    }

    /*
     * BUG: Cache un <h6> généré en trop.
     */
    & h6 {
      display: none !important;
    }

    /* Conteneur du contenu textuel de la carte */
    .qodef-woo-product-content {
      text-align: center;

      & .button {
        position: relative;
        width: fit-content;
        margin: 1rem auto;
        padding: 9px 33px;
        font-size: 14px;
        font-weight: 400;
        line-height: 2em;
        color: #000;
        text-transform: uppercase;
        letter-spacing: 0;
        border: 1px solid #a2a2a2;
      }
    }
  }
}

/*
 * FONC: Produits similaires, présents sur les pages Produit
 */
.related.products {
  margin-bottom: 2rem;
}

/*
 * FONC: Bouton « Ajouter un code promo » sur les pages Panier et Finaliser la commande
 */
.wc-block-components-totals-coupon__form button {
  width: fit-content;
  margin-left: 1ex;
  padding: 9px 33px !important;
  font-family: Roboto, sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 2em;
  color: #000;
  text-transform: uppercase;
  letter-spacing: 0;
  background: transparent;
  border: 1px solid #a2a2a2;
}

/*
 * FONC: Titre de page sur la page Finaliser la commande
 */
.wc-block-components-sidebar-layout.wc-block-checkout.is-large {
  margin-top: 12rem;

  @media (width <= 1024px) {
    & {
      margin-top: 2rem;
    }
  }
}

/*
 * FONC: Page « Finaliser la commande »
 */
.wp-block-woocommerce-checkout {
  /* Titre « Finaliser la commande » */
  .h132p {
    margin-top: initial;
  }

  /* Boîte des boutons « Continuer en tant qu'Invité/Se connecter » */
  .custom-checkout-buttons {
    display: flex;
    flex-flow: row nowrap;
    gap: 10px;
    justify-content: space-between;
    inline-size: 100%;
    margin: 2rem 0;
    text-align: center;

    /* N'affiche pas les boutons quand l'Utilisateur est connecté */
    .logged-in & {
      display: none;
    }

    @media (width <= 900px) {
      & {
        flex-flow: column nowrap;

        .btn-checkout {
          inline-size: 100%;
        }
      }
    }
  }

  /* Barre latérale avec le résumé de la commande */
  .wc-block-checkout__sidebar.wp-block-woocommerce-checkout-totals-block {
    top: initial;

    /* Marge supérieure reprenant la hauteur exacte du titre */
    margin-top: calc(var(--wp--preset--font-size--x-large) * 1.2 + 40px);

    @media (width <= 900px) {
      & {
        margin-top: calc(var(--wp--preset--font-size--x-large) * 1.2 * 2 + 40px);
      }
    }

    /* Plus besoin d'une marge égale à la hauteur du titre */
    @media (width <= 700px) {
      & {
        margin-top: 3.5rem;
      }
    }
  }

  .wc-block-checkout__main {
    @media (width < 765px) {
      & {
        /* TOFIX: Difficile de surcharger la spécificité */
        order: 0 !important;
      }
    }
  }

  /* Boutons « Retour au Panier » et « Commander » */
  .wc-block-checkout__actions {
    margin-bottom: 3rem;
    padding: initial;

    .wc-block-checkout__actions_row {
      gap: 10px;

      a, button {
        width: 100%;
        margin: initial;
        text-align: center;
      }

      /* Bouton « Commander » */
      .wc-block-components-button {
        padding: 9px 33px;
        color: #fff;
        text-transform: uppercase;
        background: #000;
        border: 1px solid #a2a2a2;
      }
    }

    @media (width <= 700px) {
      & {
        margin-bottom: initial;
      }
    }
  }

  /* Étapes du Formulaire */
  @media (width < 600px) {
    .is-mobile .wc-block-components-form .wc-block-components-checkout-step,
    .is-small .wc-block-components-form .wc-block-components-checkout-step {
      margin-bottom: 3.5rem;
      padding-top: 3.5rem;

      &::after {
        bottom: -3.5rem;
      }
    }
  }
}

/* Pour l'image s'affichant à droite en haut, c'est une image d'arrière-plan sur .qodef-page-inner */

/*
 * FONC: Page « Panier »
 */
.page-id-14 {
  .wc-block-cart.is-small {
    /* Tableau du résumé de la commande sur petites tailles d'écrans */
    .wc-block-cart-items td.wc-block-cart-item__total {
      padding-right: 1rem;
    }

    /* Encart pour le code promo et le résumé du coût de la commande */
    .wc-block-components-sidebar {
      margin-top: 3rem;
    }
  }
}