/****************
* BOUTIQUE EN LIGNE*
****************/

.main {
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  gap: 1rem;
  padding: 4rem 10%;
  padding-bottom: 0;
}
.main__ancres {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 1rem;
}
/*
.main__ancres a:not(:last-of-type) {
  margin-right: 1rem;
}
*/

/* Reponsive desktop */
@media screen and (min-width: 1280px) {
  .main {
    margin-top: 15vh;
    position: relative;
    /*margin-bottom: 3rem;*/
    padding: 2rem 23%;
  }
  /* hover styling */
  /*
  .main__texte > p:not(:last-of-type) {
    margin-bottom: 0.5rem;
  }
  .main__ancres a::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -0.5rem;
    width: 0;
    height: 2px;
    background-color: var(--secondaire);
    transition: width 0.3s ease-in-out;
    transform: translateX(-50%);
  }
  .main__ancres a:hover::after {
    width: 40px;
  }
  .main__ancres a:not(:last-of-type) {
    margin-right: 3rem;
  }
  .main::before {
    position: absolute;
    right: 0;
    bottom: -3rem;
  }
  .main::after {
    position: absolute;
    left: 0;
    top: 5rem;
  }
  */
}

.tab-content {
  display: none !important;
}
.tab-content.active {
  display: block !important;
}
.main__ancres {
  display: flex;
  margin-bottom: 20px;
}
.tab-link {
  padding: 10px 20px;
  text-decoration: none;
  color: #333;
  border-bottom: 2px solid transparent;
  position: relative;
}


.tab-link.active::after {
  content: "";
  position: absolute;
  bottom: -2px; /* Adjust if needed to match the desired spacing */
  left: 50%;
  width: 80px; /* Set underline width */
  height: 4px; /* Set underline height */
  background-color: #ceb481; /* Gold color */
  transform: translateX(-50%); /* Center the underline */
}

.tab-link.active {
  color: #411417;
  font-weight: 500;
}

.main__ancres a:hover {
  font-weight: 500; /* Makes the text bold */
  color: #601a24; /* Changes text color to #601A24 on hover */
}

.main__ancres a {
  transition: color 0.3s ease, font-weight 0.3s ease; 
  color: black;
  position: relative;
  margin-top: 0.5rem;
  font-family: "Dosis", sans-serif;
  font-size: 28px;
  font-weight: 300;
}



.description {
  margin: 0 auto 1.5rem auto; /* Center horizontally with auto left and right margins */
  max-width: 616px; /* Set the maximum width */
  text-align: center; /* Center-align the text content */
}

.tab-content.active .menu-photo {
  margin: 0 auto; /* Center the photo container */
  max-width: 616px; /* Set maximum width for the image */
  text-align: center; /* Ensure the image is centered inside the container */
}

.menu-photo img {
  width: 100%; /* Ensure the image scales responsively within the container */
  height: auto; /* Maintain aspect ratio */
  display: block; /* Remove inline image spacing */
  margin-top: 5rem;
}

/*PLATEAUX REPAS*/

/*chek livraison*/
.description_rayon_livraison {
  color: #601a24;
  margin-bottom: 0.2rem;
}
.livraison-check p {
  text-decoration: underline;
  color: #601a24;
  font-weight: 500;
  cursor: pointer;
}

.livraison-check p:hover {
  text-decoration: underline;
	  font-weight: 600;
}

.modal {
  display: none;
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.4);
}

.modal-content {
  background-color: #fff;
  margin: 15% auto;
  padding: 0 20px 0;
  width: 80%;
  max-width: 425px;
}

.modal-content-text{
  margin-bottom: 20px;
}

.modal-content-text h2{
  margin-bottom: 0;
  font-family: 'Dosis', sans-serif;
}

.close {
  color: #601A24;
  font-size: 40px;
  font-weight: bold;
  cursor: pointer;
  font-weight: 100;
  display: flex;
  justify-content: flex-end;
}

.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

h2 {
  color: #601a24;
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 16px;
}

#livraison-form input[type="text"] {
  width: 60%;
  padding: 8px;
  background-color: rgba(217, 217, 217, 0.16);
  border: none;
  outline: none;
  font-family: "Dosis", sans-serif;
	 appearance: textfield; /* Cross-browser */
}
#livraison-form{
  display: flex;
  justify-content: center;
}


