/* ==========================================================================
   KING DICK PAGE BUILDER — DYNAMIC FRONTEND STYLES & CARD VARIANTS
   ========================================================================== */

/* 1. Dynamic Grid Layouts using CSS Variables */
:root {
  --kd-product-cols: 3;
  --kd-category-cols: 3;
  --kd-archive-cols: 3;
}

@media (min-width: 1024px) {
  .products-grid {
    display: grid !important;
    grid-template-columns: repeat(var(--kd-product-cols, 4), minmax(0, 1fr)) !important;
    gap: 2rem !important;
  }

  .tax-product_category .products-grid,
  .post-type-archive-kingdick_product .products-grid {
    grid-template-columns: repeat(var(--kd-archive-cols, 4), minmax(0, 1fr)) !important;
  }

  .category-grid {
    display: grid !important;
    grid-template-columns: repeat(var(--kd-category-cols, 3), minmax(0, 1fr)) !important;
    gap: 1.75rem !important;
  }
}

@media (min-width: 640px) and (max-width: 1023px) {
  .products-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  .category-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 639px) {
  .products-grid {
    grid-template-columns: 1fr !important;
  }
  .category-grid {
    grid-template-columns: 1fr !important;
  }
}

/* 2. Product Card Variants */

/* Default transitions */
.product-card {
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease !important;
}

/* Variant A: Compact Style */
.kd-card-style-compact .product-card,
.product-card.kd-card-variant-compact {
  border-radius: 6px;
}

.kd-card-style-compact .product-card .product-card-img-wrap,
.product-card.kd-card-variant-compact .product-card-img-wrap {
  height: 180px;
  padding: 1rem;
}

.kd-card-style-compact .product-card .product-card-body,
.product-card.kd-card-variant-compact .product-card-body {
  padding: 1.25rem;
}

.kd-card-style-compact .product-card .product-card-title,
.product-card.kd-card-variant-compact .product-card-title {
  font-size: 1.05rem;
  margin-bottom: 0.5rem;
}

.kd-card-style-compact .product-meta-specs,
.product-card.kd-card-variant-compact .product-meta-specs {
  font-size: 0.78rem;
  margin-bottom: 1rem;
}

/* Variant B: Detailed Technical Specs Style */
.kd-card-style-detailed .product-card,
.product-card.kd-card-variant-detailed {
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: linear-gradient(180deg, #111B26 0%, #0A121B 100%);
}

.kd-card-style-detailed .product-meta-specs,
.product-card.kd-card-variant-detailed .product-meta-specs {
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 6px;
  padding: 0.85rem 1rem;
  margin-bottom: 1.5rem;
}

.kd-card-style-detailed .product-meta-specs > div,
.product-card.kd-card-variant-detailed .product-meta-specs > div {
  padding: 0.25rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.kd-card-style-detailed .product-meta-specs > div:last-child,
.product-card.kd-card-variant-detailed .product-meta-specs > div:last-child {
  border-bottom: none;
}

/* Variant C: Red Heritage Glow Style */
.kd-card-style-border-accent .product-card,
.product-card.kd-card-variant-border-accent {
  border: 1px solid rgba(227, 27, 35, 0.35);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(227, 27, 35, 0.2);
}

.kd-card-style-border-accent .product-card:hover,
.product-card.kd-card-variant-border-accent:hover {
  border-color: #E31B23;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.7), 0 0 25px rgba(227, 27, 35, 0.35);
  transform: translateY(-4px);
}

/* Section visibility classes controlled live by builder */
.kd-section-hidden {
  display: none !important;
}