/**
 * Theme Name:     Blocksy Child
 * Author:         CreativeThemes
 * Template:       blocksy
 * Text Domain:	   blocksy-child
 * Description:    Blocksy is a blazing fast and lightweight WordPress theme built with the latest web technologies. It was built with the Gutenberg editor in mind and has a lot of options that makes it extendable and customizable. You can easily create any type of website, such as business agency, shop, corporate, education, restaurant, blog, portfolio, landing page and so on. It works like a charm with popular WordPress page builders, including Elementor, Beaver Builder, Visual Composer and Brizy. Since it is responsive and adaptive, translation ready, SEO optimized and has WooCommerce built-in, you will experience an easy build and even an increase in conversions. Note: Blocksy is built with the latest web technologies in order to bring you the smoothest experience, that told, old browsers like IE 11 and below may not work as expected. We strongly recommend you to update/switch to a modern browser.
 */

.product-categories-row {
  display: flex;
  flex-direction: row;
  width: auto;
  justify-content: center;
  overflow: auto;
  -ms-overflow-style: none; /* for Internet Explorer, Edge */
  scrollbar-width: none; /* for Firefox */
  gap: 2rem;
}

.product-categories-row::-webkit-scrollbar {
  display: none; /* for Chrome, Safari, and Opera */
}

.subcategory {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  text-align: center;
  padding: 1rem;
  align-items: center;
}

.subcategory-image {
  width: 8rem;
  height: 8rem;
  border-radius: 50%;
  margin: 0 auto;
  border: 2px solid #fdba74;
  object-fit: cover;
  object-position: center;
  aspect-ratio: 1;
}
.subcategory-image:hover {
  box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
}

.subcategory-image.no-image {
  background-color: #fdba74;
}

.subcategory-title {
  margin-top: 10px;
  font-size: 1rem;
  font-weight: 600;
  color: initial;
  word-wrap: break-word;
}

.brand-logo {
  border: 1px;
  border-radius: 24px;
}

@media (max-width: 768px) {
  .subcategory-image {
    height: 6rem;
    width: 6rem;
  }
  .product-categories-row {
    gap: 0rem;
    justify-content: left;
  }
}

/* Shop Using Category */
.shop-cat-container {
  text-align: center;
  width: 100%;
  max-width: 1200px;
}

.shop-cat-heading {
  font-size: 2em;
  margin-bottom: 0.5em;
}

.shop-cat-tabs {
  display: flex;
  justify-content: center;
  gap: 2em;
  margin-bottom: 2em;
}

.shop-cat-tab {
  cursor: pointer;
  font-size: 1em;
  padding: 0.5em 1em;
}

.shop-cat-active-tab {
  border-bottom: 2px solid #000;
  font-weight: bold;
}

.shop-cat-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* 4 items per row */
  gap: 1em;
  padding: 1em;
}

.shop-cat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background: #ffffff;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s;
  color: initial;
  aspect-ratio: 1;
  max-width: 100%;
}

.shop-cat-item:hover {
  transform: translateY(-10px);
  color: initial;
}

.shop-cat-image {
  width: 100%;
  height: 80%;
  object-fit: cover;
  object-position: center;
  margin-bottom: auto; /* Push the image to the top of the container */
}

.shop-cat-title {
  font-size: 1em;
  padding: 1em;
  line-height: 1.5rem;
  flex-shrink: 0;
  background-color: #ffffff;
  width: 100%;
}

.shop-cat-title a:hover {
  text-decoration: none;
  color: initial;
}

/* Media Queries */
@media (max-width: 1024px) {
  .shop-cat-row {
    grid-template-columns: repeat(2, 1fr); /* 2 items per row */
  }
}

@media (max-width: 768px) {
  .shop-cat-row {
    grid-template-columns: repeat(2, 1fr);
    padding: 12px 0;
    margin: 0;
    gap: 0.5rem;
  }
  .shop-cat-item {
    margin: 0.5em;
  }
  .shop-cat-title {
    line-height: 1rem;
    padding: 0.25rem;
    font-size: 0.75rem;
  }
  .shop-cat-container .shop-cat-container {
    margin-bottom: 0;
  }
}