#validate-button{
  border: 1px solid #601a24;
  border-radius: none;
  font-size: 13px;
  background-color: #ffffff;
  color: #601A24;
  font-family: "Dosis", sans-serif;
  padding:  5px;
}

#validate-button:hover{
  background-color: #601A24;
  color: #ffffff;
  cursor: pointer;
  
  transition: background-color 0.3s, color 0.3s, padding-right 0.3s
}

#livraison-result {
  padding: 20px 0;
  text-align: center;
  font-weight:lighter;
  color: #601a24;
}

.livraison-check {
  margin-bottom: 5rem;
}

.woocommerce ul.products li.product.category-plateaux-repas {
  width: 338px; /* Set the product width specifically for this category */
  margin: 0 auto; /* Center the products */
}

.woocommerce ul.products.category-plateaux-repas {
  justify-content: center; /* Center the row if needed */
}

/*center all products*/
#plateaux-repas {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
#plateaux-repas > div:nth-child(4) {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.woocommerce {
  /*max-width: 1300px;*/
  /*display: flex;*/
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

/* Only target products in the plateaux-repas category */
.woocommerce ul.products li.product.category-plateaux-repas div.quantity,
.woocommerce-page ul.products li.product.category-plateaux-repas div.quantity {
  display: flex;
  align-items: center;
}

.woocommerce ul.products li.product.category-plateaux-repas div.quantity .qty,
.woocommerce-page
  ul.products
  li.product.category-plateaux-repas
  div.quantity
  .qty {
  width: 50px;
  text-align: center;
  font-size: 16px;
  margin: 0 5px;
  background-color: #601a24; /* Background color */
  color: #ffffff; /* Text color */
  border: none;
}

.woocommerce .quantity .qty {
  color: #fff;
  background-color: #601a24;
  width: 30px !important;
  height: 30px;
  text-align: center;
  margin: 0 !important;
}

/*+ and - buttons*/
.woocommerce
  ul.products
  li.product.category-plateaux-repas
  div.quantity
  button.minus,
.woocommerce
  ul.products
  li.product.category-plateaux-repas
  div.quantity
  button.plus {
  background-color: #601a24;
  color: #ffffff;
  padding: 5px 10px;
  cursor: pointer;
  font-size: 18px;
}

/*panier buttons*/
.woocommerce
  ul.products
  li.product.category-plateaux-repas
  .quantity
  + .add_to_cart_button {
  margin-left: 10px;
  background-color: #601a24;
  color: #ffffff;
  padding: 10px 20px;
  font-size: 16px;
}

button.button.cart-button{
  cursor:pointer; 
}

.woocommerce
  ul.products
  li.product.category-plateaux-repas
  .quantity
  + .add_to_cart_button:hover {
  background-color: #601a24;
  border-color: #601a24;
}
#plateaux-repas .product-type-simple > span > span > bdi
{
  font-size: 24px;
  font-weight: bold;
}
#plateaux-repas .woocommerce-Price-amount bdi, span{
  font-size: 24px;
  font-weight: bold;
}
#plateaux-repas .woocommerce-Price-amount .woocommerce-Price-currencySymbol{
  font-size: 24px;
  font-weight: bold;
}

#plateaux-repas .woocommerce-Price-amount span{
  font-size: 16px;
  font-weight: bold;
}
/*modify button*/
/*cart / panier*/
button.cart-button {
  margin: 0 !important;
  padding: 0px !important;
  height: 30px;
  width: 40px;
  border-radius: 0px !important;
}

.quantity-container {
  display: flex;
  align-items: center;
  border: 1px solid #601a24;
}

