@import url('https://fonts.googleapis.com/css2?family=Atma:wght@300;400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Chewy&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Sour+Gummy:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Caveat+Brush&display=swap');


body {
  background-image: url('../images/agenda-hero-image-background.svg');
}

.caveat-brush-regular {
  font-family: "Caveat Brush", cursive;
  font-weight: 400;
  font-style: normal;
}

.chewy-regular {
  font-family: "Chewy", system-ui;
  font-weight: 400;
  font-style: normal;
}

.atma-light {
    font-family: "Atma", system-ui;
    font-weight: 300;
    font-style: normal;
  }
  
  .atma-regular {
    font-family: "Atma", system-ui;
    font-weight: 400;
    font-style: normal;
  }
  
  .atma-medium {
    font-family: "Atma", system-ui;
    font-weight: 500;
    font-style: normal;
  }
  
  .atma-semibold {
    font-family: "Atma", system-ui;
    font-weight: 600;
    font-style: normal;
  }
  
  .atma-bold {
    font-family: "Atma", system-ui;
    font-weight: 700;
    font-style: normal;
  }

  .text-outline-dark {
    text-shadow:
        -1px -1px 0 #000,
         1px -1px 0 #000,
        -1px  1px 0 #000,
         1px  1px 0 #000;
}  

.text-outline-dark-thick {
  text-shadow:
      -1px -1px 0 #000,
       1px -1px 0 #000,
      -1px  1px 0 #000,
       1px  1px 0 #000,
      -2px -2px 0 #000,
       2px -2px 0 #000,
      -2px  2px 0 #000,
       2px  2px 0 #000;
}

.text-outline-light {

  text-shadow:
      -1px -1px 0 #fff,
       1px -1px 0 #fff,
      -1px  1px 0 #fff,
       1px  1px 0 #fff;
}  

.text-outline-light-thick {
text-shadow:
    -1px -1px 0 #fff,
     1px -1px 0 #fff,
    -1px  1px 0 #fff,
     1px  1px 0 #fff,
    -2px -2px 0 #fff,
     2px -2px 0 #fff,
    -2px  2px 0 #fff,
     2px  2px 0 #fff;
}

.text-outline-light-thicker {
  text-shadow:
      -1px -1px 0 #fff,
       1px -1px 0 #fff,
      -1px  1px 0 #fff,
       1px  1px 0 #fff,
      -2px -2px 0 #fff,
       2px -2px 0 #fff,
      -2px  2px 0 #fff,
       2px  2px 0 #fff,
      -3px -3px 0 #fff,
       3px -3px 0 #fff,
      -3px  3px 0 #fff,
       3px  3px 0 #fff,
      -4px -4px 0 #fff,
       4px -4px 0 #fff,
      -4px  4px 0 #fff,
       4px  4px 0 #fff;

}

.text-outline-neutral {

  text-shadow:
      -1px -1px 0 #66ad2d,
       1px -1px 0 #66ad2d,
      -1px  1px 0 #66ad2d,
       1px  1px 0 #66ad2d;
}  

.text-outline-neutral-thick {
text-shadow:
    -1px -1px 0 #66ad2d,
     1px -1px 0 #66ad2d,
    -1px  1px 0 #66ad2d,
     1px  1px 0 #66ad2d,
    -2px -2px 0 #66ad2d,
     2px -2px 0 #66ad2d,
    -2px  2px 0 #66ad2d,
     2px  2px 0 #66ad2d;
}

.text-outline-neutral-thicker {
  text-shadow:
      -1px -1px 0 #66ad2d,
       1px -1px 0 #66ad2d,
      -1px  1px 0 #66ad2d,
       1px  1px 0 #66ad2d,
      -2px -2px 0 #66ad2d,
       2px -2px 0 #66ad2d,
      -2px  2px 0 #66ad2d,
       2px  2px 0 #66ad2d,
      -3px -3px 0 #66ad2d,
       3px -3px 0 #66ad2d,
      -3px  3px 0 #66ad2d,
       3px  3px 0 #66ad2d,
      -4px -4px 0 #66ad2d,
       4px -4px 0 #66ad2d,
      -4px  4px 0 #66ad2d,
       4px  4px 0 #66ad2d;

}