/* CSS for Tabs */
.tabbed {
  overflow-x: hidden; /* so we could easily hide the radio inputs */
  margin: 32px 0;
  padding-bottom: 16px;
}

@media (max-width: 768px) {
  .tabbed {
    margin: 0;
  }
}

.tabbed [type="radio"] {
  /* hiding the inputs */
  display: none;
}

.tabs {
  display: flex;
  justify-content: center;
  list-style: none;
  padding: 0;
  margin: 0;
  border-bottom: 1px solid var(--wp--preset--color--border);
}

.tab {
  margin: 0;
}

.tab > label {
  display: block;
  padding: 12px 15px;
  border: 1px solid transparent;
  border-bottom: 3px solid transparent;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s;
  color: var(--wp--preset--color--secondary);
}

.tab > label:hover {
  color: var(--wp--preset--color--primary);
}

.tab-content {
  display: none;
  color: var(--wp--preset--color--text);
}

/* Show the active tab content and style the active tab label */
.tabbed [type="radio"]:nth-of-type(1):checked ~ .tabs .tab:nth-of-type(1) label,
.tabbed
  [type="radio"]:nth-of-type(2):checked
  ~ .tabs
  .tab:nth-of-type(2)
  label {
  border-bottom: 3px solid var(--wp--preset--color--primary);
  color: var(--wp--preset--color--primary);
}

.tabbed [type="radio"]:nth-of-type(1):checked ~ .tab-content:nth-of-type(1),
.tabbed [type="radio"]:nth-of-type(2):checked ~ .tab-content:nth-of-type(2) {
  display: block;
}

.tab > label:hover {
  color: #333; /* Hover color */
}

.tab-content {
  display: none;
  color: #777;
}

/* Show the active tab content and style the active tab label */
.tabbed [type="radio"]:nth-of-type(1):checked ~ .tabs .tab:nth-of-type(1) label,
.tabbed
  [type="radio"]:nth-of-type(2):checked
  ~ .tabs
  .tab:nth-of-type(2)
  label {
  border-bottom: 3px solid #000; /* Active tab bottom border */
  color: #000; /* Active tab color */
}

.tabbed [type="radio"]:nth-of-type(1):checked ~ .tab-content:nth-of-type(1),
.tabbed [type="radio"]:nth-of-type(2):checked ~ .tab-content:nth-of-type(2) {
  display: block;
}

/* Trending Categories CSS */

.trending-product-categories-row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  justify-content: center;
  gap: 1rem;
}

.trending-subcategory {
  display: flex;
  flex-direction: column;
  text-align: center;
  overflow: hidden;
  transition: transform 0.3s;
  color: initial;
  max-width: 100%;
}

.trending-subcategory-image {
  width: 20rem;
  height: auto;
  border-radius: 0.5rem;
  margin: 0 auto;
  object-fit: cover;
  object-position: center;
  aspect-ratio: 1;
}
.trending-subcategory-image:hover {
  box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
}

.trending-subcategory-image.no-image {
  background-color: #fdba74;
}

.trending-subcategory-title {
  margin-top: 10px;
  text-align: left;
  font-size: 1rem;
  font-weight: 600;
  color: initial;
}

@media (max-width: 768px) {
  .trending-product-categories-row {
    grid-template-columns: repeat(2, 1fr);
    margin: 0 0.5rem;
    gap: 0.5rem;
  }
  .trending-subcategory {
    margin-top: 1rem;
  }
}

/* TOP SELLING CATEGORY HOME PAGE */

.top-selling-category-specified-categories {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  justify-content: center;
  gap: 0.5rem;
}

.top-selling-category-category {
  display: flex;
  flex-direction: column;
  text-align: center;
  align-items: center;
  overflow: hidden;
  max-width: 100%;
  height: 100%;
  color: initial;
  text-decoration: none;
  border-radius: 6px;
  box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  transition: transform 0.3s;
}