.quantity-container .minus,
.quantity-container .plus {
  background-color: white;
  color: #601a24;
  border: none;
  font-size: 16px;
  width: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.quantity-container .minus:hover,
.quantity-container .plus:hover {
  background-color: white;
}

.quantity-container input.qty {
  width: 40px;
  text-align: center;
  font-size: 1rem;
  border: none;
  background-color: white;
  color: #601a24;
  margin: 0 5px;
}

button.button.cart-button {
  background-color: #601a24;
}

.button.cart-button:hover {
  background-color: #601a24;
}

.icon-cart:before {
  content: "\f07a"; /* FontAwesome Unicode for shopping cart */
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  font-size: 24px;
}

/* Pour cacher les boutons de spin sur WebKit */
[id^="quantity_"]::-webkit-inner-spin-button,
[id^="quantity_"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

[id^="quantity_"] {
  appearance: textfield; /* Pour Firefox */
}

[id^="quantity_"]:focus {
  border: none; /* Remove the border */
  outline: none; /* Remove the outline, if any */
}

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

#plateaux-repas .woocommerce-loop-product__title {
  font-size: 22px;
  font-weight: bold;
  color: #601A24;
}

@media (max-width: 425px) {
  #plateaux-repas .woocommerce-loop-product__title {
    font-size: 18px; /* Fixed size for larger screens */
  }
}

#plateaux-repas .price {
  font-size: 24px;
  font-weight: bold;
  font-family: Philosopher, sans-serif;
  position: relative;
  padding-bottom: 10px; /* Space between text and underline */
  margin-bottom: 2rem;
}

@media (max-width: 425px) {
  #plateaux-repas .price {
    font-size: 18px; /* Fixed size for larger screens */
  }
}
#plateaux-repas .price::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 48px;
  height: 4px;
  background-color: #ceb481; /* Gold color */
  transform: translateX(-50%); /* Center the underline */
}
/* Position the product-icons in the top right corner */
.product-icons {
  display: flex;
  justify-content: flex-end;
  align-items: flex-start;
  /*change position absolute to image div?*/
  position: absolute;
  top: -10px;
  right: 10px;
  z-index: 1;
}

.product-icons div {
  margin-left: 5px;
}

.product-icons .froid svg,
.product-icons .viande svg {
  width: 40px;
  height: 40px;
}

img.attachment-woocommerce_thumbnail.size-woocommerce_thumbnail {
  position: relative;
}

/*overlay products with button*/
.product_cat-plateaux-repas .custom-image-wrapper {
  position: relative; /* Position relative to contain the overlay */
  overflow: hidden; /* Hide anything that overflows the wrapper */
}

.product_cat-plateaux-repas .custom-image-wrapper img {
  display: block; /* Make the image a block element */
  width: 100%; /* Ensure the image fills the container */
  height: auto; /* Maintain aspect ratio */
  transition: opacity 0.5s ease; /* Smooth transition for opacity */
}

.product_cat-plateaux-repas .custom-image-wrapper .middle {
  transition: opacity 0.5s ease; /* Smooth transition for the middle */
  opacity: 0; /* Start invisible */
  position: absolute; /* Position it absolutely within the wrapper */
  top: 50%; /* Center vertically */
  left: 50%; /* Center horizontally */
  transform: translate(-50%, -50%); /* Adjust position to center */
  text-align: center; /* Center text */
  width: 100%; /* Make sure it covers the entire width */

}

.product_cat-plateaux-repas .custom-image-wrapper:hover .middle {
  opacity: 1; /* Show overlay content on hover */
}

/* Create a grey overlay */
.product_cat-plateaux-repas .custom-image-wrapper:hover img {
  opacity: 0.3; /* Set the image to transparent grey on hover */
}

.product_cat-plateaux-repas .custom-image-wrapper .text {
  background-color: transparent; /* Set transparent background */
  color: #601a24; /* Text color */
  font-size: 16px; /* Font size */
  padding: 10px 20px; /* Padding around the button */
  border: 1px solid #601a24; /* Button border */
  text-decoration: none; /* Remove underline from link */
  transition: background-color 0.5s ease, color 0.5s ease; /* Transition for hover effect */
}

.product_cat-plateaux-repas .custom-image-wrapper .text:hover {
  background-color: #601a24; /* Change background color on hover */
  color: white; /* Change text color on hover */
}

/* carte-traiteur */
.menu-buttons {
  display: flex;
  justify-content: center; /* Center buttons horizontally */
  gap: 1rem; /* Space between buttons */
  margin: 2rem 0;
  flex-wrap: wrap; /* Allow buttons to wrap onto the next line if needed */
}

