/*
Theme Name: Salient Child Theme
Description: This is a custom child theme for Salient
Theme URI:   https://themeforest.net/item/salient-responsive-multipurpose-theme/4363266
Author: ThemeNectar
Author URI:  https://themeforest.net/user/themenectar
Template: salient
Version: 1.0
*/


body.archive.tax-product_cat .ocm-effect-wrap {
    background: #242636 !important;
}

body.archive.tax-product_cat .ocm-effect-wrap h2.cat-title {
    margin-top: 150px;
    color: white;
    font-weight: 600;
    padding-left: 50px;
}


/* 2) Container: flex so items flow in rows of three */
ul.woocommerce-subcategories-list {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  list-style: none !important;
  margin: 0;
  padding: 0;
  margin-top: 50px;
  padding-left: 50px;
  padding-right: 50px;
  margin-bottom: 150px;
}

/* Sometimes li inherits markers—reset it here too */
.woocommerce-subcategories-list li,
.woocommerce-subcategories-list .subcategory-item {
  list-style: none !important;
}

/* 2) Dark page background */
body.woocommerce .site-main,
body.woocommerce-page .site-main {
  background-color: #2c2c2c;
  padding: 2rem;
}

/* 3) Each block: white card with shadow, rounded corners */
.subcategory-item {
  background-color: #ffffff;
  border-radius: 8px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s ease;
  flex: 0 0 calc(33.333% - 1rem);
  max-width: calc(33.333% - 1rem);
}

/* 4) Lift on hover */
.subcategory-item:hover {
  transform: translateY(-4px);
}

/* 5) Anchor fills entire block, with top padding for SVG */
.subcategory-item a {
  display: block;
  vertical-align: middle;
  position: relative;
  padding: 2rem 1rem;
  color: #333333;
  text-decoration: none;
}

/* 6) Insert the same SVG icon at top of each block */
.subcategory-item a::before {
  content: '';
  display: inline-block;
  width: 40px;
  height: 40px;
  margin: 0 auto;
      margin-left: 15px;
  vertical-align: middle;
  background-repeat: no-repeat;
  background-size: contain;
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'><circle cx='32' cy='32' r='30' stroke='%23b52126' stroke-width='4' fill='none'/><path d='M32 16 L32 48 M16 32 L48 32' stroke='%23b52126' stroke-width='4' stroke-linecap='round'/></svg>");
  
}

/* 7) If there’s a category thumbnail, limit its size and center */
.subcategory-item img {
  display: block;
  max-width: 80px;
  height: auto;
  margin: 0 auto 1rem;
}

/* 8) Category title styling */
.subcategory-item h3 {
  display: inline-block;
  margin: 0;
  font-size: 15px;
  line-height: 1.2;
  padding-left: 13px;
  vertical-align: middle;
}

/* 9) Responsive: 2 columns under 992px */
@media (max-width: 991px) {
  .subcategory-item {
    flex: 0 0 calc(50% - 1rem);
    max-width: calc(50% - 1rem);
  }
}
/* 10) Responsive: 1 column under 768px */
@media (max-width: 767px) {
  .subcategory-item {
    flex: 0 0 100%;
    max-width: 100%;
  }
}