/**
 * KMT Product Grid — layout helpers.
 * Typography is controlled via CSS variables from element settings.
 */

.kmt-product-grid {
  max-width: 1200px;
  margin: 0 auto;
}

.kmt-product-grid__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.kmt-product-grid__empty {
  grid-column: 1 / -1;
  text-align: center;
  color: #777;
  padding: 40px 0;
}

.kmt-product-grid__footer {
  text-align: center;
}

.kmt-product-grid__status {
  margin: 0 0 12px;
  font-size: 14px;
  color: #777;
  min-height: 1.2em;
}

.kmt-product-grid.is-loading .kmt-product-grid__list {
  opacity: 0.55;
  pointer-events: none;
}

/* Filter tabs */
.kmt-product-grid .fusion-filters {
  display: flex !important;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  list-style: none;
  padding: 0 12px 32px;
  margin: 0;
}

.kmt-product-grid .fusion-filters .fusion-filter {
  border: none !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
}

.kmt-product-grid .fusion-filters .fusion-filter a {
  display: inline-block !important;
  padding: 10px 18px !important;
  border: 1px solid var(--kmt-filter-border-color, #d8d2c8) !important;
  border-radius: 999px !important;
  text-decoration: none !important;
  color: var(--kmt-filter-color, #2d2d2d) !important;
  font-family: var(--kmt-filter-font-family, inherit) !important;
  font-size: var(--kmt-filter-font-size, 13px) !important;
  font-weight: var(--kmt-filter-font-weight, 400) !important;
  font-style: var(--kmt-filter-font-style, normal) !important;
  letter-spacing: var(--kmt-filter-letter-spacing, 0.04em);
  text-transform: var(--kmt-filter-text-transform, none) !important;
  line-height: var(--kmt-filter-line-height, 1.4) !important;
  background: var(--kmt-filter-background, #fff) !important;
}

.kmt-product-grid .fusion-filters .fusion-filter a:hover,
.kmt-product-grid .fusion-filters .fusion-filter.fusion-active a {
  background: var(--kmt-filter-active-background, #f7f4ef) !important;
  border-color: var(--kmt-filter-active-border-color, #9b7329) !important;
  color: var(--kmt-filter-active-color, #2d2d2d) !important;
}

/* Product cards */
.kmt-product-grid .fusion-image-element .fusion-imageframe,
.kmt-product-grid .fusion-image-element span.fusion-imageframe {
  display: block !important;
  width: 100% !important;
  aspect-ratio: 4/5 !important;
  max-height: 380px !important;
  overflow: hidden !important;
  background: #f7f4ef !important;
}

.kmt-product-grid .fusion-image-element img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

.kmt-product-grid .fusion-title.title .fusion-title-heading,
.kmt-product-grid .fusion-title-heading {
  font-family: var(--kmt-title-font-family, var(--awb-typography4-font-family, inherit)) !important;
  font-size: var(--kmt-title-font-size, 14px) !important;
  font-weight: var(--kmt-title-font-weight, var(--awb-typography4-font-weight, 400)) !important;
  font-style: var(--kmt-title-font-style, normal) !important;
  line-height: var(--kmt-title-line-height, 1.35) !important;
  letter-spacing: var(--kmt-title-letter-spacing, normal);
  text-transform: var(--kmt-title-text-transform, none) !important;
  text-align: center !important;
  color: var(--kmt-title-color, var(--awb-color4, #2d2d2d)) !important;
}

.kmt-product-grid .fusion-woo-price-tb .price,
.kmt-product-grid .fusion-woo-price-tb .price .amount {
  font-family: var(--kmt-price-font-family, var(--awb-typography4-font-family, inherit)) !important;
  font-size: var(--kmt-price-font-size, 12px) !important;
  font-weight: var(--kmt-price-font-weight, var(--awb-typography4-font-weight, 400)) !important;
  font-style: var(--kmt-price-font-style, normal) !important;
  line-height: var(--kmt-price-line-height, 1.4) !important;
  letter-spacing: var(--kmt-price-letter-spacing, normal);
  text-transform: var(--kmt-price-text-transform, none) !important;
  text-align: center !important;
  color: var(--kmt-price-color, var(--awb-color4, #666)) !important;
}

.kmt-product-grid .fusion-load-more-button {
  display: block !important;
  margin: 36px auto 8px !important;
  padding: 14px 36px !important;
  background: #2d2d2d !important;
  color: #fff !important;
  border: 1px solid #2d2d2d !important;
  border-radius: 0 !important;
  font-size: 12px !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
}

.kmt-product-grid .fusion-load-more-button:hover {
  background: #fff !important;
  color: #2d2d2d !important;
}

.kmt-product-grid .fusion-load-more-button.fusion-loading {
  opacity: 0.6;
  pointer-events: none;
}