/**
 * WooCommerce Styles
 * Version: 1.0.0
 */

/* Wrapper */
.woocommerce-wrapper {
  max-width: 1400px;
  margin: 0 auto;
  padding: var(--space-xl) var(--space-md);
}

/* Product grid */
ul.products,
.woocommerce ul.products,
.woocommerce-page ul.products,
.woocommerce-wrapper ul.products,
body.woocommerce ul.products,
body.woocommerce-page ul.products {
  display: grid !important;
  /* Wider minimum so cards don't collapse into skinny strips */
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-lg);
  list-style: none !important;
  margin: 0;
  padding: 0 !important;
  float: none !important;
  width: 100%;
  align-items: stretch;
}

/* Desktop: lock to 3 columns so Shop/Home matches creator store grids (3 x 8). */
@media (min-width: 1024px) {
  ul.products,
  .woocommerce ul.products,
  .woocommerce-page ul.products,
  .woocommerce-wrapper ul.products,
  body.woocommerce ul.products,
  body.woocommerce-page ul.products {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Product card */
ul.products li.product,
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product,
.woocommerce-wrapper ul.products li.product,
body.woocommerce ul.products li.product,
body.woocommerce-page ul.products li.product {
  position: relative; /* anchor overlays */
  display: flex;
  flex-direction: column;
  background: #000000;
  border: 2px solid var(--toiaf-purple);
  border-radius: var(--radius-lg);
  padding: var(--space-md);
  transition: all var(--transition-base);
  overflow: visible; /* allow overlay buttons */
  /* Ensure consistent button/title/meta positioning regardless of content length */
  min-height: 520px;
  float: none !important;
  width: auto !important;
  margin: 0;
}

.woocommerce ul.products li.product:hover,
.woocommerce-page ul.products li.product:hover,
.woocommerce-wrapper ul.products li.product:hover,
body.woocommerce ul.products li.product:hover,
body.woocommerce-page ul.products li.product:hover {
  border-color: var(--toiaf-pink);
  box-shadow: var(--shadow-pink);
  transform: translateY(-4px);
}

/* Product image */
ul.products li.product .woocommerce-loop-product__link,
.woocommerce ul.products li.product .woocommerce-loop-product__link,
.woocommerce-page ul.products li.product .woocommerce-loop-product__link,
.woocommerce-wrapper ul.products li.product .woocommerce-loop-product__link,
body.woocommerce ul.products li.product .woocommerce-loop-product__link,
body.woocommerce-page ul.products li.product .woocommerce-loop-product__link {
  display: block;
  position: relative;
  margin-bottom: var(--space-sm);
}

ul.products li.product img,
.woocommerce ul.products li.product img,
.woocommerce-page ul.products li.product img,
.woocommerce-wrapper ul.products li.product img,
body.woocommerce ul.products li.product img,
body.woocommerce-page ul.products li.product img {
  width: 100%;
  height: 240px;
  object-fit: cover;
  border-radius: var(--radius-md);
  transition: transform var(--transition-base);
}

.woocommerce ul.products li.product:hover img,
.woocommerce-page ul.products li.product:hover img,
.woocommerce-wrapper ul.products li.product:hover img,
body.woocommerce ul.products li.product:hover img,
body.woocommerce-page ul.products li.product:hover img {
  transform: scale(1.05);
}

/* Title */
ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce-page ul.products li.product .woocommerce-loop-product__title,
.woocommerce-wrapper ul.products li.product .woocommerce-loop-product__title,
body.woocommerce ul.products li.product .woocommerce-loop-product__title,
body.woocommerce-page ul.products li.product .woocommerce-loop-product__title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--toiaf-aqua);
  text-align: center;
  margin: var(--space-sm) 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  min-height: 2.4em;
  line-height: 1.2;
}

/* Rating */
ul.products li.product .star-rating,
.woocommerce ul.products li.product .star-rating,
.woocommerce-page ul.products li.product .star-rating,
.woocommerce-wrapper ul.products li.product .star-rating,
body.woocommerce ul.products li.product .star-rating,
body.woocommerce-page ul.products li.product .star-rating {
  margin: var(--space-xs) auto;
}

