/* Final product + mobile botanical geometry. Pure CSS: no image rewriting. */

/* Hero only needs olive + citrus. The presentation transform also removes the plum subtree. */
.garden-flow .garden-hero .hero-plums { display:none!important; }

/* Product catalogue: the card owns the scene. New SKUs inherit their family preset. */
.garden-flow .catalogue .product-card {
  --card-pack-w:92%;
  --card-pack-h:96%;
  --card-sample-w:24%;
  --card-sample-left:55%;
  --card-sample-bottom:2%;
}
.garden-flow .catalogue .product-card:is([data-family="liquid"],[data-family="suspension-gel"],[data-family="foliar"]) {
  --card-pack-w:74%;
  --card-pack-h:94%;
  --card-sample-w:20%;
  --card-sample-left:55%;
  --card-sample-bottom:4%;
}
.garden-flow .catalogue .product-card[data-family="micro-element"] {
  --card-pack-w:84%;
  --card-sample-w:22%;
  --card-sample-left:55%;
}
.garden-flow .catalogue .product-bag-stage {
  position:relative;
  display:block;
  direction:ltr;
  isolation:isolate;
  width:100%;
  height:auto;
  min-height:0;
  aspect-ratio:1.08;
  padding:0;
  overflow:hidden;
}
.garden-flow .catalogue .product-bag-stage > .product-bag {
  position:absolute!important;
  inset:auto!important;
  left:7%!important;
  bottom:3%!important;
  width:var(--card-pack-w)!important;
  height:var(--card-pack-h)!important;
  min-width:0!important;
  min-height:0!important;
  max-width:none!important;
  max-height:none!important;
  margin:0!important;
  padding:0!important;
  object-fit:contain!important;
  object-position:center bottom!important;
  transform:none!important;
  animation:none!important;
  z-index:1;
}
.garden-flow .catalogue .product-bag-stage > .card-material {
  position:absolute!important;
  inset:auto!important;
  left:var(--card-sample-left)!important;
  bottom:var(--card-sample-bottom)!important;
  width:var(--card-sample-w)!important;
  height:auto!important;
  max-width:none!important;
  margin:0!important;
  padding:0!important;
  overflow:visible!important;
  z-index:2;
}
.garden-flow .catalogue .product-bag-stage > .card-material > .material-image {
  position:static!important;
  inset:auto!important;
  display:block!important;
  width:100%!important;
  height:auto!important;
  max-width:100%!important;
  max-height:none!important;
  margin:0!important;
  padding:0!important;
  object-fit:contain!important;
  object-position:center!important;
  transform:none!important;
}
.garden-flow .catalogue .product-grid { align-items:start; row-gap:3rem; }
.garden-flow .catalogue .product-card-body { min-width:0; }
.garden-flow .catalogue .product-card-body h3 { overflow-wrap:anywhere; }
html[lang="ar"] .garden-flow .catalogue .product-card-body { padding-inline:0 2rem; }
html[lang="ar"] .garden-flow .catalogue .product-card-arrow { right:auto; left:.2rem; }

