/*
 Theme Name:   Divi Child
 Theme URI:    https://example.com/
 Description:  Child theme for the Divi theme
 Author:       Your Name
 Author URI:   https://example.com/
 Template:     Divi
 Version:      1.0.0
*/

/* ============================
   🛍️ SHOP + SIDEBAR STYLES
   ============================ */
.category-menu a {
  display: block;
  padding: 12px 16px;
  margin-bottom: 8px;
  background: #fff;
  border: 1px solid #ddd;
  color: #234ef4;
  font-weight: 500;
  letter-spacing: 0.5px;
  text-transform: capitalize;
  border-radius: 6px;
  transition: all 0.2s ease;
}

.category-menu a:hover {
  background: #f5f7fa;
  border-color: #bbb;
}

/* Product Grid Optimization */
.woocommerce ul.products li.product {
  width: 24%;
  margin: 0 0.5% 30px;
  text-align: center;
  border: none;
  background: #fff;
}

.woocommerce ul.products li.product img {
  border-radius: 4px;
  margin-bottom: 12px;
  max-height: 250px;
  object-fit: contain;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  color: #000;
  margin-bottom: 6px;
  min-height: 36px;
}

.woocommerce ul.products li.product .price {
  color: #333;
  font-weight: 600;
  font-size: 14px;
}

/* ============================
   🛒 PRODUCT PAGE - CHECKOUT BUTTON
   ============================ */

/* Add flex container to cart form */
.single-product .cart {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: flex-start;
}

/* Checkout button styling */
.single-product .cart .checkout-button {
  display: inline-block;
  padding: 12px 24px;
  background: #000;
  color: #fff !important;
  text-decoration: none;
  text-transform: uppercase;
  font-weight: 600;
  font-size: 14px;
  border-radius: 4px;
  transition: background 0.3s ease;
  text-align: center;
  border: none;
  cursor: pointer;
}

.single-product .cart .checkout-button:hover {
  background: #333;
}

/* Desktop: Side by side buttons */
@media (min-width: 769px) {
  .single-product .cart {
    flex-direction: row;
    align-items: center;
  }
  
  .single-product .cart .quantity {
    margin-right: 10px;
  }
  
  .single-product .cart .single_add_to_cart_button {
    flex: 0 0 auto;
    margin-right: 10px;
  }
  
  .single-product .cart .checkout-button {
    flex: 0 0 auto;
  }
}

/* Mobile: Stacked buttons */
@media (max-width: 768px) {
  .single-product .cart {
    flex-direction: column;
    width: 100%;
  }
  
  .single-product .cart .quantity {
    width: 100%;
    margin-bottom: 10px;
  }
  
  .single-product .cart .single_add_to_cart_button {
    width: 100%;
    margin-bottom: 10px;
  }
  
  .single-product .cart .checkout-button {
    width: 100%;
  }
}

/* ============================
   🪟 QUICK VIEW FIXES
   ============================ */

/* Ensure WC gallery is visible in Quick View */
.we-quickview .woocommerce-product-gallery,
.wcwe-quickview .woocommerce-product-gallery,
.modal .woocommerce-product-gallery {
  opacity: 1 !important;
  visibility: visible !important;
}

/* Hide ALL success messages and View Cart links in Quick View */
.quickview-modal .woocommerce-message,
.quickview-modal .woocommerce-info,
.modal .woocommerce-message,
.modal .woocommerce-info,
[class*="quickview"] .woocommerce-message,
[class*="quickview"] .woocommerce-info,
.qv-notices .woocommerce-message,
.qv-added-notice,
div[class*="quick"] .woocommerce-message,
div[class*="quick"] a[href*="cart"],
.pp_woocommerce .woocommerce-message,
.pp_woocommerce a.button.wc-forward {
  display: none !important;
}

/* Hide the specific "View Cart" link that appears after adding */
a.added_to_cart,
a.added_to_cart.wc-forward {
  display: none !important;
}

/* ============================
   🕹️ BUTTON STATES
   ============================ */

/* When adding (disabled state) */
.quickview-modal .single_add_to_cart_button.loading,
.modal .single_add_to_cart_button.loading,
[class*="quickview"] .single_add_to_cart_button.loading,
[class*="quickview"] a.add_to_cart_button.loading {
  opacity: 0.8;
  pointer-events: none;
  filter: grayscale(20%);
}

/* When successfully added */
.quickview-modal .single_add_to_cart_button.added,
.modal .single_add_to_cart_button.added,
[class*="quickview"] .single_add_to_cart_button.added,
[class*="quickview"] a.add_to_cart_button.added {
  background-color: #198754;
  border-color: #198754;
  color: #fff;
  transition: background 0.2s ease, border-color 0.2s ease;
}

/* ============================
   📱 RESPONSIVE STYLES
   ============================ */

/* Tablet (landscape and portrait) */
@media (max-width: 980px) {
  .woocommerce ul.products li.product {
    width: 32%;
    margin: 0 0.66% 25px;
  }
  
  .woocommerce ul.products li.product img {
    max-height: 220px;
  }
}

/* Tablet (portrait) and large phones */
@media (max-width: 768px) {
  .woocommerce ul.products li.product {
    width: 48%;
    margin: 0 1% 20px;
  }
  
  .woocommerce ul.products li.product img {
    max-height: 200px;
  }
  
  .woocommerce ul.products li.product .woocommerce-loop-product__title {
    font-size: 13px;
    min-height: 32px;
  }
  
  .category-menu a {
    padding: 10px 14px;
    font-size: 14px;
  }
}

/* Mobile phones */
@media (max-width: 480px) {
  .woocommerce ul.products li.product {
    width: 100%;
    margin: 0 0 20px;
  }
  
  .woocommerce ul.products li.product img {
    max-height: 300px;
  }
  
  .woocommerce ul.products li.product .woocommerce-loop-product__title {
    font-size: 14px;
    min-height: auto;
  }
  
  .woocommerce ul.products li.product .price {
    font-size: 15px;
  }
  
  .category-menu a {
    padding: 12px 16px;
    font-size: 15px;
  }
}

/* Small mobile phones */
@media (max-width: 360px) {
  .woocommerce ul.products li.product .woocommerce-loop-product__title {
    font-size: 13px;
  }
  
  .category-menu a {
    padding: 10px 12px;
  }
}