.menu-buttons div {
  position: relative; /* Allows for inner positioning effects */
  overflow: hidden;
}

.menu-buttons .button {
  display: block;
  width: fit-content; /* Fit content size */
  padding: 0.625rem 0.875rem; /* Padding */
  text-decoration: none; /* No underline */
  color: #601a24; /* Updated primary color for text */
  border: 1px solid #601a24; /* Updated primary color border */
  transition: background-color 0.3s, color 0.3s, padding-right 0.3s; /* Smooth transition */
  font-family: "Dosis", sans-serif; /* Font family */
  font-size: 18px; /* Font size */
  position: relative; /* Required for positioning arrow */
}

.menu-buttons .button:hover {
  background-color: #601a24; /* Change background to new primary color on hover */
  color: #fff; /* Change text color to white on hover */
  padding-right: 2rem; /* Add extra space for arrow */
}

.menu-buttons .button::after {
  content: "→"; /* Arrow character */
  color: #fff; /* Arrow color on hover */
  position: absolute; /* Absolute positioning */
  opacity: 0; /* Initially hidden */
  transition: opacity 0.3s, transform 0.3s; /* Smooth transition */
  right: 0.5rem; /* Position it within the button */
  top: 50%; /* Center it vertically */
  transform: translate(100%, -50%); /* Start just outside of the button */
}

.menu-buttons .button:hover::after {
  opacity: 1; /* Show arrow on hover */
  transform: translate(0, -50%); /* Move arrow into place */
}

li .product_cat-boisson {
  background-color: aliceblue;
}

.woocommerce ul.products li.product .button {

  border: none;
}

.product_cat-boisson > a {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.product.type-product.product_cat-boisson.product-type-simple {
  display: flex;
  flex-direction: column;
  /*justify-content: flex-end;*/
}
.product .type-product
{
  width:200px;
}

.boisson-product-container img.attachment-woocommerce_thumbnail.size-woocommerce_thumbnail{
  border: #411417;
  max-width: 300px;
  max-height: 300px;
  width: auto; /* Maintain aspect ratio */
  height: auto; /* Maintain aspect ratio */
  object-fit: contain;
}

/* Responsive styles */
@media (max-width: 768px) {
  .menu-buttons {
    flex-direction: column; /* Stack buttons vertically */
    align-items: center; /* Center buttons in column layout */
  }

  .menu-buttons .button {
    width: 100%; /* Full width for buttons on smaller screens */
  }
}

/*boisson row slider*/

/*dont show slider by default, to show it later in rabs-menu-content.js on other tabs*/
.products-boisson {
  display: none;
}

/*buttons et style general de selection boisson*/
.quantity-container {
  width: min-content;
}

#menus-speciaux
  > div.products-boisson
  > div
  > div
  > div
  > ul
  > li.product_cat-boisson {
  display: flex;
  flex-direction: column;
  align-items: center;
  align-content: center;
}

.boisson-product {
  background-color: #ceb481;
}

/*boisson horizontal products slider*/
.horizontal-product-slider {
  position: relative;
  max-width: 1280px;
  margin: 0 auto;
}

.slider-container {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.boisson-product-container ul.products{
  max-width: 2000px;

}
.boisson-product-container ul.products li.last {
  margin-right: 5% !important;
}

/*
0 6% 5em 0
  /* margin-right: 0;

.product-card {
  flex-shrink: 0;
  width: calc(100% / 4.5);
  scroll-snap-align: start;
}

.slider-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  border: none;
  padding: 10px;
  cursor: pointer;
  transition: background-color 0.3s;
}


.slider-nav.prev {
  left: 8px;
}

.slider-nav.next {
  right: 8px;
}

.slider-nav svg {
  width: 4rem;
  height: 4rem;
}

/*
div.woocommerce .columns-4 {
flex: none !important;
}*/

@media (max-width: 768px) {
  .product-card {
    width: calc(100% / 2.5);
  }
}

/*disable price on boisson category*/
#menus-speciaux > div.products-boisson span {
  display: none;
}

/*boisson slider*/
.product_cat-boisson .custom-image-wrapper {
  height: auto; /* Allow height to adjust automatically */
  overflow: hidden;
  display: flex; /* Use flexbox for centering */
  justify-content: center; /* Center horizontally */
  align-items: center; /* Center vertically */
}

.product_cat-boisson .custom-image-wrapper img {
  width: 100%; /* Make image take full width */
  height: auto; /* Maintain aspect ratio */
  max-width: 150px; /* Prevent overflow */
  object-fit: contain; /* Maintain the aspect ratio */
  margin: 0 !important;
}

.product_cat-boisson bdi {
  display: none;
}

li.product_cat-boisson {
  display: flex;
  flex-direction: column;
  align-items: center;
}

li.product_cat-boisson h2 {
  color: black;
  font-weight: 400;
  font-family: "Dosis", sans-serif;
  font-size: 13px !important;
  text-align: center;
  max-width: 15rem;
}

/*@media only screen and (max-width: 768px) {
  .woocommerce ul.products[class*="columns-"] li.product,
  .woocommerce-page ul.products[class*="columns-"] li.product {
    width: 48% !important;
    float: left !important;
    clear: both !important;
    margin: 0 0 2.992em !important;
  }
}*/

.products-boisson {
  max-width: 100%;
  overflow: hidden;
}

/*div.products-boisson {
  margin: 3rem 0;
}*/

.boisson-product-slider {
  position: relative;
}
.boisson-product-container {
  overflow-x: scroll;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE and Edge */
}
.boisson-product-container::-webkit-scrollbar {
  display: none; /* Chrome, Safari, and Opera */
}
.boisson-product-container .products {
  display: flex;
/* 
gap: 20px;
padding: 20px 0;
width: max-content;
  */
}
.boisson-product-container .product {
  flex: 0 0 auto;
  width: 250px; /* Adjust based on your design */
}


.slider-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  border: none;
  /*padding: 10px;*/
  cursor: pointer;
  z-index: 2;
}

