/*
Theme Name: SHO Theme
Description: A Custom Theme for SHO that is a Child Theme of Furnique (WooCommerce) theme
Author: John Madrak
Template: furnique
Version: 1.0.0
*/

/* Fix Furnique Header Icons */
.header-v1 {
  img, a::before, span::before {
    filter: none !important;
  }
}

/* Style-tweaks */
.wc-block-product-filter-checkbox-list__show-more {
  margin-top: 10px;
}

#searchOpen {
  width: 100%;
}

#searchOpen.flex {
  transform: translateX(-100%);
}

#searchOpen .dgwt-wcas-search-wrapp {
  max-width: none;
  width: 100%;
}

.single_add_to_cart_button {
  background-color: color-mix(in srgb, var(--wp--preset--color--contrast) 90%, transparent);
  color: #fff;
}

.single_add_to_cart_button:hover {
  background-color: #fff;
  color: #000;
}

/* Hide Sections */
.woocommerce-tabs #tab-description {
  display: none !important;
}

th:has(label[for="pa_finish"]) {
  display: none !important;
}

.woocommerce-product-attributes-item--attribute_pa_fabrics {
  display: none;
}

.woo-variation-items-wrapper li[data-attribute_name="attribute_pa_finish"][data-wvstooltip]::before {
  content: none;
}

.woo-variation-items-wrapper li[data-attribute_name="attribute_pa_finish"][data-wvstooltip]::after {
  content: none;
}

/* WooCommerce Product Gallery: Thumbnails on the left */
.woocommerce-product-gallery {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
}

.woocommerce-product-gallery .flex-control-nav.flex-control-thumbs {
  order: 0;
  display: flex;
  flex-direction: column;
  margin: 0 !important;
  padding-right: 10px !important;
  padding-bottom: 10px !important;
  width: 100px; /* Adjust as needed */
  min-width: 80px;
  max-width: 120px;
  height: auto;
}

.woocommerce-product-gallery .flex-control-nav.flex-control-thumbs li {
  margin: 0 0 12px 0;
  padding: 0;
  list-style: none;
}

.woocommerce-product-gallery .flex-control-nav.flex-control-thumbs img {
  width: 100%;
  height: auto;
  display: block;
  cursor: pointer;
  transition: border 0.2s;
  padding-right: 12px;
}

.woocommerce-product-gallery .flex-viewport {
  order: 1;
  flex: 1 1 0%;
  width: auto !important;
  height: auto !important;
}

@media (max-width: 768px) {
  .woocommerce-product-gallery {
    flex-direction: column;
  }

  .woocommerce-product-gallery .flex-control-nav.flex-control-thumbs {
    flex-direction: row;
    width: 100%;
    max-width: none;
    margin: 16px 0 0 0;
  }
  .woocommerce-product-gallery .flex-control-nav.flex-control-thumbs li {
    margin: 0 12px 0 0;
  }
}