/* Infert brand layer.
   The identity kit's own grammar, applied across every page:
   - the leaf corner: the tagline bar rounds two opposite corners and squares the other two;
   - lime marks growth, so it marks what is active, new or moving;
   - weight contrast instead of a second typeface.
   Loaded last by source/presentation.cjs and scoped to html[data-brand]. */

:root {
  --brand-green: #116f38;
  --brand-lime: #8ac148;
  --brand-deep: #0c3a20;
  --brand-ink: #0e2216;
  --brand-wash: #f3f7ef;
  --brand-line: #dce6d6;
  --leaf-s: .7rem;
  --leaf-m: 1.35rem;
  --leaf-l: 2.25rem;
  --brand-ease: cubic-bezier(.2, .8, .2, 1);
}

/* ---------- the leaf corner ---------- */
[data-brand] .btn {
  border-radius: 0;
  border-start-end-radius: 1.6em;
  border-end-start-radius: 1.6em;
  transition: background-color .25s ease, color .25s ease, border-radius .5s var(--brand-ease), transform .25s ease;
}
[data-brand] .btn:hover,
[data-brand] .btn:focus-visible {
  border-start-end-radius: 0;
  border-end-start-radius: 0;
  border-start-start-radius: 1.6em;
  border-end-end-radius: 1.6em;
  transform: none;
}
[data-brand] .btn .arrow,
[data-brand] .text-link .arrow { display: inline-block; transition: transform .35s var(--brand-ease); }
[data-brand] .btn:hover .arrow,
[data-brand] .text-link:hover .arrow { transform: translate(.18em, -.18em); }
[dir="rtl"][data-brand] .btn:hover .arrow,
[dir="rtl"][data-brand] .text-link:hover .arrow { transform: translate(-.18em, -.18em); }

[data-brand] :is(input[type="search"], input[type="text"], input[type="email"], select, textarea):not(.network-country) {
  border-radius: 0;
  border-start-end-radius: var(--leaf-s);
  border-end-start-radius: var(--leaf-s);
}

[data-brand] .crop-choice {
  border-radius: 0;
  border-start-end-radius: 1.2em;
  border-end-start-radius: 1.2em;
  transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}
