:root {
    --footer-height: 200px;
    --main-accent-color: #ff5722;
    --main-accent-color-dark: #d25722;
}

main {
    min-height: calc(100vh - var(--footer-height))
}

footer {
    min-height: var(--footer-height);
}

ul.navbar-nav li {
    margin: 0 auto;
}

.navbar-brand img {
    max-height: 50px;
    max-width: 100%;
}

button.nav-link.active {
    border-bottom-color: white !important;
    font-size: 1.2rem;
}

.text-justify {
    text-align: justify;
}

.main-logo {
    max-height: 40px !important;
}

.action-button {
    background-color: var(--main-accent-color) !important;
    color: white !important;
}

.action-button:hover {
    color: white !important;
}

.btn-action {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--main-accent-color);
    --bs-btn-border-color: var(--main-accent-color);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--main-accent-color-dark);
    --bs-btn-hover-border-color: var(--main-accent-color-dark);
    --bs-btn-focus-shadow-rgb: 49,132,253;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--main-accent-color-dark);
    --bs-btn-active-border-color: var(--main-accent-color-dark);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--main-accent-color);
    --bs-btn-disabled-border-color: var(--main-accent-color);
}

.btn-outline-action {
    --bs-btn-color: var(--main-accent-color);
    --bs-btn-border-color: var(--main-accent-color);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--main-accent-color);
    --bs-btn-hover-border-color: var(--main-accent-color);
    --bs-btn-focus-shadow-rgb: 13,110,253;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--main-accent-color);
    --bs-btn-active-border-color: var(--main-accent-color);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: var(--main-accent-color);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: var(--main-accent-color);
    --bs-gradient: none;
}

.hover-shadow:hover {
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;;
}

/* HTML: <div class="loader"></div> */
.loader {
    width: 50px;
    aspect-ratio: 1;
    color: var(--main-accent-color);
    --_c:no-repeat radial-gradient(farthest-side,currentColor 92%,#0000);
    background: 
      var(--_c) 50% 0   /12px 12px,
      var(--_c) 50% 100%/12px 12px,
      var(--_c) 100% 50%/12px 12px,
      var(--_c) 0    50%/12px 12px,
      var(--_c) 50%  50%/12px 12px,
      conic-gradient(from 90deg at 4px 4px,#0000 90deg,currentColor 0)
      -4px -4px/calc(50% + 2px) calc(50% + 2px);
    animation: l8 1s infinite linear;
  }
  @keyframes l8 {to{transform: rotate(.5turn)}
}


#scrollBackBtn {
    position: fixed; /* Fixed/sticky position */
    bottom: 100px; /* Place the button at the bottom of the page */
    right: 31px; /* Place the button 30px from the right */
    z-index: 99; /* Make sure it does not overlap */
    border: none; /* Remove borders */
    outline: none; /* Remove outline */
    background-color: var(--main-accent-color); /* Set a background color */
    color: white; /* Text color */
    cursor: pointer; /* Add a mouse pointer on hover */
    padding: 5px 10px; /* Some padding */
    border-radius: 10px; /* Rounded corners */
    opacity: 0;
    visibility: hidden;
    transition: opacity .8s, visibility .3s;
  }

  img.product-image {
    cursor: pointer;
  }