.woocommerce ul.products li.product .star-rating::before,
ul.products li.product .star-rating::before,
.woocommerce-page ul.products li.product .star-rating::before,
.woocommerce-wrapper ul.products li.product .star-rating::before,
body.woocommerce ul.products li.product .star-rating::before,
body.woocommerce-page ul.products li.product .star-rating::before {
  color: rgba(255, 255, 255, 0.2);
}

.woocommerce ul.products li.product .star-rating span::before,
ul.products li.product .star-rating span::before,
.woocommerce-page ul.products li.product .star-rating span::before,
.woocommerce-wrapper ul.products li.product .star-rating span::before,
body.woocommerce ul.products li.product .star-rating span::before,
body.woocommerce-page ul.products li.product .star-rating span::before {
  color: var(--toiaf-yellow);
}

/* Price */
ul.products li.product .price,
.woocommerce ul.products li.product .price,
.woocommerce-page ul.products li.product .price,
.woocommerce-wrapper ul.products li.product .price,
body.woocommerce ul.products li.product .price,
body.woocommerce-page ul.products li.product .price {
  font-size: 1.25rem;
  font-weight: 900;
  color: var(--toiaf-yellow);
  text-align: center;
  margin-top: auto; /* push to bottom */
  padding-top: var(--space-sm);
}

ul.products li.product .price del,
.woocommerce ul.products li.product .price del,
.woocommerce-page ul.products li.product .price del,
.woocommerce-wrapper ul.products li.product .price del,
body.woocommerce ul.products li.product .price del,
body.woocommerce-page ul.products li.product .price del {
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.875rem;
}

ul.products li.product .price ins,
.woocommerce ul.products li.product .price ins,
.woocommerce-page ul.products li.product .price ins,
.woocommerce-wrapper ul.products li.product .price ins,
body.woocommerce ul.products li.product .price ins,
body.woocommerce-page ul.products li.product .price ins {
  text-decoration: none;
  color: var(--toiaf-lime);
}

/* Add to cart */
ul.products li.product .button,
.woocommerce ul.products li.product .button,
.woocommerce-page ul.products li.product .button,
.woocommerce-wrapper ul.products li.product .button,
body.woocommerce ul.products li.product .button,
body.woocommerce-page ul.products li.product .button {
  display: block;
  width: 100%;
  /* If a card has no .price element (or meta is short), keep button pinned to the bottom. */
  margin-top: auto;
  padding: var(--space-sm);
  /* Add to Cart button (product cards) */
  background: #000000;
  color: #ff2bd6; /* TOIAF Pink */
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: 1px;
  text-align: center;
  text-transform: uppercase;
  border: 1px solid #b6ff00; /* TOIAF Lime */
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--transition-base);
}

/* When price exists, keep a consistent gap between price and button (price already pushes to bottom). */
ul.products li.product .price + .button,
.woocommerce ul.products li.product .price + .button,
.woocommerce-page ul.products li.product .price + .button,
.woocommerce-wrapper ul.products li.product .price + .button,
body.woocommerce ul.products li.product .price + .button,
body.woocommerce-page ul.products li.product .price + .button {
  margin-top: var(--space-sm);
}

ul.products li.product .button:hover,
.woocommerce ul.products li.product .button:hover,
.woocommerce-page ul.products li.product .button:hover,
.woocommerce-wrapper ul.products li.product .button:hover,
body.woocommerce ul.products li.product .button:hover,
body.woocommerce-page ul.products li.product .button:hover {
  background: #000000;
  box-shadow: var(--shadow-pink);
}

/* Sale badge */
ul.products li.product .onsale,
.woocommerce ul.products li.product .onsale,
.woocommerce-page ul.products li.product .onsale,
.woocommerce-wrapper ul.products li.product .onsale,
body.woocommerce ul.products li.product .onsale,
body.woocommerce-page ul.products li.product .onsale {
  position: absolute;
  top: var(--space-sm);
  right: var(--space-sm);
  z-index: 2;
  background: var(--toiaf-orange);
  color: var(--toiaf-black);
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-md);
  font-size: 0.75rem;
  font-weight: 900;
  letter-spacing: 1px;
  text-transform: uppercase;
}

