<ul class="product-list">
  <li class="product" tabindex='0'>
  <!--   product preview   -->
    <div class="top-container">
      <figure class="product-list-img">
        <img src="photo-1619799360829-6689343ca0bb.avif.webp" alt="">
      </figure>
      <!--   popover trigger   -->
      <button class="quickview" popovertarget="candle-01">
        Quick Shop
      </button>
    </div>
    <a class="product-list-meta" href="#">
      <h2 class="product-list-name">Levitate</h2>
      <p class="product-list-desc">vanilla with amber notes | 8oz</p>
      <p class="product-list-price">$24.99</p>
    </a>
    <!-- popover -->
    <div class="product-preview" id="candle-01" role="dialog" popover>
      <button class="close-btn" popovertarget="candle-01" popovertargetaction="hide">
        <span aria-hidden="true">❌</span>
        <p class="sr-only">Close</p>
      </button>
      <div class="product-preview-container">
        <figure>
         <img src="photo-1619799360829-6689343ca0bb.avif.webp" alt="">
      </figure>
        <div class="product-preview-meta">
          <h2 class="product-preview-name">Levitate</h2>
          <p class="product-preview-desc">vanilla and amber | 8oz | soy wax</p>
          <p class="product-preview-desc-long">Free your mind and spirit with the warm, sweet scent of vanilla and amber. This is a perfect, versatile scent for some you-time at home, or to enjoy with company. <br/><br/> Burn time: 30 hours.</p>
          <p class="product-preview-price">$24.99</p>
          <form class="add-to-cart-form" method="dialog">
              <label for="quantity">Quantity</label>
              <input type="number" id="quantity" value="1">
            <button class="add-to-cart-btn" type="submit">Add to Cart</button>
          </form>
        </div>
      </div>
   </div>
  </li>
  
  <li class="product" tabindex='0'>
  <!--   product preview   -->
    <div class="top-container">
      <figure class="product-list-img">
        <img src="photo-1557308917-ef00c7059bfd.avif.webp" alt="">
      </figure>
      <!--   popover trigger   -->
      <button class="quickview" popovertarget="candle-02">
        Quick Shop
      </button>
    </div>
    <a class="product-list-meta" href="#">
      <h2 class="product-list-name">Dry Hay</h2>
      <p class="product-list-desc">fresh oak | 8oz </p>
      <p class="product-list-price">$24.99</p>
    </a>
    <!-- popover -->
    <dialog class="product-preview" id="candle-02" role="dialog" popover>
      <button class="close-btn" popovertarget="candle-02" popovertargetaction="hide">
        <span aria-hidden="true">❌</span>
        <p class="sr-only">Close</p>
      </button>
      <div class="product-preview-container">
        <figure>
         <img src="photo-1557308917-ef00c7059bfd.avif.webp" alt="">
      </figure>
        <div class="product-preview-meta">
          <h2 class="product-preview-name">Dry Hay</h2>
          <p class="product-preview-desc">fresh oak | 8oz | soy wax</p>
          <p class="product-preview-desc-long">Take a step into nature with this oaky, fresh scrent that will bring you back to summer vacation in the country. <br/><br/> Burn time: 30 hours.</p>
          <p class="product-preview-price">$24.99</p>
          <form class="add-to-cart-form" method="dialog">
              <label for="quantity">Quantity</label>
              <input type="number" id="quantity" value="1">
            <button class="add-to-cart-btn" type="submit">Add to Cart</button>
          </form>
        </div>
      </div>
   </dialog>
  </li>
  
  <li class="product" tabindex='0'>
  <!--   product preview   -->
    <div class="top-container">
      <figure class="product-list-img">
        <img src="photo-1595055258834-8290e4181590.avif.webp" alt="">
      </figure>
      <!--   popover trigger   -->
      <button class="quickview" popovertarget="candle-03">
        Quick Shop
      </button>
    </div>
    <a class="product-list-meta" href="#">
      <h2 class="product-list-name">Pine Forest</h2>
      <p class="product-list-desc">pine and balsam | 12oz </p>
      <p class="product-list-price">$36.99</p>
    </a>
    <!-- popover -->
    <div class="product-preview" id="candle-03" role="dialog" popover>
      <button class="close-btn" popovertarget="candle-03" popovertargetaction="hide">
        <span aria-hidden="true">❌</span>
        <p class="sr-only">Close</p>
      </button>
      <div class="product-preview-container">
        <figure>
         <img src="photo-1595055258834-8290e4181590.avif.webp" alt="">
      </figure>
        <div class="product-preview-meta">
          <h2 class="product-preview-name">Pine Forest</h2>
          <p class="product-preview-desc">pine and balsam | 12oz | soy wax</p>
          <p class="product-preview-desc-long">Transport yourself into an earthy forest with notes of fresh pine and balsam. This candle is perfect for winding down on the weekend with a good book. <br/><br/> Burn time: 40 hours.</p>
          <p class="product-preview-price">$36.99</p>
          <form class="add-to-cart-form" method="dialog">
              <label for="quantity">Quantity</label>
              <input type="number" id="quantity" value="1">
            <button class="add-to-cart-btn" type="submit">Add to Cart</button>
          </form>
        </div>
      </div>
   </div>
  </li>
