/**
 * WooCommerce styles for Beans Adventure theme
 * Compiled from SCSS with Band of Beans design system
 */

.woocommerce {
  /* Products grid layout */
  .products {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
  }
  
  .product {
    background: #fafafa;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(126, 93, 76, 0.05);
    padding: 1.5rem;
    transition: box-shadow 0.2s;
  }
  
  .product:hover {
    box-shadow: 0 4px 16px rgba(126, 93, 76, 0.10);
  }
  
  /* Breadcrumbs styling */
  .woocommerce-breadcrumbs {
    margin-bottom: 1.5rem;
    font-size: 0.95em;
    color: #666;
  }
  
  /* Single product layout */
  .single-product .summary {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
  }
  
  .single-product .product-gallery {
    flex: 1 1 320px;
  }
  
  .single-product .product-summary {
    flex: 2 1 400px;
  }
  
  /* Checkout form styling */
  .woocommerce-checkout .form-row {
    margin-bottom: 1.5rem;
  }
  
  .woocommerce-checkout .coffee-preference-field {
    margin-top: 2rem;
  }
  
  .woocommerce-checkout .coffee-preference-field input {
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 0.75rem;
    width: 100%;
  }
  
  /* Band of Beans specific styling */
  .woocommerce-tabs .tabs {
    border-bottom: 1px solid #ddd;
    margin-bottom: 1.5rem;
  }
  
  .woocommerce-tabs .tabs li {
    display: inline-block;
    margin-right: 1rem;
  }
  
  .woocommerce-tabs .tabs li.active a {
    color: #7E5D4C;
    border-bottom: 2px solid #C9CC68;
  }
  
  /* Cart styling */
  .woocommerce-cart .cart-collaterals {
    margin-top: 2rem;
  }
  
  .woocommerce-cart .cart_totals {
    background: #fafafa;
    padding: 1.5rem;
    border-radius: 8px;
  }
  
  /* Button styling to match theme */
  .button,
  .woocommerce-Button {
    background: #7E5D4C;
    color: white;
    border: none;
    padding: 0.75rem 1.5rem;
    border-radius: 4px;
    font-weight: 600;
    transition: background 0.3s ease;
  }
  
  .button:hover,
  .woocommerce-Button:hover {
    background: #5d4439;
    color: white;
  }
  
  .button.alt,
  .woocommerce-Button.alt {
    background: #C9CC68;
    color: #333;
  }
  
  .button.alt:hover,
  .woocommerce-Button.alt:hover {
    background: #b3b85c;
    color: #333;
  }
}

/* Mobile responsiveness */
@media (max-width: 768px) {
  .woocommerce .products {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  
  .single-product .summary {
    flex-direction: column;
    gap: 1rem;
  }
  
  .woocommerce-cart .cart-collaterals {
    margin-top: 1rem;
  }
}