/*
Theme Name: TNA
Theme URI: https://yourwebsite.com
Author: Mackman
Author URI: https://yourwebsite.com
Description: A child theme for the Storefront WooCommerce theme.
Version: 1.0
Template: storefront
Text Domain: tna
*/
/* Custom CSS goes here */

a:focus,
a:focus-visible {
   outline: none !important;
   box-shadow: none !important;
   border: none !important;
}
/* Hide pagination when infinite scroll is active */
.woocommerce-pagination {
   display: none !important;
}

/* Style the spinner */
.load-more-products .spinner {
   border: 2px solid #f3f3f3; /* Light grey */
   border-top: 2px solid #3498db; /* Blue color for spinner */
   border-radius: 50%;
   width: 20px;
   height: 20px;
   animation: spin 1s linear infinite;
   margin-right: 10px;
}

/* Animation for the spinner */
@keyframes spin {
   0% {
      transform: rotate(0deg);
   }
   100% {
      transform: rotate(360deg);
   }
}

@font-face {
   font-family: "Hans";
   src: url("assets/fonts/hans.ttf") format("truetype");
   font-weight: normal;
   font-style: normal;
}
@font-face {
   font-family: "Poppins";
   src: url("/wp-content/themes/tna/assets/fonts/poppins/Poppins-Regular.ttf")
      format("truetype");
   font-weight: 400;
   font-style: normal;
   font-display: swap;
}

@font-face {
   font-family: "Poppins";
   src: url("/wp-content/themes/tna/assets/fonts/poppins/Poppins-Medium.ttf")
      format("truetype");
   font-weight: 500;
   font-style: normal;
   font-display: swap;
}

@font-face {
   font-family: "Poppins";
   src: url("/wp-content/themes/tna/assets/fonts/poppins/Poppins-SemiBold.ttf")
      format("truetype");
   font-weight: 600;
   font-style: normal;
   font-display: swap;
}

@font-face {
   font-family: "Poppins";
   src: url("/wp-content/themes/tna/assets/fonts/poppins/Poppins-Bold.ttf")
      format("truetype");
   font-weight: 700;
   font-style: normal;
   font-display: swap;
}

body {
   font-family: "Poppins", sans-serif;
}

body a {
   color: #000;
   text-decoration: none;
}

h3 {
   font-family: "Poppins", sans-serif;
   font-size: 24px; /* Set the font size to 20px */
   text-transform: uppercase; /* Make text uppercase */
   font-weight: 600; /* Semibold (600 is a common weight for semibold) */
}

#desktop_logo {
   width: 200px;
   height: auto;
}

input.qty {
   width: 80px !important;
   max-width: 100px; /* optional */
}

/* body.drawer-open {
   overflow: hidden; 
   height: 100vh; 
}

 #drawer-search-results::-webkit-scrollbar {
   width: 8px;
}
#drawer-search-results::-webkit-scrollbar-thumb {
   background-color: rgba(0, 0, 0, 0.5);
   border-radius: 4px;
}

#myDrawer2 .absolute.bg-white {
   overflow-y: hidden;
}

#drawer-search-results {
   overflow-y: auto !important; 
}


#drawer-menu-items::-webkit-scrollbar {
   width: 8px;
}
#drawer-menu-items::-webkit-scrollbar-thumb {
   background-color: rgba(0, 0, 0, 0.5);
   border-radius: 4px;
}


#myDrawer .absolute.bg-white {
   overflow-y: hidden;
}


#drawer-menu-items {
   overflow-y: auto !important;
}
.custom-hover-white:hover {
   color: #fff !important; 
} */

/* Hide WooCommerce sale badge */
.onsale {
   display: none !important;
}

/* HEADER */

.header {
   background-color: #f1f1f1;

   text-align: center;
}

#navbar {
   position: sticky;
   top: 0;
   overflow: hidden;
   background-color: #333;
}

select {
   appearance: none; /* remove native styling */
   -webkit-appearance: none;
   -moz-appearance: none;
   background-color: #fff; /* white background */
   color: #000; /* black text */
   padding: 8px 12px;
   border: 1px solid #ccc;
   border-radius: 4px;
   font-size: 16px;
}
select {
   width: 100%;
   max-width: 400px; /* optional max width */
   box-sizing: border-box;
}
select {
   background-image: url("data:image/svg+xml;charset=US-ASCII,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10'><polygon points='0,0 10,0 5,5' fill='%23333'/></svg>");
   background-repeat: no-repeat;
   background-position: right 10px center;
   background-size: 10px;
}
.hero-button {
   /* Use !important to override external styles safely */
   background-color: #1d4ed8 !important; /* Tailwind's default for bg-blue-700 */
   color: white !important;
}

/* Sticky Header Styling */
#header {
   position: sticky; /* Makes the header stick */
   top: 0; /* Position it at the top of the viewport */
   z-index: 1000; /* Ensure it's above other content */
   width: 100%; /* Full width */
   background-color: #000; /* Background color */
}

/* Ensure that no parent container causes sticky header to fail */
/* #page,
#content,
.hfeed {
   overflow: visible !important;
} */

/* Custom CSS to force drawers and overlays to the absolute top layer */
.z-max-safe {
   z-index: 9999 !important;
}
.z-max-safe-btn {
   z-index: 10000 !important; /* Button needs to be higher than the overlay/drawer */
}

.non-front {
   padding-top: 50px;
}

.site-footer {
   color: white;
   background-color: black;
   padding: 0 !important;
}
.site-footer h3 {
   color: white;
}

#masthead {
   position: fixed;
   top: 0;
   width: 100%;
   height: 104px;
}

.site-header {
   padding-top: 0;
   padding-bottom: 0;
   border-bottom: none; /* This removes the bottom border */
}

/* .storefront-breadcrumb {
   margin: 0 !important;
   padding: 0 !important;
} */

body {
   padding-top: 104px;
}

.storefront-breadcrumb {
   padding-top: 20 !important;

   margin: 0 !important;
}

.owl-carousel .item {
   display: flex;
   flex-direction: column;
   height: 100%;
}

.product-card {
   flex: 1 1 auto;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
}
.single_add_to_cart_button + .added_to_cart {
   margin-left: 10px; /* Or use margin-top if they stack vertically */
}
@media (max-width: 480px) {
   .single_add_to_cart_button.button.alt,
   .added_to_cart.wc-forward {
      font-size: 12px !important;
      padding: 12px 10px !important;
      white-space: nowrap !important;
      display: inline-block !important;
   }

   .added_to_cart.wc-forward {
      margin-left: 6px !important;
   }
}

a:focus,
button:focus,
.button.alt:focus,
input:focus,
textarea:focus,
input[type="button"]:focus,
input[type="reset"]:focus,
input[type="submit"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="search"]:focus {
   outline: none !important;
}