@media (max-width:699px) {
  .garden-flow .catalogue .product-card {
    --card-pack-w:92%;
    --card-pack-h:97%;
    --card-sample-w:22%;
    --card-sample-left:57%;
    --card-sample-bottom:2%;
  }
  .garden-flow .catalogue .product-card:is([data-family="liquid"],[data-family="suspension-gel"],[data-family="foliar"]) {
    --card-pack-w:76%;
    --card-sample-w:18%;
    --card-sample-left:55%;
    --card-sample-bottom:4%;
  }
  .garden-flow .catalogue .product-bag-stage { aspect-ratio:1.02; }

  /* Mobile editorial art is normal-flow, full-bleed, and physically docked to an edge. */
  .garden-flow main :is(.vineyard-science,.fig-garden,.peach-partnership,.orchard-invitation) {
    display:block;
    min-height:0;
    min-block-size:0;
    padding-block:var(--scene-space,3.25rem) 0;
    overflow:clip;
    isolation:isolate;
  }
  .garden-flow main :is(
    .edge-branch.science-grapes,
    .edge-branch.invitation-pomegranate,
    .edge-branch.about-figs,
    .edge-branch.partnership-peaches,
    .edge-branch.research-blossoms,
    .edge-branch.research-orange-study,
    .edge-branch.contact-oranges,
    .edge-branch.insights-blueberries
  ) {
    position:relative!important;
    inset:auto!important;
    display:block!important;
    width:calc(100% + 2 * var(--space))!important;
    height:auto!important;
    min-height:0!important;
    margin:1.25rem calc(-1 * var(--space)) 0!important;
    padding:0!important;
    overflow:hidden!important;
    transform:none!important;
    direction:ltr;
  }
  .garden-flow main :is(
    .edge-branch.science-grapes,
    .edge-branch.invitation-pomegranate,
    .edge-branch.about-figs,
    .edge-branch.partnership-peaches,
    .edge-branch.research-blossoms,
    .edge-branch.research-orange-study,
    .edge-branch.contact-oranges,
    .edge-branch.insights-blueberries
  ) > .garden-botanical {
    position:relative!important;
    inset:auto!important;
    display:block!important;
    width:var(--mobile-art-w,96%)!important;
    height:auto!important;
    max-width:none!important;
    margin:0!important;
    transform:var(--mobile-art-transform,none)!important;
    transform-origin:center!important;
    animation:none!important;
  }

  /* Physical attachment presets. Negative edge offsets intentionally hide the cut stem. */
  .garden-flow .edge-branch.science-grapes { --mobile-art-w:78%; }
  .garden-flow .edge-branch.science-grapes > .garden-botanical { margin-left:-5%!important; }
  .garden-flow .edge-branch.invitation-pomegranate { --mobile-art-w:108%; }
  .garden-flow .edge-branch.invitation-pomegranate > .garden-botanical { margin-left:-12%!important; }
  .garden-flow .edge-branch.about-figs { --mobile-art-w:108%; }
  .garden-flow .edge-branch.about-figs > .garden-botanical { margin-left:-10%!important; }
  .garden-flow .edge-branch.partnership-peaches { --mobile-art-w:82%; }
  .garden-flow .edge-branch.partnership-peaches > .garden-botanical { margin-left:auto!important; margin-right:-6%!important; }
  .garden-flow .edge-branch.research-blossoms { --mobile-art-w:82%; --mobile-art-transform:scaleX(-1); }
  .garden-flow .edge-branch.research-blossoms > .garden-botanical { margin-left:auto!important; margin-right:-7%!important; }
  .garden-flow .edge-branch.research-orange-study { --mobile-art-w:88%; }
  .garden-flow .edge-branch.research-orange-study > .garden-botanical { margin-left:auto!important; margin-right:-8%!important; }
  .garden-flow .edge-branch.contact-oranges { --mobile-art-w:92%; --mobile-art-transform:scaleX(-1); }
  .garden-flow .edge-branch.contact-oranges > .garden-botanical { margin-left:-8%!important; }
  .garden-flow .edge-branch.insights-blueberries { --mobile-art-w:90%; --mobile-art-transform:scale(-1); }
  .garden-flow .edge-branch.insights-blueberries > .garden-botanical { margin-left:auto!important; margin-right:-8%!important; }

  .garden-flow .crop-insights-heading,
  .garden-flow .research-principles .principles-lead { grid-template-columns:minmax(0,1fr); }
  .garden-flow main :is(.berry-study,.research-orange-slot,.contact-garden) {
    height:auto!important;
    min-height:0!important;
    width:100%!important;
    margin:0!important;
  }

  /* Static specimen scenes terminate at the next section boundary rather than floating above it. */
  .garden-flow .courgette-programme,
  .garden-flow .manufacturing-garden {
    display:block;
    min-height:0;
    min-block-size:0;
    padding-bottom:0!important;
    overflow:clip;
  }
  .garden-flow .courgette-programme .programme-grid,
  .garden-flow .harvest-process .process-layout {
    display:flex;
    flex-direction:column;
    gap:1.5rem;
    padding-bottom:0;
  }
  .garden-flow .courgette-programme .programme-copy,
  .garden-flow .harvest-process .process-text-panels {
    order:0;
    width:100%;
    padding-bottom:0;
  }
  .garden-flow .courgette-programme .programme-plant,
  .garden-flow .harvest-process .process-crop-study {
    position:relative!important;
    order:1;
    align-self:center;
    display:flex!important;
    align-items:flex-end!important;
    justify-content:center!important;
    width:calc(100% + 2 * var(--space))!important;
    height:auto!important;
    min-height:0!important;
    margin:0 calc(-1 * var(--space))!important;
    padding:0!important;
    overflow:hidden!important;
  }
  .garden-flow .courgette-programme .programme-asset,
  .garden-flow .harvest-process .process-asset {
    position:relative!important;
    inset:auto!important;
    display:block!important;
    width:112%!important;
    height:auto!important;
    max-width:none!important;
    max-height:none!important;
    margin:0 -6% clamp(-5rem,-16vw,-3rem)!important;
    padding:0!important;
    object-fit:contain!important;
    transform:none!important;
    animation:none!important;
  }
  .garden-flow .research-garden-header { overflow:clip; }
}

@media print {
  .garden-flow .garden-hero .hero-plums { display:none!important; }
}