.top-selling-category-category:hover {
  box-shadow: 0 2px 4px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
}

.top-selling-category-category img {
  width: 20rem;
  height: auto;
  margin: 0 auto;
  object-fit: cover;
  object-position: center;
  aspect-ratio: 1;
}

.top-selling-category-category-no-image {
  background-color: var(--theme-palette-color-5);
}

.top-selling-category-name {
  margin: 0.75rem 0;
  text-align: left;
  font-size: 1rem;
  font-weight: 600;
  color: initial;
}

@media (max-width: 768px) {
  .top-selling-category-category {
    margin-top: 0.25rem;
  }
  .top-selling-category-specified-categories {
    grid-template-columns: repeat(2, 1fr);
    margin: 0 0.5rem;
    gap: 0.5rem;
  }
}

/* Hero CAROUSEL on Main Category Pages */
.hero_carousel_container {
  position: relative;
  width: 90%;
  margin: auto;
}

.hero_carousel_slider {
  display: flex;
  overflow: hidden;
  justify-content: space-between;
  gap: 0.5rem;
}

.hero_carousel_slide {
  width: 20rem;
  height: auto;
  transition: transform 0.5s ease-in-out;
}

.hero_carousel_img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
}

.hero_carousel_prev,
.hero_carousel_next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0, 0, 0, 0.5);
  color: white;
  border: none;
  padding: 1rem;
  cursor: pointer;
  z-index: 10;
}

.hero_carousel_prev {
  left: 0;
}

.hero_carousel_next {
  right: 0;
}

.hero_carousel_dots {
  text-align: center;
  margin-top: 1rem;
}

.hero_carousel_dot {
  height: 1rem;
  width: 1rem;
  margin: 0 0.5rem;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  cursor: pointer;
}

.hero_carousel_dot.active {
  background-color: #717171;
}

@media (max-width: 768px) {
  .hero_carousel_slide {
    min-width: 50%;
  }
}

@media (max-width: 480px) {
  .hero_carousel_slide {
    min-width: 100%;
  }
}

/* Delivery Pill under Price in Single Product Page CSS */

.shipment-info-pill-container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  flex-grow: 1;
  gap: 1rem;
  justify-content: space-around;
  padding-bottom: 1.5rem;
}
.shipment-info-pill {
  display: flex;
  flex-direction: row;
  flex-grow: 1;
  font-size: 1rem;
  align-items: center;
  justify-content: center;
  border-radius: 1rem;
  background-color: var(--theme-palette-color-5);
  padding: 0.25rem;
}
.shipment-info-pill-icon {
  margin-right: 0.5rem;
}

.shipment-info-pill-icon-size {
  height: 1rem;
  width: 1rem;
}
.shipment-info-pill-text {
  line-height: 0;
}

/* Overlay for Category Images */
.cat-image-gradient-overlay {
  position: relative;
}

.cat-image-gradient-overlay:before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 25%;
  background: linear-gradient(to top, #1c1917, transparent);
  pointer-events: none;
  z-index: 1;
}

.cat-image-mobile-view {
  min-height: 650px;
  @media (max-width: 768px) {
    min-height: 250px;
  }
}

.cat-image-mobile-text {
  font-size: 1rem;
  color: inherit;
  text-decoration: underline;
}

/* Removing Gaps in Mobile View */
@media (max-width: 768px) {
  .cat-image-mobile-text {
    font-size: 0.5rem !important;
  }

  .shop-now-heading-for-cat-pages {
    font-size: 0.75rem !important;
  }
}

/* CSS FOR MAIN CATEGORY PAGES  */

.sub-cat-page-carousel-container {
  width: 100%;
  position: relative;
  overflow: hidden;
}

/* Hide large screen div on small screens */
.sub-cat-page-carousel-large-screen {
  display: none;
}

