/**
 * File: woo-product-grid.css
 * Purpose: Layout and style rules for WooCommerce product archive & related product grids
 * Usage: Controls columns, responsive behavior, product image hovers, orderby dropdowns, and price/title presentation
 * Dependencies: WooCommerce + Divi Shop Modules and Related Products + custom CSS variables
 *
 * Notes:
 * - Includes full column behavior for desktop, tablet, and mobile
 * - Handles `.orderby` and `.dwe_sorting_orderby` dropdown overrides
 * - Product image and text hover styling uses theme variables
 * - Divi's excessive `.columns-X` permutations are explicitly handled
 *
 * Key Class Targets:
 * - `.woocommerce ul.products` — sets up flex layout
 * - `.et_shop_image` — controls product image border transitions
 * - `.woocommerce-loop-product__title`, `.woocommerce-Price-amount` — font sizes and hover states
 * - `.woocommerce .orderby`, `.dwe_sorting_orderby` — dropdown UI
 * - `.et_pb_shop ul.products.columns-* li.product` — grid item sizing + responsive adjustments
 *
 * TODO:
 * - If gallery or single-product hover states grow complex, consider separating image logic
 * - If sort dropdowns are reused in other places, consider splitting into `woo-forms.css`
 */



/* -------------------------- */
/* ---- Scoped Variables ---- */
/* -------------------------- */

.woocommerce {
/* ------ Not in use in the current site as far as I can see. Monitor & possibly remove --------- */
--general-product-image-border-color: transparent; /* transparent */ 
--general-product-image-hover-border-color: #e4c795; /* gold */ 
--woo-dropdown-border-color: var(--tan-medium);
--woo-dropdown-bg-color: var(--tan-lighter);
--woo-dropdown-font-color: var(--brown-dark);
}

/* -------------------------- */



/* --- Product Title and Price Presentation --- */

.product .woocommerce-loop-product__title {
  font-size: 1em !important;
  transition: all 500ms ease;
}

.product .woocommerce-Price-amount {
  font-size: 1em !important;
  transition: all 500ms ease;
}

li.product a:hover .woocommerce-loop-product__title,
li.product a:hover .woocommerce-Price-amount {
  font-weight: 700 !important;
}

@media all and (min-width: 981px) {
  .et-db #et-boc .et-l .et_pb_wc_related_products ul.products.columns-6 li.product .woocommerce-loop-product__title,
  .et-db #et-boc .et-l .et_pb_wc_related_products ul.products.columns-6 li.product .woocommerce-Price-amount {
    font-size: 0.9em !important;
  }
}

/*------------*/