.slider-nav.prev {
  left: 10px;
}
.slider-nav.next {
  right: 10px;
}

/*footer*/
.footer {
  margin-top: 0rem;
}

/*question answer*/
#faqs {
  display: flex;
  align-items: center;
  flex-direction: column;
  align-content: center;
  padding: 20px;
  background-color: rgba(206, 180, 129, 0.4);
  margin-top: 120px;
}

.faqs {
  margin: 0 auto;
  padding: 20px;
  width: 33.33%; /* 1/3 of the screen on large displays */
  min-width: 300px; /* Prevents the container from becoming too narrow */
}

/* For tablets */
@media screen and (max-width: 1024px) {
  .faqs {
    width: 60%;
  }
}

/* For mobile phones */
@media screen and (max-width: 768px) {
  .faqs {
    width: 80%;
    padding: 15px;
  }
}

/* For very small devices */
@media screen and (max-width: 480px) {
  .faqs {
    width: 90%;
    padding: 10px;
  }
}

.faqs-title {
  position: relative;
  text-align: center;
  margin-bottom: 30px;
  padding-bottom: 15px; /* Add padding to create space for the line */
}

.faqs-title::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%; /* Center the line */
  transform: translateX(-50%); /* Center the line perfectly */
  width: 50px; /* Fixed width for the line */
  height: 3px; /* Make the line thicker */
  background-color: #ffffff; /* Change color as needed */
  border-radius: 2px; /* Optional: makes the line edges rounded */
}

.faq-cat {
  margin-bottom: 20px;
  overflow: hidden;
}

.faq-question {
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  transition: background-color 1s ease;
}

/*.faq-question:hover {
  background-color: #f0f0f0;
}*/

/* Default style for .faq-question */
/* Default style for .faq-question */
.faq-question {
  border-bottom: #411417 1px solid;
  padding: 3px 0;
}

/* When the answer is shown, remove border from .faq-question */
.faq-question.active {
  border-bottom: none;
}

/* Add border to .faq-answer when shown */
.faq-content.active {
  border-bottom: #411417 1px solid;
}



.faq-question p {
  margin: 0;
  font-weight: 600;
  font-size: 16px;
  color: #411417;
}

.faq-icon {
  padding: 0 10px;
  font-style: normal;
  transition: transform 0.3s ease;
  font-size: 16px;
  color: #411417;
}

.faq-icon.active {
  transform: rotate(180deg);
}

