/**
 * Shop & Product Archive Styles
 * Loaded on: is_shop(), is_product_category(), is_product_tag()
 *
 * @package MCJ Child Theme
 * @version 1.0.0
 */

/* Shop Product Category Nav */
#menu-product-categories {
     gap: 3em;
}

#menu-product-categories li li,
.pcat-nav li li li,
.pcat-nav li li li a {
     width: 100%;
     font-weight: 600;
}

.pcat-nav .et_pb_fullwidth_menu .et_pb_row {
     align-content: center;
}

#menu-product-categories ul {
     font-weight: 600;
}

#menu-product-categories li li {
     padding-bottom: 0 !important;
     color: var(--darkgreen);
}

#menu-product-categories li li a {
     border-bottom: 1px solid transparent;
     width: fit-content !important;
     padding: 5px !important;
}

#menu-product-categories li li a:hover {
     background-color: #fff !important;
     border-bottom: 1px solid var(--darkgreen);
}

@media (max-width: 991px) {
     .pcat-nav .et_pb_fullwidth_menu .et_pb_row,
     .woocommerce.et-db #et-boc .et-l .et_pb_fullwidth_menu .et_pb_row {
          min-height: 50px !important;
     }
}

/* ==========================================================================
   Responsive Product Grid - Tablet & Mobile (468px - 991px)
   Override Divi's default float-based responsive layout
   Covers: Main Shop, Category pages, Brand pages, Shortcodes
   ========================================================================== */

/* Override Divi's responsive product grid (matches Divi's specificity) */
@media (max-width: 980px) {
     /* Override Divi's float-based layout with CSS Grid */
     /* Divi module grids */
     .et-db #et-boc .et-l .et_pb_shop ul.products,
     .et-db #et-boc .et-l ul.products.columns-3,
     /* Main shop page (native WooCommerce) */
     .post-type-archive-product ul.products,
     .woocommerce-shop ul.products,
     body.woocommerce ul.products,
     /* Category/archive pages */
     .tax-product_cat ul.products,
     .tax-product_brand ul.products,
     /* Generic WooCommerce */
     .woocommerce ul.products,
     .woocommerce-page ul.products,
     /* Shortcode-based grids */
     .woocommerce[class*="columns-"] ul.products,
     ul.products.columns-3,
     ul.products.columns-4 {
          display: grid !important;
          gap: 15px !important;
     }

     /* Override Divi's width: 48% and margin-right: 4% */
     /* Divi module products */
     .et-db #et-boc .et-l .et_pb_shop ul.products.columns-1 li.product,
     .et-db #et-boc .et-l .et_pb_shop ul.products.columns-2 li.product,
     .et-db #et-boc .et-l .et_pb_shop ul.products.columns-3 li.product,
     .et-db #et-boc .et-l .et_pb_shop ul.products.columns-4 li.product,
     .et-db #et-boc .et-l .et_pb_shop ul.products.columns-5 li.product,
     .et-db #et-boc .et-l .et_pb_shop ul.products.columns-6 li.product,
     /* Main shop page products */
     .post-type-archive-product ul.products li.product,
     .woocommerce-shop ul.products li.product,
     body.woocommerce ul.products li.product,
     /* Category/archive products */
     .tax-product_cat ul.products li.product,
     .tax-product_brand ul.products li.product,
     /* Generic WooCommerce products */
     .woocommerce ul.products li.product,
     .woocommerce-page ul.products li.product,
     /* Shortcode products */
     ul.products.columns-3 li.product,
     ul.products.columns-4 li.product {
          width: 100% !important;
          margin: 0 !important;
          margin-right: 0 !important;
          padding: 0 !important;
          float: none !important;
          clear: none !important;
     }
}

