@import url('https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/font/bootstrap-icons.min.css');
@import url('https://fonts.googleapis.com/css2?family=Edu+NSW+ACT+Cursive:wght@400..700&family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');

/* Other variables are defined by Bootstrap */
:root {
  --text-color: #222;
  --bg-image-url: url('https://res.cloudinary.com/dmq4a1yxb/image/upload/ar_1:1,c_auto/a_90/f_png/q_auto/dpr_1/trees-wood-yellow-wood-oak-preview_h1wqse_upscale_3d72dd');
  --logo-bg-image: url('https://res.cloudinary.com/dmq4a1yxb/image/upload/ar_1:1,c_auto/a_90/f_png/q_auto/dpr_1/trees-wood-yellow-wood-oak-preview_h1wqse_upscale_3d72dd'), linear-gradient(rgba(85, 75, 72, 0.7), rgba(85, 75, 72, 0.7));
  --logo-border: 5px solid #8f675d;
  --container-color: rgba(197, 175, 154, 0.9);
  --nav-footer-bg-color: #aa644a;
  --nav-link-bg-color: rgba(186, 133, 55, 0.8);
  --dropdown-item-bg-color: rgba(218, 160, 74, 0.8);
  --etsy-color: #f1641e;
  --etsy-hover-color: #f57433;
  --etsy-hover-border-color: #ec6e2f;
  --etsy-active-color: #f7844a;
  --etsy-active-border-color: #e77c46;
  --etsy-focus-box-shadow: 0 0 0 0.25rem rgba(247, 133, 77, 0.5);
  --bs-dropdown-bg-custom: #a54f58;
  --business-info-bg-color: #a54f58;
  --static-card-bg: #eee;
}

body {
  margin: 0;
  border: 0;
  color: var(--text-color) !important;
  font-family: "Open Sans", sans-serif !important;
  font-optical-sizing: auto;
  font-style: normal;
  font-variation-settings:
    "wdth" 100;
}

select {
  cursor: pointer;
}

.logo {
  border: var(--logo-border);
  background-image: var(--logo-bg-image);
  background-blend-mode: overlay;
  height: 260px;
  background-repeat: no-repeat;
  background-size: cover;
}

.logo a {
  max-width: 500px;
  width: 100%;
  min-width: 270px;
}

.logo a img {
  width: calc(100% - 20px);
  height: auto;
  max-height: 106px;
  max-width: 350px
}

.logo a img:first-child {
  width: calc(90% - 20px);
  height: 86px;
  max-width: 330px;
}

#business-info {
  background-color: var(--business-info-bg-color);
  min-height: 50px;
  padding: 1em;
}

a:not(.link-underline-opacity-25) {
  text-decoration: none !important;
}

#bg-img {
  background-image: var(--bg-image-url);
  background-color: rgba(0, 0, 0, 0.5);
  background-blend-mode: darken;
  background-repeat: no-repeat;
  background-size: cover;
  height: auto;
  width: 100vw;
}

.bg-custom {
  background-color: var(--nav-footer-bg-color);
}

.outline {
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1);
}

.slogan {
  font-family: "Edu NSW ACT Cursive", cursive;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  line-height: 1.9;
}

.container {
  background-color: var(--container-color);
}

.navbar-toggler {
  margin: 1rem;
}

#navbarContent {
  align-content: center;
}

ul .sub {
  list-style-type: none;
}

.navbar .navbar-nav .nav-link {
  margin: 1rem 0.25rem;
}

.nav-link {
  padding: 0.5rem !important;
}

.nav-selector .nav-link.active,
.nav-selector .nav-link:not(.active):hover,
.nav-selector .nav-link:not(.active):focus {
  background-color: var(--nav-link-bg-color);
  box-shadow: var(--bs-box-shadow);
  border-radius: var(--bs-border-radius);
}

.dropdown-menu {
  padding: 0.25rem !important;
}

.dropdown-menu .sub {
  padding-left: 0;
}

.dropdown-menu .sub li {
  margin: 0 0.75rem;
}

.dropdown-menu .dropdown-item {
  margin: 0.5rem 0;
}

a.btn {
  text-shadow: none !important;
}

.carousel-caption p,
header a:hover,
header a:focus,
footer a:hover,
footer a:focus,
.nav-selector a:hover,
.nav-selector a:focus {
  text-shadow: 1px 1px 1px #000;
}

.nav-selector .dropdown-item.active,
.nav-selector .dropdown-item:hover,
.nav-selector .dropdown-item:focus,
.nav-selector .dropdown-item:focus-visible,
.nav-selector .dropdown-item:active {
  background-color: var(--dropdown-item-bg-color);
  box-shadow: var(--bs-box-shadow-sm);
  border-radius: var(--bs-border-radius-sm);
}

.nav-selector .dropdown-item:focus-visible {
  outline: none;
}

.nav-selector .dropdown-item.active,
.nav-selector .dropdown-item:focus,
.nav-selector .dropdown-item:active {
  color: inherit !important;
}

/* Changes dropdown icon */
.show::after {
  border-top: 0 !important;
  border-right: 0.3em solid transparent !important;
  border-bottom: 0.3em solid !important;
  border-left: 0.3em solid transparent !important;
}