.text-outline-primary {

  text-shadow:
      -1px -1px 0 #48a6cd,
       1px -1px 0 #48a6cd,
      -1px  1px 0 #48a6cd,
       1px  1px 0 #48a6cd;
}  

.text-outline-primary-thick {
text-shadow:
    -1px -1px 0 #48a6cd,
     1px -1px 0 #48a6cd,
    -1px  1px 0 #48a6cd,
     1px  1px 0 #48a6cd,
    -2px -2px 0 #48a6cd,
     2px -2px 0 #48a6cd,
    -2px  2px 0 #48a6cd,
     2px  2px 0 #48a6cd;
}

.text-outline-primary-thicker {
  text-shadow:
      -1px -1px 0 #48a6cd,
       1px -1px 0 #48a6cd,
      -1px  1px 0 #48a6cd,
       1px  1px 0 #48a6cd,
      -2px -2px 0 #48a6cd,
       2px -2px 0 #48a6cd,
      -2px  2px 0 #48a6cd,
       2px  2px 0 #48a6cd,
      -3px -3px 0 #48a6cd,
       3px -3px 0 #48a6cd,
      -3px  3px 0 #48a6cd,
       3px  3px 0 #48a6cd,
      -4px -4px 0 #48a6cd,
       4px -4px 0 #48a6cd,
      -4px  4px 0 #48a6cd,
       4px  4px 0 #48a6cd;

}

.text-outline-secondary {

  text-shadow:
      -1px -1px 0 #dd72b1,
       1px -1px 0 #dd72b1,
      -1px  1px 0 #dd72b1,
       1px  1px 0 #dd72b1;
}  

.text-outline-secondary-thick {
text-shadow:
    -1px -1px 0 #dd72b1,
     1px -1px 0 #dd72b1,
    -1px  1px 0 #dd72b1,
     1px  1px 0 #dd72b1,
    -2px -2px 0 #dd72b1,
     2px -2px 0 #dd72b1,
    -2px  2px 0 #dd72b1,
     2px  2px 0 #dd72b1;
}

.text-outline-secondary-thicker {
  text-shadow:
      -1px -1px 0 #dd72b1,
       1px -1px 0 #dd72b1,
      -1px  1px 0 #dd72b1,
       1px  1px 0 #dd72b1,
      -2px -2px 0 #dd72b1,
       2px -2px 0 #dd72b1,
      -2px  2px 0 #dd72b1,
       2px  2px 0 #dd72b1,
      -3px -3px 0 #dd72b1,
       3px -3px 0 #dd72b1,
      -3px  3px 0 #dd72b1,
       3px  3px 0 #dd72b1,
      -4px -4px 0 #dd72b1,
       4px -4px 0 #dd72b1,
      -4px  4px 0 #dd72b1,
       4px  4px 0 #dd72b1;

}

.text-outline-accent {

  text-shadow:
      -1px -1px 0 #8c44b9,
       1px -1px 0 #8c44b9,
      -1px  1px 0 #8c44b9,
       1px  1px 0 #8c44b9;
}  

.text-outline-accent-thick {
text-shadow:
    -1px -1px 0 #8c44b9,
     1px -1px 0 #8c44b9,
    -1px  1px 0 #8c44b9,
     1px  1px 0 #8c44b9,
    -2px -2px 0 #8c44b9,
     2px -2px 0 #8c44b9,
    -2px  2px 0 #8c44b9,
     2px  2px 0 #8c44b9;
}