.sub-cat-page-carousel-wrapper {
  display: flex;
  transition: transform 0.5s ease;
}

.sub-cat-page-carousel-item {
  min-width: 100%;
  position: relative;
  display: flex;
  align-items: flex-end;
  height: 400px;
  overflow: hidden;
  text-decoration: none;
  color: white;
}
.sub-cat-page-carousel-item-large {
  min-width: 48%;
  position: relative;
  display: flex;
  align-items: flex-end;
  height: 400px;
  overflow: hidden;
  text-decoration: none;
  color: white;
  min-height: 600px;
}

.sub-cat-page-carousel-item img,
.sub-cat-page-carousel-item-large img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 6px;
  overflow: hidden;
}

.sub-cat-page-carousel-item-text {
  font-size: 2.5rem;
  color: var(--theme-palette-color-6);
  padding-bottom: 0.5rem;
  text-align: center;
}
.sub-cat-page-carousel-item-text:hover {
  color: var(--theme-palette-color-6);
}

.sub-cat-page-banner-overlay {
  position: relative;
  width: 100%;
  height: 45%;
  background: linear-gradient(to top, #1c1917, transparent);
  padding: 1.25rem;
  padding-bottom: 1.75rem;
  box-sizing: border-box;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: end;
  border-radius: 6px;
}

.sub-cat-page-carousel-item-btn {
  padding: 0.25rem 0.5rem;
  width: 10rem;
  border: 2px solid var(--theme-palette-color-8);
  color: var(--theme-palette-color-8);
  text-decoration: none;
  border-radius: 6px;
  font-size: 1rem;
  font-weight: 600;
  text-align: center;
  align-items: center;
}

.sub-cat-page-carousel-nav-dots {
  text-align: center;
  margin-top: 10px;
}

.sub-cat-page-carousel-nav-dots .dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin: 0 5px;
  background-color: #ccc;
  border-radius: 50%;
  cursor: pointer;
}

.sub-cat-page-carousel-nav-dots .dot.active {
  background-color: #333;
}

/* Show large screen div on larger screens */
@media (min-width: 768px) {
  .sub-cat-page-carousel-large-screen {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
  }

  .sub-cat-page-carousel-small-screen {
    display: none;
  }
}

/* EXPLORE CASUAL STYLE */

/* Ensure the container behaves as a grid and wraps items */
.explore-casual-styles-row {
  display: grid !important;
  grid-template-columns: 40% 30% 30% !important;
  gap: 10px !important; /* Adjust gap as needed */
}

/* Main item should take 40% width on larger screens */
.explore-casual-styles-row .explore-casual-styles-main-item {
  grid-column: span 1 !important;
}

/* Secondary items should take 30% width each on larger screens */
.explore-casual-styles-row .explore-casual-styles-secondary-item {
  grid-column: span 1 !important;
}

/* Media Query for Mobile View */
@media (max-width: 768px) {
  .explore-casual-styles-row {
    grid-template-columns: 100% 50% 50% !important;
    grid-template-rows: auto auto !important; /* Explicitly define rows */
  }

  .explore-casual-styles-row .explore-casual-styles-main-item {
    grid-column: 1 / span 3 !important;
    grid-row: 1 !important; /* Place in the first row */
  }

  .explore-casual-styles-row
    .explore-casual-styles-secondary-item:nth-child(2) {
    grid-column: 1 / span 1 !important;
    grid-row: 2 !important; /* Place in the second row */
  }

  .explore-casual-styles-row
    .explore-casual-styles-secondary-item:nth-child(3) {
    grid-column: 2 / span 1 !important;
    grid-row: 2 !important; /* Place in the second row */
  }
}

/* BUDGET CAROUSEL CSS */
.budget-carousel-container {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden; /* Hide overflow here */
}

.budget-item-list {
  display: flex;
  gap: 2rem;
  scroll-behavior: smooth;
  transition: all 0.25s ease-in;
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
  overflow-x: auto; /* Only allow horizontal scrolling */
  scroll-snap-type: x mandatory;
  flex: 1;
}

