/**
 * Afoomart WooCommerce Foundation Stylesheet
 * Integrates WooCommerce components seamlessly into Afoomart Design System
 */

/* WooCommerce Global Wrapper */
.afoomart-woocommerce-wrapper {
  padding-top: var(--af-space-4);
  padding-bottom: var(--af-space-8);
}

/* Page Titles */
.woocommerce-products-header__title.page-title {
  font-size: var(--af-text-2xl);
  font-weight: var(--af-font-weight-extrabold);
  color: var(--af-color-primary-navy);
  margin-bottom: var(--af-space-4);
}

/* Catalog Ordering & Result Count Toolbar */
.woocommerce-notices-wrapper {
  margin-bottom: var(--af-space-4);
}

.woocommerce-result-count {
  font-size: var(--af-text-sm);
  color: var(--af-color-secondary-text);
  margin-bottom: var(--af-space-4);
  float: left;
}

.woocommerce-ordering {
  float: right;
  margin-bottom: var(--af-space-4);
}

.woocommerce-ordering select {
  padding: 8px 12px;
  font-size: var(--af-text-sm);
  border: 1px solid var(--af-color-border);
  border-radius: var(--af-radius-md);
  background-color: var(--af-color-white);
  color: var(--af-color-dark-text);
  outline: none;
}

/* Clean up floats */
.woocommerce::after,
.woocommerce-page::after {
  content: "";
  display: table;
  clear: both;
}

/* WooCommerce Standard Product Cards (in grid) */
ul.products {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: var(--af-space-2) !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 0 var(--af-space-6) 0 !important;
  clear: both;
}

@media (min-width: 640px) {
  ul.products {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: var(--af-space-3) !important;
  }
}

@media (min-width: 1024px) {
  ul.products {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: var(--af-space-4) !important;
  }
}

@media (min-width: 1280px) {
  ul.products {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  }
}

ul.products li.product {
  background-color: var(--af-color-white);
  border: 1px solid var(--af-color-border);
  border-radius: var(--af-radius-base);
  padding: var(--af-space-3);
  display: flex;
  flex-direction: column;
  position: relative;
  transition: all var(--af-transition-fast);
  margin: 0 !important;
  width: auto !important;
  float: none !important;
}

ul.products li.product:hover {
  border-color: var(--af-color-border-hover);
  box-shadow: var(--af-shadow-sm);
  transform: translateY(-2px);
}

/* Product Thumbnail */
ul.products li.product img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--af-radius-sm);
  margin-bottom: var(--af-space-2);
}

/* Product Title */
ul.products li.product .woocommerce-loop-product__title {
  font-size: var(--af-text-sm) !important;
  font-weight: var(--af-font-weight-medium) !important;
  color: var(--af-color-dark-text) !important;
  line-height: var(--af-leading-snug) !important;
  margin-bottom: var(--af-space-1) !important;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  height: 2.6em;
}

/* Product Price */
ul.products li.product .price {
  font-size: var(--af-text-base) !important;
  font-weight: var(--af-font-weight-bold) !important;
  color: var(--af-color-dark-text) !important;
  margin-bottom: var(--af-space-2) !important;
  display: flex;
  align-items: baseline;
  gap: var(--af-space-1);
}

ul.products li.product .price del {
  color: var(--af-color-secondary-text);
  font-size: var(--af-text-xs);
  font-weight: var(--af-font-weight-regular);
}

ul.products li.product .price ins {
  text-decoration: none;
  color: var(--af-color-primary-navy);
}

/* Onsale Badge */
span.onsale {
  position: absolute !important;
  top: 8px !important;
  left: 8px !important;
  background-color: var(--af-color-primary-red) !important;
  color: var(--af-color-white) !important;
  font-size: 11px !important;
  font-weight: var(--af-font-weight-bold) !important;
  line-height: 1 !important;
  padding: 4px 8px !important;
  border-radius: var(--af-radius-sm) !important;
  min-height: auto !important;
  min-width: auto !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  z-index: var(--af-z-badge);
}

/* Loop Add to Cart Button */
ul.products li.product .button {
  margin-top: auto;
  background-color: var(--af-color-primary-navy) !important;
  color: var(--af-color-white) !important;
  font-size: var(--af-text-xs) !important;
  font-weight: var(--af-font-weight-semibold) !important;
  padding: 8px 12px !important;
  border-radius: var(--af-radius-md) !important;
  text-align: center;
  transition: background-color var(--af-transition-fast) !important;
}

ul.products li.product .button:hover {
  background-color: var(--af-color-primary-red) !important;
}

/* WooCommerce Messages & Alerts */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
  padding: 14px 20px !important;
  margin-bottom: var(--af-space-4) !important;
  border-radius: var(--af-radius-base) !important;
  font-size: var(--af-text-sm) !important;
  border-left-width: 4px !important;
  list-style: none !important;
}

.woocommerce-message {
  background-color: #F0FDF4 !important;
  border-left-color: var(--af-color-success) !important;
  color: #166534 !important;
}

.woocommerce-info {
  background-color: #F0F9FF !important;
  border-left-color: var(--af-color-primary-navy) !important;
  color: #075985 !important;
}

.woocommerce-error {
  background-color: #FEF2F2 !important;
  border-left-color: var(--af-color-primary-red) !important;
  color: #991B1B !important;
}

/* Star Ratings */
.star-rating {
  font-size: 13px !important;
  color: var(--af-color-star) !important;
}

/* WooCommerce Pagination */
nav.woocommerce-pagination ul {
  display: flex !important;
  justify-content: center !important;
  gap: var(--af-space-1) !important;
  border: none !important;
  padding: 0 !important;
}

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

nav.woocommerce-pagination ul li a,
nav.woocommerce-pagination ul li span {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 36px !important;
  height: 36px !important;
  padding: 0 10px !important;
  font-size: var(--af-text-sm) !important;
  font-weight: var(--af-font-weight-semibold) !important;
  border-radius: var(--af-radius-md) !important;
  background-color: var(--af-color-white) !important;
  border: 1px solid var(--af-color-border) !important;
  color: var(--af-color-dark-text) !important;
}

nav.woocommerce-pagination ul li span.current {
  background-color: var(--af-color-primary-navy) !important;
  color: var(--af-color-white) !important;
  border-color: var(--af-color-primary-navy) !important;
}

nav.woocommerce-pagination ul li a:hover {
  border-color: var(--af-color-primary-navy) !important;
  color: var(--af-color-primary-navy) !important;
}