.faq-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

.faq-content.active {
  max-height: 500px; /* Adjust this value based on your content */
}

.faq-answer {
  padding: 0.5rem 0 ;
  margin: 0;
}

/* Responsive styles */
@media (max-width: 768px) {
  #faqs {
    padding: 15px;
  }

}

@media (max-width: 480px) {
  .faq-question p {
    font-size: 14px;
  }

  .faq-answer {
    font-size: 14px;
  }
}


#faqs {
  position: relative;
}

@media screen and (min-width: 1280px) {
  .faqs::after {
      position: absolute;
      content: url(../images/design/elements-graphiques/spices-spoon-isolated-white-qa-small-transparent.png);
      right: 10vw;
      bottom: 5vw;
  }

  .faqs::before {
    position: absolute;
    content: url(../images/design/elements-graphiques/fireworks-qa-small-not-transparent.png);
    left: 10vw;
    top: -5vw;
  }

  .menu-photo::before {
    position: absolute;
    content: url(../images/design/elements-graphiques/flat-lay-uncooked-spaghetti-penne-parmesan-qa-small-transparent.png);
    right: 0;
  }
}

/*setup height of next and previous button in the middle of drinks*/
.boisson-product-slider{
  margin: 1rem 0;
  position: relative;
}  
.prev svg{
  position: absolute;
  left: 60px;
  top: -60px;
}
.next svg{
  position: absolute;
  right: 60px;
  top: -60px;
}
/*responsive boisson slider arrow button*/
@media only screen and (max-width: 600px) {
  .prev svg{
    position: absolute;
    left: 30px;
    width: 60px;
    height: 60px;
  }
  .next svg{
    position: absolute;
    right: 30px;
    width: 60px;
    height: 60px;
}

li.product_cat-boisson{
  width: 100% !important; /* Make image take full width */
 
}
}

@media only screen and (max-width: 768px) {
  .woocommerce ul.products[class*=columns-] li.product.product_cat-plateaux-repas, .woocommerce-page ul.products[class*=columns-] li.product.product_cat-plateaux-repas {
      width: 100%; 
      float: none;
      clear: both;
      /*margin: 0 0 2.992em;*/
      display: flex;
      flex-direction: column;
      align-items: center;
      align-content: center;
      justify-content: center;
      /*margin: 0 auto 5rem;*/
    }
    .menus-speciaux-produits>div>ul{
      display: flex;
      flex-direction: column;
      align-items: center;
    }
    
}

.menus-speciaux-produits>div>ul{
  display: flex;
  justify-content: center;
  align-items: center;
}

/*disable clicking on drink image*/
.woocommerce ul.products  li.product.product_cat-boisson a {
  pointer-events: none;
}



#menus-speciaux .product-title {
  margin: 1rem 0;
}

#menus-speciaux .pdf-link a{
  color: #411417;
  text-decoration: underline;
} 
#menus-speciaux .pdf-link{
margin-bottom: 2rem;
} 
#menus-speciaux .product-title a{
  font-family: 'Philosopher', sans-serif;
  font-weight: bold;
  font-size: 22px;
  color:#411417;
  text-transform: capitalize;
}

.product-details{
  display: flex;
  justify-content: space-between;
  margin: 2rem 0;
  align-items: center;
}

@media (max-width: 550px) {
  .product-details{
    flex-direction: column-reverse;
  }
  #menus-speciaux .product-price{
    margin: 16px;
  }
  #menus-speciaux .custom-product-actions .cart{
    /*justify-content: center;/*
    /*flex-direction: column;*/
    /*width: 150px;*/
    display: flex;
    flex-direction: row;
  }
  #menus-speciaux .custom-product-actions{
    display: flex;
    justify-content: center;
  }

  #menus-speciaux .quantity-buttons{
    justify-content: space-around;
    flex-direction: row;
  }
  #menus-speciaux .quantity-buttons input[type="number"] {
    width: 40px ;
	   appearance: textfield; /* Cross-browser */
  }


}

#menus-speciaux form.cart {
  display: flex;
  justify-content: center;
}

.woocommerce-Price-amount bdi{
  font-weight: bold;
  font-size: 22px;
  font-family: Philosopher, sans-serif;
}

