/* Page 404 */
.page-404--code {
  font-size: clamp(3rem, 10vw, 6rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
}

.page-404--title {
  font-size: clamp(1.25rem, 2.5vw, 2rem);
  font-weight: 800;
}
/* colissimo start */
.couleur1
{
    color: #86cb3a;
}

.couleur2
{
    color: #8f2e8f;
}
/* colissimo end */

:root
{
    --bs-gutter-x: 0.75rem;
}

/* fil d'ariane (breadcrumb) start */
.breadcrumb
{
    padding: 0.5rem;
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    list-style-type: none;
    transition: all 0.3s ease;
}

.breadcrumb-item
{
    display: flex;
    position: relative;
    margin: 0.25rem 0.5rem;
    color: #8f2e8f;
}

.breadcrumb-item a
{
    color: black;
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
    background-color: #add8e6;
    border-radius: 0.75rem;
}

.breadcrumb-item a:hover {
  color: white;
}

.breadcrumb-container .breadcrumb-item:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 50%;
  right: -0.5rem; /* Ajustement pour mieux positionner les flèches */
  border-top: 5px solid transparent; 
  border-bottom: 5px solid transparent;
  border-left: 5px solid #8f2e8f; 
  transform: translateY(-50%);
  z-index: 1;
}

/* fil d'ariane (breadcrumb) end */

  .button-launch-carrousel {
    background-color: #007BFF;
    border: none;
    color: white;
    padding: 10px 20px;
    font-size: 16px;
    font-weight: bold;
    border-radius: 5px;
    box-shadow: 0 4px #0056b3, 0 6px 20px rgba(0,0,0,0.19); /* Ombre pour effet 3D */
    transition: all 0.3s ease;
    cursor: pointer;
    outline: none;
}

.button-launch-carrousel:hover {
    transform: translateY(-2px); /* Déplacement léger vers le haut au survol */
    box-shadow: 0 6px #0056b3, 0 8px 25px rgba(0,0,0,0.23);
}

.button-launch-carrousel:active {
    transform: translateY(1px); /* Simule l'enfoncement du bouton lors du clic */
    box-shadow: 0 2px #0056b3, 0 5px 15px rgba(0,0,0,0.21);
}