a.active {
  cursor: auto;
}

.dropdown-menu {
  background-color: var(--bs-dropdown-bg-custom) !important;
}

.carousel {
  color: #fff;
}

.carousel img {
  min-height: 250px;
  max-height: 90vh;
  width: 100vw !important;
  min-width: 250px;
  max-width: 100%;
}

/*.card {
  max-width: 20rem;
}*/

.card.static {
  max-width: 14rem;
  border: none !important;
  background-color: var(--static-card-bg) !important;
}

.card-title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

strong.card-text {
  margin-left: 2.5rem;
}

/* For Desktop Users */
[data-bs-toggle="tooltip"] {
  display: none;
  margin-right: 0.25rem;
}

.card-body .bi {
  margin-right: 10px;
}

.card-footer.btn {
  border-left: none;
  border-right: none;
  border-bottom: none;
}

a.purchase {
  color: inherit;
}

.purchase,
.card-footer p {
  text-transform: uppercase;
}

.card-footer a {
  font-size: 1.5rem;
}

#product-container {
  padding: 1rem;
}

#product-img {
  max-width: 18rem;
}

#product-info .selected {
  cursor: auto !important;
}

footer {
  padding: 1rem 0.9rem;
  font-size: 0.9rem;
}

footer #footerNav,
footer #operations,
footer #contactInfo {
  letter-spacing: 0.1em;
}

footer .nav-link {
  cursor: pointer;
}

footer nav#footerNav {
  margin-right: 1rem;
}

footer nav#footerNav {
  font-size: 1rem;
  margin-bottom: 1rem;
}

footer #operations {
  width: 280px;
  text-align: left;
}

footer table {
  margin: 0 0 0.5rem;
}

footer tr td:first-of-type {
  padding-right: 5px;
}

footer #contactInfo {
  margin-left: 1rem;
}

/* Overridden because I'm lazy */
footer .btn-warning {
  font-family: "Times New Roman", Times, serif !important;
  font-weight: 400;
  background-color: var(--etsy-color) !important;
  border-color: var(--etsy-color) !important;
}

footer .btn-warning:hover,
footer .btn-warning:focus-visible {
  background-color: var(--etsy-hover-color) !important;
  border-color: var(--etsy-hover-border-color) !important;
}

footer .btn-warning:focus-visible {
  box-shadow: var(--etsy-focus-box-shadow) !important;
}

footer .btn-warning:active {
  background-color: var(--etsy-active-color) !important;
  border-color: var(--etsy-active-border-color) !important;
  box-shadow: var(--bs-btn-active-shadow) !important;
}

/*footer #fsnNav {
  display: inline-block;
}*/

footer #footerFsn a:focus-visible {
  outline: 0;
}

@media (min-width: 1256px) {
  .logo a img {
    max-width: 420px;
  }

  .logo a img:first-child {
    max-width: 400px;
    height: 96px;
  }
}

@media (max-width: 1192px) {
  #logo-wrapper {
    font-size: 0.9em;
  }
}

@media (max-width: 1080px) {
  .logo a img {
    max-width: 300px;
  }

  .logo a img:first-child {
    max-width: 280px;
  }
}

@media (max-width: 980px) {
  .logo a img {
    max-width: 280px;
  }

  .logo a img:first-child {
    max-width: 260px;
  }
}

@media (max-width: 980px) {
  .logo a img {
    max-width: 260px;
  }

  .logo a img:first-child {
    max-width: 240px;
  }
}

@media (max-width: 814px) {
  /* footer #footerFsn img {
    margin: 0 0 0.5rem;
  }*/
}


@media (max-width: 768px) {
  .carousel img {
    height: 250px;
  }

}

@media (max-width: 759px) {
  #footerFsn {
    margin-top: 1.5rem;
  }
}

@media (min-width: 577px) {
  nav .dropdown-menu {
    font-size: 0.9rem !important;
  }

  .dropdown-menu .sub {
    font-size: 0.8rem !important;
  }

  footer #footerFsn {
    font-size: 0.8rem;
  }
}

@media (max-width: 576px) {
  .dropdown-menu .sub {
    font-size: 0.9rem !important;
  }

  footer table {
    margin: 0 auto 0.5rem;
  }

  footer #operations {
    text-align: center;
    margin: auto;
  }

  nav:not(#footerNav):not(#fsnNav) {
    font-size: 1.125rem;
  }

  nav .bi {
    font-size: 1.15rem;
  }

  footer nav#footerNav {
    font-size: 1.1rem;
  }

  footer {
    font-size: 1rem;
  }
}

@media (max-width: 575px) {
  #product-info {
    width: 100%;
  }
}

/* @media (max-width: 529px) {
  footer #footerFsn img {
    margin: 1rem 0 0.75rem;
  }
} */

@media (max-width: 306px) {
  .product.card.d-flex.flex-row {
    flex-direction: column !important;
  }

  .product.card .card-img {
    max-width: 100%;
  }
}

@media (max-width: 300px) {
  .alert#deliveries {
    font-size: 0.8em;
    width: 186px !important;
  }

  .alert .bi {
    font-size: 1em !important;
  }

}