.woocommerce ul.products {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

.woocommerce-page ul.products li.product a img, .woocommerce ul.products li.product a img{
    margin: 0!important;
    transition: all 500ms ease-in-out;
}

.woocommerce-page ul.products li.product a img:hover, 
.woocommerce ul.products li.product a img:hover{
    transition: all 500ms ease-in-out;
}

.et_shop_image{
    border: 2px solid var(--general-product-image-border-color)!important;
    border-radius: 20px;
    transition: all 500ms ease-in-out;
}

.et_shop_image:hover{
    border: 2px solid var(--general-product-image-hover-border-color)!important;
    transition: all 500ms ease-in-out;
}


/** woocommerce dropdown by order styling**/
.woocommerce .orderby,
.dwe_sorting_orderby{
    border: 1px solid var(--woo-dropdown-border-color)!important;
    border-radius: 0!important;
    background-color: var(--woo-dropdown-bg-color)!important;
    color: var(--woo-dropdown-font-color)!important;
}

/* Tablet styles */
@media all and (min-width:768px) and (max-width:980px){
    .woocommerce ul.product li.product,
    .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,
    .et-db #et-boc .et-l .et_pb_wc_related_products ul.products.columns-1 li.product,
    .et-db #et-boc .et-l .et_pb_wc_related_products ul.products.columns-2 li.product,
    .et-db #et-boc .et-l .et_pb_wc_related_products ul.products.columns-3 li.product,
    .et-db #et-boc .et-l .et_pb_wc_related_products ul.products.columns-4 li.product,
    .et-db #et-boc .et-l .et_pb_wc_related_products ul.products.columns-5 li.product,
    .et-db #et-boc .et-l .et_pb_wc_related_products ul.products.columns-6 li.product,
    .et_pb_shop ul.products.columns-1 li.product,
    .et_pb_shop ul.products.columns-2 li.product,
    .et_pb_shop ul.products.columns-3 li.product,
    .et_pb_shop ul.products.columns-4 li.product,
    .et_pb_shop ul.products.columns-5 li.product,
    .et_pb_shop ul.products.columns-6 li.product
    {
    width: calc(33.333333333333% - 10px)!important;
        margin: 0 15px 15px 0 !important;
        }
    
    .et-db #et-boc .et-l .et_pb_shop ul.products.columns-1 li:nth-child(3n+3), 
    .et-db #et-boc .et-l .et_pb_shop ul.products.columns-2 li:nth-child(3n+3), 
    .et-db #et-boc .et-l .et_pb_shop ul.products.columns-3 li:nth-child(3n+3), 
    .et-db #et-boc .et-l .et_pb_shop ul.products.columns-4 li:nth-child(3n+3), 
    .et-db #et-boc .et-l .et_pb_shop ul.products.columns-5 li:nth-child(3n+3), 
    .et-db #et-boc .et-l .et_pb_shop ul.products.columns-6 li:nth-child(3n+3),
    .et-db #et-boc .et-l .et_pb_wc_related_products ul.products.columns-1 li:nth-child(3n+3),
    .et-db #et-boc .et-l .et_pb_wc_related_products ul.products.columns-2 li:nth-child(3n+3),
    .et-db #et-boc .et-l .et_pb_wc_related_products ul.products.columns-3 li:nth-child(3n+3),
    .et-db #et-boc .et-l .et_pb_wc_related_products ul.products.columns-4 li:nth-child(3n+3),
    .et-db #et-boc .et-l .et_pb_wc_related_products ul.products.columns-5 li:nth-child(3n+3),
    .et-db #et-boc .et-l .et_pb_wc_related_products ul.products.columns-6 li:nth-child(3n+3),
    .et_pb_shop ul.products.columns-1 li.product:nth-child(3n+3),
    .et_pb_shop ul.products.columns-2 li.product:nth-child(3n+3),
    .et_pb_shop ul.products.columns-3 li.product:nth-child(3n+3),
    .et_pb_shop ul.products.columns-4 li.product:nth-child(3n+3),
    .et_pb_shop ul.products.columns-5 li.product:nth-child(3n+3),
    .et_pb_shop ul.products.columns-6 li.product:nth-child(3n+3)
    {
        margin-right: 0!important;
    }
}

/* Mobile styles */
@media all and (max-width:767px){
    .woocommerce ul.product li.product,
    .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,
    .et-db #et-boc .et-l .et_pb_wc_related_products ul.products.columns-1 li.product,
    .et-db #et-boc .et-l .et_pb_wc_related_products ul.products.columns-2 li.product,
    .et-db #et-boc .et-l .et_pb_wc_related_products ul.products.columns-3 li.product,
    .et-db #et-boc .et-l .et_pb_wc_related_products ul.products.columns-4 li.product,
    .et-db #et-boc .et-l .et_pb_wc_related_products ul.products.columns-5 li.product,
    .et-db #et-boc .et-l .et_pb_wc_related_products ul.products.columns-6 li.product,
    .et_pb_shop ul.products.columns-1 li.product,
    .et_pb_shop ul.products.columns-2 li.product,
    .et_pb_shop ul.products.columns-3 li.product,
    .et_pb_shop ul.products.columns-4 li.product,
    .et_pb_shop ul.products.columns-5 li.product,
    .et_pb_shop ul.products.columns-6 li.product{
    width: calc(50% - 10px)!important;
        margin: 0 15px 15px 0 !important;
        }
    
    .et-db #et-boc .et-l .et_pb_shop ul.products.columns-1 li:nth-child(2n+2), 
    .et-db #et-boc .et-l .et_pb_shop ul.products.columns-2 li:nth-child(2n+2), 
    .et-db #et-boc .et-l .et_pb_shop ul.products.columns-3 li:nth-child(2n+2), 
    .et-db #et-boc .et-l .et_pb_shop ul.products.columns-4 li:nth-child(2n+2), 
    .et-db #et-boc .et-l .et_pb_shop ul.products.columns-5 li:nth-child(2n+2), 
    .et-db #et-boc .et-l .et_pb_shop ul.products.columns-6 li:nth-child(2n+2),
    .et-db #et-boc .et-l .et_pb_wc_related_products ul.products.columns-1 li:nth-child(2n+2),
    .et-db #et-boc .et-l .et_pb_wc_related_products ul.products.columns-2 li:nth-child(2n+2),
    .et-db #et-boc .et-l .et_pb_wc_related_products ul.products.columns-3 li:nth-child(2n+2),
    .et-db #et-boc .et-l .et_pb_wc_related_products ul.products.columns-4 li:nth-child(2n+2),
    .et-db #et-boc .et-l .et_pb_wc_related_products ul.products.columns-5 li:nth-child(2n+2),
    .et-db #et-boc .et-l .et_pb_wc_related_products ul.products.columns-6 li:nth-child(2n+2),
    .et_pb_shop ul.products.columns-1 li.product:nth-child(2n+2),
    .et_pb_shop ul.products.columns-2 li.product:nth-child(2n+2),
    .et_pb_shop ul.products.columns-3 li.product:nth-child(2n+2),
    .et_pb_shop ul.products.columns-4 li.product:nth-child(2n+2),
    .et_pb_shop ul.products.columns-5 li.product:nth-child(2n+2),
    .et_pb_shop ul.products.columns-6 li.product:nth-child(2n+2)
    {
        margin-right: 0!important;
    }
}