#carrousel-slide--edit--image-container {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.ellipsis--one-line
{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ellipsis--multi-lines
{
    text-overflow: ellipsis;
    overflow: hidden;
}

.line-break--anywhere
{
    line-break: anywhere!important;
}

/* Fin ajout CSS */

body
{
    font-family: Arial, Helvetica, sans-serif;
    margin: 0;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #212529;
    background-color: #fff;
}

footer
{
    overflow-x:hidden;
    min-height: 80vh;
} 

*, ::after, ::before
{
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

:focus-visible {
    outline-style: solid;
    outline-width: 3px;
    outline-color: #8f2e8f;
    outline-offset: 3px;
    border-color: transparent;
}

.btn--previous-image:focus,
.btn--next-image:focus
{
    background-color: white;
}

h1,
h2,
h3,
h4,
h5,
h6
{
    margin: 0;
    padding: 0;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
    color: inherit;
    background: none;
    border: none;
}

.h1,
.h2,
.h3,
.h4,
.h5,
.h6
{
    margin: 0;
}

.h1{font-size: 1.5rem;}
.h2{font-size: 1.375rem;}
.h3{font-size: 1.250rem;}
.h4{font-size: 1.125rem;}
.h5{font-size: 1rem;}
.h6{font-size: 0.875rem;}

.block
{
    display: block!important;
}

li
{
    list-style: none;
    list-style-position: inside;
    margin:0;
    padding:0;
}

ol,
ul
{
    padding: 0;
    margin: 0;
}

a
{
    text-decoration: none;
    color: black;
}

.admin--table
{
    caption-side: bottom;
    border-collapse: collapse;
    border-color: #dee2e6;
}

.admin--table tbody,
.admin--table td,
.admin--table tfoot,
.admin--table th,
.admin--table thead,
.admin--table tr
{
    border-color: #dee2e6;
    border-style: solid;
    border-width: 1px;
    padding: 0.75rem;
}

.noscroll
{
    overflow: hidden;
}

.development-overlay
{
    position: fixed;
    left: 0;
    top: 0;
    height: 100svh;
    width: 100%;
    background-color: transparent;
    z-index: 999;
    pointer-events: none;
    opacity: 0.5;
}

.click-through
{
    pointer-events: none!important;/*TODO : clean the code */
}

.pointer-events--none
{
    pointer-events: none!important;
}

.product--attributes--table,
.offer--attribute-list--table
{
    caption-side: bottom;
    border-collapse: collapse;
    border-color: #dee2e6;
}


.product--attributes--table tbody,
.product--attributes--table td,
.product--attributes--table tfoot,
.product--attributes--table th,
.product--attributes--table thead,
.product--attributes--table tr,
.offer--attribute-list--table tbody,
.offer--attribute-list--table td,
.offer--attribute-list--table tfoot,
.offer--attribute-list--table th,
.offer--attribute-list--table thead,
.offer--attribute-list--table tr
{
    border-color: #dee2e6;
    border-style: solid;
    border-width: 1px;
    padding: 0.75rem;
}

.float-start
{
    float:left;
}

.float-end
{
    float:right;
}

.background-color--dealicash-violet /*Dark Magenta*/
{
    background-color: #8f2e8f!important;
}

.background-color--dealicash-green /*Yellow Green*/
{
    background-color: #86cb3a!important;
}

.background-color--white
{
    background-color: white!important;
}

.background-color--dark
{
    background-color: #212529!important;
}

.background-color--transparent
{
    background-color: transparent!important;
}

.background-color--lightblue
{
    background-color: lightblue!important;
}

.background-color--red
{
    background-color: red!important;
}

.color--dealicash-violet
{
    color: #8f2e8f!important;
}

.color--dealicash-green
{
    color: #86cb3a!important;
}

.color--white
{
    color: white!important;
}

.color--red
{
    color: red!important;
}

.color--gray,
.color--grey
{
    color: #6c757d!important;
}

.color--light-gray,
.color--light-grey
{
    color: #6b6b6b5d!important;
}

.color--black
{
    color: black!important;
}

.color--blue
{
    color: #007bff !important;
}

.color--lightblue
{
    color: lightblue!important;
}

.font-style--normal
{
    font-style: normal!important;
}

.font-style--italic
{
    font-style: italic!important;
}

.font-style--oblique
{
    font-style: oblique!important;
}

.text-transform--lowercase
{
    text-transform: lowercase!important;
}

.text-transform--uppercase
{
    text-transform: uppercase!important;
}

.text-transform--capitalize
{
    text-transform: capitalize!important;
}

.text-center
{
    text-align: center;
    display: block;
}

.text--underline
{
    border-bottom: 1px solid currentColor;
}

.font-weight--700,
.text-bold
{
    font-weight: 700!important;
}

.font-weight--900,
.text-boldest
{
    font-weight: 900!important;
}

.text-decoration--line-through,
.text-line-through
{
    text-decoration: line-through!important;
}

.opacity-5
{
    opacity: 0.05;
}

.opacity-25
{
    opacity: 0.25;
}

.opacity-50
{
    opacity: 0.5;
}

.opacity-75
{
    opacity: 0.75;
}

.width-5
{
    width: 5%;
}

.width-25
{
    width: 25%;
}

.width-40
{
    width: 40%;
}

.width-50
{
    width: 50%;
}

.width-75
{
    width: 75%;
}

.width-90
{
    width: 90%;
}

.width-100
{
    width: 100%;
}

.p-1,
.pt-1,
.py-1
{
    padding-top: 0.5rem!important;
}

.p-2,
.pt-2,
.py-2
{
    padding-top: 1rem!important;
}

.p-3,
.pt-3,
.py-3
{
    padding-top: 1.5rem!important;
}

.p-4,
.pt-4,
.py-4
{
    padding-top: 2rem!important;
}

.p-5,
.pt-5,
.py-5
{
    padding-top: 2.5rem!important;
}

.p-1,
.pr-1,
.px-1
{
    padding-right: 0.5rem!important;
}

.p-2,
.pr-2,
.px-2
{
    padding-right: 1rem!important;
}

.p-3,
.pr-3,
.px-3
{
    padding-right: 1.5rem!important;
}

.p-4,
.pr-4,
.px-4
{
    padding-right: 2rem!important;
}

.p-5,
.pr-5,
.px-5
{
    padding-right: 2.5rem!important;
}

.p-1,
.pb-1,
.py-1
{
    padding-bottom: 0.5rem!important;
}

.p-2,
.pb-2,
.py-2
{
    padding-bottom: 1rem!important;
}

.p-3,
.pb-3,
.py-3
{
    padding-bottom: 1.5rem!important;
}

.p-4,
.pb-4,
.py-4
{
    padding-bottom: 2rem!important;
}

.p-5,
.pb-5,
.py-5
{
    padding-bottom: 2.5rem!important;
}

.p-1,
.pl-1,
.px-1
{
    padding-left: 0.5rem!important;
}

.p-2,
.pl-2,
.px-2
{
    padding-left: 1rem!important;
}

.p-3,
.pl-3,
.px-3
{
    padding-left: 1.5rem!important;
}

.p-4,
.pl-4,
.px-4
{
    padding-left: 2rem!important;
}

.p-5,
.pl-5,
.px-5
{
    padding-left: 2.5rem!important;
}

.m-1,
.mt-1,
.my-1
{
    margin-top: 0.5rem!important;
}

.m-2,
.mt-2,
.my-2
{
    margin-top: 1rem!important;
}

.m-3,
.mt-3,
.my-3
{
    margin-top: 1.5rem!important;
}

.m-4,
.mt-4,
.my-4
{
    margin-top: 2rem!important;
}

.m-5,
.mt-5,
.my-5
{
    margin-top: 2.5rem!important;
}

.m-1,
.mr-1,
.mx-1
{
    margin-right: 0.5rem!important;
}

.m-2,
.mr-2,
.mx-2
{
    margin-right: 1rem!important;
}

.m-3,
.mr-3,
.mx-3
{
    margin-right: 1.5rem!important;
}

.m-4,
.mr-4,
.mx-4
{
    margin-right: 2rem!important;
}

.m-5,
.mr-5,
.mx-5
{
    margin-right: 2.5rem!important;
}

.m-1,
.mb-1,
.my-1
{
    margin-bottom: 0.5rem!important;
}

.m-2,
.mb-2,
.my-2
{
    margin-bottom: 1rem!important;
}

.m-3,
.mb-3,
.my-3
{
    margin-bottom: 1.5rem!important;
}

.m-4,
.mb-4,
.my-4
{
    margin-bottom: 2rem!important;
}

.m-5,
.mb-5,
.my-5
{
    margin-bottom: 2.5rem!important;
}

.m-1,
.ml-1,
.mx-1
{
    margin-left: 0.5rem!important;
}

.m-2,
.ml-2,
.mx-2
{
    margin-left: 1rem!important;
}

.m-3,
.ml-3,
.mx-3
{
    margin-left: 1.5rem!important;
}

.m-4,
.ml-4,
.mx-4
{
    margin-left: 2rem!important;
}

.m-5,
.ml-5,
.mx-5
{
    margin-left: 2.5rem!important;
}

.hidden
{
    display: none!important;
}

.visibility-hidden
{
    visibility: hidden!important;
}

.border-none
{
    border: none!important;
}

.border
{
    border: 1px solid #dee2e6!important;
}

.border-rounded
{
    border-radius: 0.25rem;
}

.border-rounded--top
{
    border-radius: 0.25rem 0.25rem 0 0;
}

.border-rounded--bottom
{
    border-radius: 0 0 0.25rem 0.25rem;
}


.overflow-shadow--top
{
    position: fixed;
    height: 30px;
    background-image: linear-gradient(180deg, #86cb3a, transparent);
}

.overflow-shadow--bottom
{
    position: fixed;
    height: 30px;
    background-image: linear-gradient(0deg, #86cb3a, transparent);
}

.shadow-custom
{
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.2);
}

.shadow-bottom-black
{
    box-shadow: 0 1rem 1rem -1rem black;

}

.shadow-top-black
{
    box-shadow: 0 -1rem 1rem -1rem black;

}

.z-index-1
{
    z-index: 1;
}

.z-index-2
{
    z-index: 2;
}

.z-index-3
{
    z-index: 3;
}

.z-index-4
{
    z-index: 4;
}

.z-index-5
{
    z-index: 5;
}

svg
{
    vertical-align: middle;
}

img
{
    position: relative;
    overflow: hidden;
    color: #6c757d;
}

img:after
{
    content: attr(alt);
    position: absolute;
    left: 0;
    top: 0;
    background-color: #e5e1de;
    background-image: url("../404_image_not_found.webp");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    height: 100%;
    width: 100%;
}

.input-text,
.input-number
{
    display: inline-block;
    line-height: 1.5rem;
    text-align: center;
    text-decoration: none;
    vertical-align: middle;
    border: 1px solid #ced4da;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    border-radius: 0.25rem;
}

.input-textarea
{
    display: inline-block;
    text-decoration: none;
    border: 1px solid #ced4da;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    border-radius: 0.25rem;
}

.input-select
{
    display: block;
    width: 100%;
    padding: .375rem 2.25rem .375rem .75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #212529;
    background-color: #fff;
    border: 1px solid #ced4da;
    border-radius: .25rem;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

#account-access-process--container
{
    width: 313px;
    margin: auto;;
}

.carousel--nav-button
{
    cursor: pointer;
    display: inline-block;
    height: 1rem;
    width: 1rem;
    margin: 0.5rem;
    border: 1px solid white;
    padding: 0;
    border-radius: 50%;
    opacity: 50%;
}

.carousel--previous-slide,
.carousel--next-slide,
.btn--previous-image,
.btn--next-image
{
    background-color: rgba(255,255,255,0.2);
}

.btn
{
    cursor: pointer;
    display: inline-block;
    line-height: 1.5rem;
    text-align: center;
    text-decoration: none;
    vertical-align: middle;
    border: 1px solid transparent;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    border-radius: 0.25rem;
    background-color: transparent;
}

.btn-small
{
    cursor: pointer;
    display: inline-block;
    line-height: 1rem;
    text-align: center;
    text-decoration: none;
    vertical-align: middle;
    border: 1px solid transparent;
    padding: 0.25rem 0.25rem;
    font-size: 0.75rem;
    border-radius: 0.25rem;
}

.btn-tiny
{
    cursor: pointer;
    display: inline-block;
    line-height: 1rem;
    text-align: center;
    text-decoration: none;
    vertical-align: middle;
    border: 1px solid grey;
    padding: 0.25rem 0.25rem;
    font-size: 0.5rem;
    border-radius: 0.25rem;
    background-color: transparent;
}

.btn-dealicash
{
    background-color: #8f2e8f;
    color: #fff;
}

.btn-dealicash-grey
{
    background-color: #6c757d;
    color: #fff;
}

.btn-dealicash-alt
{
    background-color: #86cb3a;
    color: #fff;
}

.btn-dealicash-light
{
    border: 1px solid #86cb3a;
    color: #8f2e8f;
}

.btn-dealicash-light-alt
{
    border: 1px solid #8f2e8f;
    color: #86cb3a;
}

.btn-dealicash-light-danger
{
    color: red;
}

.btn-dealicash-danger
{
    background-color: red;
    color: #fff;
}

.btn:disabled,
.btn-small:disabled,
.btn-tiny:disabled,
.disabled-link
{
    pointer-events: none;
    opacity: 0.75;
    color: black;  /* to avoid contrast issues with reduced opacity */
}

.btn:active
{
    box-shadow: inset 0 4px 8px 0 rgba(0, 0, 0, 0.2), inset 0 6px 20px 0 rgba(0, 0, 0, 0.2);
}

.background-color--dealicash-violet /*Dark Magenta*/
{
  background-color: #8f2e8f!important;
}

.background-color--dealicash-green /*Yellow Green*/
{
  background-color: #86cb3a!important;
}

.background-color--white
{
  background-color: white!important;
}

.background-color--dark
{
  background-color: #212529!important;
}

.background-color--transparent
{
  background-color: transparent!important;
}

.background-color--lightblue
{
  background-color: lightblue!important;
}

.background-color--red
{
  background-color: red!important;
}

.background-color--green
{
  background-color: green!important;
}

.background-color--blue
{
  background-color: #007bff!important;
}

.background-color--light-red
{
  background-color: #ecbfc3!important;
}

.background-color--light-green
{
  background-color: #96dbbc!important;
}

.background-color--gray,
.background-color--grey
{
  background-color: #6c757d!important;
}

.background-color--light-gray,
.background-color--light-grey
{
  background-color: #6b6b6b5d!important;
}

.row
{
    margin-right: 0;
    margin-left: 0;
    display: flex;
    flex-wrap: wrap;
}

.row>*
{
    flex-shrink: 0;
    width: 100%;
    max-width: 100%;
    padding-right: calc(var(--bs-gutter-x)/ 2);
    padding-left: calc(var(--bs-gutter-x)/ 2);
}

.col-1
{
    flex: 0 0 auto;
    width: 8.333333%;
}

.col-2
{
    flex: 0 0 auto;
    width: 16.666667%;
}

.col-3
{
    flex: 0 0 auto;
    width: 25%;
}

.col-4
{
    flex: 0 0 auto;
    width: 33.333333%;
}

.col-5
{
    flex: 0 0 auto;
    width: 41.666667%;
}

.col-6
{
    flex: 0 0 auto;
    width: 50%;
}

.col-7
{
    flex: 0 0 auto;
    width: 58.333333%;
}

.col-8
{
    flex: 0 0 auto;
    width: 66.666667%;
}

.col-9
{
    flex: 0 0 auto;
    width: 75%;
}

.col-10
{
    flex: 0 0 auto;
    width: 83.333333%;
}

.col-11
{
    flex: 0 0 auto;
    width: 91.666667%;
}

.col-12
{
    flex: 0 0 auto;
    width: 100%;
}




.tooltip--container
{
    position: relative;
}

.tooltip--container .tooltip--text
{
    visibility: hidden;
    background-color: #EAEDED;
    color: black;
    width: 250px;
    text-align: center;
    padding: 2px 5px;
    border-radius: 6px;
    position: absolute;
    right: -250px;
    top: 0;
    z-index: 1;
}

.row-flex
{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-content: center;
    align-items: center;
}

.row-flex--center
{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.row-flex--space-evenly
{
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: center;
}

.row-flex--space-around
{
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
}

.row-flex--start
{
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
}

.row-flex--end
{
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
}

.row-flex--between
{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

.column-gap--1
{
    column-gap: 0.5rem!important;
}

.column-gap--2
{
    column-gap: 1rem!important;
}

.column-gap--3
{
    column-gap: 1.5rem!important;
}

.column-gap--4
{
    column-gap: 2rem!important;
}

.column-gap--5
{
    column-gap: 2.5rem!important;
}

.column-flex
{
    display: flex;
    flex-direction: column;
    margin: auto;
}

.column-flex--center
{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.flex-child--align-self-start
{
    align-self: flex-start;
}

.flex-child--align-self-center
{
    align-self: center;
}

.flex-child--align-self-end
{
    align-self: flex-end;
}

.flex-child--align-self-stretch
{
    align-self: stretch;
}

.flex-child--align-self-baseline
{
    align-self: baseline;
}

.header--logo--container{
    display: flex;
    flex-direction: row;
    justify-content: center;
    position: relative;
}

.header--logo--container--mobile{
    display: flex;
    flex-direction: row;
    justify-content: center;
    margin-top: 0.2rem;
    position: relative;
}

.header--logo--container--mobile > a > .h1{
    font-size: 1.75rem;
}

.form-control
{
    display: block;
    width: 100%;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    font-weight: 400;
    color: #212529;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: 0.25rem;
    resize: vertical;
}

.form-control::file-selector-button
{
    padding:.375rem .75rem;
    margin:-.375rem -.75rem;
    -webkit-margin-end:.75rem;
    margin-inline-end:.75rem;
    color:#212529;
    background-color:#e9ecef;
    pointer-events:none;
    border-color:inherit;
    border-style:solid;
    border-width:0;
    border-inline-end-width:1px;
    border-radius:0;
}

.form-line--compact
{
    position: relative;
}

.form-line--compact > label,
.compact--top-left
{
    position: absolute;
    left: 0.5rem;
    top: -0.625rem;
    font-size: 0.75rem;
    background-color: rgba(255, 255, 255, 0.8);
    padding: 0.125rem 0.25rem;
    line-height: 0.75rem;
    border-radius: 0.5rem;
}

.form-select
{
    display: block;
    width: 100%;
    padding: 0.375rem 2.25rem 0.375rem 0.75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #212529;
    background-color: #fff;
    background-image: url(data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M7.41%2C8.58L12%2C13.17L16.59%2C8.58L18%2C10L12%2C16L6%2C10L7.41%2C8.58Z%22%20%2F%3E%3C%2Fsvg%3E);
    background-repeat: no-repeat;
    background-position: right 0.25rem center;
    background-size: 1.5rem;
    border: 1px solid #ced4da;
    border-radius: 0.25rem;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.flash-message
{
    width: 100%;
    position: fixed;
    bottom: 0;
    margin-bottom: 0;
    text-align: center;
    padding: 1rem 40px;
    z-index: 999;
}

.input-error--notification
{
    width: 100%;
    text-align: left;
    color: #C13515;
}

.flash--form-notification
{
    width: 100%;
    text-align: center;
    padding: 0.25rem;
    border-radius: 0.25rem;
}

.flash-message--error
{
    color: black;
    font-weight: bold;
    background-color: #ecbfc3;
}

.flash-message--warning
{
    color: black;
    font-weight: bold;
    background-color: #f5e1a4;
}

.flash-message--success
{
    color: black;
    font-weight: bold;
    background-color: #96dbbc;
}

#sell-cart-validation--button
{
    height: 55px;
}

.flash-message > button
{
    position: absolute;
    right: 6px;
    top: 6px;
}

#sell-cart--dropdown--header
{
    padding-bottom: 0.5rem;
}

.sell-cart--dropdown--item-row
{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    line-height: 1rem;
}

.sell-cart--dropdown--item-title,
.sell-cart--dropdown--item-price
{
    align-self: center;
}

.sell-cart--dropdown--item-price
{
    text-align: end;
    font-weight: bold;
    font-size: 0.75rem;
}

.sell-cart--dropdown--item-title
{
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    font-size: 0.75rem;
    line-height: 0.75rem;

}

.tracking--container > a
{
    color: black;
    text-decoration: underline;
}

.action-text
{
    cursor: pointer;
}

.text-size--xl
{
    font-size: 1.5rem!important;
}

.text-size--l
{
    font-size: 1.25rem!important;
}

.text-size--m
{
    font-size: 1rem!important;
}

.text-size--s
{
    font-size: 0.75rem!important;
}

.text-size--xs
{
    font-size: 0.5rem!important;
}

.image--container--xs
{
    position: relative;
    display: block;
}

a.image--container--xs
{
    border: solid transparent 1px;
}

.image--container--xs > img
{
    display: block;
    height: 3.5rem;
    max-width: 100%;
    object-fit: contain;
    margin: auto;
}

.image--container--s
{
    position: relative;
    display: block;
}

a.image--container--s
{
    border: solid transparent 1px;
}

.image--container--s > img
{
    display: block;
    height: 7rem;
    max-width: 100%;
    object-fit: contain;
    margin: auto;
}

.image--container--m
{
    position: relative;
    display: block;
}

a.image--container--m
{
    border: solid transparent 1px;
}

.image--container--m > img
{
    display: block;
    height: 8rem;
    max-width: 100%;
    object-fit: contain;
    margin: auto;
}

.image--container--l
{
    position: relative;
    display: block;
}

a.image--container--l
{
    border: solid transparent 1px;
}

.image--container--l > img
{
    display: block;
    height: 15rem;
    max-width: 100%;
    object-fit: contain;
    margin: auto;
}

.product--container
{
    border-radius: 0.5rem;
    color: black;
    text-decoration: none;
}

.product--current
{
    box-shadow: 0 4px 8px 0 rgba(143, 46, 143, 0.2), 0 6px 20px 0 rgba(143, 46, 143, 0.3);
}

#filter-menu-row--container
{
    position: -webkit-sticky;
    position: sticky;
    top: 8rem;
    background-color: white;
}

#filter-menu-row--container > div > div > select
{
    line-height: 1;
}

.full-screen-overlay,
.full-screen-overlay--dark,
.full-screen-overlay--black
{
    position: fixed;
    left: 0;
    top: 0;
    height: 100svh;
    width: 100vw;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.loading-overlay
{
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.loading-overlay.loading-overlay--fixed
{
    position: fixed;
    left: 0;
    top: 0;
    height: 100svh;
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.full-screen-overlay--dark
{
    background-color: rgba(0, 0, 0, 0.2);
}

.full-screen-overlay--black
{
    background-color: rgba(0, 0, 0, 1);
}

#overlay--page--content-container,
#overlay--content-container
{
    width: 100%;
    max-height: 100svh;
    background-color: white;
    border-radius: 0.25rem;
    overflow-y: auto;
    position: relative;
    height: 100svh;
}

.overlay--inner-content-container--padding
{
    padding: 3rem 0.5rem 4rem 0.5rem;
}


.position-relative
{
    position: relative!important;
}

.position-absolute
{
    position: absolute!important;
}

.position-fixed
{
    position: fixed!important;
}

.white-space--pre-wrap
{
    white-space: pre-wrap!important;
}

.shadow
{
    box-shadow: 0 0.5rem 1rem rgba(0,0,0,.15);
}

.full-image
{
    width: 100vw;
    height: 100svh;
    overflow: hidden;
    position: relative;
    cursor: pointer;
}

.full-image > img
{
    max-width: 100%;
    min-width: 100%;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
}


.extra-large-image
{
    position: relative;
    background-color: rgba(255, 255, 255, 1);
    min-width: 100%;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.8);
}

.extra-large-image > img
{
    display: block;
    object-fit: contain;
    margin: auto;
    height: 100svh;
    border-radius: 0.25rem;
    max-width: 100%;
}

.full-screen-overlay--close
{
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    background-color: white;
}

.full-screen-overlay--previous-action
{
    position: absolute;
    top: 0.5rem;
    left: 0.5rem;
    background-color: white;
}

.full-screen-overlay--fixed--close
{
    position: fixed;
    top: 0.5rem;
    right: 0.5rem;
    background-color: white;
}

.slide--image
{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    max-height: 100%;
    margin: auto;
}

.slide--hidden{
    opacity: 0;
    transition-property: opacity;
    transition-duration: 1s;
    pointer-events: none;
}

.slide--activ{
    opacity: 100%;
    transition-property: opacity;
    transition-duration: 1s;
    pointer-events: auto;
}

#category-select--desktop--header
{
    cursor: pointer;
}

.category--actionable-tab
{
    display: block;
    text-decoration: none;
    color: black;
}

.category--actionable-tab > *:not(.category--actionable-tab)
{
    pointer-events: none;
}

.category--selected
{
    font-weight: bold;
}

.selected
{
    font-weight: bolder;
    opacity: 100!important;
}

#category-select--desktop--content
{
    max-height: calc(100svh - 15rem);
    overflow-y: auto;
}

.result-count
{
    color: red;
    font-weight: bold;
}

.header--logo
{
    max-height: 8rem;
    max-width: 100%;
    padding: 0.5rem 0;
}

.nav--children
{
    padding: 0 1rem;
    border-radius: 0.25rem;
    min-width: max-content;
    
}

.nav--first-parent
{
    position: relative;
}

.nav--first-parent > .nav--children--container > .nav--children
{
    padding: 0.5rem;
    position: relative;
    left: -1rem;
    width: 100%;
    max-height: calc(100svh - 3rem);
    overflow-y: auto;
}

.header--account-and-cart--container
{
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    padding: 0;
}

#search--container--desktop
{
    margin: 1rem 0;
    display: flex;
    flex-direction: row;

}

.search--input
{
    flex: auto;
    border: 1px solid #6c757d;
    border-radius: 0.25rem;
    padding: 0.5rem;
    min-width: 0;
}

#search--container--mobile
{
    margin: 0.2rem 1rem;
    display: flex;
}

.cart--product-image
{
    height: 7rem;
    width: auto;
}

.product-row
{
    padding: 1rem;
    border-bottom: 1px lightgrey solid;
}

.cart--product-info
{
    height: 100%;
    display: flex;
    flex-direction: column;
}

.nav--icon-container
{
    margin-bottom: 0.5rem;
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
}

.nav--item
{
    position: relative;
    font-weight: bold;
}

.nav--item.btn-dealicash-alt
{
    color: white;
}

.glowing-shadow {
    animation: animation--glowing-shadow 2s infinite;
}

@keyframes animation--glowing-shadow {
    0% {
        box-shadow: 0 0 10px 0 #86cb3a;
    }
    50% {
        box-shadow: 0 0 20px 0 #8f2e8f;
    }
    100% {
        box-shadow: 0 0 10px 0 #86cb3a;
    }
}

.list--item
{
    position: relative;
    padding-left: 1rem;
}

.list--item::before
{
    content: "\2022";  /* Add content: \2022 is the CSS Code/unicode for a bullet */
    color: #8f2e8f;
    font-weight: bold;
    display: inline-block; /* Needed to add space between the bullet and the text */
    width: 1em; /* Also needed for space (tweak if needed) */
    margin-left: -1em; /* Also needed for space (tweak if needed) */
}

#mobile--show-nav-menu--dropdown .nav--item::before
{
    position: absolute;
    content:'';
    left:-1.5rem;
    top:0.5rem;
    width: 0;
    height: 0;
    border-left: 1rem solid #8f2e8f;
    border-top: 0.5rem solid transparent;
    border-bottom: 0.5rem solid transparent;
}

#mobile--show-nav-menu--dropdown .nav--item.btn-dealicash-alt::before
{
    position: absolute;
    content:'';
    left:-1.5rem;
    top:1rem;
    width: 0;
    height: 0;
    border-left: 0.5rem solid transparent;
    border-right: 0.5rem solid transparent;
    border-top: 1rem solid #8f2e8f;
}

.nav--first-parent,
#nav--sell-cart--container
{
    height: 2rem;
    line-height: 2rem;
    background-color: white;
    width: fit-content;
}

#nav--sell-cart--container
{
    width: 100%;
}

#nav--sell-cart--container > div:first-of-type
{
    display: flex;
    flex-direction: row;
    justify-content: center;
}

#sell-cart-delivery-select > option:first-of-type
{
    text-align: center;
}

#sell-cart-details--container
{
    max-height: 40svh;
    overflow-y: auto;
}

#searh-results--header
{
    border-top: 2px solid #6c757d;
}

.product--additional-images--column
{
    height: 8.5rem;
    position: relative;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: thin;
    scrollbar-color: #8f2e8f #f1f1f1;
}

/* scrollbar customization start */

.product--additional-images--column::-webkit-scrollbar-track {
    background: #f1f1f1; /* Couleur de fond de la piste */
}

.product--additional-images--column::-webkit-scrollbar-thumb {
    background-color: #8f2e8f; /* Couleur de la poignée */
}

.product--additional-images--column::-webkit-scrollbar-thumb:hover {
    background-color: #a438a4; /* Couleur de la poignée au survol */
}

/* scrollbar customization end */

.product--large-image,
.message-image
{
    cursor: zoom-in;
}

.product--small-image
{
    display: block;
    max-width: 5rem;
    object-fit: contain;
    margin-left: auto;
    cursor: pointer;
}

.main-content--container
{
    position: relative;
    padding: 0.5rem 0 0 0;
    margin-bottom: 1rem;
}



/* TODO offers styles start */

.offer--selection--label:hover
{
    box-shadow: 2px 4px 8px #8f2e8f;
}

.offer--selection--label
{
    position: relative;
    display: flex;
    align-items: center;
    cursor: pointer;
    width: 100%;
    padding: 0.5rem 0.5rem;
    margin: 0.5rem 0;
    border-radius: 0.5rem;
    border-style: solid;
    border-width: 2px;
}

.offer--selection--label:not(.offer--reserved):not(.offer--in-sell-cart) /* default available offer style */
{
    border-color: rgba(143, 46, 143, 0.5);
}

.offer--selection--label:not(.offer--in-sell-cart).offer--reserved  /* reserved by other client offer style */
{
    border-color: rgba(153, 153, 153, 0.5);
    border-style: dashed;
    background-color: #fafafa;
    background-image: repeating-linear-gradient(
        45deg,
        transparent,
        transparent 10px,
        rgba(0, 0, 0, 0.02) 10px,
        rgba(0, 0, 0, 0.02) 20px
    );
}

.offer--selection--label.offer--in-sell-cart  /* reserved by current client offer style */
{
    border-color: rgba(30, 132, 73, 0.5);
    background-color: #f0f9f4;
}

.offer--selection--label:not(.offer--reserved):not(.offer--in-sell-cart):has(.offer--checkbox--input:checked)  /* available and selected offer style */
{
    border-color: rgba(143, 46, 143, 1);
}

.offer--selection--label:not(.offer--in-sell-cart).offer--reserved:has(.offer--checkbox--input:checked)  /* reserved by other client and selected offer style */
{
    border-color: rgba(102, 102, 102, 1);
}

.offer--selection--label.offer--in-sell-cart:has(.offer--checkbox--input:checked)  /* reserved by current client and selected offer style */
{
    border-color: rgba(30, 132, 73, 1);
}

.offer--price--container
{
    font-weight: bold;
}

.offer--selection--label:not(.offer--reserved):not(.offer--in-sell-cart) > .offer--price--container
{
    color: #8f2e8f;
}

.offer--selection--label:not(.offer--in-sell-cart).offer--reserved > .offer--price--container
{
    color: #666;
}

.offer--selection--label.offer--in-sell-cart > .offer--price--container
{
    color: #1e8449;
}

.offer--checkbox--visual-placeholder
{
    width: 28px;
    height: 28px;
    min-width: 28px;
    border: 2px solid #8f2e8f;
    border-width: 2px;
    border-style: solid;
    border-radius: 0.375rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: white;
}

.offer--selection--label:not(.offer--reserved):not(.offer--in-sell-cart) > .offer--checkbox--visual-placeholder
{
    border-color: #8f2e8f;
}

.offer--selection--label:not(.offer--in-sell-cart).offer--reserved > .offer--checkbox--visual-placeholder
{
    border-color: #666;
}

.offer--selection--label.offer--in-sell-cart > .offer--checkbox--visual-placeholder
{
    border-color: rgba(30, 132, 73, 1);
}

.offer--checkbox--input:checked ~ .offer--checkbox--visual-placeholder
{
    background-color: #8f2e8f;
    border-color: #8f2e8f;
}

.offer--selection--label:not(.offer--reserved):not(.offer--in-sell-cart) .offer--checkbox--input:checked ~ .offer--checkbox--visual-placeholder
{
    background-color: #8f2e8f;
    border-color: #8f2e8f;
}

.offer--selection--label:not(.offer--in-sell-cart).offer--reserved .offer--checkbox--input:checked ~ .offer--checkbox--visual-placeholder
{
    background-color: #666;
    border-color: #666;
}

.offer--selection--label.offer--in-sell-cart .offer--checkbox--input:checked ~ .offer--checkbox--visual-placeholder
{
    background-color: #1e8449;
    border-color: #1e8449;
}

.offer--reserved--disclaimer,
.offer--in-cart--disclaimer
{
    position: absolute;
    top: -0.75rem;
    right: -0.5rem;
    font-size: 0.65rem;
    font-weight: 700;
    background-color: #fff;
    padding: 0.15rem 0.6rem;
    border-radius: 0.375rem;
    text-transform: uppercase;
}

.offer--reserved--disclaimer
{
    color: #e74c3c;
    border: 2px solid #e74c3c;
}

.offer--in-cart--disclaimer
{
    color: #229954;
    border: 2px solid #229954;
}

.offer--checkbox--input
{
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
}

.offer--selection--label:hover .offer--checkbox--visual-placeholder
{
    transform: scale(1.05);
    box-shadow: 0 0 0 4px rgba(143, 46, 143, 0.1);
}

.offer--checkbox--input:focus-visible ~ .offer--checkbox--visual-placeholder
{
    outline: 3px solid #8f2e8f;
    outline-offset: 2px;
    box-shadow: 0 0 0 4px rgba(143, 46, 143, 0.2);
}

.offer--checkbox--visual-placeholder::after
{
    content: '✓';
    font-size: 20px;
    font-weight: bold;
    color: white;
    display: none;
    line-height: 1;
}

.offer--checkbox--input:checked ~ .offer--checkbox--visual-placeholder::after
{
    display: block;
}

.active
{
    background-color: #8f2e8f;
    color: #fff;
    opacity: 100%;
}

.account-menu--card
{
    height: 5rem;
    font-size: 1.25rem;
    border: 1px solid #8f2e8f;
    color: #8f2e8f;
    border-radius: 0.25rem;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    text-align: center;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    padding: 0.5rem 1rem;
}

input[type="radio"]:checked+label{
    font-weight: bold;
}

.input-subscribe
{
    background-color: #aaaaaa;
}

.btn-subscribe
{
    background-color: #8f2e8f;
}

#idFramePaiement
{
    width: 1140px;
    height: 800px;
}

.address--container
{
    padding: 1rem;
    border: 1px solid rgba(143, 46, 143, 0.5);
    border-radius: 0.25rem;
    position: relative;
    margin: 0.5rem 0 0.25rem 0;
}

#sell-cart--dropdown--container
{
    display: none;
    flex-direction: column;
    position: absolute;
    background-color: white;
    right: 1rem;
    width: 460px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    padding: 1rem 0.5rem 0.5rem 0.5rem;
    border-radius: 0.25rem;
    max-height: 70svh;
}

#sell-cart--dropdown--content{
    overflow-y: auto;
}

#sell-cart--dropdown--footer
{
    padding: 1rem 1rem 0 1rem;
    font-weight: bold;
}

#products--footer
{
    border-top: 1px solid rgb(143, 46, 143);
    margin: 1rem 0;
}

#sell-cart--timer-container--dropdown,
#sell-cart--timer-container--overlay
{
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.cart--product-item
{
    padding: 1rem;
    border: 1px solid #86cb3a;
    border-radius: 0.25rem;
    margin-bottom: 1rem;
}

.error-message
{
    text-align: center;
    padding: 0.5rem;
    border-radius: 0.25rem;
    background-color: #ffc107;
}

.content-card,
.content-card-alt
{
    padding: 1rem;
    border: solid 1px #8f2e8f;
    margin: 0 0;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border-radius: 0.25rem;
}

.content-card-alt
{
    border: solid 1px #86cb3a;
}

.content-card > .h2,
.content-card > div > .h2,
.content-card-alt > .h2,
.content-card-alt > div > .h2
{
    width: 70%;
}

.web-header
{
    position: fixed;
    top: 0;
    width: 100%;
    background-color: white;
    height: 8.1rem;
}

#nav--container
{
    height: 2.5rem;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    position: relative;
    align-items: center;
}

.nav--first-parent > .nav--children--container > .nav--children
{
    background-color: #f1f1f1;
}

.top-offset-to-leave-place-for-header
{
    margin-top: 9rem;
}

#mobile--show-nav-menu--dropdown
{
    padding: 3rem 0 0 2rem;
    position: absolute;
    top: 0;
    width: 100vw;
    height: calc(100svh - 3rem);
    background-color:white;
    overflow-y: auto;
    border-radius: 0.25rem;
}

#products--get-next--loading
{
    position: absolute;
}

#timer-info--container
{
    position: absolute;
    top: 0.25rem;
    right: 0.25rem;
    display: flex;
    flex-direction: row;
}

.product-report--button
{
    font-size: 0.75rem;
    opacity: 0.75;
}

.card--green-glass
{
    position: relative;
    background-color: rgba(134, 203, 58, 0.30);
    color: black;
    border-radius: 0.5rem;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    padding: 0.5rem 0.5rem;
    border: 1px solid rgba(134, 203, 58, 0.15);
}

.card--violet-glass
{
    position: relative;
    background: rgba(143, 46, 143, 0.05);
    border-radius: 0.5rem;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    padding: 0.5rem 0.5rem;
    border: 1px solid rgba(143, 46, 143, 0.15);
}

.card--white-glass
{
    position: relative;
    background: rgba(255, 255, 255, 0.20);
    border-radius: 0.5rem;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    padding: 0.5rem 0.5rem;
    border: 1px solid rgba(0, 0, 0, 0.15);
}

.card--grey-glass
{
    position: relative;
    background: rgba(0, 0, 0, 0.10);
    border-radius: 0.5rem;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    padding: 0.5rem 0.5rem;
    border: 1px solid rgba(0, 0, 0, 0.15);
}

.card--yellow-glass
{
    position: relative;
    background: rgba(255, 255, 0, 0.10);
    color: black;
    border-radius: 0.5rem;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    padding: 0.5rem 0.5rem;
    border: 1px solid rgba(0, 0, 0, 0.15);
    font-size: 0.75rem;
}

.card--red-glass
{
    position: relative;
    background: rgba(255, 0, 0, 0.10);
    color: black;
    border-radius: 0.5rem;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    padding: 0.5rem 0.5rem;
    border: 1px solid rgba(0, 0, 0, 0.15);
    font-size: 0.75rem;
}

.carousel--nav-container-outer
{
    position: absolute;
    bottom: 0;
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    height: 2rem;
}

.carousel--nav-container-inner
{
    height: 100%;
    width: fit-content;
}

.main-product--title
{
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    margin: 0 4rem;
    font-size: 1rem;
    min-height: 3rem;
}

/* media queries */

#category-select--mobile--container,
#filters--mobile--container
{
    display: block;
}

#filters--desktop--content
{
    display: none;
}


.product--additional-images--container
{
    max-height: 7rem;
    width: max-content;
    padding: 3px;  /* to leave space for outline on focus */
}

#consent-mode--container
{
    position: fixed;
    right: 0;
    bottom: 0;
    width: 100%;
    background-color: #ecebf2;
    padding: 0.5rem;
    background-image: url("/static/cookie.webp");
    background-repeat: no-repeat;
    background-position: 25% 50%;
    color:black;
    z-index: 999;
    max-height: 100svh;
    overflow-y: auto;
}


.carousel--container
{
    height: 200px;
    overflow: hidden;
    position: relative;
}

#category-select--desktop--container
{
    height: 0;
    position: fixed;
    top: 8rem;
    display: none;
}

#header--desktop-top
{
    display: none;
}

.header--mobile-top
{
    display: block;
}

#filters--desktop--content > div
{
    padding: 0.125rem 0.125rem;
}

#validated-sell-cart-search--form
{
    display: flex;
    flex-direction: row;
}

#validated-sell-cart-search--keywords
{
    flex: auto;
    border: 1px solid #86cb3a;
    border-radius: 0.25rem;
    padding: 0.5rem;
    min-width: 0;
}

#category--select--mobile--container
{
    display: block;
}

#sell-cart--footer,
.two-buttons--container
{
    display: block;
}

#sell-cart--footer
{
    padding: 0 0.5rem;
}

#sell-cart--footer > *,
.two-buttons--container > *
{
    margin-top: 1rem;
}

#sell-cart--footer > *,
#sell-cart--footer > * > *,
.two-buttons--container > *
{
    width: 100%;
}

.child--center-center
{
    display:flex;
    flex-direction:row;
    justify-content:center;
    align-content:center;
}

.child--center-left
{
    display:flex;
    flex-direction:row;
    justify-content:flex-start;
    align-content:center;
}

.child--center-right
{
    display:flex;
    flex-direction:row;
    justify-content:flex-end;
    align-content:center;
}

.btn--previous-image,
.btn--next-image
{
    position: absolute;
    top: 50%;
}

.btn--previous-image
{
    left: 1rem;
}

.btn--next-image
{
    right: 1rem;
}

.tab--header
{
    overflow: hidden;
    border: 1px solid #ccc;
    background-color: #f1f1f1;
}

.tab--button
{
    background-color: inherit;
    float: left;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 14px 16px;
    transition: 0.3s;
}

.tab--button.active
{
    background-color: #ccc;
}

.tab--content
{
    padding: 1rem;
}

.tab--content--row
{
    background-color: #f2f5f7;
}

.tab--content--row:nth-of-type(odd)
{
    background-color: #e9eff5;
}

.absolute-top-left
{
    position:absolute;
    top:0;
    left:0;
}

.absolute-top-left--05
{
    position:absolute;
    top:0.5rem;
    left:0.5rem;
}

.absolute-top-left--1
{
    position:absolute;
    top:1rem;
    left:1rem;
}

.absolute-top-left--2
{
    position:absolute;
    top:2rem;
    left:2rem;
}

.absolute-bottom-left
{
    position:absolute;
    bottom:0;
    left:0;
}

.absolute-bottom-left--05
{
    position:absolute;
    bottom:0.5rem;
    left:0.5rem;
}

.absolute-bottom-left--1
{
    position:absolute;
    bottom:1rem;
    left:1rem;
}

.absolute-bottom-left--2
{
    position:absolute;
    bottom:2rem;
    left:2rem;
}

.absolute-top-right
{
    position:absolute;
    top:0;
    right:0;
}

.absolute-top-right--025
{
    position:absolute;
    top:0.25rem;
    right:0.25rem;
}

.absolute-top-right--05
{
    position:absolute;
    top:0.5rem;
    right:0.5rem;
}

.absolute-top-right--1
{
    position:absolute;
    top:1rem;
    right:1rem;
}

.absolute-top-right--2
{
    position:absolute;
    top:2rem;
    right:2rem;
}

.absolute-bottom-right
{
    position:absolute;
    bottom:0;
    right:0;
}

.absolute-bottom-right--05
{
    position:absolute;
    bottom:0.5rem;
    right:0.5rem;
}

.absolute-bottom-right--1
{
    position:absolute;
    bottom:1rem;
    right:1rem;
}

.absolute-bottom-right--2
{
    position:absolute;
    bottom:2rem;
    right:2rem;
}

#category-select--mobile--content,
#filters--mobile--content
{
    position: relative;
    overflow-y: auto;
}

#category-select--mobile--dropdown,
#filters--mobile--dropdown
{
    position: absolute;
    width: 100%;
    background-color: white;
    max-height: calc(100svh - 15rem);
    display: flex;
    flex-direction: column;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    margin-top: 0.25rem;
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
    border: 1px solid #86cb3a;
}

.no-search-results--container
{
    margin-top: 0.5rem 0;
}

.product-card--title-container,
.product-card--price-container
{
    font-size: 0.75rem;
}

.product-card--title-container
{
    font-weight: 700;
    height: 3.5rem;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

.product-card--price-container
{
    height: 1.75rem;
    line-height: 1.75rem;
    overflow: hidden;
}

.product-details--previous,
.product-details--next
{
    position: absolute;
    top: 10rem;
}

.product-details--previous
{
    left: 0.5rem;
}

.product-details--next
{
    right: 0.5rem;
}

.visibility--hidden-sm
{
    visibility: hidden;
}

.white-space--pre-line
{
    white-space: pre-line!important;
}


@media screen and (min-width: 576px) {
    :root
    {
        --bs-gutter-x: 1.5rem;
    }
    .h1{font-size: 2.25rem;}
    .h2{font-size: 2rem;}
    .h3{font-size: 1.75rem;}
    .h4{font-size: 1.5rem;}
    .h5{font-size: 1.25rem;}
    .h6{font-size: 1.125rem;}
    .col-sm-1 {width: 8.333333%;}
    .col-sm-2 {width: 16.666666%;}
    .col-sm-3 {width: 25%;}
    .col-sm-4 {width: 33.333333%;}
    .col-sm-5 {width: 41.666666%;}
    .col-sm-6 {width: 50%;}
    .col-sm-7 {width: 58.333333%;}
    .col-sm-8 {width: 66.666666%;}
    .col-sm-9 {width: 75%;}
    .col-sm-10 {width: 83.333333%;}
    .col-sm-11 {width: 91.666666%;}
    .col-sm-12 {width: 100%;}

    .product-card--price-container
    {
        font-size: 1em;
    }

    .no-search-results--container
    {
        margin: 3rem 0;
    }

    #consent-mode--container
    {
        width: 400px;
        border-top-left-radius:1rem;
    }

    .full-screen-overlay,
    .full-screen-overlay--black
    {
        align-items: center;
    }

    #sell-cart--footer,
    .two-buttons--container
    {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        flex-wrap: wrap;
    }

    #sell-cart--footer
    {
        padding: 0 0.5rem;
    }

    #sell-cart--footer > *,
    .two-buttons--container > *
    {
        width: fit-content;
    }

    .image--container--m > img
    {
        height: 10rem;
    }

    .image--container--l > img
    {
        height: 20rem;
    }

    .extra-large-image > img
    {
        height: 70svh;
    }

    .carousel--container
    {
        height: 300px;
    }

    .main-content--container
    {
        padding: 3rem;
    }

    .main-product--title
    {
        margin: 0 0;
        -webkit-line-clamp: 2;
        font-size: 1.5rem;
    }

    .product-details--previous,
    .product-details--next
    {
        position: absolute; top: 15rem;
    }

    #overlay--page--content-container,
    #overlay--content-container
    {
        max-width: 750px;
        height: auto;
    }

    .overlay--inner-content-container--padding
    {
        padding: 3rem 3rem 0.5rem 3rem;
    }

    .content-card > h2,
    .content-card > div > h2,
    .content-card-alt > h2,
    .content-card-alt > div > h2
    {
        width: 100%;
    }

    .visibility--hidden-sm
    {
        visibility: visible;
    }
}

@media screen and (min-width: 768px) {
    .col-md-1 {width: 8.333333%;}
    .col-md-2 {width: 16.666666%;}
    .col-md-3 {width: 25%;}
    .col-md-4 {width: 33.333333%;}
    .col-md-5 {width: 41.666666%;}
    .col-md-6 {width: 50%;}
    .col-md-7 {width: 58.333333%;}
    .col-md-8 {width: 66.666666%;}
    .col-md-9 {width: 75%;}
    .col-md-10 {width: 83.333333%;}
    .col-md-11 {width: 91.666666%;}
    .col-md-12 {width: 100%;}

    .no-search-results--container
    {
        margin: 7rem 0;
    }

    .image--container--m > img
    {
        height: 15rem;
    }

    .image--container--l > img
    {
        height: 25rem;
    }

    .extra-large-image
    {
        min-width: 700px;
    }

    #filter-menu-row--container > div > div > select
    {
        line-height: 1.5;
    }
}

@media screen and (min-width: 992px) {
    .col-lg-1 {width: 8.333333%;}
    .col-lg-2 {width: 16.666666%;}
    .col-lg-3 {width: 25%;}
    .col-lg-4 {width: 33.333333%;}
    .col-lg-5 {width: 41.666666%;}
    .col-lg-6 {width: 50%;}
    .col-lg-7 {width: 58.333333%;}
    .col-lg-8 {width: 66.666666%;}
    .col-lg-9 {width: 75%;}
    .col-lg-10 {width: 83.333333%;}
    .col-lg-11 {width: 91.666666%;}
    .col-lg-12 {width: 100%;}

    .main-content--container
    {
        border: 1px solid #86cb3a;
        border-radius: 0.25rem;
    }

    #category-select--desktop--container
    {
        display: block;
    }

    #filters--desktop--content
    {
        display: flex;
    }

    #category-select--mobile--container,
    #category-select--mobile--dropdown,
    #filters--mobile--container,
    #filters--mobile--dropdown
    {
        display: none;
    }

    #header--desktop-top
    {
        display: flex;
    }

    .header--mobile-top
    {
        display: none;
    }

    #filter-menu-row--container
    {
        top: 6rem;
    }

    .web-header,
    #header--desktop-top,
    .header--search-and-navigation--container
    {
        height: 6.1rem;
    }

    .top-offset-to-leave-place-for-header
    {
        margin-top: 8rem;
    }
}

@media screen and (min-width: 1200px) {
    .col-xl-1 {width: 8.333333%;}
    .col-xl-2 {width: 16.666666%;}
    .col-xl-3 {width: 25%;}
    .col-xl-4 {width: 33.333333%;}
    .col-xl-5 {width: 41.666666%;}
    .col-xl-6 {width: 50%;}
    .col-xl-7 {width: 58.333333%;}
    .col-xl-8 {width: 66.666666%;}
    .col-xl-9 {width: 75%;}
    .col-xl-10 {width: 83.333333%;}
    .col-xl-11 {width: 91.666666%;}
    .col-xl-12 {width: 100%;}
}

@media screen and (min-width: 1400px) {
    .col-xxl-1 {width: 8.333333%;}
    .col-xxl-2 {width: 16.666666%;}
    .col-xxl-3 {width: 25%;}
    .col-xxl-4 {width: 33.333333%;}
    .col-xxl-5 {width: 41.666666%;}
    .col-xxl-6 {width: 50%;}
    .col-xxl-7 {width: 58.333333%;}
    .col-xxl-8 {width: 66.666666%;}
    .col-xxl-9 {width: 75%;}
    .col-xxl-10 {width: 83.333333%;}
    .col-xxl-11 {width: 91.666666%;}
    .col-xxl-12 {width: 100%;}

    .carousel--container
    {
        height: 400px;
    }

    .product--additional-images--container {
        max-height: 100%;
        width: auto;
    }

    .product--additional-images--column
    {
        height: 25rem;
        position: relative;
        overflow-x: hidden;
        overflow-y: auto;
    }

    /* scrollbar customization start */

    /* Pour les navigateurs basés sur WebKit (Chrome, Safari) */
    .product--additional-images--column::-webkit-scrollbar {
        width: 1rem; /* Largeur de la barre de défilement */
    }
    /* scrollbar customization end */
}

@media screen and (min-width: 1600px) {
    .carousel--container
    {
        height: 500px;
    }
}

/* animations */

.faded
{
    opacity: 0;
}

.transition-05s
{
    transition: all 0.5s;
}

@keyframes rotate
{
    to{ transform: rotate(360deg); }
}

.rotate--clockwise
{
    animation-duration: 1s;
    animation-name: rotate;
    animation-iteration-count: infinite;
}

.color-transition--dealicash
{
    animation: color-transition--dealicash 2s linear infinite alternate;
}

@keyframes color-transition--dealicash
{
    from {color: #86cb3a;}
    to {color: #8f2e8f;}
}

.loading-animation-spinner-container
{
    animation: color-transition--dealicash 1.5s linear infinite alternate, rotate 1s linear infinite;
}

@media(prefers-reduced-motion)
{
    .transition-05s
    {
        transition: none;
    }
}

@media (hover: hover) {
    .btn:hover,
    .btn-small:hover,
    .btn-tiny:hover
    {
        border: 1px solid grey;
        opacity: 100%;
        color: black;
    }

    .product--attributes--table tr:hover,
    .offer--attribute-list--table tr:hover
    {
        background-color: rgba(0, 0, 0, 0.075);
    }

    .carousel--previous-slide:hover,
    .carousel--next-slide:hover,
    .btn--previous-image:hover,
    .btn--next-image:hover
    {
        background-color: white;
    }

    .carousel--nav-button:hover
    {
        opacity: 100%;
    }

    .tooltip--container:hover .tooltip--text
    {
        visibility: visible;
        pointer-events: none;
    }

    .action-text:hover
    {
        color: black;
        text-decoration: underline;
    }

    a.image--container--xs:hover
    {
        border: solid grey 1px;
    }

    a.image--container--s:hover
    {
        border: solid grey 1px;
    }

    a.image--container--m:hover
    {
        border: solid grey 1px;
    }

    a.image--container--l:hover
    {
        border: solid grey 1px;
    }

    .product--container:hover
    {
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.3);
        color: black;
    }

    #category-select--desktop--content .category--actionable-tab:hover
    {
        background-color: lightgrey;
        color: black;
    }

    .product--delete:hover
    {
        cursor: pointer;
    }

    .product--small-image:hover
    {
        box-shadow: 1px 1px 5px black;
    }

    .account-menu--card:hover
    {
        border: 1px solid #86cb3a;
    }

    .btn-subscribe:hover
    {
        background-color: #6c757d;
    }

    #nav--sell-cart--container:hover #sell-cart--dropdown--container
    {
        display: flex;
    }

    .product-report--button:hover
    {
        opacity: 1;
    }

    .tab--button:hover
    {
        background-color: #ddd;
    }
}