<!-- 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_inner">
    <div class="product_media">
      <div class="product_glow"></div>
      <img class="product_image" src="https://pub-8060008fc1ab494c98adf87ab62286c4.r2.dev/assets/inspiration/section-product-detail-forest-organic-1-1-12.webp" alt="Botanical wellness serum in an amber glass bottle resting on mossy stone" />
      <div class="product_badge">New Harvest</div>
    </div>
    <div class="product_content">
      <p class="product_eyebrow">Wild-Grown Botanicals</p>
      <h1 class="product_title">Evergreen Renewal Serum</h1>
      <div class="product_pricerow">
        <p class="product_price">$68</p>
        <p class="product_priceold">$84</p>
        <p class="product_pricenote">Free carbon-neutral shipping</p>
      </div>
      <p class="product_desc">A featherlight facial oil pressed from cold-extracted moss adaptogens and forest-floor mushrooms. Restores moisture, calms redness, and leaves skin with a quiet, dewy resilience — season after season.</p>
      <ul class="product_features">
        <li class="product_feature">100% wild-foraged, third-party purity tested</li>
        <li class="product_feature">Refillable amber glass, plastic-free packaging</li>
        <li class="product_feature">Suitable for sensitive, reactive skin</li>
      </ul>
      <div class="product_actions">
        <button class="product_addcart">Add to Cart — $68</button>
        <a class="product_secondary" href="#details">View Ingredients</a>
      </div>
      <p class="product_meta">In stock · Ships within 2 business days · 30-day returns</p>
    </div>
  </div>
</section>

<style>
.product_component {
  background-color:#07221d;
  padding:100px 24px;
  font-family:Georgia,'Times New Roman',serif;
  color:#eaf3ee;
}

.product_inner {
  max-width:1180px;
  margin:0 auto;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
  gap:64px;
  align-items:center;
}

.product_media {
  position:relative;
  border-radius:28px;
  overflow:hidden;
  background-color:#0c2c25;
  box-shadow:0 30px 70px -30px rgba(0,0,0,0.55);
}

.product_glow {
  position:absolute;
  top:-80px;
  right:-80px;
  width:280px;
  height:280px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(143,227,136,0.35),transparent 70%);
  filter:blur(20px);
  pointer-events:none;
  z-index:1;
}

.product_image {
  width:100%;
  height:560px;
  object-fit:cover;
  display:block;
  position:relative;
  z-index:2;
}

.product_badge {
  position:absolute;
  top:24px;
  left:24px;
  z-index:3;
  border-radius:999px;
  padding:8px 16px;
  background-color:#8fe388;
  color:#07221d;
  font-family:'Helvetica Neue',Arial,sans-serif;
  font-size:13px;
  font-weight:600;
  letter-spacing:0.14em;
  text-transform:uppercase;
}

.product_content {
  display:flex;
  flex-direction:column;
  gap:24px;
}

.product_eyebrow {
  margin:0;
  color:#8fe388;
  font-family:'Helvetica Neue',Arial,sans-serif;
  font-size:14px;
  font-weight:600;
  letter-spacing:0.18em;
  text-transform:uppercase;
}

.product_title {
  margin:0;
  color:#f4faf6;
  font-family:Georgia,'Times New Roman',serif;
  font-size:52px;
  line-height:1.05;
  font-weight:400;
  letter-spacing:-0.01em;
}

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

.product_price {
  margin:0;
  color:#f4faf6;
  font-family:Georgia,'Times New Roman',serif;
  font-size:34px;
  font-weight:400;
}

.product_priceold {
  margin:0;
  color:#7ea295;
  font-family:Georgia,'Times New Roman',serif;
  font-size:19px;
  text-decoration:line-through;
}

.product_pricenote {
  margin:0;
  color:#8fe388;
  font-family:'Helvetica Neue',Arial,sans-serif;
  font-size:14px;
  letter-spacing:0.04em;
}

.product_desc {
  margin:0;
  color:#c7dbd1;
  font-family:'Helvetica Neue',Arial,sans-serif;
  font-size:17px;
  line-height:1.7;
  max-width:460px;
}

.product_features {
  list-style:none;
  padding:0;
  margin:0;
  display:flex;
  flex-direction:column;
  gap:12px;
}

.product_feature {
  color:#dcebe3;
  font-family:'Helvetica Neue',Arial,sans-serif;
  font-size:15px;
  line-height:1.5;
  padding-left:26px;
  position:relative;
  border-left:2px solid #8fe388;
  padding-top:1px;
  padding-bottom:1px;
}

.product_actions {
  display:flex;
  align-items:center;
  gap:16px;
  flex-wrap:wrap;
  margin-top:8px;
}

.product_addcart {
  background-color:#8fe388;
  color:#07221d;
  border:none;
  border-radius:999px;
  padding:18px 38px;
  font-family:'Helvetica Neue',Arial,sans-serif;
  font-size:16px;
  font-weight:600;
  letter-spacing:0.02em;
  cursor:pointer;
  transition:transform 0.25s ease,background-color 0.25s ease;
}

.product_secondary {
  color:#eaf3ee;
  font-family:'Helvetica Neue',Arial,sans-serif;
  font-size:16px;
  text-decoration:none;
  border-radius:999px;
  padding:17px 30px;
  border:1px solid #2f5045;
  transition:border-color 0.25s ease;
}

.product_meta {
  margin:0;
  margin-top:4px;
  color:#7ea295;
  font-family:'Helvetica Neue',Arial,sans-serif;
  font-size:13px;
  letter-spacing:0.06em;
}
</style>