/* Measured against the source Figma frames: 1440 px desktop / 402 px mobile. */
:root {
  --green-dark: #4d5d4f;
}

.hero {
  height: 533px;
}

.hero-art {
  width: 960px;
  height: 541px;
  top: auto;
  bottom: 0;
  object-fit: cover;
  mask-image: none;
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, #f9eee5 36.94%, rgb(249 238 229 / 0) 74.38%);
}

.hero-inner {
  position: relative;
  z-index: 1;
}

.hero h1 {
  max-width: 517px;
  letter-spacing: 0;
  margin-bottom: 16px;
}

.hero p {
  max-width: 517px;
}

.hero-leaf {
  display: block;
  mix-blend-mode: normal;
}

.product-card h3 { font-size: 28px; line-height: 1.25; }

.product-image-button {
  position: relative;
}

.product-badge {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 4px 24px;
  border-radius: 100px;
  color: #fff;
  font: 600 14px/20px var(--sans);
  text-transform: uppercase;
  letter-spacing: 2px;
  pointer-events: none;
}

.product-badge--bestseller { background: #5a819e; }
.product-badge--sale { background: #b73d3e; letter-spacing: 1px; }
.product-badge--new { background: var(--green); }

.popular { padding-block: 100px; }
.section-heading { margin-bottom: 32px; }
.bundles { padding-block: 100px; }
.trust { padding-block: 100px; }

@media (min-width: 1441px) {
  .hero-art { width: max(960px, 66.6667%); height: 100%; }
  .hero-inner::before { content: none; }
}

@media (min-width: 761px) and (max-width: 1100px) {
  .hero-art { right: -140px; }
  .hero p { max-width: 420px; }
}

@media (max-width: 760px) {
  .hero {
    height: max(715px, calc(100vw * 715 / 402));
    min-height: 0;
    max-height: none;
  }

  .hero-art { display: none; }

  .hero-art-mobile {
    display: block;
    height: 100%;
    width: 100%;
    object-fit: cover;
    object-position: center bottom;
    clip-path: none;
    mask-image: none;
  }

  .hero::before {
    inset: 0 0 auto;
    height: 484px;
    background: linear-gradient(180deg, #f9eee5 36.94%, rgb(249 238 229 / 0) 74.38%);
  }

  .hero::after { content: none; }
  .hero-inner { padding-top: 32px; }
  .hero h1 { line-height: 1.15; letter-spacing: 0; margin: 12px 0 16px; }
  .hero p { max-width: none; min-height: 72px; margin-bottom: 24px; }
  .hero-leaf { mask-image: none; }
  .popular, .bundles, .trust { padding-block: 48px; }
  .section-heading { margin-bottom: 24px; }
  .product-badge { top: 9px; left: 9px; min-height: 24px; padding: 2px 18px; font-size: 12px; line-height: 20px; letter-spacing: 1.7px; }
}

@media (max-width: 370px) {
  .hero h1 { font-size: 43px; }
  .hero p { font-size: 15px; line-height: 22px; }
}

/* Source vector from Figma, without a baked-in background. */
.hero-leaf { width: 114px; height: 118px; mix-blend-mode: normal; }
.site-footer, .newsletter { position: relative; isolation: isolate; overflow: hidden; }
.site-footer::before { content: ""; position: absolute; z-index: -1; left: -30px; top: -15px; width: 150px; height: 160px; background: #97816c; mask: url('assets/leaf.svg') center / contain no-repeat; transform: rotate(-20deg); }
.loyalty::after { content: ""; position: absolute; z-index: -1; left: 56%; top: 22px; width: 85px; height: 90px; background: #ebd6c2; mask: url('assets/leaf.svg') center / contain no-repeat; transform: rotate(-15deg); }
@media (max-width: 760px) {
  .header-inner { gap: 16px; }
  .header-actions { gap: 10px; }
  .mobile-shop { font-size: 14px; padding-inline: 24px; }
  .hero-leaf { width: 114px; height: 118px; right: -28px; top: 10px; }
  .product-card h3 { font-size: 26px; line-height: 1.15; }
  .product-track .product-image-button img { aspect-ratio: 285 / 280; }
  .product-description { margin-top: 8px; }
  .product-price { min-height: 21px; margin-top: 8px; }
  .add-to-cart { margin-top: 16px; }
  .section-heading .button { margin-top: 24px; }
  .popular { padding-bottom: 48px; }
  .circle-button { width: 40px; height: 40px; }
  .review-body { min-height: 96px; }
  .faq summary { line-height: 24px; }
  .faq { background: linear-gradient(180deg, var(--paper), var(--cream) 70%); }
  .loyalty { min-height: 715px; }
  .loyalty::after { display: none; }
}

@media (max-width: 760px) {
  .bundle-intro p { margin-top: 24px; }
  .product-card--bundle .add-to-cart { margin-top: 16px; }
  .trust-intro .button, .survey { margin-top: 32px; }
  .survey { padding-top: 60px; padding-bottom: 44px; }
  .review-top { margin-bottom: 12px; }
  .review-top p { margin-top: 4px; }
  .review-body { margin-bottom: 12px; }
  .review > .stars { display: flex; }
  .site-footer { padding-bottom: 86px; }
}