/**
 * Section: Product Carousel / Grid (4 Card trên - 3 Card to dưới)
 * Path: light-commerce-restructured-ver0.0.1/templates/sections/product-carousel/style.css
 * 100% tokens derived from global.css
 */

/* 1. KHUNG SECTION */
.lc-product-carousel-section {
  width: 100% !important;
  position: relative !important;
  box-sizing: border-box !important;
  clear: both !important;
  padding-top: var(--lc-spacing-2xl) !important;
  padding-bottom: var(--lc-spacing-2xl) !important;
  background-color: var(--lc-color-bg-secondary);
}

/* 2. KHUNG CONTAINER CĂN GIỮA */
.lc-product-carousel__container {
  width: 100% !important;
  max-width: var(--lc-container-max-width) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: var(--lc-spacing-md) !important;
  padding-right: var(--lc-spacing-md) !important;
  box-sizing: border-box !important;
}

/* 3. HEADER SECTION (TIÊU ĐỀ, PHỤ ĐỀ, MÔ TẢ) */
.lc-product-carousel__header {
  text-align: center !important;
  margin: 0 auto var(--lc-spacing-xl) auto !important;
  max-width: 800px !important;
}

.lc-product-carousel__title {
  font-family: var(--lc-font-family-base) !important;
  font-size: var(--lc-h2-size) !important;
  line-height: var(--lc-h2-line-height) !important;
  font-weight: var(--lc-h2-weight) !important;
  color: var(--lc-color-text-main) !important;
  text-transform: uppercase !important;
  margin: 0 0 var(--lc-spacing-xs) 0 !important;
  letter-spacing: 0.5px !important;
}

.lc-product-carousel__subtitle {
  font-family: var(--lc-font-family-base) !important;
  font-size: var(--lc-font-size-base) !important;
  line-height: var(--lc-line-height-base) !important;
  color: var(--lc-color-text-muted) !important;
  margin: 0 0 var(--lc-spacing-2xs) 0 !important;
}

.lc-product-carousel__desc {
  font-family: var(--lc-font-family-base) !important;
  font-size: var(--lc-font-size-sm) !important;
  line-height: var(--lc-line-height-relaxed) !important;
  color: var(--lc-color-text-muted) !important;
  margin: 0 auto !important;
  max-width: 650px !important;
}

/* 4. LƯỚI SẢN PHẨM: 4 CỘT TRÊN - 3 CỘT TO DƯỚI */
.lc-product-carousel__grid {
  display: flex !important;
  flex-direction: column !important;
  gap: var(--lc-spacing-lg) !important;
  width: 100% !important;
}

.lc-product-carousel__row {
  display: grid !important;
  gap: var(--lc-spacing-lg) !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  width: 100% !important;
}

.lc-product-carousel__row--top {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

.lc-product-carousel__row--bottom {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

.lc-product-carousel__col {
  display: flex !important;
  flex-direction: column !important;
  min-width: 0 !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Tinh chỉnh typography cho 3 card to hàng dưới */
.lc-product-carousel__row--bottom .lc-product-card .lc-product-card__title {
  font-size: var(--lc-font-size-lg) !important;
}

.lc-product-carousel__row--bottom .lc-product-card .lc-product-card__price {
  font-size: var(--lc-font-size-lg) !important;
}

.lc-product-carousel__empty {
  text-align: center;
  color: var(--lc-color-text-muted);
  padding: var(--lc-spacing-xl) 0;
  font-family: var(--lc-font-family-base);
  font-size: var(--lc-font-size-base);
}

/* 5. RESPONSIVE TABLET & MOBILE */
@media screen and (max-width: 1024px) {
  .lc-product-carousel-section {
    padding-top: var(--lc-spacing-xl) !important;
    padding-bottom: var(--lc-spacing-xl) !important;
  }

  .lc-product-carousel__row--top,
  .lc-product-carousel__row--bottom {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: var(--lc-spacing-md) !important;
  }

  .lc-product-carousel__row--bottom .lc-product-carousel__col:last-child {
    grid-column: span 2 !important;
    max-width: 60% !important;
    margin: 0 auto !important;
    width: 100% !important;
  }
}

@media screen and (max-width: 576px) {
  .lc-product-carousel-section {
    padding-top: var(--lc-spacing-lg) !important;
    padding-bottom: var(--lc-spacing-lg) !important;
  }

  .lc-product-carousel__title {
    font-size: var(--lc-h2-size-sm) !important;
  }

  .lc-product-carousel__row--top,
  .lc-product-carousel__row--bottom {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: var(--lc-spacing-sm) !important;
  }

  .lc-product-carousel__row--bottom .lc-product-carousel__col:last-child {
    grid-column: span 2 !important;
    max-width: 100% !important;
  }
}