.woocommerce-Price-amount span{
  font-family: Philosopher, sans-serif;
  font-size: 16px;

}


.custom-product-actions .cart{
  display: flex;
}

.product-button-and-price {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 20px;
}


.product-button {
  display: flex;
  align-items: center;
  gap: 10px;
}

.quantity-buttons {
  display: flex;
  align-items: center;
  border: #601a24 1px solid;
}

.quantity-buttons button {
  background-color: #fff;
  color: #601a24;
  border: none;
  height: 100%;
  width: 40px;
  cursor: pointer;
}

.quantity-buttons input[type="number"] {
  background-color: #601a24;
  color: #fff;
  width: 40px;
  text-align: center;
  border: none;
  height: 100%;
	 appearance: textfield; /* Cross-browser */
}

#menus-speciaux .add-to-cart {
  background-color: #fff;
  color: #601a24;
  padding: 8px 20px;
  cursor: pointer;
  border: #601a24 1px solid;
}

.product-price {
  font-size: 20px;
  font-weight: bold;
}

#menus-speciaux span.woocommerce-Price-currencySymbol{
  font-size: 22px;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
	 appearance: textfield; /* Cross-browser */
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
/*input[type="number"] {
  -moz-appearance: textfield;
}*/

input:focus {
  outline: none;
}

/*add animation on button*/
.menus-speciaux-add-to-cart:hover{
  background-color: #411417;
  color: #fff;
}

.add-to-cart:hover{
  background-color: #411417;
  color: #fff;
}
/**/


.custom-image-wrapper {
  position: relative;
  display: inline-block;
}

.custom-image-wrapper img {
  width: 100%;
  height: auto;
  transition: opacity 0.3s ease;
}

/* White overlay */
.custom-image-wrapper .overlay {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0); /* Transparent by default */
  transition: background-color 0.3s ease;
  z-index: 1; /* Below the button */
}

/* Centered button */
.custom-image-wrapper .middle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  z-index: 2; /* Above the overlay */
}



/* Hover effect */
.custom-image-wrapper:hover .overlay {
  background-color: rgba(255, 255, 255, 0.7); /* White overlay on hover */
}

.custom-image-wrapper .cta-button {
  background-color: transparent;
  color: #601A24;
  padding: 10px 20px;
  text-decoration: none;
  font-size: 16px;
  border: #601a24 1px solid;
  display: inline-block;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s ease, visibility 0s 0.3s, background-color 0.5s ease; /* Add transition for background color */
}

.custom-image-wrapper:hover .cta-button {
  opacity: 1;
  visibility: visible;
}

.custom-image-wrapper .cta-button:hover {
  background-color: #601A24; /* Button hover background color */
  color: white; /* Button text color on hover */
}

/*
#menus-speciaux .custom-image-wrapper{
  width: 100%;
  height: auto;
}*/


#menus-speciaux .add-to-cart {
  background-color: #fff;
  padding: 8px 20px;
  cursor: pointer;
  display: block;
  width: fit-content; 
  text-decoration: none; 
  color: #601a24; 
  border: 1px solid #601a24; 
  transition: background-color 0.3s, color 0.3s, padding-right 0.3s; /* Smooth transition */
  font-family: "Dosis", sans-serif; 
  font-size: 18px; 
  position: relative; 
}

#menus-speciaux .add-to-cart:hover {
  background-color: #601a24; 
  color: #fff;
  padding-right: 2rem; 
}

#menus-speciaux .add-to-cart::after {
  content: "→"; 
  color: #fff; 
  position: absolute; 
  opacity: 0; 
  transition: opacity 0.3s, transform 0.3s; 
  right: 0.5rem; 
  top: 50%; 
  transform: translate(100%, -50%); 
}

#menus-speciaux .add-to-cart:hover::after {
  opacity: 1; 
  transform: translate(0, -50%);
}


#menus-speciaux h3.product-title{
  pointer-events: none;
}

div.message-alert{
  margin: 5px;
  color: #411417;
}

/*message alert single product*/
.button.cart-button:hover{
  background-color: #ceb481;
}

.woocommerce #plateaux-repas ul.products li.product a img {
  width: 20rem !important;
  height: auto;
  display: block;
  margin: 0 0 1em;
  box-shadow: none;
}

