.f52 {
  --green: #375128;
  --lime: #8cc968;
  --ink: #14260f;
  --pad: clamp(24px, 5vw, 88px);
  color: var(--ink);
  background: #fff;
  font-family: Verdana, sans-serif;
}
.f52 *, .f52 *::before, .f52 *::after { box-sizing: border-box; }
.f52 img { display: block; max-width: 100%; }
.f52 h1, .f52 h2 { font: inherit; font-weight: 700; line-height: 1.13; color: inherit; margin: 0 0 .42em; }
.f52 h1 { font-size: clamp(32px, 4.15vw, 70px); }
.f52 h2 { font-size: clamp(25px, 3.35vw, 51px); }
.f52 p { font-size: clamp(15px, 1.55vw, 22px); line-height: 1.55; margin: 0 0 1em; }
.f52 section[id] { scroll-margin-top: 100px; }
.f52 .f52-button {
  display: inline-flex; align-items: center; gap: .6em; min-height: 48px;
  padding: .75em 1.25em; border-radius: 9px; background: var(--lime);
  color: var(--ink); font-weight: 700; text-decoration: none; cursor: pointer;
  transition: background-color .18s ease, transform .18s ease;
}
.f52 .f52-button:hover { background: #a1d681; transform: translateY(-2px); }
.f52 :focus-visible { outline: 3px solid #496c34; outline-offset: 4px; }
.f52-hero {
  position: relative; isolation: isolate; min-height: 100vh;
  display: flex; align-items: center; padding: var(--pad); overflow: hidden;
  color: white; background: #172a11;
}
.f52-hero-photo { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 62% center; }
.f52-hero::before, .f52-banner::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, #12230dea, #12230d58 52%, transparent 76%); }
.f52-hero-copy { width: min(51%, 760px); }
.f52-hero-copy .f52-button { font-size: clamp(16px, 1.55vw, 23px); }
.f52-packs { position: absolute; right: 4%; bottom: 9%; display: flex; align-items: flex-end; gap: 8px; width: 36%; }
.f52-packs img { height: auto; width: calc((100% - 16px)/3); border-radius: 5px; box-shadow: 0 9px 24px #10180985; }
.f52-product { display: grid; grid-template-columns: 45% 55%; min-height: 350px; }
#f52-fruit { grid-template-columns: 55% 45%; background: #edf5e8; }
.f52-product-photo { width: 100%; height: 100%; min-height: 350px; object-fit: cover; }
.f52-product-copy { display: grid; grid-template-columns: minmax(90px, 30%) 1fr; gap: clamp(15px, 3vw, 45px); align-items: center; padding: clamp(22px, 4vw, 68px); }
.f52-pack { width: 100%; box-shadow: 0 8px 22px #15230e26; border-radius: 6px; }
.f52-product details p { margin-top: .8em; font-size: 15px; }
.f52-panel { padding: clamp(36px, 5vw, 76px) var(--pad); }
.f52-compare { text-align: center; }
.f52-compare table { width: 100%; border-collapse: collapse; text-align: left; }
.f52-compare th, .f52-compare td { padding: .9em; border: 1px solid #d8e4d1; }
.f52-compare thead { color: white; background: var(--green); }
.f52-application, .f52-certificate { display: grid; grid-template-columns: 1fr 1fr; align-items: center; }
.f52-application img { height: 100%; width: 100%; object-fit: cover; }
.f52-application ul { padding-left: 1.2em; line-height: 1.8; font-weight: 700; }
.f52-dose { display: inline-block; padding: .55em .75em; margin-bottom: 1em; border-radius: 8px; background: #e3f1d9; font-size: clamp(18px, 2vw, 28px); }
.f52-banner { position: relative; isolation: isolate; color: white; background: var(--green); }
.f52-banner img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.f52-banner h2 { max-width: 690px; }
.f52-certificate { gap: var(--pad); }
.f52-certificate img { max-height: 390px; width: 100%; object-fit: contain; }
.f52-faq { background: #f0f0f0; }
.f52-faq details { margin-top: 12px; padding: 16px 20px; background: white; border: 1px solid #d8e4d1; border-radius: 8px; }
.f52-faq summary { cursor: pointer; font-weight: 700; }
.f52-faq details p { margin: 12px 0 0; }
.f52-contact { color: white; background: var(--green); }
@media (max-width: 950px) {
  .f52-product-copy { grid-template-columns: minmax(70px, 25%) 1fr; }
}
@media (max-width: 767px) {
  .f52-hero { display: flex; flex-direction: column; min-height: 0; align-items: stretch; padding: 0; }
  .f52-hero::before { display: none; }
  .f52-hero-copy { width: auto; padding: 36px var(--pad) 28px; }
  .f52-hero-photo { position: static; order: 2; height: auto; aspect-ratio: 4 / 3; object-position: right; }
  .f52-packs { z-index: 1; width: 47%; right: 6%; bottom: 5%; }
  .f52-product, #f52-fruit, .f52-application, .f52-certificate { grid-template-columns: 1fr; }
  #f52-fruit .f52-product-photo, #f52-fruit .f52-product-copy { grid-column: auto; grid-row: auto; }
  .f52-product-photo { min-height: 0; height: auto; aspect-ratio: 16 / 9; }
  .f52-application img { aspect-ratio: 16 / 9; }
}
@media (prefers-reduced-motion: reduce) { .f52 .f52-button { transition: none; } }
@media (min-width: 768px) {
  .f52 h1 { font-size: clamp(32px, 3.65vw, 65px); }
  .f52-hero-copy { width: min(55%, 800px); }
}
.f52-contact {
  background: linear-gradient(90deg, #1b3516 33%, #1b3516ba 67%, #1b351650), url('assets/contact-leaf.webp') right center / cover;
}
@media (max-width: 767px) {
  .f52-compare th, .f52-compare td { padding: .45em; font-size: clamp(11px, 3vw, 15px); overflow-wrap: anywhere; }
}
.f52-application .f52-methods { list-style: none; padding: 0; margin: 1.2em 0 0; }
.f52-methods li { display: flex; align-items: center; gap: 16px; margin-top: 12px; }
.f52-methods svg { flex: 0 0 38px; width: 38px; height: 38px; fill: none; stroke: var(--green); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.f52-methods span { border-left: 3px solid var(--lime); padding: 4px 0 4px 14px; }
@media (min-width: 768px) {
  .f52-application { grid-template-columns: 46% 54%; }
}

.f52 {
  --f52-radius: clamp(16px, 2vw, 32px);
  width: min(100%, 1350px);
  margin-inline: auto;
}
.f52-hero {
  border-radius: var(--f52-radius);
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  align-content: center;
  gap: clamp(24px, 4vw, 60px);
}
.f52-hero-copy { width: auto; }
.f52-packs { position: relative; inset: auto; width: 100%; align-self: center; }
.f52-product, #f52-fruit, .f52-application {
  gap: clamp(14px, 2vw, 28px);
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  margin-block: clamp(28px, 5vw, 72px);
  border-radius: var(--f52-radius);
}
.f52-product-photo, .f52-application img { border-radius: var(--f52-radius); }
@media (max-width: 767px) {
  .f52 { width: calc(100% - 20px); }
  .f52-hero { display: flex; gap: 0; }
  .f52-hero-photo { order: 1; }
  .f52-hero .f52-packs {
    position: relative; inset: auto; width: 56%; order: 2;
    align-self: flex-end; margin: -26% 5% 12px 0;
  }
  .f52-product, #f52-fruit, .f52-application { grid-template-columns: 1fr; }
}


.f52 :is(.f52-application, .f52-banner, .f52-certificate, .f52-faq, .f52-contact) h2::after {
  content: '';
  display: block;
  width: 72px;
  height: 4px;
  margin-top: .35em;
  border-radius: 4px;
  background: var(--lime);
}
.f52-faq summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  list-style: none;
}
.f52-faq summary::-webkit-details-marker { display: none; }

.f52-compare h2 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(12px, 3vw, 36px);
}
.f52-compare h2::before, .f52-compare h2::after {
  content: '';
  flex: 1;
  height: 2px;
  background: var(--lime);
}
.f52-compare table {
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid #d8e4d1;
  border-radius: 12px;
  overflow: hidden;
}
.f52-compare th, .f52-compare td { border: 0; }
.f52-compare tr > * + * { border-left: 1px solid #d8e4d1; }
.f52 #f52-fruit, .f52 #f52-flowers { margin-top: clamp(20px, 2vw, 32px); }
.f52 #f52-vegetables, .f52 #f52-fruit { margin-bottom: clamp(20px, 2vw, 32px); }
@media (min-width: 768px) {
  .f52-hero-photo { object-position: 76% center; }
}

@media (min-width: 1025px) {
  .f52 .f52-product { grid-template-columns: minmax(0, 44fr) minmax(0, 56fr); }
  .f52 #f52-fruit { grid-template-columns: minmax(0, 56fr) minmax(0, 44fr); }
  .f52-product-copy { padding-inline: clamp(20px, 2.5vw, 40px); }
}
.f52-hero-copy h1 { text-wrap: balance; }
.f52-hero-copy .f52-button { border-radius: 999px; }
@media (max-width: 767px) {
  .f52-hero-copy { text-align: center; }
  .f52-hero-copy h1 { max-width: 17ch; margin-inline: auto; }
  .f52-hero-copy p { text-wrap: balance; }
}
@media (min-width: 1025px) {
  .f52-product-photo { height: auto; aspect-ratio: 1.58; align-self: center; }
}
.f52-contact-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.f52-certificate {
  padding-block: clamp(24px, 3vw, 44px);
  background: #f7f9f5;
  border-radius: var(--f52-radius);
}
.f52-certificate img {
  max-height: clamp(245px, 22vw, 315px);
  padding: 12px;
  background: #fff;
  border: 1px solid #d8e4d1;
  border-radius: 12px;
}
.f52-faq {
  padding-block: clamp(26px, 3vw, 44px);
  background: #f2f6ef;
}
.f52-faq details { padding-block: 12px; }
.f52-faq summary { min-height: 24px; }

.f52-product .f52-button { border-radius: 999px; }
.f52-product .f52-button, .f52-methods span, .f52-faq summary {
  font-size: clamp(15px, 1.35vw, 20px);
}
@media (min-width: 768px) {
}
@media (min-width: 1025px) {
  .f52-hero-copy h1 { font-size: clamp(32px, 3.4vw, 50px); }
}
.f52-product-photo { transform: scaleX(-1); }

.f52 { width: 100%; }
.f52-inner, .f52 > :not(.f52-hero, .f52-banner, .f52-contact, .f52-certificate, .f52-faq) {
  width: min(calc(100% - 32px), 1350px);
  margin-inline: auto;
}
.f52-inner.f52-panel { padding-inline: 0; }
.f52-hero { display: grid; grid-template-columns: 1fr; padding: 0; border-radius: 0; }
.f52-hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(28px, 6vw, 90px);
  padding: 48px clamp(8px, 2vw, 30px);
}
.f52-hero .f52-packs {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  margin: 0;
  inset: auto;
  padding: 22px 12px;
}
.f52-packs a {
  display: block;
  flex: 0 0 31%;
  margin-inline: -1%;
  transition: transform .2s ease;
}
.f52-packs a:first-child { transform: translateY(10%) rotate(-12deg); }
.f52-packs a:nth-child(2) { position: relative; z-index: 1; transform: translateY(-7%); }
.f52-packs a:last-child { transform: translateY(10%) rotate(12deg); }
.f52-packs a:is(:hover, :focus-visible) { position: relative; z-index: 2; transform: translateY(-9%) rotate(0); }
.f52-packs img { width: 100%; height: auto; border-radius: 8px; }
.f52-product-media {
  position: relative;
  min-height: 350px;
  border-radius: var(--f52-radius);
  overflow: hidden;
  isolation: isolate;
}
.f52-product-media .f52-product-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 0;
}
.f52-product-media .f52-pack {
  position: absolute;
  bottom: 8%;
  left: 7%;
  width: clamp(85px, 27%, 200px);
  border-radius: var(--f52-radius);
  box-shadow: 0 12px 32px #1018098c;
}
.f52 .f52-product-copy { display: block; }
#f52-fruit .f52-product-media { grid-column: 2; grid-row: 1; }
#f52-fruit .f52-product-copy { grid-column: 1; grid-row: 1; }
#f52-fruit .f52-pack { left: auto; right: 7%; }
.f52-product-info { border-top: 1px solid #d8e4d1; padding-top: 14px; }
.f52-product-info h3 { color: var(--green); font-size: clamp(17px, 1.5vw, 22px); margin: 0 0 8px; }
.f52-product-info p { font-size: clamp(14px, 1.15vw, 17px); margin-bottom: .65em; }
.f52-product-info p:last-child { margin-bottom: 0; }
.f52-certificate { margin-block: 24px; }
.f52-faq-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 20px; align-items: start; }
.f52-faq-grid details { margin: 0; }
.f52-faq summary::after {
  content: '+' / '';
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font: 700 22px/1 Verdana, sans-serif;
  background: #e6f2df;
  color: var(--green);
}
.f52-faq details[open] summary::after { content: '−' / ''; }
@supports selector(::details-content) {
  .f52-faq details::details-content {
    block-size: 0;
    overflow: clip;
    interpolate-size: allow-keywords;
    transition: block-size .28s ease, content-visibility .28s allow-discrete;
  }
  .f52-faq details[open]::details-content { block-size: auto; }
}
@media (max-width: 767px) {
  .f52-hero { display: grid; }
  .f52-hero::before { display: block; background: linear-gradient(#12230dea, #12230d60 70%, #12230db0); }
  .f52-hero-photo { position: absolute; height: 100%; aspect-ratio: auto; object-position: 68% center; }
  .f52-hero-inner { grid-template-columns: 1fr; gap: 18px; padding: 36px 8px 26px; }
  .f52-hero-copy { padding: 0; }
  .f52-hero .f52-packs { width: min(88%, 360px); justify-self: center; }
  .f52-product-media { min-height: 0; aspect-ratio: 4 / 3; }
  #f52-fruit .f52-product-media, #f52-fruit .f52-product-copy { grid-column: auto; grid-row: auto; }
  .f52-faq-grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .f52-packs a, .f52-faq details::details-content { transition: none; }
}
.f52-hero .f52-packs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: end;
  padding: 0;
}
.f52-packs a { margin: 0; width: min(116%, 350px); }
.f52-packs a:first-child {
  grid-area: 2 / 1;
  justify-self: start;
  transform: rotate(-9deg);
}
.f52-packs a:nth-child(2) {
  grid-area: 1 / 1 / 2 / 3;
  justify-self: center;
  width: 60%;
  margin-bottom: -13%;
  transform: none;
}
.f52-packs a:last-child {
  grid-area: 2 / 2;
  justify-self: end;
  transform: rotate(9deg);
}
.f52-packs a:is(:hover, :focus-visible) { z-index: 2; transform: translateY(-4%); }
.f52-certificate { display: block; }

.f52-certificate-dialog {
  width: min(94vw, 760px);
  max-height: 96dvh;
  margin: auto;
  padding: 0;
  border: 0;
  border-radius: 16px;
  background: #fff;
  color: var(--ink);
}
.f52-certificate-dialog::backdrop { background: #091308e8; }
.f52-certificate-viewer { position: relative; padding: 16px; }
.f52-certificate-viewer img {
  display: block;
  height: min(73dvh, 760px);
  max-height: none;
  padding: 0;
  border: 0;
}

.f52-certificate-dialog button {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--lime);
  color: var(--ink);
  font: 700 26px/1 Verdana, sans-serif;
  cursor: pointer;
}
.f52-certificate-dialog [data-f52-close] { position: absolute; top: 8px; right: 8px; }


.f52-packs a:nth-child(2) { z-index: 0; }
.f52-packs a:first-child, .f52-packs a:last-child { position: relative; z-index: 1; }
.f52-packs a:nth-child(2):is(:hover, :focus-visible) { z-index: 0; }
.f52-certificate {
  margin: 0;
  padding: 0;
  border-radius: 0;
  background: #f2f6ef;
}
.f52-certificate-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(24px, 5vw, 72px);
}
.f52-certificate-preview { display: block; justify-self: center; border-radius: 16px; }
.f52-certificate-preview img {
  width: auto;
  height: clamp(165px, 33vw, 472px);
  max-height: none;
  padding: 0;
  border: 0;
  border-radius: 16px;
  background: transparent;
}
.f52-faq { padding-block: 0; }
.f52-faq > .f52-inner { padding-block: clamp(78px, 9vw, 132px); }
@media (max-width: 767px) {
  .f52-certificate-layout { grid-template-columns: 1fr; }
  .f52-certificate-preview img { height: auto; max-height: 390px; }
}