/* Tablet: 769px - 980px = 3 columns */
@media (max-width: 980px) and (min-width: 769px) {
     .et-db #et-boc .et-l .et_pb_shop ul.products,
     .et-db #et-boc .et-l ul.products.columns-3,
     .post-type-archive-product ul.products,
     .woocommerce-shop ul.products,
     body.woocommerce ul.products,
     .tax-product_cat ul.products,
     .tax-product_brand ul.products,
     .woocommerce ul.products,
     .woocommerce-page ul.products,
     ul.products.columns-3,
     ul.products.columns-4 {
          grid-template-columns: repeat(3, 1fr) !important;
     }
}

/* Small Tablet / Large Mobile: 468px - 768px = 2 columns */
@media (max-width: 768px) and (min-width: 468px) {
     .et-db #et-boc .et-l .et_pb_shop ul.products,
     .et-db #et-boc .et-l ul.products.columns-3,
     .post-type-archive-product ul.products,
     .woocommerce-shop ul.products,
     body.woocommerce ul.products,
     .tax-product_cat ul.products,
     .tax-product_brand ul.products,
     .woocommerce ul.products,
     .woocommerce-page ul.products,
     ul.products.columns-3,
     ul.products.columns-4 {
          grid-template-columns: repeat(2, 1fr) !important;
     }

     /* Adjust product title size for smaller screens */
     .woocommerce ul.products li.product .woocommerce-loop-product__title,
     .woocommerce ul.products li.product h3 {
          font-size: 12px !important;
     }
}

/* Mobile: below 468px = 2 columns, tighter spacing */
@media (max-width: 467px) {
     .et-db #et-boc .et-l .et_pb_shop ul.products,
     .et-db #et-boc .et-l ul.products.columns-3,
     .post-type-archive-product ul.products,
     .woocommerce-shop ul.products,
     body.woocommerce ul.products,
     .tax-product_cat ul.products,
     .tax-product_brand ul.products,
     .woocommerce ul.products,
     .woocommerce-page ul.products,
     ul.products.columns-3,
     ul.products.columns-4 {
          grid-template-columns: repeat(2, 1fr) !important;
          gap: 10px !important;
     }

     .woocommerce ul.products li.product .woocommerce-loop-product__title,
     .woocommerce ul.products li.product h3 {
          font-size: 11px !important;
     }
}

/* ==========================================================================
   Override WooCommerce/Divi :nth-child width rules
   These selectors override the problematic width: 45.25% and margin rules
   EXCLUDES: .related.products (single product page related items)
   ========================================================================== */
@media (max-width: 980px) {
     /* Override :nth-child(n) specificity - exclude related products */
     .woocommerce ul.products:not(.related ul):not(section.related ul) li.product:nth-child(n),
     .woocommerce-page ul.products:not(.related ul):not(section.related ul) li.product:nth-child(n),
     .post-type-archive-product ul.products li.product:nth-child(n),
     body.woocommerce:not(.single-product) ul.products li.product:nth-child(n),
     .et-db #et-boc .et-l .et_pb_shop ul.products li.product:nth-child(n) {
          width: 100% !important;
          margin: 0 !important;
          margin-right: 0 !important;
          clear: none !important;
          float: none !important;
     }
}

@media (max-width: 767px) {
     /* Specifically override the 767px breakpoint rule - exclude related products */
     .woocommerce ul.products:not(.related ul):not(section.related ul) li.product:nth-child(n),
     .woocommerce-page ul.products:not(.related ul):not(section.related ul) li.product:nth-child(n),
     .post-type-archive-product ul.products li.product:nth-child(n),
     body.woocommerce:not(.single-product) ul.products li.product:nth-child(n) {
          width: 100% !important;
          margin: 0 !important;
          margin-right: 0 !important;
          clear: none !important;
          float: none !important;
     }
}

