/* ================================================================
   Category Landing – Front-end styles v2
   row (fixed height) → columns (equal width) → images (equal height)
   Max width: 1280px
   Mobile: keep column layout, reduce row height proportionally
   ================================================================ */

.cl-landing {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 0 2.5rem;
  box-sizing: border-box;
}

/* ── Full-width variant (no sidebar) ───────────────────────────── */
/*
  When the left column is empty the JS removes the col-lg-9/col-md-8
  classes from #center-column and adds col-12. Bootstrap's col-12 gives
  100% width, but we also add max-width: 100% to override any lingering
  theme constraints.
*/
#center-column.col-12 {
  max-width: 100%;
}

/* ── Title row ─────────────────────────────────────────────────── */
.cl-row--title {
  padding: 1.5rem 0 0.5rem;
  text-align: center;
}

.cl-title {
  font-size: 1.8rem;
  font-weight: 700;
  margin: 0;
  color: #011b56;
  display: block;
}

.cl-title-link {
  text-decoration: none;
  color: inherit;
  display: block;
}
.cl-title-link:hover .cl-title {
  color: #0b69f6;
}

.cl-subtitle {
  margin: 6px 0 0;
  font-size: 1rem;
  color: #666;
  font-weight: 400;
}

/* ── Image row ─────────────────────────────────────────────────── */
.cl-row--images {
  display: flex;
  flex-direction: row;  /* always side by side */
  gap: 8px;
  margin-top: 12px;
  width: 100%;
  box-sizing: border-box;
}

/* Row heights — desktop */
.cl-row--size-S { height: 300px; }
.cl-row--size-M { height: 450px; }
.cl-row--size-L { height: 600px; }

/* ── Columns ───────────────────────────────────────────────────── */
.cl-col {
  flex: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  overflow: hidden;
}

/* ── Images inside a column ────────────────────────────────────── */
.cl-img-item {
  flex: 1;
  width: 100%;
  overflow: hidden;
  border-radius: 6px;
  display: block;
  min-height: 0;
  position: relative;
}

.cl-img-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.35s ease;
}

.cl-img-item:hover img {
  transform: scale(1.04);
}

/* ── Tablet (769px – 1024px) ───────────────────────────────────── */
@media (max-width: 1024px) and (min-width: 769px) {
  .cl-row--size-S { height: 220px; }
  .cl-row--size-M { height: 320px; }
  .cl-row--size-L { height: 420px; }

  /* 4-col: wrap to 2x2 */
  .cl-row--cols-4 {
    flex-wrap: wrap;
    height: auto !important;
  }
  .cl-row--cols-4 .cl-col {
    flex: 0 0 calc(50% - 4px);
    height: 200px;
  }
}

/* ── Mobile (≤768px) ───────────────────────────────────────────── */
@media (max-width: 768px) {
  .cl-landing {
    padding: 0 8px 1.5rem;
  }

  .cl-row--images {
    gap: 5px;
  }

  .cl-row--size-S { height: 180px; }
  .cl-row--size-M { height: 260px; }
  .cl-row--size-L { height: 340px; }

  .cl-row--cols-4 {
    flex-wrap: wrap;
    height: auto !important;
  }
  .cl-row--cols-4 .cl-col {
    flex: 0 0 calc(50% - 3px);
    height: 150px;
  }

  .cl-img-item {
    border-radius: 4px;
  }

  .cl-title {
    font-size: 1.1rem;
  }
}

/* ── Products row ───────────────────────────────────────────────── */
.cl-row--products {
  margin-top: 20px;
}

.cl-products-header {
  margin-bottom: 16px;
}

.cl-products-category-name {
  font-size: 1.6rem;
  font-weight: 700;
  color: #011b56;
  margin: 0;
}

.cl-products-footer {
  text-align: center;
  margin-top: 24px;
}

.cl-products-btn {
  display: inline-block;
  padding: 10px 36px;
  border: 1px solid #0b69f6;
  border-radius: 0.25rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: #0b69f6;
  text-decoration: none;
  letter-spacing: 0.04em;
  transition: var(--bs-transition-default);
}
.cl-products-btn:hover {
  background: #0b69f6;
  color: #fff;
}

.cl-products-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
}

/* Card — mirrors .product-miniature__inner */
.cl-product-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid #bbd;
  border-radius: 0.9rem;
  box-shadow: 0 2px 8px rgba(0,0,0,0.07);
  overflow: hidden;
  transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}
@media (hover: hover) {
  .cl-product-card:hover {
    box-shadow: 0 6px 20px rgba(0,0,0,0.13);
    border-color: #c5cfe8;
  }
  .cl-product-card:hover .cl-product-img-wrap img {
    transform: scale(1.06);
  }
}

/* Image — mirrors .product-miniature__top, object-fit: contain like theme */
.cl-product-img-wrap {
  display: block;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: #f8f9fa;
  border-radius: 0.9rem 0.9rem 0 0;
}
.cl-product-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  transition: transform 0.3s ease;
}

/* Info area — mirrors .product-miniature__bottom */
.cl-product-info {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  gap: 0.375rem;
  padding: 0.875rem;
}

/* Price first like the theme */
.cl-product-price {
  font-size: 1rem;
  font-weight: 600;
  color: var(--bs-body-color);
  order: -1;
}

/* Title — mirrors .product-miniature__title */
.cl-product-name {
  font-size: 0.875rem;
  font-weight: 400;
  color: #0b69f6;
  text-decoration: none;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.cl-product-name:hover {
  color: #111;
  text-decoration: none;
}

/* ── Coloured background variant ───────────────────────────────── */
/*
  The Smarty template sets two inline CSS custom properties on the wrapper:
    --cl-font-color: <chosen hex>
    --cl-bg-color:   <chosen hex>
  plus the standard `color:` value for basic inheritance.
  Here we override every child element that has a hardcoded color so
  that the chosen font color actually wins.
*/
.cl-row--products-colored .cl-products-category-name {
  color: var(--cl-font-color, currentColor);
}

/* Prevent the wrapper's inline color from cascading into cards */
.cl-row--products-colored .cl-product-price {
  color: var(--bs-body-color);
}
.cl-row--products-colored .cl-product-name {
  color: #0b69f6;
}
.cl-row--products-colored .cl-product-name:hover {
  color: #111;
}

.cl-row--products-colored .cl-products-btn {
  border-color: var(--cl-font-color, currentColor);
  color: var(--cl-font-color, currentColor);
}
.cl-row--products-colored .cl-products-btn:hover {
  background-color: var(--cl-font-color, currentColor);
  color: var(--cl-bg-color, #fff);
}

@media (max-width: 767.98px) {
  .cl-products-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.625rem;
  }
}

@media (max-width: 479.98px) {
  .cl-products-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem;
  }
  .cl-product-info {
    padding: 0.625rem;
  }
  .cl-product-price {
    font-size: 0.95rem;
  }
}
@media (max-width: 480px) {
  .cl-row--size-S { height: 140px; }
  .cl-row--size-M { height: 200px; }
  .cl-row--size-L { height: 260px; }
}