<section data-component-type="Content" class="category-section">
  <style>
    .category-section {
      width: 100%;
      padding: 80px 100px;
    }

    .category-header {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      margin-bottom: 48px;
      gap: 40px;
    }

    .category-text {
      max-width: 830px;
    }

    .category-title {
      font-family: "Rajdhani", sans-serif;
      font-style: italic;
      font-size: 64px;
      font-weight: 900;
      line-height: 100%;
      color: #000;
      margin-bottom: 16px;
    }

    .category-desc {
      font-family: "Michroma", sans-serif;
      font-size: 20px;
      line-height: 100%;
      color: #000;

      max-width: 562px;
    }

    .category-arrows {
      display: flex;
      gap: 20px;
    }

    .arrow-btn {
      width: 99px;
      height: 99px;
      background: transparent;
      border: none;
      cursor: pointer;
      padding: 0;
    }

    .arrow-btn img {
      width: 100%;
      height: 100%;
      display: block;
    }

    .category-slider-wrapper {
      width: 100%;
      overflow: hidden;
    }

    .category-slider {
      display: flex;
      gap: 24px;
      transition: transform 0.5s ease;
    }

    .category-card {
      min-width: calc((100% - 72px) / 4);
    }
    .category-image {
      width: 100%;
      height: 517px;
      border-radius: 16px;
      overflow: hidden;
      margin-bottom: 16px;
    }

    .category-image img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }

    .category-name {
      font-family: "Michroma", sans-serif;
      font-size: 20px;
      color: #000;
      margin-bottom: 6px;
    }

    .category-caption {
      font-family: "Michroma", sans-serif;
      font-size: 16px;
      color: #000;
    }

    @media (max-width: 1024px) {
      .category-title {
        font-size: 48px;
      }
    }

    @media (max-width: 768px) {
      .category-section {
        padding: 60px 24px;
      }

      .category-header {
        flex-direction: column;
      }

      .category-title {
        font-size: 36px;
      }

      .category-card {
        min-width: 280px;
      }
    }

    @media (max-width: 480px) {
      .category-title {
        font-size: 28px;
      }

      .category-card {
        min-width: 260px;
      }
    }

    @media (max-width: 1200px) {
      .category-card {
        width: calc((100% - 24px) / 2); /* Tablet: 2 cards */
      }
    }

    @media (max-width: 768px) {
      .category-section {
        padding: 48px 20px;
      }

      .category-header {
        flex-direction: column;
        gap: 32px;
      }

      .category-arrows {
        align-self: flex-end;
      }

      .category-card {
        width: 100%;
      }

      .category-image {
        height: 420px;
      }
    }

    @media (max-width: 480px) {
      .category-image {
        height: 510px;
      }

      .category-title {
        font-size: 28px;
      }

      .category-desc {
        font-size: 16px;
      }
    }

    @media (max-width: 768px) {
      .category-arrows {
        position: relative;
        justify-content: center;
        gap: 16px;
        margin-top: 20px;
      }

      .arrow-btn {
        width: 52px;
        height: 52px;
      }

      .arrow-btn img {
        width: 100%;
        height: 100%;
      }
    }
  </style>

  <div class="category-header">
    <div class="category-text">
      <h2
        class="category-title"
        data-node="category_title"
        data-node-type="text"
        data-node-default="Wear It. Flex It. Repeat."
      >
        {{category_title}}
      </h2>

      <p
        class="category-desc"
        data-node="category_desc"
        data-node-type="text"
        data-node-default="Step into your main-character era. Our drops are built for the ones who don’t just follow trends — they start them."
      >
        {{category_desc}}
      </p>
    </div>

    <div class="category-arrows">
      <button class="arrow-btn" id="catPrev">
        <img src="../assets/Left arrow.svg" alt="Previous" />
      </button>
      <button class="arrow-btn" id="catNext">
        <img src="../assets/right arrow.svg" alt="Next" />
      </button>
    </div>
  </div>

  <div class="category-slider-wrapper">
    <div class="category-slider" id="categorySlider">
      <div class="category-card">
        <div class="category-image">
          <img
            src="{{card_1_image}}"
            data-node="card_1_image"
            data-node-type="file"
            data-node-default="../assets/Hoodies.webp"
          />
        </div>
        <h4
          class="category-name"
          data-node="card_1_title"
          data-node-type="text"
          data-node-default="Hoodies"
        >
          {{card_1_title}}
        </h4>
        <p
          class="category-caption"
          data-node="card_1_desc"
          data-node-type="text"
          data-node-default="Throw One on and Let the Fit Talk"
        >
          {{card_1_desc}}
        </p>
      </div>

      <div class="category-card">
        <div class="category-image">
          <img
            src="{{card_2_image}}"
            data-node="card_2_image"
            data-node-type="file"
            data-node-default="../assets/Sweatshirts.webp"
          />
        </div>
        <h4
          class="category-name"
          data-node="card_2_title"
          data-node-type="text"
          data-node-default="Sweatshirts"
        >
          {{card_2_title}}
        </h4>
        <p
          class="category-caption"
          data-node="card_2_desc"
          data-node-type="text"
          data-node-default="Sweats with a Statement"
        >
          {{card_2_desc}}
        </p>
      </div>

      <div class="category-card">
        <div class="category-image">
          <img
            src="{{card_3_image}}"
            data-node="card_3_image"
            data-node-type="file"
            data-node-default="../assets/Tees.webp"
          />
        </div>
        <h4
          class="category-name"
          data-node="card_3_title"
          data-node-type="text"
          data-node-default="Tees"
        >
          {{card_3_title}}
        </h4>
        <p
          class="category-caption"
          data-node="card_3_desc"
          data-node-type="text"
          data-node-default="Oversize. Over Everything"
        >
          {{card_3_desc}}
        </p>
      </div>

      <div class="category-card">
        <div class="category-image">
          <img
            src="{{card_4_image}}"
            data-node="card_4_image"
            data-node-type="file"
            data-node-default="../assets/Bottoms.webp"
          />
        </div>
        <h4
          class="category-name"
          data-node="card_4_title"
          data-node-type="text"
          data-node-default="Bottoms"
        >
          {{card_4_title}}
        </h4>
        <p
          class="category-caption"
          data-node="card_4_desc"
          data-node-type="text"
          data-node-default="Legs Deserve Love Too"
        >
          {{card_4_desc}}
        </p>
      </div>

      <div class="category-card">
        <div class="category-image">
          <img
            src="{{card_5_image}}"
            data-node="card_5_image"
            data-node-type="file"
            data-node-default="../assets/Hoodies.webp"
          />
        </div>
        <h4
          class="category-name"
          data-node="card_5_title"
          data-node-type="text"
          data-node-default="Hoodies"
        >
          {{card_5_title}}
        </h4>
        <p
          class="category-caption"
          data-node="card_5_desc"
          data-node-type="text"
          data-node-default="Throw One on and Let the Fit Talk"
        >
          {{card_5_desc}}
        </p>
      </div>

      <div class="category-card">
        <div class="category-image">
          <img
            src="{{card_6_image}}"
            data-node="card_6_image"
            data-node-type="file"
            data-node-default="../assets/Sweatshirts.webp"
          />
        </div>
        <h4
          class="category-name"
          data-node="card_6_title"
          data-node-type="text"
          data-node-default="Sweatshirts"
        >
          {{card_6_title}}
        </h4>
        <p
          class="category-caption"
          data-node="card_6_desc"
          data-node-type="text"
          data-node-default="Sweats with a Statement"
        >
          {{card_6_desc}}
        </p>
      </div>
    </div>
  </div>

  <script>
    const slider = document.getElementById("categorySlider");
    const nextBtn = document.getElementById("catNext");
    const prevBtn = document.getElementById("catPrev");

    const visibleCards = 4;
    let index = 0;

    function getCardStep() {
      const card = slider.querySelector(".category-card");
      const gap = 24;
      return card.offsetWidth + gap;
    }

    function maxIndex() {
      return slider.children.length - visibleCards;
    }

    nextBtn.addEventListener("click", () => {
      if (index < maxIndex()) index++;
      slider.style.transform = `translateX(-${index * getCardStep()}px)`;
    });

    prevBtn.addEventListener("click", () => {
      if (index > 0) index--;
      slider.style.transform = `translateX(-${index * getCardStep()}px)`;
    });

    window.addEventListener("resize", () => {
      slider.style.transform = `translateX(-${index * getCardStep()}px)`;
    });
  </script>
</section>