/* Hide scrollbar for Chrome, Safari and Opera */
.budget-item-list::-webkit-scrollbar {
  display: none;
}

.budget-item {
  scroll-snap-align: center;
  min-width: 120px;
  flex-shrink: 0;
}

.budget-carousel-image img {
  max-width: 100%;
  height: auto;
}

.budget-carousel-title {
  font-size: 1em;
  color: var(--theme-palette-color-7);
  margin-top: 10px;
}

.budget-carousel-price {
  color: var(--theme-palette-color-7);
  font-size: 1.2em;
  margin-top: 5px;
  font-weight: 700;
}

@media (max-width: 768px) {
  .budget-carousel-title {
    font-size: 0.75rem;
  }

  .budget-carousel-price {
    font-size: 0.75em;
    font-weight: 600;
  }

  .budget-carousel-container {
    padding: 0 0.5rem;
  }

  .budget-item-list {
    justify-content: flex-start;
  }

  .budget-item {
    min-width: 120px;
  }
}

@media (min-width: 1700px) {
  .budget-item-list {
    justify-content: center;
  }
}

/* Recently Viewed Products Container */

.recently-viewed-products-container {
  padding: 1rem;
  & .woocommerce {
    display: flex;
    flex-direction: row;
    padding: 0;
  }
  & .products {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: thin;
  }

  & .product {
    flex-shrink: 0;
    /* height: 12rem; */
    padding: 0.5rem 0;
    & img {
      height: 12rem;
    }
  }
}

.recently-viewed-products-heading {
  margin-top: 2rem;
  padding: 1rem;
  padding-bottom: 0rem;
  color: var(--theme-palette-color-4);
  font-size: 1.5rem;
  font-weight: 500;
}

@media (max-width: 768px) {
  .recently-viewed-products-container {
    padding: 0.5rem;
  }

  .recently-viewed-products-heading {
    padding: 0.5rem;
  }
}

.upselling-products-container {
  padding: 1rem;
  & .woocommerce {
    display: flex;
    flex-direction: row;
    padding: 0;
  }
  & .products {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: thin;
  }

  & .product {
    flex-shrink: 0;
    padding: 0.5rem 0;
  }
}

.upselling-products-heading {
  padding: 1rem;
  color: var(--theme-palette-color-4);
  font-size: 1.5rem;
  font-weight: 500;
}

/* Shipping Accordion */
.shipping-accordion {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  /* padding: 0.5rem 0; */
  width: var(--theme-container-width);
  cursor: pointer;
  transition: 0.4s;
  text-align: left;
  font-size: 1rem;
  font-weight: 500;
  color: var(--theme-palette-color-4);
  border-radius: 1px solid var(--theme-palette-color-2);
  background-color: transparent;
}
.shipping-panel {
  padding: 0.5rem 0;
  display: none;
  overflow: hidden;
}

.additional_info_after_cart {
  font-size: 0.75;
  padding-bottom: 1rem;
}

/* CSS For Filter  */

.wpfFilterButton .wpfButton {
  width: 100%;
  padding: 1rem;
}

/* PRODUCT CATALOGUE CSS */

.button.buy-on-whatsapp {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  background-color: #1da851;
  color: var(--theme-palette-color-8);
  border: none;
  padding: 0.75rem 1.25rem;
  text-transform: uppercase;
  margin-top: 10px;
}

.button.buy-on-whatsapp-sm {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  color: var(--theme-palette-color-8);
  background-color: #1da851;
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
}

.button.buy-on-whatsapp-sm:hover {
  background-color: #25d366;
}

/* Dark Color: #1da851 */
.button.buy-on-whatsapp:hover {
  background-color: #25d366;
}

.whatsapp-icon {
  height: 1.25rem;
  width: 1.25rem;
  margin-left: 2px;
  color: var(--theme-palette-color-8);
}

