/* =====================================================
   WOOCOMMERCE.CSS — shop styles
   Uses variables from main.css
   ===================================================== */

/* ---------- 1. SHOP LAYOUT: products + sidebar ---------- */
.shop-layout { display: flex; gap: 32px; align-items: flex-start; }
.shop-content { flex: 1; min-width: 0; }
.shop-sidebar { width: 260px; flex-shrink: 0; }
.shop-sidebar .widget { margin-bottom: 24px; }
.shop-sidebar .widget-title { font-size: 1rem; margin: 0 0 12px; }

/* ---------- 2. BREADCRUMB ---------- */
.woocommerce-breadcrumb { font-size: .9rem; color: var(--color-muted); margin-bottom: 20px; }

/* ---------- 3. PRODUCT GRID ---------- */
.woocommerce ul.products { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin: 0; padding: 0; }
.woocommerce ul.products::before, .woocommerce ul.products::after { display: none; }
.woocommerce ul.products li.product { width: auto !important; margin: 0 !important; float: none !important; text-align: center; }
.woocommerce ul.products li.product img { border-radius: var(--radius); margin-bottom: 12px; }
.woocommerce ul.products li.product .woocommerce-loop-product__title { font-size: 1rem; color: var(--color-text); }

/* ---------- 4. PRICE & SALE BADGE ---------- */
.woocommerce .price { color: var(--color-primary) !important; font-weight: 600; }
.woocommerce .price del { color: var(--color-muted); font-weight: 400; }
.woocommerce span.onsale { background: #dc2626; border-radius: 4px; min-height: auto; line-height: 1; padding: 6px 10px; }

/* ---------- 5. BUTTONS (Add to cart, Checkout) ---------- */
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button,
.woocommerce #respond input#submit, .woocommerce a.button.alt, .woocommerce button.button.alt {
  background: var(--color-primary); color: #fff; border-radius: var(--radius); padding: 10px 18px;
}
.woocommerce a.button:hover, .woocommerce button.button:hover,
.woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover { background: var(--color-primary-dark); color: #fff; }

/* ---------- 6. SINGLE PRODUCT ---------- */
.woocommerce div.product .product_title { font-size: 2rem; }
.woocommerce div.product form.cart .quantity input { padding: 8px; border: 1px solid var(--color-border); border-radius: var(--radius); }
.woocommerce div.product .woocommerce-tabs ul.tabs li.active { border-bottom-color: var(--color-bg); }

/* ---------- 7. NOTICES (added to cart, errors) ---------- */
.woocommerce-message, .woocommerce-info { border-top-color: var(--color-primary); }
.woocommerce-message::before, .woocommerce-info::before { color: var(--color-primary); }

/* ---------- 8. CART & CHECKOUT FORMS ---------- */
.woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea, .woocommerce form .form-row select {
  padding: 10px; border: 1px solid var(--color-border); border-radius: var(--radius);
}

/* ---------- 9. RESPONSIVE ---------- */
@media (max-width: 1024px) {
  .woocommerce ul.products { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px) {
  .shop-layout { flex-direction: column; }
  .shop-sidebar { width: 100%; }
  .woocommerce ul.products { grid-template-columns: repeat(2, 1fr); gap: 16px; }
}