*, *::before, *::after { box-sizing: border-box; }


    .product-section{
         background: #fff;
      /*font-family: 'DM Sans', sans-serif;*/
      min-height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 2rem 1rem;
    }

    .section-wrapper {
      width: 100%;
      max-width: 1100px;
    }

    /* ─── Cards Row ─── */
    .cards-row {
      display: flex;
      gap: 10px;
      height: 470px;
      align-items: stretch;
    }

    .prod-card {
      position: relative;
      flex: 1;
      border-radius: 16px;
      overflow: hidden;
      cursor: pointer;
      background: #4a4a4a;
      transition: flex 0.6s cubic-bezier(0.77, 0, 0.175, 1),
                  opacity 0.4s ease,
                  filter 0.4s ease;
      min-width: 0;
    }

    /* bg image (shown when collapsed) */
    .prod-card .card-bg {
      position: absolute;
      inset: 0;
      background-size: cover;
      background-position: center;
      transition: transform 0.6s ease;
      z-index: 0;
    }
    .prod-card:hover .card-bg { transform: scale(1.05); }

    .prod-card .card-overlay {
      position: absolute;
      inset: 0;
      background: linear-gradient(180deg, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0.60) 100%);
      z-index: 1;
    }


    /* ── Active / Inactive states ── */
    .cards-row.has-active .prod-card:not(.active) {
  flex: 0 0 15%;
  opacity: 0.5;
  filter: saturate(0.2);
}

.cards-row.has-active .prod-card.active {
  flex: 0 0 60%;
  transform: scale(1.01);
}
    .cards-row.has-active .prod-card.active .thumb-label  { opacity: 0; }
    .cards-row.has-active .prod-card:not(.active) .thumb-label { opacity: 1; }

    /* ── Expanded content: TOP image + BOTTOM text ── */
    .card-content {
      position: absolute;
      inset: 0;
      display: flex;
      flex-direction: column;      /* TOP image, BOTTOM text */
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.35s ease 0.2s;
      z-index: 4;
    }
    .prod-card.active .card-content {
      opacity: 1;
      pointer-events: all;
    }

    /* TOP — product image (55% of card height) */
    .content-top {
      height: 100%;
      flex-shrink: 0;
      overflow: hidden;
      position: relative;
    }
    .content-top img {
      width: 100%;
      height: 100%;
      object-position: center top;
      display: block;
    }
    /* gradient fade into the bottom text area */
    .content-top::after {
      content: '';
      position: absolute;
      bottom: 0; left: 0; right: 0;
      height: 40px;
      background: linear-gradient(to bottom, transparent, #1A5D65);
      pointer-events: none;
    }

    /* BOTTOM — text content (45% of card height) */
    .content-bottom {
      height: 45%;
      flex-shrink: 0;
      padding: 12px 18px 14px;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      background: #0D2E39;
      color: #fff;
      overflow: hidden;
    }

    .content-bottom .prod-title {
      font-family: 'Playfair Display', serif;
      font-size: 20px;
      font-weight: 700;
      line-height: 1.2;
      color: #fff;
      margin-bottom: 8px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .content-bottom .bullet-list {
      list-style: disc;
      padding-left: 16px;
      margin: 0 0 8px 0;
      flex: 1;
    }
    .content-bottom .bullet-list li {
      font-size: 11px;
      line-height: 1.6;
      color: rgba(255,255,255,0.65);
      margin-bottom: 1px;
    }

    .content-bottom .best-for {
      font-size: 11px;
      color: rgba(255,255,255,0.45);
      margin-bottom: 10px;
    }
    .content-bottom .best-for span {
      color: rgba(255,255,255,0.72);
    }

    .btn-learn {
      background: transparent;
      color: #fff;
      border: 1.5px solid rgba(255,255,255,0.5);
      border-radius: 6px;
      padding: 5px 14px;
      font-size: 11px;
      font-weight: 500;
      width: fit-content;
      cursor: pointer;
      text-decoration: none;
      display: inline-block;
      transition: background 0.2s, border-color 0.2s;
    }
    .btn-learn:hover {
      background: rgba(255,255,255,0.12);
      border-color: #fff;
      color: #fff;
    }

    /* ── Slider Section ── */
    .slider-section {
      overflow: hidden;
      max-height: 0;
      opacity: 0;
      transition: max-height 0.5s ease, opacity 0.4s ease, margin-top 0.4s ease;
      margin-top: 0;
    }
    .slider-section.visible {
      max-height: 200px;
      opacity: 1;
      margin-top: 16px;
    }

    .slider-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 10px;
    }
    .slider-label {
      font-size: 10px;
      font-weight: 500;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: rgba(255,255,255,0.4);
    }
    .slider-arrows {
      display: flex;
      gap: 6px;
    }
    .slider-arrows button {
      background: rgba(255,255,255,0.1);
      border: none;
      border-radius: 50%;
      width: 28px;
      height: 28px;
      color: rgba(255,255,255,0.7);
      font-size: 14px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background 0.2s;
    }
    .slider-arrows button:hover { background: rgba(255,255,255,0.22); }

    /*.slider-track {*/
    /*  display: flex;*/
    /*  gap: 10px;*/
    /*  overflow-x: auto;*/
    /*  padding-bottom: 6px;*/
    /*  scrollbar-width: none;*/
    /*  scroll-behavior: smooth;*/
    /*}*/
    /*.slider-track::-webkit-scrollbar { display: none; }*/

    /*.slide-item {*/
    /*  flex: 0 0 120px;*/
    /*  border-radius: 10px;*/
    /*  overflow: hidden;*/
    /*  cursor: pointer;*/
    /*  border: 2px solid transparent;*/
    /*   background: #2a2a2a; */
    /*  transition: border-color 0.2s, transform 0.2s;*/
    /*}*/
     .slider-track {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 6px;
  scrollbar-width: none;
  scroll-behavior: smooth;
  width: 100%;
}

.slide-item {
  min-width: 120px;
  flex-shrink: 0;
}
    .slide-item:hover { transform: translateY(-3px); }
    .slide-item.active-slide { border-color: rgba(255,255,255,0.75); }

    .slide-item img {
      width: 100%;
      height: 150px;
      border-radius:10px;
      object-fit: cover;
      display: block;
    }
    .slide-item-label {
      font-size: 10px;
      font-weight: 500;
      padding: 5px 7px;
      /* background: #1e1e1e; */
      color: rgba(255,255,255,0.7);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }