/**
 * WooCommerce Overrides
 * Aura Tech Design System
 * 
 * This file overrides default WooCommerce styles to match the design system
 */

/* ========================================
   PRODUCT GRID & CARDS
   ======================================== */

.woocommerce .products ul,
.woocommerce ul.products {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: var(--spacing-xl) !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Product placeholder for missing images */
.product-card__placeholder {
  width: 100% !important;
  aspect-ratio: 4/5 !important;
  background: linear-gradient(135deg, #E6D7F2 0%, #F5F5F7 100%) !important;
  border-radius: var(--radius-xl) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-bottom: var(--spacing-md) !important;
}

.product-card__placeholder .material-symbols-outlined {
  font-size: 64px !important;
  color: var(--color-deep-amethyst) !important;
  opacity: 0.5 !important;
}

.woocommerce ul.products li.product {
  background: var(--color-pure-white) !important;
  border-radius: var(--radius-2xl) !important;
  padding: 0 !important;
  transition: all var(--transition-slower) !important;
  margin: 0 !important;
  text-decoration: none !important;
  overflow: hidden !important;
}

.woocommerce ul.products li.product:hover {
  box-shadow: var(--shadow-product-hover) !important;
  transform: translateY(-4px) !important;
}

/* Force image wrapper to fill card */
.woocommerce ul.products li.product a {
  display: block !important;
  padding: 0 !important;
  margin: 0 !important;
  text-decoration: none !important;
}

.woocommerce ul.products li.product img {
  border-radius: 0 !important;
  background-color: var(--color-mist-silver) !important;
  aspect-ratio: 4/5 !important;
  object-fit: cover !important;
  width: 100% !important;
  height: auto !important;
  padding: 0 !important;
  margin: 0 !important;
  display: block !important;
  transition: transform var(--transition-slower) !important;
}

.woocommerce ul.products li.product:hover img {
  transform: scale(1.1) !important;
}

.woocommerce ul.products li.product h2,
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-family: var(--font-display) !important;
  font-size: var(--text-body-lg) !important;
  font-weight: var(--font-weight-bold) !important;
  color: var(--color-onyx-gray) !important;
  margin: 0 !important;
  padding: 16px 16px 8px !important;
  line-height: 1.3 !important;
}

.woocommerce ul.products li.product .price {
  color: var(--color-deep-amethyst) !important;
  font-family: var(--font-display) !important;
  font-size: var(--text-headline-sm) !important;
  font-weight: var(--font-weight-semibold) !important;
  margin: 0 !important;
  padding: 0 16px 16px !important;
}

.woocommerce ul.products li.product .price del {
  color: var(--color-secondary) !important;
  font-size: var(--text-label-md) !important;
  opacity: 0.7 !important;
}

.woocommerce ul.products li.product .button {
  margin: 0 16px 16px !important;
  width: calc(100% - 32px) !important;
}

/* ========================================
   SINGLE PRODUCT PAGE
   ======================================== */

.woocommerce div.product .product_title {
  font-family: var(--font-display) !important;
  font-size: var(--text-display-lg-mobile) !important;
  font-weight: 700 !important;
  color: var(--color-onyx-gray) !important;
  line-height: 1.2 !important;
  margin-bottom: var(--spacing-md) !important;
}

.woocommerce div.product p.price {
  color: var(--color-deep-amethyst) !important;
  font-family: var(--font-display) !important;
  font-size: var(--text-headline-md) !important;
  font-weight: 600 !important;
}

.woocommerce div.product p.price ins {
  text-decoration: none !important;
}

.woocommerce div.product p.price del {
  color: var(--color-secondary) !important;
  opacity: 0.7 !important;
  margin-left: var(--spacing-sm) !important;
}

.woocommerce div.product .cart .button,
.woocommerce div.product .single_add_to_cart_button {
  background-color: var(--color-deep-amethyst) !important;
  color: var(--color-pure-white) !important;
  border-radius: var(--radius-full) !important;
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
  padding: 16px 32px !important;
  border: none !important;
  transition: all var(--transition-base) !important;
}

.woocommerce div.product .cart .button:hover,
.woocommerce div.product .single_add_to_cart_button:hover {
  background-color: var(--color-primary-dark) !important;
  transform: scale(0.98) !important;
}

/* ========================================
   CART PAGE
   ======================================== */

.woocommerce-cart .cart-collaterals .cart_totals {
  background: var(--color-pure-white) !important;
  border-radius: var(--radius-xl) !important;
  padding: var(--spacing-xl) !important;
  box-shadow: var(--shadow-sm) !important;
}

.woocommerce-cart .wc-proceed-to-checkout a {
  background-color: var(--color-deep-amethyst) !important;
  color: var(--color-pure-white) !important;
  border-radius: var(--radius-full) !important;
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
  padding: 16px 32px !important;
}

/* Hide PayPal button in cart */
.woocommerce-cart .paypal-button,
.woocommerce-cart #paypal-button-container,
.woocommerce-cart .paypal-buttons,
.woocommerce-cart .wc-proceed-to-checkout + div {
  display: none !important;
}

/* ========================================
   CHECKOUT PAGE
   ======================================== */

.woocommerce-checkout .woocommerce-checkout-payment .payment_method {
  background: var(--color-surface-container-low) !important;
  border-radius: var(--radius-lg) !important;
  padding: var(--spacing-md) !important;
  margin-bottom: var(--spacing-sm) !important;
}

.woocommerce-checkout #place_order {
  background-color: var(--color-deep-amethyst) !important;
  color: var(--color-pure-white) !important;
  border-radius: var(--radius-full) !important;
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
  padding: 16px 32px !important;
  border: none !important;
  width: 100% !important;
}

.woocommerce-checkout #place_order:hover {
  background-color: var(--color-primary-dark) !important;
}

/* ========================================
   FORMS & INPUTS
   ======================================== */

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea {
  border: 1px solid var(--color-mist-silver) !important;
  border-radius: var(--radius-lg) !important;
  padding: 12px 16px !important;
  font-family: var(--font-body) !important;
  transition: all var(--transition-base) !important;
}

.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus {
  border-color: var(--color-deep-amethyst) !important;
  box-shadow: 0 0 0 3px rgba(127, 84, 179, 0.1) !important;
  outline: none !important;
}

.woocommerce form .form-row label {
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
  font-size: var(--text-label-bold) !important;
  color: var(--color-on-surface) !important;
}

/* ========================================
   NOTICES
   ======================================== */

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
  border-radius: var(--radius-lg) !important;
  padding: var(--spacing-md) var(--spacing-lg) !important;
  font-family: var(--font-body) !important;
}

.woocommerce-message {
  background-color: #E6F4EA !important;
  border-color: #1E8E3E !important;
  color: #1E8E3E !important;
  font-weight: 600 !important;
}

.woocommerce-message a {
  color: #1E8E3E !important;
  font-weight: 700 !important;
  text-decoration: underline !important;
}

.woocommerce-info {
  background-color: var(--color-surface-container-low) !important;
  border-color: var(--color-outline) !important;
}

.woocommerce-error {
  background-color: var(--color-error-container) !important;
  border-color: var(--color-error) !important;
}

/* ========================================
   PAGINATION
   ======================================== */

.woocommerce nav.woocommerce-pagination ul {
  border: none !important;
  display: flex !important;
  gap: var(--spacing-sm) !important;
}

.woocommerce nav.woocommerce-pagination ul li {
  border: none !important;
  margin: 0 !important;
}

.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
  border: 1px solid var(--color-outline-variant) !important;
  border-radius: var(--radius-lg) !important;
  padding: 8px 16px !important;
  transition: all var(--transition-base) !important;
}

.woocommerce nav.woocommerce-pagination ul li a:hover,
.woocommerce nav.woocommerce-pagination ul li span.current {
  background-color: var(--color-deep-amethyst) !important;
  color: var(--color-pure-white) !important;
  border-color: var(--color-deep-amethyst) !important;
}

/* ========================================
   RESPONSIVE
   ======================================== */

@media (max-width: 767px) {
  .woocommerce ul.products {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: var(--spacing-md) !important;
  }
  
  .woocommerce ul.products li.product {
    padding: 0 !important;
  }
  
  .woocommerce ul.products li.product img {
    padding: 0 !important;
  }
  
  .woocommerce ul.products li.product h2,
  .woocommerce ul.products li.product .woocommerce-loop-product__title {
    font-size: 14px !important;
    padding: 12px 12px 6px !important;
  }
  
  .woocommerce ul.products li.product .price {
    font-size: 16px !important;
    padding: 0 12px 12px !important;
  }
  
  .woocommerce ul.products li.product .button {
    margin: 0 12px 12px !important;
    width: calc(100% - 24px) !important;
  }
}