.cart-icon {
  height: 1.5rem;
  width: 1.5rem;
  margin-left: 0.5rem;
  color: var(--theme-palette-color-8);
}

/* Hide Add to Cart Button */
.single-product .quantity,
.single-product .single_add_to_cart_button,
.products .add_to_cart_button {
  display: none !important;
}

@media (max-width: 768px) {
  .products {
    margin: 0 0.5rem;
  }

  .button .buy-on-whatsapp-sm {
    font-size: 0.75rem;
    padding: 0.25rem 0.5rem;
  }

  .entry-header {
    margin: 0 0.5rem;
  }

  .summary {
    margin: 0 0.5rem;
  }
}

/* CSS FOR CUSTOM VARIATION SWATCHES IN SINGLE PRODCUT PAGE */

/* .variations {
  & .value {
    display: flex;
    flex-direction: column;
  }
} */

.variation-radios {
  display: flex;
  flex-direction: row;
  gap: 1rem;
  justify-content: start;
}

.clear-variation {
  display: block;
  background-color: transparent;
  font-size: 0.75rem;
  text-decoration: underline;
  cursor: pointer;
}

.clear-variation:hover {
  font-weight: 500;
}

.variation-radio {
  appearance: none;
  display: none;
}

.variation-label {
  font-size: 1em;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: inherit;
  text-align: center;
  border-radius: 6px;
  overflow: hidden;
  transition: linear 0.3s;
  color: var(--theme-palette-color-4);
  padding: 0.3em 0.6em;
  border: 1px solid var(--theme-palette-color-5);
  cursor: pointer;
}
.variation-label:hover {
  background-color: var(--theme-palette-color-5);
}

.variation-radio:checked + label {
  background-color: var(--theme-palette-color-2);
  color: var(--theme-palette-color-7);
  transition: 0.3s;
  border-color: var(--theme-palette-color-2);
}

a.reset_variations {
  display: none !important;
}

/* Sidebar CSS */

.custom-sidebar-container {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -1rem;
}

.custom-sidebar-row {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}

.custom-sidebar-col-3 {
  flex: 0 0 25%;
  max-width: 25%;
  padding: 0 1rem;
}

.custom-sidebar-col-9 {
  flex: 0 0 75%;
  max-width: 75%;
  padding: 0 1rem;
}

.widget-area {
  background: #f9f9f9;
  padding: 1.25rem;
  margin-bottom: 1.25rem;
}

.widget {
  margin-bottom: 1.25rem;
}

.widget-title {
  font-size: 1rem;
  margin-bottom: 0.5rem;
}

@media (max-width: 768px) {
  .custom-sidebar-col-3 {
    display: none;
    flex: 0 0 0;
  }

  .custom-sidebar-col-9 {
    flex: 0 0 100%;
    max-width: 100%;
  }
}

/* MOBILE WIDGET */
@media (max-width: 768px) {
  #woocommerce-ordering-desktop {
    display: none;
  }

  #mobile-only-widget-area {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 9999;
    background-color: white;
    box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1);
    border-top: 1px solid #ccc;
    overflow: hidden;
  }

  #mobile-only-widget-area .mobile-widget {
    margin: 10px;
  }

  .mobile-widget .woocommerce-ordering {
    display: none !important;
  }

  .mobile-widget .woocommerce-ordering.show-dropdown {
    display: block !important;
  }
}

.filter-btn-row {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
  gap: 0.5rem;
}

.filter-btn {
  border: none;
  background: none;
  cursor: pointer;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 0.25rem;
  font-size: 1.25rem;
}

.filter-icon {
  height: 1rem;
  width: 1rem;
}

.custom-filter-wrapper {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  z-index: 9999;
  overflow-y: auto;
}

.custom-filter-container {
  position: relative;
  max-width: 500px;
  background: white;
  padding: 20px;
  top: auto;
  margin: 0px;
}

.custom-filter-close-btn-row {
  display: flex;
  flex-direction: row;
  justify-content: end;
}

