/* Cache le modal natif du module blockcart */
#blockcart-modal {
  display: none !important;
}

/* Style simple pour notre modal (tu peux adapter) */
.sosc-custommodal .modal-header {
  border-bottom: 0;
      background: #204735;
    color: #fff;
    height:100px;
        display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
        padding: 30px;
}

.modal-header::after{
    display:none;
}

.sosc-header-product{
    font-size: 24px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

.sosc-custommodal .modal-footer {
  border-top: 0;
  display: flex;
    gap: 14px;
    padding: 20px;

}
.sosc-custommodal .sosc-line {
  margin-bottom: 0.5rem;
  font-size: 1rem;
}
.sosc-custommodal .sosc-mini-line {
  opacity: 0.9;
}
.sosc-custommodal .close, .sosc-custommodal .close:hover, .sosc-custommodal .close:active, .sosc-custommodal .close:focus{
        color: #204735;
    opacity: 1;
    height: 37px;
    width: 37px;
    background: #fff;
    border-radius: 999px;
}
.sosc-custommodal .close span{
  font-weight:400;
}
body:not(.modal-open) .modal-backdrop {
  display: none !important;
}
/* === Drawer latéral droite, 70% largeur, pleine hauteur === */
.sosc-aside .modal-dialog {
  position: fixed;
  top: 0;
  right: 0;
  margin: 0;
  height: 100vh;
  width: 70vw;               /* 70% de la fenêtre */
  max-width: none;           /* ne pas borner par max-width Bootstrap */
  transform: translateX(100%);      /* hors cadre à droite */
  transition: transform .35s ease;  /* animation slide */
}

.sosc-aside.show .modal-dialog,
.sosc-aside.in .modal-dialog {       /* compat BS4 */
  transform: translateX(0) !important;
}

.sosc-aside .modal-content {
  height: 100vh;             /* plein écran en hauteur */
  border-radius: 0;          /* bords droits */
  display: flex;
  flex-direction: column;
  overflow: hidden;          /* évite scroll de fond */
}

.sosc-aside .modal-header,
.sosc-aside .modal-footer {
  flex: 0 0 auto;
}

.sosc-aside .modal-body {
  flex: 1 1 auto;            /* zone scrollable interne */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: #f2f7e2;
}

/* Empêche Bootstrap d’imposer ses translations verticales */
.sosc-aside .modal-dialog {
  transform-origin: right center;
}
.modal.sosc-aside.fade .modal-dialog {
  transition-property: transform;    /* (on laisse l’opacité au container) */
}

/* Backdrop de secours si jamais le body n'est pas en état "modal-open" */
body:not(.modal-open) .modal-backdrop { display: none !important; }



.modal-footer .btn-outline-secondary{
        background: #fff;
    border: 1.3px solid #ed8210;
    color: #ed8210;
    width: 50%;
    text-align: center;
    padding: 10px 10px;
    border-radius: 8px;

}

.modal-footer .btn-primary{
    background: #ed8210;
    color: #fff;
    border: 1.3px solid #ed8210;
    width: 50%;
    text-align: center;
    padding: 10px 10px;
    border-radius: 8px;
}


/* Responsive: sur petits écrans, on prend toute la largeur */
@media (max-width: 767.98px) {
  .sosc-aside .modal-dialog {
    width: 100vw;
  }
}

/* Accessibilité: moins d’animation si l’utilisateur préfère */
@media (prefers-reduced-motion: reduce) {
  .sosc-aside .modal-dialog { transition: none; }
}


/* ===== Animation latérale droite -> gauche (override Bootstrap) ===== */

/* Positionnement/tailles du drawer (si tu ne l’as pas déjà) */
#sosc-custom-modal .modal-dialog,
.modal.sosc-aside .modal-dialog {
  position: fixed;
  top: 10%;
  right: 0;
  margin: 0;
  height: 64vh;
  width: 55vw;
  max-width: none;
  transform: translateX(100%);              /* hors écran à droite */
  transition: transform .35s ease;          /* animation slide */
  transform-origin: right center;
}

/* État "fermé mais prêt" : Bootstrap applique normalement un translateY, on l’écrase */
#sosc-custom-modal.fade .modal-dialog,
.modal.sosc-aside.fade .modal-dialog {
  transform: translateX(100%) !important;   /* annule translateY de Bootstrap */
}

/* Ouverture */
#sosc-custom-modal.show .modal-dialog,
#sosc-custom-modal.in .modal-dialog,        /* compat BS4 */
.modal.sosc-aside.show .modal-dialog,
.modal.sosc-aside.in .modal-dialog {
  transform: translateX(0) !important;
}

/* Contenu plein hauteur + structure interne */
#sosc-custom-modal .modal-content,
.modal.sosc-aside .modal-content {
  height: 64vh;
  border:none;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 20px 0 0 20px;
}
#sosc-custom-modal .modal-body,
.modal.sosc-aside .modal-body {
  flex: 1 1 auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* Responsive: 100% largeur sur petits écrans */
@media (max-width: 767.98px) {
  #sosc-custom-modal .modal-dialog,
  .modal.sosc-aside .modal-dialog {
    width: 100vw;
  }
}

/* Motion reduce */
@media (prefers-reduced-motion: reduce) {
  #sosc-custom-modal .modal-dialog,
  .modal.sosc-aside .modal-dialog {
    transition: none;
  }
}
.sosc-aside .modal-dialog { transition: transform .4s cubic-bezier(.2,.7,.2,1); }
.sosc-aside .modal-content { box-shadow: -24px 0 48px rgba(0,0,0,.25); }

/* Styles pour les produits associés */
.sosc-related-container {
  padding: 10px;
}

.sosc-related-title {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 20px;
  text-align: left;
  color: #333;
}

/* Assure que la grille de produits à l'intérieur de la modale fonctionne */
.sosc-related-container .products.row {
  display: flex;
  flex-wrap: wrap;
  margin-left: -15px;
  margin-right: -15px;
}

.sosc-related-container .products .col-md-4 {
  padding-left: 15px;
  padding-right: 15px;
  margin-bottom: 20px; /* Espace entre les lignes de produits */
}

.sosc-loading {
    text-align: center;
    padding: 40px 20px;
    font-style: italic;
    color: #888;
}


.sosc-related-container  .CTA-product-add-to-cart{
  width:100%;
}
.sosc-track-modal .thumbnail-container{
    margin-bottom: 0;
    min-height: 330px;
}
.sosc-related-container .col-md-3{
  width:20%;
  padding-left:0;
  padding-right:0;
}

.sosc-related-container  .thumbnail-top{
  padding: 0 5px 5px !important;
      width: 70%;
      margin: 0 auto;
}

.sosc-related-container  .product-miniature .product-description {
    min-height: 100px;
}

.sosc-related-container  .product-price-and-shipping{
  margin-top: auto;
}

.sosc-related-container .product-miniature .product-title {
    margin-top: .4rem;
    width:100%;
    margin-bottom: auto;
}

.sosc-related-container .footer-container .h3{
  width:100%;
}
.sosc-related-container  .footer-container .h3, .footer-container .h4 {
    margin-bottom: 0.2rem;
}


.sosc-related-container .price {
  color: #204735;

  font-size: 21px;
  font-style: normal;
  font-weight: 800;
  line-height: normal;
}

.sosc-related-container .product-miniature .product-price-and-shipping {
margin-top:0!important;
}



/* ===== Slider produits associés (fix bord droit + snap précis) ===== */
.sosc-slider {
  position: relative;
}

.sosc-track-modal {
  display: flex;
      gap: 13px;
  overflow-x: auto;

  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-inline: 40px;
  scroll-padding-inline: 40px; 
}
.sosc-track-modal::-webkit-scrollbar { display: none; }

.sosc-slide {
  flex: 0 0 calc(100% / 4);

}

@media (max-width: 1199.98px) { .sosc-slide { flex-basis: calc(100% / 3); } }
@media (max-width: 991.98px)  { .sosc-slide { flex-basis: calc(100% / 2); } }
@media (max-width: 575.98px)  { .sosc-slide { flex-basis: calc(100% / 1.2); } }


.sosc-slider .sosc-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 36px; height: 36px;
  border: none; border-radius: 999px;
  background: rgba(32,71,53,0.9);
  color: #fff; display: grid; place-items: center;
  cursor: pointer; z-index: 2;
}
.sosc-slider .sosc-prev { left: 4px; }
.sosc-slider .sosc-next { right: 4px; }
.sosc-slider .sosc-nav[disabled] { opacity: .35; cursor: default; }