.text-outline-accent-thicker {
  text-shadow:
      -1px -1px 0 #8c44b9,
       1px -1px 0 #8c44b9,
      -1px  1px 0 #8c44b9,
       1px  1px 0 #8c44b9,
      -2px -2px 0 #8c44b9,
       2px -2px 0 #8c44b9,
      -2px  2px 0 #8c44b9,
       2px  2px 0 #8c44b9,
      -3px -3px 0 #8c44b9,
       3px -3px 0 #8c44b9,
      -3px  3px 0 #8c44b9,
       3px  3px 0 #8c44b9,
      -4px -4px 0 #8c44b9,
       4px -4px 0 #8c44b9,
      -4px  4px 0 #8c44b9,
       4px  4px 0 #8c44b9;

}

.text-outline-terciary {

  text-shadow:
      -1px -1px 0 #d7981a,
       1px -1px 0 #d7981a,
      -1px  1px 0 #d7981a,
       1px  1px 0 #d7981a;
}  

.text-outline-terciary-thick {
text-shadow:
    -1px -1px 0 #d7981a,
     1px -1px 0 #d7981a,
    -1px  1px 0 #d7981a,
     1px  1px 0 #d7981a,
    -2px -2px 0 #d7981a,
     2px -2px 0 #d7981a,
    -2px  2px 0 #d7981a,
     2px  2px 0 #d7981a;
}

.text-outline-terciary-thicker {
  text-shadow:
      -1px -1px 0 #d7981a,
       1px -1px 0 #d7981a,
      -1px  1px 0 #d7981a,
       1px  1px 0 #d7981a,
      -2px -2px 0 #d7981a,
       2px -2px 0 #d7981a,
      -2px  2px 0 #d7981a,
       2px  2px 0 #d7981a,
      -3px -3px 0 #d7981a,
       3px -3px 0 #d7981a,
      -3px  3px 0 #d7981a,
       3px  3px 0 #d7981a,
      -4px -4px 0 #d7981a,
       4px -4px 0 #d7981a,
      -4px  4px 0 #d7981a,
       4px  4px 0 #d7981a;

}




#product-long-description h1, #product-long-description h2, #product-long-description h3 {
  color: #2c3e50;
}
#product-long-description .important {
  color: #e74c3c;
  font-weight: bold;
}
#product-long-description ul {
  list-style-type: disc;
  margin-left: 20px;
}

#product-long-description .bonus {
  background-color: #ecf0f1;
  padding: 15px;
  border-left: 5px solid #3498db;
  margin-top: 20px;
}

#product-long-description .bonus h2 {
  font-size: larger;
  font-weight: bold;
  color: #8c44b9;
}

.carousel-item {
  display: none;
}

.carousel-item.active {
  display: block;
}

#featured-carousel {
    display: flex;
    overflow-x: auto;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
}

.feature-carousel-item {
    flex: 0 0 100%; /* Each item takes the full width */
    scroll-snap-align: start;
    display: block; /* Ensures items are visible */
}

.breadcrumbs > ul > li + *:before, .breadcrumbs > ol > li + *:before {
  height: 0.5rem;
  width: 0.5rem;
  opacity: 0.75;
  border-top-width: 2px;
  border-right-width: 2px;
}

.star-rating input {
  display: none;
}
.star-rating label {
  color: #CBD5E0; /* Base color (gray-400) */
  transition: color 0.2s;
}
.star-rating label:hover,
.star-rating label:hover ~ label {
  color: #FFD700; /* Hover color (yellow-500) */
}
.star-rating input:checked ~ label {
  color: #FFD700; /* Selected star color */
}

/* Apply to all scrollable elements */
.scrollbar-custom {
  /* For Firefox */
  scrollbar-width: thin; /* Options: auto, thin, none */
  scrollbar-color: #a0a0a0 transparent; /* thumb and track colors */
}

/* For WebKit-based browsers */
.scrollbar-custom::-webkit-scrollbar {
  width: 8px; /* Width of the scrollbar */
  height: 8px; /* Height for horizontal scrollbars */
}

.scrollbar-custom::-webkit-scrollbar-track {
  background: transparent; /* Track color */
}

