Product Detail 03

<!-- Paste markup into an Embed, or recreate as native elements.
     Styles below map 1:1 to the class names above. -->
<section class="product_component">
  <div class="product_layout">
    <div class="product_gallery">
      <div class="product_stage">
        <p class="product_badge">New drop</p>
        <img class="product_image" src="https://pub-8060008fc1ab494c98adf87ab62286c4.r2.dev/assets/inspiration/section-product-detail-playful-tokens-3-1-12.webp" alt="Loop ceramic travel mug in warm cream" />
      </div>
      <div class="product_thumbs">
        <img class="product_thumb" src="https://pub-8060008fc1ab494c98adf87ab62286c4.r2.dev/assets/inspiration/section-product-detail-playful-tokens-3-2-13.webp" alt="Mug side view" />
        <img class="product_thumb" src="https://pub-8060008fc1ab494c98adf87ab62286c4.r2.dev/assets/inspiration/section-product-detail-playful-tokens-3-3-14.webp" alt="Mug lid detail" />
        <img class="product_thumb" src="https://pub-8060008fc1ab494c98adf87ab62286c4.r2.dev/assets/inspiration/section-product-detail-playful-tokens-3-4-15.webp" alt="Mug held in hand" />
      </div>
    </div>
    <div class="product_info">
      <ul class="product_chiprow">
        <li class="product_chip">Leak-proof</li>
        <li class="product_chip">Keeps warm 8h</li>
        <li class="product_chip">Dishwasher safe</li>
      </ul>
      <h1 class="product_title">The Loop Mug</h1>
      <div class="product_pricerow">
        <p class="product_price">$32</p>
        <p class="product_compare">$40</p>
        <p class="product_save">Save 20%</p>
      </div>
      <p class="product_rating">★★★★★  4.9 · 2,140 happy sippers</p>
      <p class="product_desc">A double-wall ceramic tumbler that fits your hand, your bag, and your caffeine habit. The silicone loop clips to anything, the lid actually seals, and it looks good doing it.</p>
      <p class="product_optlabel">Pick your color</p>
      <ul class="product_options">
        <li class="product_option_active">Coral</li>
        <li class="product_option">Cream</li>
        <li class="product_option">Sage</li>
      </ul>
      <div class="product_actions">
        <button class="product_cart">Add to cart — $32</button>
        <button class="product_wish">♡ Save</button>
      </div>
      <ul class="product_perks">
        <li class="product_perk">✦  Free shipping over $40 — arrives in 2–4 days</li>
        <li class="product_perk">✦  30-day no-fuss returns, no questions asked</li>
      </ul>
    </div>
  </div>
</section>

<style>
.product_component {
  width:100%;
  box-sizing:border-box;
  background:#fdf7ee;
  padding:80px 24px;
  font-family:'Inter',-apple-system,'Segoe UI',sans-serif;
}

.product_layout {
  max-width:1120px;
  margin:0 auto;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:56px;
  align-items:start;
}

.product_gallery {
  display:flex;
  flex-direction:column;
  gap:16px;
}

.product_stage {
  position:relative;
  background:#ffe8d6;
  border-radius:32px;
  padding:24px;
  overflow:hidden;
}

.product_badge {
  position:absolute;
  top:20px;
  left:20px;
  background:#ff5a5f;
  color:#ffffff;
  font-size:13px;
  font-weight:700;
  border-radius:999px;
  padding:7px 16px;
  margin:0;
  letter-spacing:0.02em;
}

.product_image {
  width:100%;
  height:440px;
  object-fit:contain;
  border-radius:20px;
  display:block;
}

.product_thumbs {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px;
}

.product_thumb {
  width:100%;
  height:120px;
  object-fit:cover;
  border-radius:20px;
  background:#fbe3cf;
  display:block;
}

.product_info {
  display:flex;
  flex-direction:column;
}

.product_chiprow {
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  list-style:none;
  padding:0;
  margin:0 0 20px 0;
}

.product_chip {
  background:#fff2e0;
  color:#26221d;
  font-size:13px;
  font-weight:600;
  border-radius:999px;
  padding:7px 14px;
}

.product_title {
  color:#1c1917;
  font-size:46px;
  line-height:1.02;
  font-weight:800;
  margin:0 0 16px 0;
  letter-spacing:-0.02em;
}

.product_pricerow {
  display:flex;
  align-items:baseline;
  gap:14px;
  margin-bottom:10px;
}

.product_price {
  color:#ff5a5f;
  font-size:34px;
  font-weight:800;
  margin:0;
}

.product_compare {
  color:#a8a29e;
  font-size:20px;
  font-weight:600;
  text-decoration:line-through;
  margin:0;
}

.product_save {
  background:#1c1917;
  color:#ffffff;
  font-size:12px;
  font-weight:700;
  border-radius:999px;
  padding:5px 11px;
  margin:0;
}

.product_rating {
  color:#78716c;
  font-size:14px;
  font-weight:500;
  margin:0 0 22px 0;
}

.product_desc {
  color:#57534e;
  font-size:16px;
  line-height:1.65;
  margin:0 0 28px 0;
  max-width:460px;
}

.product_optlabel {
  color:#1c1917;
  font-size:13px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.08em;
  margin:0 0 12px 0;
}

.product_options {
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  list-style:none;
  padding:0;
  margin:0 0 32px 0;
}

.product_option_active {
  background:#ff5a5f;
  color:#ffffff;
  font-size:15px;
  font-weight:700;
  border-radius:999px;
  padding:11px 22px;
  border:2px solid #ff5a5f;
  cursor:pointer;
}

.product_option {
  background:transparent;
  color:#1c1917;
  font-size:15px;
  font-weight:700;
  border-radius:999px;
  padding:11px 22px;
  border:2px solid #e7e0d6;
  cursor:pointer;
}

.product_actions {
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  margin-bottom:28px;
}

.product_cart {
  background:#ff5a5f;
  color:#ffffff;
  font-size:17px;
  font-weight:700;
  border-radius:999px;
  padding:17px 38px;
  border:0;
  cursor:pointer;
  flex-grow:1;
  box-shadow:0 10px 24px rgba(255,90,95,0.32);
}

.product_wish {
  background:#ffffff;
  color:#1c1917;
  font-size:17px;
  font-weight:700;
  border-radius:999px;
  padding:17px 26px;
  border:2px solid #e7e0d6;
  cursor:pointer;
}

.product_perks {
  display:flex;
  flex-direction:column;
  gap:10px;
  list-style:none;
  padding:24px 0 0 0;
  margin:0;
  border-top:2px solid #efe7db;
}

.product_perk {
  color:#44403c;
  font-size:15px;
  font-weight:500;
}
</style>