<section data-component-type="Content" class="w-full py-20 px-[24px] lg:px-10 md:py-12 md:px-6 sm:py-8 sm:px-4" data-component-slug="clothing-template-category-tab">
  

  <div class="max-w-[1728px] mx-auto grid grid-cols-1 lg:grid-cols-[1.1fr_1fr] gap-10 lg:gap-20 items-start">
    <!-- Image Section -->
    <div class="rounded-3xl overflow-hidden" id="tabImage">
      <img src="{{tab_1_image}}" data-node="tab_1_image" data-node-type="file" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1766744574/seltrix/templates/clothing-template/category-tab.webp" alt="Tab Image" class="w-full h-[700px] object-cover object-top block tab-content-animated">
    </div>

    <div class="flex flex-col gap-5 md:gap-3.5">
      <!-- Tab Buttons -->
      <div class="flex gap-3 flex-wrap mb-4" id="tabContainer">
        <button data-tab="1" class="tab-btn text-sm px-5 py-2 rounded-lg border border-black bg-[#010609] text-white cursor-pointer transition-all duration-200">
          <span data-node="tab_1_label" data-node-type="text" data-node-default="Hoodies">{{tab_1_label}}</span>
        </button>
        <button data-tab="2" class="tab-btn text-sm px-5 py-2 rounded-lg border border-black bg-transparent cursor-pointer transition-all duration-200">
          <span data-node="tab_2_label" data-node-type="text" data-node-default="Sweatshirts">{{tab_2_label}}</span>
        </button>
        <button data-tab="3" class="tab-btn text-sm px-5 py-2 rounded-lg border border-black bg-transparent cursor-pointer transition-all duration-200">
          <span data-node="tab_3_label" data-node-type="text" data-node-default="Tees">{{tab_3_label}}</span>
        </button>
        <button data-tab="4" class="tab-btn text-sm px-5 py-2 rounded-lg border border-black bg-transparent cursor-pointer transition-all duration-200">
          <span data-node="tab_4_label" data-node-type="text" data-node-default="Bottoms">{{tab_4_label}}</span>
        </button>
      </div>

      <!-- Title -->
      <h2 id="tabTitle" class="title-stroke font-black text-[45px] lg:text-[25px] md:text-[36px] sm:text-[28px] leading-none tab-content-animated">
        <span data-node="tab_1_title" data-node-type="text" data-node-default="Not just outfits. Whole moods.">{{tab_1_title}}</span>
      </h2>

      <!-- Description -->
      <p id="tabDesc" class="text-[20px] md:text-base leading-[110%] max-w-[625px] tab-content-animated">
        <span data-node="tab_1_desc" data-node-type="text" data-node-default="Zero effort, max vibe. Slide into hoodies, tees, and bottoms that always pass the mirror check.">{{tab_1_desc}}</span>
      </p>

      <!-- Features Grid -->
      <div id="tabFeatures" class="grid grid-cols-1 md:grid-cols-2 md:gap-y-[25px] gap-y-[15px] gap-x-5 md:gap-x-10 mb-[25px] tab-content-animated">
        <div class="flex items-center gap-4 text-[16px] md:text-[20px] md:text-base">
          <div class="w-8 h-8 flex items-center justify-center shrink-0">
            <img src="{{tick_icon}}" data-node="tick_icon" data-node-type="file" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1766994446/seltrix/templates/clothing-template/tick-tab.svg" alt="Tick" class="w-full h-full block">
          </div>
          <span data-node="tab_1_feature_1" data-node-type="text" data-node-default="Premium fabrics">{{tab_1_feature_1}}</span>
        </div>
        <div class="flex items-center gap-4 text-[16px] md:text-[20px] md:text-base">
          <div class="w-8 h-8 flex items-center justify-center shrink-0">
            <img src="{{tick_icon}}" alt="Tick" class="w-full h-full block">
          </div>
          <span data-node="tab_1_feature_2" data-node-type="text" data-node-default="Street-loud style">{{tab_1_feature_2}}</span>
        </div>
        <div class="flex items-center gap-4 text-[16px] md:text-[20px] md:text-base">
          <div class="w-8 h-8 flex items-center justify-center shrink-0">
            <img src="{{tick_icon}}" alt="Tick" class="w-full h-full block">
          </div>
          <span data-node="tab_1_feature_3" data-node-type="text" data-node-default="Real-body fits">{{tab_1_feature_3}}</span>
        </div>
        <div class="flex items-center gap-4 text-[16px] md:text-[20px] md:text-base">
          <div class="w-8 h-8 flex items-center justify-center shrink-0">
            <img src="{{tick_icon}}" alt="Tick" class="w-full h-full block">
          </div>
          <span data-node="tab_1_feature_4" data-node-type="text" data-node-default="Built-to-last wear">{{tab_1_feature_4}}</span>
        </div>
        <div class="flex items-center gap-4 text-[16px] md:text-[20px] md:text-base">
          <div class="w-8 h-8 flex items-center justify-center shrink-0">
            <img src="{{tick_icon}}" alt="Tick" class="w-full h-full block">
          </div>
          <span data-node="tab_1_feature_5" data-node-type="text" data-node-default="Feed-ready drops">{{tab_1_feature_5}}</span>
        </div>
        <div class="flex items-center gap-4 text-[16px] md:text-[20px] md:text-base">
          <div class="w-8 h-8 flex items-center justify-center shrink-0">
            <img src="{{tick_icon}}" alt="Tick" class="w-full h-full block">
          </div>
          <span data-node="tab_1_feature_6" data-node-type="text" data-node-default="Skin-friendly feel">{{tab_1_feature_6}}</span>
        </div>
        <div class="flex items-center gap-4 text-[16px] md:text-[20px] md:text-base">
          <div class="w-8 h-8 flex items-center justify-center shrink-0">
            <img src="{{tick_icon}}" alt="Tick" class="w-full h-full block">
          </div>
          <span data-node="tab_1_feature_7" data-node-type="text" data-node-default="Effortless returns">{{tab_1_feature_7}}</span>
        </div>
        <div class="flex items-center gap-4 text-[16px] md:text-[20px] md:text-base">
          <div class="w-8 h-8 flex items-center justify-center shrink-0">
            <img src="{{tick_icon}}" alt="Tick" class="w-full h-full block">
          </div>
          <span data-node="tab_1_feature_8" data-node-type="text" data-node-default="Weekend-proof quality">{{tab_1_feature_8}}</span>
        </div>
      </div>

      <!-- CTA Button -->
      <a id="tabCta" href="{{tab_1_btn_link}}" class="w-[213px] h-16 rounded-xl bg-[#010609] text-white text-[20px] md:text-base inline-flex items-center justify-center no-underline tab-content-animated" data-node="tab_1_btn_link" data-node-type="page_links" data-node-default="/collections">
        <span data-node="tab_1_btn_text" data-node-type="text" data-node-default="Start Flexing">{{tab_1_btn_text}}</span>
      </a>
    </div>
  </div>

  <!-- Hidden Tab Content Data -->
  <div class="hidden" id="tabContentData">
    <!-- Tab 1 Content -->
    <div data-tab-content="1">
      <img data-content="image" src="{{tab_1_image}}" data-node="tab_1_image" data-node-type="file" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1766744574/seltrix/templates/clothing-template/category-tab.webp" class="w-full h-full object-cover block tab-content-animated">
      <span data-content="title" data-node="tab_1_title" data-node-type="text" data-node-default="Not just outfits. Whole moods.">{{tab_1_title}}</span>
      <span data-content="desc" data-node="tab_1_desc" data-node-type="text" data-node-default="Zero effort, max vibe. Slide into hoodies, tees, and bottoms that always pass the mirror check.">{{tab_1_desc}}</span>
      <span data-content="feature_1" data-node="tab_1_feature_1" data-node-type="text" data-node-default="Premium fabrics">{{tab_1_feature_1}}</span>
      <span data-content="feature_2" data-node="tab_1_feature_2" data-node-type="text" data-node-default="Street-loud style">{{tab_1_feature_2}}</span>
      <span data-content="feature_3" data-node="tab_1_feature_3" data-node-type="text" data-node-default="Real-body fits">{{tab_1_feature_3}}</span>
      <span data-content="feature_4" data-node="tab_1_feature_4" data-node-type="text" data-node-default="Built-to-last wear">{{tab_1_feature_4}}</span>
      <span data-content="feature_5" data-node="tab_1_feature_5" data-node-type="text" data-node-default="Feed-ready drops">{{tab_1_feature_5}}</span>
      <span data-content="feature_6" data-node="tab_1_feature_6" data-node-type="text" data-node-default="Skin-friendly feel">{{tab_1_feature_6}}</span>
      <span data-content="feature_7" data-node="tab_1_feature_7" data-node-type="text" data-node-default="Effortless returns">{{tab_1_feature_7}}</span>
      <span data-content="feature_8" data-node="tab_1_feature_8" data-node-type="text" data-node-default="Weekend-proof quality">{{tab_1_feature_8}}</span>
      <a data-content="btn_link" href="{{tab_1_btn_link}}" data-node="tab_1_btn_link" data-node-type="page_links" data-node-default="/collections">{{tab_1_btn_link}}</a>
      <span data-content="btn_text" data-node="tab_1_btn_text" data-node-type="text" data-node-default="Start Flexing">{{tab_1_btn_text}}</span>
    </div>

    <!-- Tab 2 Content -->
    <div data-tab-content="2">
      <img data-content="image" src="{{tab_2_image}}" data-node="tab_2_image" data-node-type="file" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1766744637/seltrix/templates/clothing-template/Sweatshirts.webp" class="w-full h-full object-cover block tab-content-animated">
      <span data-content="title" data-node="tab_2_title" data-node-type="text" data-node-default="Cozy meets street-ready.">{{tab_2_title}}</span>
      <span data-content="desc" data-node="tab_2_desc" data-node-type="text" data-node-default="Soft enough for all-day comfort, bold enough to stand out. Sweatshirts that do the heavy lifting.">{{tab_2_desc}}</span>
      <span data-content="feature_1" data-node="tab_2_feature_1" data-node-type="text" data-node-default="Ultra-soft cotton blend">{{tab_2_feature_1}}</span>
      <span data-content="feature_2" data-node="tab_2_feature_2" data-node-type="text" data-node-default="Relaxed oversized fit">{{tab_2_feature_2}}</span>
      <span data-content="feature_3" data-node="tab_2_feature_3" data-node-type="text" data-node-default="Cozy fleece lining">{{tab_2_feature_3}}</span>
      <span data-content="feature_4" data-node="tab_2_feature_4" data-node-type="text" data-node-default="Pre-shrunk fabric">{{tab_2_feature_4}}</span>
      <span data-content="feature_5" data-node="tab_2_feature_5" data-node-type="text" data-node-default="Ribbed cuffs & hem">{{tab_2_feature_5}}</span>
      <span data-content="feature_6" data-node="tab_2_feature_6" data-node-type="text" data-node-default="Layering-friendly">{{tab_2_feature_6}}</span>
      <span data-content="feature_7" data-node="tab_2_feature_7" data-node-type="text" data-node-default="Machine washable">{{tab_2_feature_7}}</span>
      <span data-content="feature_8" data-node="tab_2_feature_8" data-node-type="text" data-node-default="Year-round wearable">{{tab_2_feature_8}}</span>
      <a data-content="btn_link" href="{{tab_2_btn_link}}" data-node="tab_2_btn_link" data-node-type="page_links" data-node-default="/sweatshirts">{{tab_2_btn_link}}</a>
      <span data-content="btn_text" data-node="tab_2_btn_text" data-node-type="text" data-node-default="Shop Sweatshirts">{{tab_2_btn_text}}</span>
    </div>

    <!-- Tab 3 Content -->
    <div data-tab-content="3">
      <img data-content="image" src="{{tab_3_image}}" data-node="tab_3_image" data-node-type="file" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1766744638/seltrix/templates/clothing-template/Tees.webp" class="w-full h-full object-cover block tab-content-animated">
      <span data-content="title" data-node="tab_3_title" data-node-type="text" data-node-default="Oversize. Over Everything.">{{tab_3_title}}</span>
      <span data-content="desc" data-node="tab_3_desc" data-node-type="text" data-node-default="The perfect base for any fit. Premium cotton, relaxed cuts, and prints that speak louder than words.">{{tab_3_desc}}</span>
      <span data-content="feature_1" data-node="tab_3_feature_1" data-node-type="text" data-node-default="100% premium cotton">{{tab_3_feature_1}}</span>
      <span data-content="feature_2" data-node="tab_3_feature_2" data-node-type="text" data-node-default="Drop shoulder design">{{tab_3_feature_2}}</span>
      <span data-content="feature_3" data-node="tab_3_feature_3" data-node-type="text" data-node-default="Boxy relaxed fit">{{tab_3_feature_3}}</span>
      <span data-content="feature_4" data-node="tab_3_feature_4" data-node-type="text" data-node-default="Heavyweight 280gsm">{{tab_3_feature_4}}</span>
      <span data-content="feature_5" data-node="tab_3_feature_5" data-node-type="text" data-node-default="Ribbed crew neck">{{tab_3_feature_5}}</span>
      <span data-content="feature_6" data-node="tab_3_feature_6" data-node-type="text" data-node-default="Screen-printed graphics">{{tab_3_feature_6}}</span>
      <span data-content="feature_7" data-node="tab_3_feature_7" data-node-type="text" data-node-default="Pre-washed softness">{{tab_3_feature_7}}</span>
      <span data-content="feature_8" data-node="tab_3_feature_8" data-node-type="text" data-node-default="Unisex sizing">{{tab_3_feature_8}}</span>
      <a data-content="btn_link" href="{{tab_3_btn_link}}" data-node="tab_3_btn_link" data-node-type="page_links" data-node-default="/tees">{{tab_3_btn_link}}</a>
      <span data-content="btn_text" data-node="tab_3_btn_text" data-node-type="text" data-node-default="Shop Tees">{{tab_3_btn_text}}</span>
    </div>

    <!-- Tab 4 Content -->
    <div data-tab-content="4">
      <img data-content="image" src="{{tab_4_image}}" data-node="tab_4_image" data-node-type="file" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1766744572/seltrix/templates/clothing-template/Bottoms.webp" class="w-full h-full object-cover block tab-content-animated">
      <span data-content="title" data-node="tab_4_title" data-node-type="text" data-node-default="Legs deserve love too.">{{tab_4_title}}</span>
      <span data-content="desc" data-node="tab_4_desc" data-node-type="text" data-node-default="From joggers to cargos, every pair built for movement, comfort, and serious style points.">{{tab_4_desc}}</span>
      <span data-content="feature_1" data-node="tab_4_feature_1" data-node-type="text" data-node-default="4-way stretch fabric">{{tab_4_feature_1}}</span>
      <span data-content="feature_2" data-node="tab_4_feature_2" data-node-type="text" data-node-default="Elastic waistband">{{tab_4_feature_2}}</span>
      <span data-content="feature_3" data-node="tab_4_feature_3" data-node-type="text" data-node-default="Deep cargo pockets">{{tab_4_feature_3}}</span>
      <span data-content="feature_4" data-node="tab_4_feature_4" data-node-type="text" data-node-default="Tapered leg design">{{tab_4_feature_4}}</span>
      <span data-content="feature_5" data-node="tab_4_feature_5" data-node-type="text" data-node-default="Drawstring adjustable">{{tab_4_feature_5}}</span>
      <span data-content="feature_6" data-node="tab_4_feature_6" data-node-type="text" data-node-default="Reinforced seams">{{tab_4_feature_6}}</span>
      <span data-content="feature_7" data-node="tab_4_feature_7" data-node-type="text" data-node-default="Wrinkle-resistant">{{tab_4_feature_7}}</span>
      <span data-content="feature_8" data-node="tab_4_feature_8" data-node-type="text" data-node-default="All-day comfort">{{tab_4_feature_8}}</span>
      <a data-content="btn_link" href="{{tab_4_btn_link}}" data-node="tab_4_btn_link" data-node-type="page_links" data-node-default="/bottoms">{{tab_4_btn_link}}</a>
      <span data-content="btn_text" data-node="tab_4_btn_text" data-node-type="text" data-node-default="Shop Bottoms">{{tab_4_btn_text}}</span>
    </div>
  </div>

  
</section>