/* Ensure images fill grid cells properly at all breakpoints */
@media (max-width: 980px) {
     .woocommerce ul.products li.product a img,
     .woocommerce-page ul.products li.product a img,
     .post-type-archive-product ul.products li.product a img,
     body.woocommerce ul.products li.product a img {
          width: 100% !important;
          height: auto !important;
          max-width: 100% !important;
          display: block !important;
     }

     /* Reset any WooCommerce float-based layouts */
     .woocommerce ul.products li.product,
     .woocommerce-page ul.products li.product,
     .post-type-archive-product ul.products li.product,
     body.woocommerce ul.products li.product {
          display: block !important;
     }

     /* Ensure consistent product card alignment */
     .woocommerce ul.products li.product .woocommerce-loop-product__link,
     .woocommerce ul.products li.product > a,
     .post-type-archive-product ul.products li.product > a,
     body.woocommerce ul.products li.product > a {
          display: block !important;
     }
}

/* Shop Filters */
.yith-wcan-filters {
     background: inherit;
}

.woocommerce .woocommerce-ordering select {
     background: #fff;
     border: 1px solid #ccc;
     color: #000 !important;
}

/* Product Grid - Consistent across Shop, Category, Brand pages */
.woocommerce ul.products,
ul.products.columns-3 {
     display: grid !important;
     grid-template-columns: repeat(3, 1fr) !important;
     gap: 20px !important;
     list-style: none !important;
     padding: 0 !important;
     margin: 0 0 30px 0 !important;
}

.woocommerce ul.products::before,
.woocommerce ul.products::after,
ul.products.columns-3::before,
ul.products.columns-3::after {
     display: none !important;
     content: none !important;
}

.woocommerce ul.products li.product,
ul.products.columns-3 .product {
     margin: 0 !important;
     width: 100% !important;
     padding: 0 !important;
     float: none !important;
}

.woocommerce ul.products li.product a img,
.woocommerce-page ul.products li.product a img {
     box-shadow: 0px 0px 5px 2px #f1f1f1 !important;
}

.et_pb_shop_grid .woocommerce ul.products li.product {
     margin-bottom: 2.5%;
}

/* Pagination */
.woocommerce nav.woocommerce-pagination ul.page-numbers,
.woocommerce-page nav.woocommerce-pagination ul.page-numbers {
     display: flex;
     flex-wrap: wrap;
     justify-content: center;
     gap: 8px;
     border: none !important;
     background: transparent !important;
}

.woocommerce nav.woocommerce-pagination ul li,
.woocommerce-page nav.woocommerce-pagination ul li {
     border: 1px solid var(--green) !important;
     border-radius: 5px !important;
     overflow: hidden;
     margin: 0 !important;
}

.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span,
.woocommerce-page nav.woocommerce-pagination ul li a,
.woocommerce-page nav.woocommerce-pagination ul li span {
     display: block;
     padding: 8px 14px;
     background: white;
     color: var(--darkgreen);
     text-decoration: none;
}

/* Pagination hover/focus/active states */
.woocommerce nav.woocommerce-pagination ul li a:hover,
.woocommerce nav.woocommerce-pagination ul li a:focus,
.woocommerce nav.woocommerce-pagination ul li a:active,
.woocommerce-page nav.woocommerce-pagination ul li a:hover,
.woocommerce-page nav.woocommerce-pagination ul li a:focus,
.woocommerce-page nav.woocommerce-pagination ul li a:active {
     background: var(--gold) !important;
     color: var(--darkgreen) !important;
}

/* Current page indicator */
.woocommerce nav.woocommerce-pagination ul li span.current,
.woocommerce-page nav.woocommerce-pagination ul li span.current {
     background: var(--gold) !important;
     color: var(--darkgreen) !important;
}

/* Breadcrumb */
.woocommerce .woocommerce-breadcrumb {
     margin: 1em auto 2em auto;
     text-align: center;
}

.woocommerce .woocommerce-breadcrumb,
.woocommerce .woocommerce-breadcrumb a {
     color: var(--darkgreen);
}

.woocommerce .woocommerce-breadcrumb a:hover {
     color: var(--darkgreen);
     border-bottom: 1px solid var(--gold);
}

/* Product Titles & Prices */
.woocommerce ul.products li.product img,
.woocommerce-page ul.products li.product img,
.prods-grid-view .product-style img {
     margin-bottom: 15px !important;
}