#menus-speciaux .woocommerce-loop-product__title{
  font-size: 22px;
  font-weight: bold;
  color: #601A24;
  }

#menus-speciaux .price {
  font-size: 24px;
  font-weight: bold;
  font-family: Philosopher, sans-serif;
  position: relative;
  padding-bottom: 10px;
  margin-bottom: 2rem;
}

#menus-speciaux .price::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 48px;
  height: 4px;
  background-color: #ceb481;
  transform: translateX(-50%);
}

#menus-speciaux .description {
  margin-bottom: 5rem;
}

#menus-speciaux ul.products li.product, .woocommerce-page ul.products li.product {
  float: left; 
  /*margin: 0 3.8% 2.992em 0; */
  padding: 0; 
  position: relative; 
  width: 100% !important; 
  margin-left: 0;
}
.menus-speciaux-produits > div > ul {
  display: flex;
  justify-content: flex-start; /* Aligns items to the left horizontally */
  align-items: flex-start;     /* Aligns items to the top vertically */
  /* Optional: Remove or adjust padding and margin if needed */
  padding: 0;
  margin: 0;
  list-style: none;            /* Removes default list styling */
}


/*manu speciaux tabs*/
#menus-speciaux li img {
  width: 250px !important;
  height: 250px !important;
  object-fit: cover; /* or 'contain', depending on your preference */
  border: 1px solid #f2f2f2;
}


/*overlay products with button*/
.product_cat-menus-speciaux .custom-image-wrapper {
  position: relative; /* Position relative to contain the overlay */
  overflow: hidden; /* Hide anything that overflows the wrapper */
}

.product_cat-menus-speciaux .custom-image-wrapper img {
  display: block; /* Make the image a block element */
  width: 100%; /* Ensure the image fills the container */
  height: auto; /* Maintain aspect ratio */
  transition: opacity 0.5s ease; /* Smooth transition for opacity */
}

.product_cat-menus-speciaux .custom-image-wrapper .middle {
  transition: opacity 0.5s ease; /* Smooth transition for the middle */
  opacity: 0; /* Start invisible */
  position: absolute; /* Position it absolutely within the wrapper */
  top: 50%; /* Center vertically */
  left: 50%; /* Center horizontally */
  transform: translate(-50%, -50%); /* Adjust position to center */
  text-align: center; /* Center text */
  width: 100%; /* Make sure it covers the entire width */

}

.product_cat-menus-speciaux .custom-image-wrapper:hover .middle {
  opacity: 1; /* Show overlay content on hover */
}

/* Create a grey overlay */
.product_cat-menus-speciaux .custom-image-wrapper:hover img {
  opacity: 0.3; /* Set the image to transparent grey on hover */
}

.product_cat-menus-speciaux .custom-image-wrapper .text {
  background-color: transparent; /* Set transparent background */
  color: #601a24; /* Text color */
  font-size: 16px; /* Font size */
  padding: 10px 20px; /* Padding around the button */
  border: 1px solid #601a24; /* Button border */
  text-decoration: none; /* Remove underline from link */
  transition: background-color 0.5s ease, color 0.5s ease; /* Transition for hover effect */
}

.product_cat-menus-speciaux .custom-image-wrapper .text:hover {
  background-color: #601a24; /* Change background color on hover */
  color: white; /* Change text color on hover */
}


.product_cat-boisson .custom-image-wrapper img{
  width: 200px !important;
  height: 250px !important;
  object-fit: cover;

}

.boisson-product-container ul.products.columns-4{
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  object-fit: cover;
}


.boisson-product-container .products.columns-4 li a .woocommerce-loop-product__title{
display: flex;
align-items: flex-start;
align-content: center;
justify-content: center;
min-height: 3rem;
width: 100%;
}


.woocommerce ul.products li.product a img {
  width: 250px;
	/*width: 250px !important;*/
	height: 250px !important;
	object-fit: contain;
  /*object-fit: cover;*/
  height: auto;
  display: block;
  margin: 0 0 1em;
  box-shadow: none;
}

.success-message{
margin: 5px;
color: #411417;
}

#carte-traiteur .description p strong{
  color: #411417;
  }