.scrollbar-custom::-webkit-scrollbar-thumb {
  background-color: #a0a0a0; /* Thumb color */
  border-radius: 4px; /* Rounded corners */
  border: 2px solid transparent; /* Creates padding around thumb */
  background-clip: padding-box; /* Ensures border is not visible */
}

/* Optional: Hover effect */
.scrollbar-custom::-webkit-scrollbar-thumb:hover {
  background-color: #888; /* Darker thumb on hover */
}


@media (max-width: 359px) {
    /* Header adjustments */
    header.navbar {
        padding-left: 0.5rem; /* px-2 */
        padding-right: 0.5rem; /* px-2 */
    }

    /* Mobile Logo */
    header.navbar .lg\:hidden h1 {
        font-size: 1.125rem; /* text-lg */
        line-height: 1.75rem; /* text-lg */
    }
    header.navbar .lg\:hidden h1 span.text-2xl {
        font-size: 1.25rem; /* text-xl */
        line-height: 1.75rem; /* text-xl */
    }

    /* Submenu adjustments */
    nav#submenu-categories {
        padding-left: 0.5rem; /* px-2 */
        padding-right: 0.5rem; /* px-2 */
    }
    nav#submenu-categories > div { /* Target the inner flex container */
        gap: 0.5rem; /* gap-2 */
        /* Remove space-x-4 if present */
    }

    /* Category Buttons */
    nav div#submenu-categories button {
        font-size: 0.75rem;
        line-height: 1rem;
    }

    nav div#submenu-more label {
        font-size: 0.75rem;
        line-height: 1rem;
    }

    /* Product card button container adjustments for small screens */
    .card-actions .flex.space-x-2 {
        flex-direction: column;
        width: 100%;
        gap: 0.5rem; /* Equivalent to space-y-2 */
        /* Remove space-x-2 utility class */
    }

    .card-actions .flex.space-x-2 form {
      margin-left: 0;
      /* width: 100%; */
    }

    .card-actions .flex.space-x-2 form button {
        width: 100%;
    }

    h1.text-3xl, h2.text-3xl, h4.text-3xl {
      font-size: 1.5rem;
    }

    h1.text-4xl, h2.text-4xl, h4.text-4xl {
      font-size: 1.875rem;
    }

}

.submenu-dropdown-button-left-align {
    text-align: left;
}


@media (max-width: 319px) {
    /* Header adjustments */
    header.navbar {
        padding-left: 0.25rem; /* px-1 */
        padding-right: 0.25rem; /* px-1 */
    }

    /* Mobile Menu Button and Icons */
    header.navbar .lg\:hidden .btn-sm { /* Target existing btn-sm */
        padding: 0.25rem; /* Adjust padding for btn-xs size */
        font-size: 0.75rem; /* text-xs */
    }


    /* Submenu adjustments */
    nav#submenu-categories {
        padding-left: 0.25rem; /* px-1 */
        padding-right: 0.25rem; /* px-1 */
    }
    nav#submenu-categories > div { /* Target the inner flex container */
        gap: 0.25rem; /* gap-1 */
    }

    /* Category Buttons */
    nav div#submenu-categories button {
         padding: 0.25rem 0.5rem; /* Adjust padding for smaller size */
         font-size: 0.75rem; /* text-xs */
    }

    nav div#submenu-more label {
        padding: 0.25rem 0.5rem; /* Adjust padding for smaller size */
        font-size: 0.75rem; /* text-xs */
    }
}

@media (max-width: 266px) {
    /* Hide header cart button */
    header.navbar .lg\:hidden a[href="/cart/"] {
        display: none;
    }

    /* Ensure drawer cart link is visible */
    .drawer-side .menu a[href="{% url 'cart' %}"] {
        display: flex !important; /* Use flex as it is in the drawer */
    }

    /* Hide the 2xl cart link if it somehow appears */
     header.navbar .hidden.lg\:flex a[href="{% url 'cart' %}"] {
        display: none;
    }
}