:root {
  --mayeWhite: rgb(248, 248, 248);

  --mayeGold: rgb(224, 208, 148);
  --mayeBrightGold: rgb(248, 248, 248);
  
  --mayeRed: rgba(220, 53, 69, 0.5);
  --mayeRedFull: rgba(220, 53, 69, 1);
  --mayeRedDiscount: rgb(220, 60, 60);
  
  --mayeGreen: rgb(135, 153, 134);
  --mayeLightGreen: rgb(164, 184, 163);
}

html { 
  scroll-behavior: smooth; 
  padding: 0 0 0 0;
  margin: 0 0 0 0;
}

#headerContainer {
  z-index: 99 !important;
}

#logoImage {
  margin-top: -8px;
  margin-bottom: -15px;

  margin-left: 0px;
  margin-right: 0px;

  max-height: 90;
  padding: 0 0 0 0;
  transition: border-color 0.3s ease-in-out;
  border: 15px solid var(--mayeWhite);
  border-radius: 100%;
  padding: 2px;
}

#logoImage:hover {
  transition: border-color 0.3s ease-in-out;
  border-color: var(--mayeGold);
}

#landingTextContainer {
  margin-left: 20;
}

.teamMemberImage {
  height: 700px !important;
}

.blogCard {
  
}

.blogCardBody {
  min-height: 120px;
  padding: 10px 10px 10px 10px;
}

.sectionTitle {
  padding-top: 20px;
  padding-bottom: 20px;
}

#sectionContact {
}

#sectionFooter {
  padding-top: 20px;
  padding-bottom: 20px;
  margin-top: 50px !important;
}

#blogCards, #productsSlider {
  padding-left: 5%;
  padding-right: 5%;
}


#sectionProductsList {
  padding-bottom: 20px;
}

.productImage {
  max-height: 200px;
}

.ingredientImage {
  max-height: 100px;
}

.productsSliderArrow > svg {
  color: var(--mayeGold) !important;
  width: 50px;
  padding-top: 80px;
}



/*  SHOP  */
#shopLandingText {
  text-align: center;
  padding-top: 20px !important;
}

.filterList {
  text-align: left !important;
}

#filterAccordionContent {
  background-color: rgb(248, 248, 248); 
  padding-top: 10px; 
  padding-bottom: 10px
}

/* PRODUCT PAGE */

.quantityModifier {
  font-size: larger;
}

.detail-accordion-content {
  padding-left: 5px;
}

/* REMOVE ARROWS FROM INPUTS */

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.unselectable {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

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

/* CART PAGE */
.cartProductAmmount {
  font-weight: bold;
}

.removeProductBtn {
  color: var(--mayeRed);
  margin-left: 10px;
}

.removeProductBtn :hover {
  color: var(--mayeRedFull) !important;
}

#cartCounter {
  visibility: hidden;

  position: absolute; 
  top: 18px; 
  right: -10px;

  width: 13px; 
  height: 13px; 

  border: 1px solid orange;
  border-radius: 100%; 

  text-align: center;

  background-color: orange;
  color: black;

  font-size: xx-small;
}

.validationFailed {
  border-color: var(--mayeRedFull) !important;
}

#currentPrice {
  font-size: large;
  color: #333;
}

#discountedPrice {
  text-decoration-line: line-through; 
  color: #555;
  font-weight: lighter;
}

.productLabel {
  color: white;
  
  padding-left: 3px;
  padding-right: 3px;
  padding-bottom: 2px;

  margin-right: 10px;

  background-color: var(--mayeRedDiscount);

  border-top-left-radius: 10%;
  border-bottom-right-radius: 10%;

  font-weight: bold;

  font-size: larger !important;
}

/*
--mayeRed: rgba(220, 53, 69, 0.5);
--mayeRedFull: rgba(220, 53, 69, 1);
*/

.uk-button {
  user-select: none !important;
}

.detail-accordion-content {
  white-space: pre-line !important;
  text-wrap: wrap;
}

.longDescription > p {
  text-wrap: wrap;

  /*margin: 0 !important;
  padding-top: 0;
  padding-bottom: 0;*/
}

.productDetailImages {
  border: 2px solid;
  border-color: rgba(0, 0, 0, 0);

  text-align: center;
  padding: 0;
}

.productDetailImages:hover {
  transition: border-color 0.3s ease-in-out;
  border-color: var(--mayeGold);
  cursor: pointer;
}

.updateProductImage {
  max-height: 50px;
}

.updateProductImage:hover {
  transform: scale(5); 
}

#ingredientModal {
  text-align: center;
}

.ingredientCard {
  padding: 0 0 0 0;
  padding-bottom: 0px;
  margin-top: 0px !important;
  
  border: 1px solid rgba(0, 0, 0, 0);
  text-align: center;
}

.ingredientCard:hover {
  cursor: pointer;
  transition: border-color 0.3s ease-in-out;
  /*border-color: var(--mayeGold);*/
}

/*Cookies*/
#cookie-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: #fff;
  border-top: 1px solid #ddd;
  box-shadow: 0 -2px 5px rgba(0,0,0,0.1);
  padding: 20px;
  z-index: 1000;
}

/*Terms and Agreements*/
#termsList li {
  padding-top: 10px;
}