Skincare Product Grid with New & Top Picks

<section class="text-stone-900 bg-[#f4eadf] w-full border-stone-200/80 border-t">
<link id="all-fonts-link-font-playfair" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600;700;900&amp;display=swap"><style id="all-fonts-style-font-playfair">.font-playfair { font-family: 'Playfair Display', serif !important; }</style>
  <div class="sm:px-6 lg:px-8 lg:py-20 max-w-6xl mr-auto ml-auto pt-14 pr-4 pb-14 pl-4">
    <!-- Header -->
    <div class="flex flex-col md:flex-row md:items-end md:justify-between gap-6 mb-10">
      <div class="">
        <p class="text-xs sm:text-sm font-medium tracking-[0.18em] uppercase text-stone-500 mb-3">
          SHOP THE RITUAL
        </p>
        <h2 class="font-playfair text-3xl sm:text-4xl lg:text-[2.6rem] leading-tight tracking-tight text-stone-900">
          Build a routine
          <span class="italic text-stone-700">that actually fits</span>
        </h2>
        <p class="mt-4 text-sm sm:text-base text-stone-700 max-w-xl">
          Start with something new, or anchor your ritual with the formulas our community refuses to skip.
        </p>
      </div>
      <div class="flex flex-wrap gap-3 text-xs sm:text-sm">
        <button class="inline-flex items-center gap-2 rounded-full bg-stone-900 text-[#f4eadf] px-4 py-2 font-medium hover:bg-stone-800 transition-colors">
          All products
          <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" viewBox="0 0 24 24" aria-hidden="true">
            <path fill="currentColor" d="M13.293 5.293a1 1 0 0 1 1.414 0l4 4a.997.997 0 0 1 .083.094l.007.01l.007.01a.997.997 0 0 1 .083.148l.003.01l.005.01A1 1 0 0 1 19.999 11v.003a1 1 0 0 1-.293.704l-4 4a1 1 0 0 1-1.414-1.414L16.586 12H6a1 1 0 1 1 0-2h10.586l-3.293-3.293a1 1 0 0 1 0-1.414Z" class=""></path>
          </svg>
        </button>
        <button class="inline-flex gap-2 hover:border-stone-500 hover:bg-stone-900/5 transition-colors font-medium text-stone-900 bg-[#f7efe4] border-stone-200 border rounded-full pt-2 pr-4 pb-2 pl-4 gap-x-2 gap-y-2 items-center">
          Routine quiz
          <svg xmlns="http://www.w3.org/2000/svg" class="w-[16px] h-[16px]" viewBox="0 0 24 24" aria-hidden="true" stroke-width="2" data-icon-replaced="true" style="color: rgb(28, 25, 23); width: 16px; height: 16px;">
            <path fill="currentColor" d="M12 2a7 7 0 0 1 7 7a6.98 6.98 0 0 1-3.053 5.777l-.122.08c-.827.52-1.325.88-1.325 1.643V17a1 1 0 0 0-2 0v.5c0 1.882 1.492 3.07 2.595 3.803l.199.129c.43.276.976.147 1.252-.283c.276-.43.147-.977-.283-1.253l-.267-.17C14.57 19.2 14 18.79 14 17.5c0-1.083.658-1.52 1.723-2.178A8.98 8.98 0 0 0 21 9a9 9 0 1 0-18 0a1 1 0 1 0 2 0a7 7 0 0 1 7-7Zm0 5a3 3 0 0 0-3 3a1 1 0 1 0 2 0a1 1 0 1 1 1.707.707c-.384.384-.707.733-.962 1.053C11.45 12.11 11 12.783 11 13.5V14a1 1 0 1 0 2 0v-.5c0-.21.213-.568.537-.974c.283-.355.646-.755 1.063-1.172A3 3 0 0 0 12 7Z" class=""></path>
          </svg>
        </button>
      </div>
    </div>

    <div class="space-y-10 lg:space-y-14">
      <!-- New Arrivals Row -->
      <section class="space-y-5">
        <div class="flex items-center justify-between gap-4">
          <div class="flex items-center gap-2">
            <span class="inline-flex items-center justify-center text-[0.7rem] font-medium text-stone-700 bg-white/70 w-6 h-6 border-stone-300 border rounded-full">
              New
            </span>
            <h3 class="text-base sm:text-lg font-medium tracking-tight text-stone-900">
              Fresh arrivals
            </h3>
          </div>
          <button class="hidden sm:inline-flex items-center gap-1.5 text-xs font-medium text-stone-700 hover:text-stone-900 transition-colors">
            View all new
            <svg xmlns="http://www.w3.org/2000/svg" class="w-3.5 h-3.5" viewBox="0 0 24 24" aria-hidden="true">
              <path fill="currentColor" d="M13.293 5.293a1 1 0 0 1 1.414 0l4 4a.997.997 0 0 1 .083.094l.007.01l.007.01a.997.997 0 0 1 .083.148l.003.01l.005.01A1 1 0 0 1 19.999 11v.003a1 1 0 0 1-.293.704l-4 4a1 1 0 1 1-1.414-1.414L16.586 12H6a1 1 0 1 1 0-2h10.586l-3.293-3.293a1 1 0 0 1 0-1.414Z" class=""></path>
            </svg>
          </button>
        </div>

        <div class="grid gap-5 sm:grid-cols-2 lg:grid-cols-3">
          <!-- New 1 -->
          <article
            class="group rounded-3xl border border-stone-200 bg-[#f7efe4] overflow-hidden flex flex-col shadow-sm hover:shadow-md hover:-translate-y-1 transition-all duration-200">
            <div class="relative">
              <div
                class="absolute inset-0 bg-gradient-to-t from-stone-900/20 via-transparent to-transparent pointer-events-none">
              </div>
              <img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/95221975-49b7-4db6-a8fe-15f9a78f1303_800w.webp" alt="Gentle night mask" class="sm:h-56 w-full h-48 object-cover">
              <div class="absolute top-3 left-3">
                <span class="inline-flex items-center px-2.5 py-1 rounded-full text-[0.68rem] font-medium bg-stone-900 text-[#f4eadf] shadow-sm">
                  Just launched
                </span>
              </div>
            </div>
            <div class="flex-1 flex flex-col px-5 py-5 sm:px-6 sm:py-6">
              <div class="flex items-start justify-between gap-3">
                <div>
                  <h4 class="font-playfair text-lg font-semibold tracking-tight text-stone-900">
                    Midnight Recovery Mask
                  </h4>
                  <p class="mt-1 text-xs sm:text-sm text-stone-700">
                    An overnight gel-cream mask with microalgae and beta-glucan to visibly soften morning redness.
                  </p>
                </div>
                <div class="flex flex-col items-end text-xs text-stone-700">
                  <span class="font-semibold">$54</span>
                  <span class="text-stone-500 mt-0.5">60 ml</span>
                </div>
              </div>
              <div class="mt-4 flex items-center justify-between gap-3 text-[0.72rem] sm:text-xs">
                <div class="flex items-center gap-1.5 text-stone-700">
                  <span class="w-1.5 h-1.5 rounded-full bg-stone-900"></span>
                  <span>Ideal 2–3 nights per week</span>
                </div>
                <button class="inline-flex items-center gap-1.5 rounded-full bg-stone-900 text-[#f4eadf] px-3 py1.5 font-medium hover:bg-stone-800 transition-colors">
                  Add
                  <svg xmlns="http://www.w3.org/2000/svg" class="w-3.5 h-3.5" viewBox="0 0 24 24" aria-hidden="true">
                    <path fill="currentColor" d="M12 5a1 1 0 0 1 1 1v5h5a1 1 0 1 1 0 2h-5v5a1 1 0 1 1-2 0v-5H6a1 1 0 1 1 0-2h5V6a1 1 0 0 1 1-1Z" class=""></path>
                  </svg>
                </button>
              </div>
            </div>
          </article>

          <!-- New 2 -->
          <article
            class="group rounded-3xl border border-stone-200 bg-[#f7efe4] overflow-hidden flex flex-col shadow-sm hover:shadow-md hover:-translate-y-1 transition-all duration-200">
            <div class="relative">
              <div
                class="absolute inset-0 bg-gradient-to-t from-stone-900/20 via-transparent to-transparent pointer-events-none">
              </div>
              <img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/1d661cf7-dc20-4e73-b462-15d75ebcce7f_800w.jpg" alt="Soothing cleansing oil" class="sm:h-56 w-full h-48 object-cover">
              <div class="absolute top-3 left-3">
                <span class="inline-flex items-center px-2.5 py-1 rounded-full text-[0.68rem] font-medium bg-stone-900/90 text-[#f4eadf] border border-stone-200/80">
                  Limited run
                </span>
              </div>
            </div>
            <div class="flex-1 flex flex-col px-5 py-5 sm:px-6 sm:py-6">
              <div class="flex items-start justify-between gap-3">
                <div class="">
                  <h4 class="font-playfair text-lg font-semibold tracking-tight text-stone-900">
                    Velvet Oil Cleanser
                  </h4>
                  <p class="mt-1 text-xs sm:text-sm text-stone-700">
                    A cushiony first cleanse with meadowfoam and plum oil that rinses clean without a separate
                    washcloth.
                  </p>
                </div>
                <div class="flex flex-col items-end text-xs text-stone-700">
                  <span class="font-semibold">$36</span>
                  <span class="text-stone-500 mt-0.5">150 ml</span>
                </div>
              </div>
              <div class="mt-4 flex items-center justify-between gap-3 text-[0.72rem] sm:text-xs">
                <div class="flex items-center gap-1.5 text-stone-700">
                  <span class="w-1.5 h-1.5 rounded-full bg-stone-900"></span>
                  <span>Best for dry &amp; reactive skin</span>
                </div>
                <button class="inline-flex items-center gap-1.5 rounded-full border border-stone-300 bg-white/70 px-3 py-1.5 font-medium text-stone-900 hover:bg-white transition-colors">
                  Add
                  <svg xmlns="http://www.w3.org/2000/svg" class="w-3.5 h-3.5" viewBox="0 0 24 24" aria-hidden="true">
                    <path fill="currentColor" d="M12 5a1 1 0 0 1 1 1v5h5a1 1 0 1 1 0 2h-5v5a1 1 0 1 1-2 0v-5H6a1 1 0 1 1 0-2h5V6a1 1 0 0 1 1-1Z" class=""></path>
                  </svg>
                </button>
              </div>
            </div>
          </article>

          <!-- New 3 -->
          <article
            class="group rounded-3xl border border-stone-200 bg-[#f7efe4] overflow-hidden flex flex-col shadow-sm hover:shadow-md hover:-translate-y-1 transition-all duration-200">
            <div class="relative">
              <div
                class="absolute inset-0 bg-gradient-to-t from-stone-900/20 via-transparent to-transparent pointer-events-none">
              </div>
              <img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/c18290e4-e8fb-4831-9a08-0dc9f7fea7d2_800w.jpg" alt="Lightweight daily moisturizer" class="sm:h-56 w-full h-48 object-cover">
              <div class="absolute top-3 left-3">
                <span class="inline-flex items-center px-2.5 py-1 rounded-full text-[0.68rem] font-medium bg-stone-900 text-[#f4eadf]">
                  New shade-safe
                </span>
              </div>
            </div>
            <div class="flex-1 flex flex-col px-5 py-5 sm:px-6 sm:py-6">
              <div class="flex items-start justify-between gap-3">
                <div class="">
                  <h4 class="font-playfair text-lg font-semibold tracking-tight text-stone-900">
                    Daylight Dew SPF 30
                  </h4>
                  <p class="mt-1 text-xs sm:text-sm text-stone-700">
                    Mineral SPF that disappears on every undertone and layers smoothly under makeup or bare skin.
                  </p>
                </div>
                <div class="flex flex-col items-end text-xs text-stone-700">
                  <span class="font-semibold">$48</span>
                  <span class="text-stone-500 mt-0.5">50 ml</span>
                </div>
              </div>
              <div class="mt-4 flex items-center justify-between gap-3 text-[0.72rem] sm:text-xs">
                <div class="flex items-center gap-1.5 text-stone-700">
                  <span class="w-1.5 h-1.5 rounded-full bg-stone-900"></span>
                  <span>No white cast, zero fragrance</span>
                </div>
                <button class="inline-flex items-center gap-1.5 rounded-full border border-stone-300 bg-white/70 px-3 py-1.5 font-medium text-stone-900 hover:bg-white transition-colors">
                  Add
                  <svg xmlns="http://www.w3.org/2000/svg" class="w-3.5 h-3.5" viewBox="0 0 24 24" aria-hidden="true">
                    <path fill="currentColor" d="M12 5a1 1 0 0 1 1 1v5h5a1 1 0 1 1 0 2h-5v5a1 1 0 1 1-2 0v-5H6a1 1 0 1 1 0-2h5V6a1 1 0 0 1 1-1Z" class=""></path>
                  </svg>
                </button>
              </div>
            </div>
          </article>
        </div>
      </section>

      <!-- Top Products Row (now with images) -->
      <section class="space-y-5">
        <div class="flex items-center justify-between gap-4">
          <div class="flex items-center gap-2">
            <span class="inline-flex h-6 w-6 items-center justify-center rounded-full bg-white/70 border border-stone-300 text-[0.7rem] font-medium text-stone-800">
              ★
            </span>
            <h3 class="text-base sm:text-lg font-medium tracking-tight text-stone-900">
              Community favorites
            </h3>
          </div>
          <button class="hidden sm:inline-flex items-center gap-1.5 text-xs font-medium text-stone-700 hover:text-stone-900 transition-colors">
            View all top rated
            <svg xmlns="http://www.w3.org/2000/svg" class="w-3.5 h-3.5" viewBox="0 0 24 24 aria-hidden='true'">
              <path fill="currentColor" d="M13.293 5.293a1 1 0 0 1 1.414 0l4 4a.997.997 0 0 1 .083.094l.007.01l.007.01a.997.997 0 0 1 .083.148l.003.01l.005.01A1 1 0 0 1 19.999 11v.003a1 1 0 0 1-.293.704l-4 4a1 1 0 1 1-1.414-1.414L16.586 12H6a1 1 0 1 1 0-2h10.586l-3.293-3.293a1 1 0 0 1 0-1.414Z" class=""></path>
            </svg>
          </button>
        </div>

        <div class="grid gap-5 sm:grid-cols-2 lg:grid-cols-3 gap-x-5 gap-y-5">
          <!-- Top 1 -->
          <article
            class="group rounded-3xl border border-stone-200 bg-[#f7efe4] px-5 py-5 sm:px-6 sm:py-6 flex flex-col shadow-sm hover:shadow-md hover:-translate-y-1 transition-all duration-200">
            <div class="relative mb-4 rounded-2xl overflow-hidden">
              <img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/bd1db224-b438-47b5-8cb4-6744fbdc7fa2_800w.jpg" alt="Lumina Barrier Serum bottle" class="sm:h-40 w-full h-32 object-cover">
            </div>
            <div class="flex items-start justify-between gap-3">
              <div>
                <p class="text-[0.7rem] font-medium tracking-[0.18em] uppercase text-stone-600 mb-1.5">
                  BESTSELLER
                </p>
                <h4 class="font-playfair text-lg font-semibold tracking-tight text-stone-900">
                  Lumina Barrier Serum
                </h4>
                <p class="mt-1 text-xs sm:text-sm text-stone-700">
                  The nightly essential that anchors most of our routines, now with 10% glycerin and calming botanicals.
                </p>
              </div>
              <div class="flex flex-col items-end text-xs text-stone-700">
                <span class="font-semibold">$42</span>
                <span class="mt-0.5 text-stone-500">30 ml</span>
              </div>
            </div>
            <div class="mt-4 flex items-center justify-between gap-3 text-[0.72rem] sm:text-xs">
              <div class="flex items-center gap-1.5 text-stone-700">
                <div class="flex items-center text-amber-400">
                  <svg xmlns="http://www.w3.org/2000/svg" class="w-3.5 h-3.5" viewBox="0 0 24 24" aria-hidden="true">
                    <path fill="currentColor"
                      d="M10.92 2.868a1.25 1.25 0 0 1 2.16 0l2.795 4.798l5.428 1.176a1.25 1.25 0 0 1 .667 2.054l-3.7 4.141l.56 5.525a1.25 1.25 0 0 1-1.748 1.27L12 19.592l-5.082 2.24a1.25 1.25 0 0 1-1.748-1.27l.56-5.525l-3.7-4.14a1.25 1.25 0 0 1 .667-2.055l5.428-1.176z"
                      class=""></path>
                  </svg>
                  <span class="ml-0.5">4.9</span>
                </div>
                <span class="text-stone-500">• 1,203 reviews</span>
              </div>
              <button class="inline-flex items-center gap-1.5 rounded-full bg-stone-900 text-[#f4eadf] px-3 py-1.5 font-medium hover:bg-stone-800 transition-colors">
                Add
                <svg xmlns="http://www.w3.org/2000/svg" class="w-3.5 h-3.5" viewBox="0 0 24 24" aria-hidden="true">
                  <path fill="currentColor" d="M12 5a1 1 0 0 1 1 1v5h5a1 1 0 1 1 0 2h-5v5a1 1 0 1 1-2 0v-5H6a1 1 0 1 1 0-2h5V6a1 1 0 0 1 1-1Z" class=""></path>
                </svg>
              </button>
            </div>
            <p class="mt-3 text-[0.7rem] text-stone-600 line-clamp-2">
              “This is the only serum that calms my cheeks after a long day in office air.”
            </p>
          </article>

          <!-- Top 2 -->
          <article
            class="group rounded-3xl border border-stone-200 bg-[#f7efe4] px-5 py-5 sm:px-6 sm:py-6 flex flex-col shadow-sm hover:shadow-md hover:-translate-y-1 transition-all duration-200">
            <div class="relative mb-4 rounded-2xl overflow-hidden">
              <img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/b2edfce5-c681-4885-a065-002de436d9b4_800w.jpg" alt="Cloud Melt Cleansing Gel bottle" class="sm:h-40 w-full h-32 object-cover">
            </div>
            <div class="flex items-start justify-between gap-3">
              <div>
                <p class="text-[0.7rem] font-medium tracking-[0.18em] uppercase text-stone-600 mb-1.5">
                  MOST LOVED CLEANSER
                </p>
                <h4 class="font-playfair text-lg font-semibold tracking-tight text-stone-900">
                  Cloud Melt Cleansing Gel
                </h4>
                <p class="mt-1 text-xs sm:text-sm text-stone-700">
                  A low-foam, pH-balanced gel that removes SPF and city air without leaving your skin tight.
                </p>
              </div>
              <div class="flex flex-col items-end text-xs text-stone-700">
                <span class="font-semibold">$29</span>
                <span class="mt-0.5 text-stone-500">120 ml</span>
              </div>
            </div>
            <div class="mt-4 flex items-center justify-between gap-3 text-[0.72rem] sm:text-xs">
              <div class="flex items-center gap-1.5 text-stone-700">
                <div class="flex items-center text-amber-400">
                  <svg xmlns="http://www.w3.org/2000/svg" class="w-3.5 h-3.5" viewBox="0 0 24 24" aria-hidden="true">
                    <path fill="currentColor"
                      d="M10.92 2.868a1.25 1.25 0 0 1 2.16 0l2.795 4.798l5.428 1.176a1.25 1.25 0 0 1 .667 2.054l-3.7 4.141l.56 5.525a1.25 1.25 0 0 1-1.748 1.27L12 19.592l-5.082 2.24a1.25 1.25 0 0 1-1.748-1.27l.56-5.525l-3.7-4.14a1.25 1.25 0 0 1 .667-2.055l5.428-1.176z"
                      class=""></path>
                  </svg>
                  <span class="ml-0.5">4.8</span>
                </div>
                <span class="text-stone-500">• 839 reviews</span>
              </div>
              <button class="inline-flex items-center gap-1.5 rounded-full border border-stone-300 bg-white/70 px-3 py-1.5 font-medium text-stone-900 hover:bg-white transition-colors">
                Add
                <svg xmlns="http://www.w3.org/2000/svg" class="w-3.5 h-3.5" viewBox="0 0 24 24" aria-hidden="true">
                  <path fill="currentColor" d="M12 5a1 1 0 0 1 1 1v5h5a1 1 0 1 1 0 2h-5v5a1 1 0 1 1-2 0v-5H6a1 1 0 1 1 0-2h5V6a1 1 0 0 1 1-1Z" class=""></path>
                </svg>
              </button>
            </div>
            <p class="mt-3 text-[0.7rem] text-stone-600 line-clamp-2">
              “Feels like water, cleans like a dream. My barrier finally feels quiet again.”
            </p>
          </article>

          <!-- Top 3 -->
          <article
            class="group rounded-3xl border border-stone-200 bg-[#f7efe4] px-5 py-5 sm:px-6 sm:py-6 flex flex-col shadow-sm hover:shadow-md hover:-translate-y-1 transition-all duration-200">
            <div class="relative mb-4 rounded-2xl overflow-hidden">
              <img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/335dee2e-eeef-4292-8168-ea58d3eeca44_800w.jpg" alt="Velvet Lock Moisture Cream jar" class="sm:h-40 w-full h-32 object-cover">
            </div>
            <div class="flex items-start justify-between gap-3">
              <div class="">
                <p class="text-[0.7rem] font-medium tracking-[0.18em] uppercase text-stone-600 mb-1.5">
                  NIGHT CREAM
                </p>
                <h4 class="font-playfair text-lg font-semibold tracking-tight text-stone-900">
                  Velvet Lock Moisture Cream
                </h4>
                <p class="mt-1 text-xs sm:text-sm text-stone-700">
                  A breathable but cocooning cream that seals in hydration and helps reduce overnight moisture loss.
                </p>
              </div>
              <div class="flex flex-col items-end text-xs text-stone-700">
                <span class="font-semibold">$38</span>
                <span class="mt-0.5 text-stone-500">50 ml</span>
              </div>
            </div>
            <div class="mt-4 flex items-center justify-between gap-3 text-[0.72rem] sm:text-xs">
              <div class="flex items-center gap-1.5 text-stone-700">
                <div class="flex items-center text-amber-400">
                  <svg xmlns="http://www.w3.org/2000/svg" class="w-3.5 h-3.5" viewBox="0 0 24 24" aria-hidden="true">
                    <path fill="currentColor"
                      d="M10.92 2.868a1.25 1.25 0 0 1 2.16 0l2.795 4.798l5.428 1.176a1.25 1.25 0 0 1 .667 2.054l-3.7 4.141l.56 5.525a1.25 1.25 0 0 1-1.748 1.27L12 19.592l-5.082 2.24a1.25 1.25 0 0 1-1.748-1.27l.56-5.525l-3.7-4.14a1.25 1.25 0 0 1 .667-2.055l5.428-1.176z"
                      class=""></path>
                  </svg>
                  <span class="ml-0.5">4.9</span>
                </div>
                <span class="text-stone-500">• 612 reviews</span>
              </div>
              <button class="inline-flex items-center gap-1.5 rounded-full border border-stone-300 bg-white/70 px-3 py-1.5 font-medium text-stone-900 hover:bg-white transition-colors">
                Add
                <svg xmlns="http://www.w3.org/2000/svg" class="w-3.5 h-3.5" viewBox="0 0 24 24" aria-hidden="true">
                  <path fill="currentColor" d="M12 5a1 1 0 0 1 1 1v5h5a1 1 0 1 1 0 2h-5v5a1 1 0 1 1-2 0v-5H6a1 1 0 1 1 0-2h5V6a1 1 0 0 1 1-1Z" class=""></path>
                </svg>
              </button>
            </div>
            <p class="mt-3 text-[0.7rem] text-stone-600 line-clamp-2">
              “My face still feels cushioned in the morning, but never greasy. Instant repurchase.”
            </p>
          </article>
        </div>
      </section>
    </div>
  </div>
</section>