.woocommerce ul.products li.product .woocommerce-loop-category__title,
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product h3 {
     font-family: var(--bodyFont);
     font-size: 14px !important;
     text-transform: uppercase;
     padding: 0;
     font-weight: 600;
}

.woocommerce ul.products li.product .price,
.woocommerce-page ul.products li.product .price,
.woocommerce div.product p.price {
     color: var(--darkgreen) !important;
}

/* Featured Products Section */
.featured-products .et_pb_column_4_4 .et_pb_shop_grid .woocommerce ul.products li.product {
     width: 24%;
     margin-right: 1.2%;
}

/* NEW Shop Sidebar with Filters */
.shop-sidebar .param-box {
     margin-top: 10px !important;
}

.shop-sidebar .radio-wrap .radio-item {
     border-color: var(--darkgreen) !important;
}

.shop-sidebar .radio-wrap .taxonomy-item-1:hover {
     background: var(--darkgreen) !important;
     border-color: var(--darkgreen) !important;
}

.sidebar-row .reset:hover,
.sidebar-row .reset:focus,
.sidebar-row .reset:active {
     color: var(--darkgreen) !important;
}

.shop-sidebar .checkbox-item.on_sale.checkbox-item-1:last-child {
     display: none !important;
}

/* Product Grid View Styles (Custom Filter Plugin) */
.prods-grid-view {
     display: grid !important;
     grid-template-columns: repeat(3, 1fr) !important;
     gap: 20px !important;
}

.prods-grid-view .product-style {
     border: 3px solid var(--lightgreen) !important;
     width: 100% !important;
     margin: 0 !important;
}

.prods-grid-view .product-style .product-name span {
     text-transform: uppercase !important;
     letter-spacing: 1.5px !important;
}

.prods-grid-view .product-style .product-price span {
     color: var(--darkgreen) !important;
     font-size: 14px !important;
     font-weight: normal !important;
}

.prods-grid-view .product-style,
.grid-view-1 img {
     border-radius: 0 !important;
}

/* Responsive: Custom Filter Plugin Grid */
@media (max-width: 980px) and (min-width: 769px) {
     .prods-grid-view {
          grid-template-columns: repeat(3, 1fr) !important;
          gap: 15px !important;
     }

     .prods-grid-view .product-style {
          width: 100% !important;
          margin: 0 !important;
     }
}

@media (max-width: 768px) and (min-width: 468px) {
     .prods-grid-view {
          grid-template-columns: repeat(2, 1fr) !important;
          gap: 15px !important;
     }

     .prods-grid-view .product-style {
          width: 100% !important;
          margin: 0 !important;
     }

     .prods-grid-view .product-style .product-name span {
          font-size: 12px !important;
     }
}

@media (max-width: 467px) {
     .prods-grid-view {
          grid-template-columns: repeat(2, 1fr) !important;
          gap: 10px !important;
     }

     .prods-grid-view .product-style {
          width: 100% !important;
          margin: 0 !important;
     }

     .prods-grid-view .product-style .product-name span {
          font-size: 11px !important;
     }
}

.woocommerce ul.products li.product .onsale {
     background: var(--green) !important;
     color: #000 !important;
}

.filter-heading {
     color: #fff !important;
     margin-bottom: 0 !important;
}

/* Shop CTA Section - Center content in circular element */
.subscribe-row.cta .form-circle,
.shop-cta .form-circle,
.woocommerce-page .form-circle {
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     text-align: center;
}

.subscribe-row.cta .form-circle h2,
.subscribe-row.cta .form-circle h3,
.subscribe-row.cta .form-circle p,
.subscribe-row.cta .form-circle .et_pb_text_inner {
     text-align: center;
     width: 100%;
}

/* Responsive Shop */
@media (max-width: 980px) {
     .woocommerce.single-product #main-content .container {
          padding-top: 20px;
     }
}