/* Single product */
body.single-product-page .product,
body.single-product .product {
  background: #000000;
  border: 2px solid var(--toiaf-purple);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
}

/* Card: Category + Tags under the title */
.toiaf-card-tax {
  margin-top: var(--space-xs);
  margin-bottom: var(--space-sm);
  font-size: 0.8rem;
  line-height: 1.2;
  color: #ff8531; /* TOIAF Orange */
  /* Lock this block to 2 lines (category + tags) so card height doesn't jump */
  min-height: calc(2 * 1.2em + 6px);
}
.toiaf-card-tax .toiaf-card-tax-row {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.toiaf-card-tax strong {
  font-weight: 800;
  color: #ff8531;
}

/* Keep only ONE preview button (top-left overlay). Remove the extra preview button that sits above Add to Cart. */
button.toiaf-preview-btn.toiaf-preview-action,
.toiaf-preview-btn.toiaf-preview-action {
  display: none !important;
}

/* Overlay preview button styling (top-left of product image) */
.toiaf-preview-overlay-btn {
  background: #000000 !important;
  color: #ffff33 !important; /* TOIAF Yellow */
  border: 1px solid #b6ff00 !important; /* TOIAF Lime */
  border-radius: 8px !important;
  padding: 8px 12px !important;
  font-family: var(--font-orbitron, Orbitron, sans-serif) !important;
  font-weight: 800 !important;
  letter-spacing: 0.5px !important;
  text-transform: uppercase !important;
}


body.single-product-page .product .product_title,
body.single-product .product .product_title {
  color: var(--toiaf-pink);
  font-size: 2rem;
  margin-bottom: var(--space-md);
}

body.single-product-page .product .price,
body.single-product .product .price {
  font-size: 2rem;
  color: var(--toiaf-yellow);
  margin-bottom: var(--space-md);
}

@media (max-width: 768px) {
  ul.products,
  .woocommerce ul.products,
  .woocommerce-page ul.products,
  .woocommerce-wrapper ul.products,
  body.woocommerce ul.products,
  body.woocommerce-page ul.products {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: var(--space-md);
  }

  /* Let cards grow naturally on smaller screens */
  .woocommerce ul.products li.product,
  .woocommerce-page ul.products li.product,
  .woocommerce-wrapper ul.products li.product,
  body.woocommerce ul.products li.product,
  body.woocommerce-page ul.products li.product {
    min-height: auto;
  }
}

@media (max-width: 480px) {
  ul.products,
  .woocommerce ul.products,
  .woocommerce-page ul.products,
  .woocommerce-wrapper ul.products,
  body.woocommerce ul.products,
  body.woocommerce-page ul.products {
    grid-template-columns: 1fr;
  }
}

/* === Card layout stability: clamp title/taxonomy so buttons align === */
.woocommerce ul.products li.product h2.woocommerce-loop-product__title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  min-height: 2.8em; /* ~2 lines */
}

.woocommerce ul.products li.product .toiaf-card-tax {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  min-height: 3.6em;
}

.woocommerce ul.products li.product .toiaf-card-meta {
  margin-top: auto;
}

/* Keep price above button, but button anchored */
.woocommerce ul.products li.product .price {
  margin-top: 0;
}

.woocommerce ul.products li.product a.button,
.woocommerce ul.products li.product a.added_to_cart {
  margin-top: 12px;
}

/* === Homepage: force Woo blocks grids to match model grid (3 columns) === */
body.home .wc-block-grid,
body.home .wp-block-woocommerce-product-collection {
  --wc-block-grid--columns: 3;
}

body.home .wc-block-grid__products,
body.home .wp-block-woocommerce-product-collection ul.wc-block-product-template {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

@media (max-width: 900px) {
  body.home .wc-block-grid__products,
  body.home .wp-block-woocommerce-product-collection ul.wc-block-product-template {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 560px) {
  body.home .wc-block-grid__products,
  body.home .wp-block-woocommerce-product-collection ul.wc-block-product-template {
    grid-template-columns: 1fr !important;
  }
}