@import url('https://fonts.googleapis.com/css2?family=Outfit:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap'); 
@import url('https://fonts.googleapis.com/css2?family=Sacramento&display=swap'); 
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css");

@import 'navbar.css';
@import 'hero.css';

:root {
  --primary-color: #ECECEC;
  --secondary-color: #99A855;
}

/* COLOR */
.text-color-primary { color: var(--primary-color) !important; }
.text-color-secondary { color: var(--secondary-color) !important; }
.text-color-white { color: white !important; }

.bg-color-primary { background-color: var(--primary-color) !important; }
.bg-color-secondary { background-color: var(--secondary-color) !important; }
.bg-color-white { background-color: white !important; }
.bg-color-pink { background-color: #D97474 !important; }

body {
  font-family: 'Outfit' !important;
  min-height: 100vh;
  padding-top: 61px;
  background-color: var(--primary-color) !important;
  background-image: url('../img/patron_alt.svg') !important;
  background-repeat: repeat;
  background-size: cover;
  color: var(--secondary-color) !important;
}

.card { 
  border: none !important;
  border-radius: 0.75rem !important;
}

.product {
  border: 1px solid var(--primary-color);
}

.photo { object-position: bottom !important; }

@media (max-width: 575.98px) { 
  .product .photo { 
    height: 16rem;
  }
}
.product .name {
  margin: 0;
  font-weight: 300;
}
.product .price {
  color: #202020;
}
.product .description {
  color: #202020;
  font-size: 0.8rem;
}

.badge.naranja { background-color: #f38c33; }
.badge.menta { background-color: #5cb35c; }
.badge.cannabis { background-color: #8aaa53; }
.badge.eucalipto { background-color: #7f8a5c; }
.badge.lavanda { background-color: #7676bd; }
.badge.manzanilla { background-color: #debf61; }
.badge.bambu { background-color: #8bbe48; }

.tooltip { 
  opacity: 0.95 !important;
  box-shadow: 0px 3px 4px 0px rgba(0, 0, 0, 0.3) !important;
  border-radius: 0.75rem !important;
}
.bs-tooltip-auto[data-popper-placement^=top] .tooltip-arrow::before, .bs-tooltip-top .tooltip-arrow::before { border-top-color: var(--secondary-color) !important; }
.bs-tooltip-auto[data-popper-placement^=left] .tooltip-arrow::before, .bs-tooltip-start .tooltip-arrow::before { border-left-color: var(--secondary-color) !important; }
.bs-tooltip-auto[data-popper-placement^=right] .tooltip-arrow::before, .bs-tooltip-end .tooltip-arrow::before { border-right-color: var(--secondary-color) !important; }
.bs-tooltip-auto[data-popper-placement^=bottom] .tooltip-arrow::before, .bs-tooltip-bottom .tooltip-arrow::before { border-bottom-color: var(--secondary-color) !important; }

.tooltip-inner {
  border-radius: 0.75rem !important;
  /* border: 1px solid var(--primary-color); */
  background-color: var(--secondary-color) !important;
  color: white !important;
  text-align: left !important;
  max-width: 250px !important;
  padding: 1rem !important;
}

.fs-7 { font-size: 0.8rem; }

.oil-icon {
  margin-left: -4px;
  width: 13px;
  margin-top: -4px;
}