[data-brand] .crop-choice[aria-selected="true"] { background: var(--brand-deep); border-color: var(--brand-deep); color: #fff; }
[data-brand] .crop-choice:hover:not([aria-selected="true"]) { border-color: var(--brand-lime); }

[data-brand] .passport-sheet { border-radius: 0; border-start-end-radius: var(--leaf-l); border-end-start-radius: var(--leaf-l); }
[data-brand] .contact-location { border-radius: 0; border-start-end-radius: var(--leaf-l); border-end-start-radius: var(--leaf-l); }
[data-brand] .contact-location figcaption a { color: var(--brand-lime); border-bottom-color: currentColor; }

[data-brand] .article-card-image,
[data-brand] .review-image { border-radius: 0; border-start-end-radius: var(--leaf-l); border-end-start-radius: var(--leaf-l); overflow: hidden; }

/* ---------- lime marks what matters ---------- */
/* The headline's key word sits in the tagline's lime bar, painted in as it arrives. */
[data-brand] :is(h1, h2) em {
  font-family: inherit;
  font-style: normal;
  font-weight: inherit;
  color: var(--brand-deep);
  padding: 0 .14em .03em;
  margin-inline: -.03em;
  border-radius: 0 .34em;
  background: linear-gradient(var(--brand-lime), var(--brand-lime)) no-repeat left center / var(--lit, 100%) 100%;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  transition: background-size 1s var(--brand-ease) .12s;
}
[dir="rtl"][data-brand] :is(h1, h2) em { background-position: right center; border-radius: .34em 0; }
[data-brand] :is(h1, h2) em.brand-unlit { --lit: 0%; }

[data-brand] .eyebrow { display: inline-flex; align-items: center; gap: .55em; }
[data-brand] .eyebrow::before {
  content: "";
  flex: none;
  width: 1.45em;
  height: 1em;
  background: url("/brand/leaf-pair-lime.svg") no-repeat center / contain;
}

[data-brand] .text-link {
  background: linear-gradient(var(--brand-lime), var(--brand-lime)) no-repeat left 100% / 0 2px;
  transition: background-size .45s var(--brand-ease), color .2s ease;
}
[dir="rtl"][data-brand] .text-link { background-position: right 100%; }
[data-brand] .text-link:hover { background-size: 100% 2px; }

[data-brand] ::selection { background: var(--brand-lime); color: var(--brand-deep); }
[data-brand] :focus-visible { outline: 3px solid var(--brand-lime); outline-offset: 3px; }

/* ---------- Ratio Mark ---------- */
.ratio-mark { display: block; overflow: visible; }
.ratio-mark .rm-leaf,
.ratio-mark .rm-seed { transform-origin: 0 0; transform-box: view-box; }
.ratio-mark .rm-leaf path { transform-origin: 0 0; transform-box: view-box; transition: transform .7s var(--brand-ease); transition-delay: calc(var(--i) * 90ms); }
.ratio-mark .rm-seed circle { transform-box: fill-box; transform-origin: center; transition: transform .6s var(--brand-ease); transition-delay: calc(var(--i) * 90ms); }
.ratio-mark .rm-core { transition: r .5s var(--brand-ease); }
.ratio-mark .rm-label { font: 500 15px/1 "Jost", system-ui, sans-serif; fill: var(--brand-ink); letter-spacing: .02em; }
.ratio-mark .rm-symbol { font-family: "Outfit", "Jost", system-ui, sans-serif; font-weight: 600; fill: #fff; }
.brand-asleep .ratio-mark .rm-leaf path,
.brand-asleep .ratio-mark .rm-seed circle { transform: scale(0); }

.ratio-chip { display: inline-flex; align-items: center; gap: .6rem; }
.ratio-chip .ratio-mark { width: 2.6rem; height: 2.6rem; flex: none; }

/* Catalogue and range cards */
[data-brand] .product-card-body { position: relative; }
[data-brand] .product-card .ratio-mark.card-mark {
  position: absolute;
  inset-block-start: -3.6rem;
  inset-inline-end: .2rem;
  width: 3.1rem;
  height: 3.1rem;
  padding: .32rem;
  background: #fff;
  border-radius: 0 1rem;
  box-shadow: 0 0 0 1px var(--brand-line);
  transition: transform .5s var(--brand-ease), box-shadow .3s ease;
}
[data-brand] .product-card:hover .ratio-mark.card-mark { transform: translateY(-4px) scale(1.12); box-shadow: 0 0 0 1px var(--brand-lime), 0 10px 22px -14px rgba(12, 58, 32, .45); }
[data-brand] .product-card:hover .ratio-mark .rm-leaf path { transform: scale(1.06); }

/* Product hero: the mark beside the grade, with its numbers */
.ratio-feature { display: flex; align-items: center; gap: clamp(1rem, 2.4vw, 1.6rem); margin: .4rem 0 1.4rem; }
.ratio-feature .ratio-mark { width: clamp(5.8rem, 9vw, 7.6rem); height: auto; flex: none; }
.ratio-feature dl { display: grid; grid-template-columns: repeat(3, auto); gap: .2rem 1.4rem; margin: 0; }
.ratio-feature dl > div { display: grid; gap: .05rem; }
.ratio-feature dt { font-size: .8rem; letter-spacing: .04em; color: #5f7064; display: flex; align-items: center; gap: .4em; }
.ratio-feature dt i { width: .62em; height: .62em; border-radius: 0 .3em; display: inline-block; }
.ratio-feature dd { margin: 0; font: 600 clamp(1.35rem, 2.2vw, 1.75rem)/1 "Outfit", "Jost", sans-serif; color: var(--brand-ink); font-variant-numeric: tabular-nums; }
[lang="ar"] .ratio-feature dt { letter-spacing: normal; text-transform: none; }
.ratio-feature-note { font-size: .82rem; color: #5f7064; margin: -.6rem 0 1.2rem; max-width: 34ch; }

.passport-identity .ratio-mark { width: 3.6rem; height: 3.6rem; margin-inline-start: auto; flex: none; }

@media (prefers-reduced-motion: reduce) {
  [data-brand] :is(h1, h2) em,
  [data-brand] .btn,
  .ratio-mark .rm-leaf path,
  .ratio-mark .rm-seed circle { transition: none; }
  [data-brand] :is(h1, h2) em.brand-unlit { --lit: 100%; }
  .brand-asleep .ratio-mark .rm-leaf path,
  .brand-asleep .ratio-mark .rm-seed circle { transform: none; }
}

/* ---------- Living band: the pattern grows in once, then holds still ---------- */
.living-band { position: relative; height: clamp(64px, 7vw, 100px); background: #fff url("/brand/botanical-pattern.svg") repeat-x center 46% / 480px auto; overflow: hidden; }
[data-brand] .footer-pattern { position: relative; overflow: hidden; }
.lb-cell { position: absolute; top: -1px; bottom: -1px; background: #fff; transform-origin: 50% 0; transition: transform .75s var(--brand-ease); transition-delay: var(--d, 0ms); }
.lb-grown .lb-cell { transform: scaleY(0); }
@media (max-width: 699px) { .living-band { background-size: 350px auto; } }

/* ---------- Quality & origin: the page's deep-green chapter ---------- */
[data-brand] .certification-garden { background: var(--brand-deep); color: #cfe0c6; border: 0; padding: clamp(5rem, 9vw, 8.5rem) 0 clamp(4.5rem, 8vw, 7.5rem); }
[data-brand] .certification-garden h2 { color: #fff; }
[data-brand] .certification-garden .eyebrow { color: var(--brand-lime); }
[data-brand] .certificate-wall { gap: clamp(.8rem, 1.6vw, 1.4rem); }
[data-brand] .certificate-card {
  position: relative; display: grid; align-content: start; gap: .35rem;
  padding: clamp(1.3rem, 2vw, 1.8rem); border: 1px solid rgba(138, 193, 72, .28);
  border-radius: 0 var(--leaf-l); background: rgba(255, 255, 255, .025);
  transition: background-color .35s ease, border-color .35s ease;
}
[dir="rtl"][data-brand] .certificate-card { border-radius: var(--leaf-l) 0; }
[data-brand] .certificate-card:hover { background: rgba(138, 193, 72, .08); border-color: var(--brand-lime); }
[data-brand] .certificate-card .certificate-open { position: static; display: block; margin-bottom: 1.1rem; }
[data-brand] .certificate-card .certificate-open::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
[data-brand] .certificate-card .certificate-open:focus-visible { outline: none; }
[data-brand] .certificate-card:has(.certificate-open:focus-visible) { outline: 3px solid var(--brand-lime); outline-offset: 3px; }
.seal-mark {
  display: grid; place-content: center; justify-items: center; gap: .1rem; width: clamp(5rem, 7vw, 6.1rem); aspect-ratio: 1; border-radius: 50%;
  border: 1.5px solid var(--brand-lime); box-shadow: inset 0 0 0 6px var(--brand-deep), inset 0 0 0 7px rgba(138, 193, 72, .45);
  color: #fff; transition: background-color .4s ease, color .4s ease, transform .6s var(--brand-ease);
}
.seal-std { font: 500 .68rem/1 "Jost", sans-serif; letter-spacing: .24em; color: var(--brand-lime); padding-inline-start: .24em; transition: color .4s ease; }
.seal-num { font: 600 clamp(1.25rem, 1.8vw, 1.55rem)/1 "Outfit", sans-serif; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.seal-mark:not(:has(.seal-num)) .seal-std { font: 700 clamp(1.5rem, 2.2vw, 1.9rem)/1 "Outfit", sans-serif; letter-spacing: .02em; padding: 0; }
[data-brand] .certificate-card:hover .seal-mark { background: var(--brand-lime); color: var(--brand-deep); transform: rotate(-8deg); box-shadow: inset 0 0 0 6px var(--brand-lime), inset 0 0 0 7px rgba(12, 58, 32, .35); }
[data-brand] .certificate-card:hover .seal-std { color: var(--brand-deep); }
[data-brand] .certificate-card h3 { color: #fff; margin: 0; font-size: clamp(1.15rem, 1.5vw, 1.4rem); }
[data-brand] .certificate-card > .seal-desc { color: #a9c39f; margin: 0; font-size: .95rem; line-height: 1.5; }
.seal-cta { margin-top: .9rem; font-size: .85rem; color: var(--brand-lime); display: inline-flex; gap: .45em; align-items: center; }
.seal-cta span { transition: transform .35s var(--brand-ease); }
[data-brand] .certificate-card:hover .seal-cta span { transform: translate(.18em, -.18em); }
[dir="rtl"][data-brand] .certificate-card:hover .seal-cta span { transform: translate(-.18em, -.18em); }
[data-brand] .certificate-origin { margin-top: clamp(2.5rem, 5vw, 4rem); padding-top: 0; align-items: end; }
[data-brand] .certificate-origin > p { font: 600 clamp(2rem, 4.4vw, 3.6rem)/1.05 "Outfit", "Jost", sans-serif; letter-spacing: -.03em; color: #fff; margin: 0; }
[data-brand] .certificate-origin > p > span { display: block; color: var(--brand-lime); margin: .2em 0 0; font-weight: 300; }
[data-brand] .certification-garden .text-link { color: #fff; border-color: rgba(255, 255, 255, .4); }
[data-brand] .certification-garden .garden-layer { display: none; }

/* ---------- Catalogue: the whole range in fewer screens ---------- */
@media (min-width: 1100px) {
  [data-brand] .catalogue .product-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 3rem 1.6rem; }
}

/* ---------- Garden spacing: branches frame the words, never sit on them ---------- */
@media (min-width: 901px) and (max-width: 1100px) {
  [data-brand] .garden-flow .garden-hero .edge-branch.hero-canopy { --branch-size: 29vw; }
}
@media (min-width: 700px) and (max-width: 1100px) {
  /* The closing line sits in a narrow column beside the pomegranate; size it to that column. */
  [data-brand] .invitation-copy h2 { font-size: 6.2vw; max-width: none; }
}