</ul>

@import url('https://fonts.googleapis.com/css2?family=Work+Sans:wght@400;800&display=swap');
/* Product list */
.product-list {
  display: grid;
  gap: 2rem;
  grid-template-columns: repeat(3, 1fr);
  max-width: 900px;
  margin: 0 auto;
}

.product {
  border: 1px solid lightgray;
  box-shadow: 5px 5px 20px gray;
  padding: 1rem;
  position: relative;
}

.quickview {
  position: absolute;
  display: none;
  bottom: 0;
  width: 100%;
  font-size: 1rem;
  padding: 0.5rem;
  font-family: 'Work Sans';
  backdrop-filter: blur(10px);
  background: rgba(255 255 255 / 0.5);
  border: none;
  cursor: pointer;
}

.product:hover .quickview,
.product:focus .quickview,
.product:focus-within .quickview {
  display: block;
}

.product-list-img {
  width: 100%;
  aspect-ratio: 1/1;
}

.top-container {
  position: relative;
}

.product-list-meta {
  text-decoration: none;
  color: #222;
  font-family: 'Work Sans';
  line-height: 1.4;
}

.product-list-name,
.product-preview-name{
  letter-spacing: 0.3px;
  font-weight: 800;
  text-transform: uppercase;
  margin-top: 0.5rem;
}

.product-list-desc,
.product-list-price {
  font-size: 14px;
}

.product-list-price {
  margin-top: 0.25rem;
}

/* Popover Styling */

.product-preview {
  /*  centering  */
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  box-shadow: 0 0 20px gray;
}

.product-preview-container {
  max-width: 600px;
  height: 450px;
  grid-template-columns: 1fr 1fr;
  display: grid;
  line-height: 1.4;
}

.product-preview::backdrop {
  background: rgb(210 215 220 / 0.6);
}

.close-btn {
  filter: grayscale();
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  background: none;
  border: none;
  font-size: 1.25rem;
}

.product-preview-meta {
  padding: 1rem;
  align-self: center;
}

.product-preview-name {
  font-size: 1.5rem;
  margin-bottom: 0.5rem;
}

.product-preview-desc {
  color: gray;
  font-style: italic;
  margin-bottom: 0.5rem;
}

.product-preview-price {
  font-weight: 800;
  margin-top: 1rem;
}

.add-to-cart-form {
  display: grid;
  grid-template-columns: auto 2.5rem 1fr;
  gap: 0.5rem;
}

.add-to-cart-btn {
  border: 1px solid;
  text-transform: uppercase;
  font-weight: 800;
}

/* Etc. */
/* Not layered bc Codepen's Reset isn't layered and overwrites these */
img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: bottom;
}

h2, label, button {
  font-family: 'Work Sans';
}

p {
  font-family: 'system-ui', sans-serif;
}

body {
  height: 100dvh;
  display: grid;
  place-items: center;
  padding: 1rem;
}

figure {
  overflow: hidden;
}

.sr-only:not(:focus):not(:active) {
  clip: rect(0 0 0 0); 
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap; 
  width: 1px;
}