.custom-filter-close-btn {
  border: none;
  background-color: var(--theme-palette-color-6);
  padding: 0.5rem;
  border-radius: 0.25rem;
  cursor: pointer;
  color: #000;
}

/* Product Catalogue Filter and Options CSS */
.subcat-name {
  font-size: 2.5rem;
  font-weight: 600;
  padding-bottom: 0.25rem;
}

.subcategory-desc {
  padding-bottom: 0.5rem;
}
@media (max-width: 768px) {
  .subcat-name,
  .subcategory-desc {
    margin: 0 0.5rem;
  }

  .woocommerce-result-count-and-ordering {
    margin: 0.75rem 0.5rem;
  }
  .woocommerce-product-result-count {
    margin-left: 0.5rem;
  }
  .woocommerce-catalog-options {
    margin-right: 0.5rem;
  }
}

.woocommerce-result-count-and-ordering {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 0.75rem;
  margin: 1.25rem 0;
  border-bottom: 1px solid #e7e5e4;
}

.woocommerce-catalog-options {
  display: flex;
  flex-direction: row;
  justify-content: end;
  gap: 1rem;
  font-weight: 500;
}

.woocommerce-catalog-ordering {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
}

.woocommerce-product-result-count {
  font-size: 1rem;
  font-weight: 500;
}

.woocommerce-catalog-ordering,
.woocommerce-results-per-page {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  font-weight: 500;
}

.woocommerce-results-per-page select {
  border-radius: 3px;
  border: 1px solid #57534e;
  font-size: 1.25rem;
  font-weight: 600;
}

/* CSS FOR PRODUCT SLIDERS */
.product-images-wrapper {
  position: relative;
}

.product-gallery-slider {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: none;
  z-index: 10;
}

.product-gallery-slider img {
  width: 100%;
  height: auto;
}

/* PRODUCT FILTER WIDGET CSS */
.filter-attribute-option-container {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  height: 10rem;
  overflow-y: auto;
  scrollbar-width: thin;
}

.product-filter-color-label {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.25rem;
}

.filter-attribute-title {
  font-size: 1rem;
  font-weight: 500;
  margin-top: 0.5rem;
  color: var(--theme-palette-color-4);
  text-transform: uppercase;
}

.filter-attribute-name {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.25rem;
}

.attribute-color-display {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
}

.wpfFilterTaxNameWrapper .wpfFilterTaxNameWrapper {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: start;
}

/* IMAGE SLIDER */
.product-images-slider-wrapper {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  max-height: 30rem; /* This is fine if you want to limit the maximum height */
  overflow: hidden;
  border-radius: 3px;
  cursor: pointer;
}

.product-gallery-slider {
  width: 100%;
  height: 100%;
  position: relative;
  cursor: pointer;
  overflow: hidden; /* Ensure overflow is hidden for smooth sliding */
}

.swiper-wrapper {
  display: flex;
}

.swiper-slide {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 100% !important;
  height: 100%;
  cursor: pointer;
  opacity: 0; /* Start with slides invisible */
  transition: opacity 0.5s ease; /* Smooth transition for opacity */
}

.swiper-slide-active {
  opacity: 1; /* Make active slide visible */
}

.product-image-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.aspect-ratio-container {
  position: relative;
  width: 100%;
  padding-top: 100%; /* 1:1 aspect ratio */
  overflow: hidden;
}

.aspect-ratio-container img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.swiper-pagination-bullet-active {
  background-color: var(--theme-palette-color-2) !important;
}

/* Not sure if it can be implemented with using !important in the free version of MetaSlider */
.flexslider .slides img {
  max-height: 34rem !important;
  object-fit: cover;
  object-position: center;
  overflow: hidden;
}

/* Stop subscribe to newsletter input box from going out of window */
.wpcf7 input[type="email"] {
  display: block;
  width: 90%;
}

/* Fix as dropdown was way too larger */
.woocommerce-results-per-page .woocommerce-ordering select {
  font-size: 0.75rem;
}