/* טיפוגרפיה של עלה והצמח (10.10.2026)
   כותרות: כתב היד של ירדן (Yarden Hand, גרסה 1.100) על כל הכותרות, אחיד. רווח שורות 1.45 חובה
   (ל, ף, ץ עולים ויורדים הרבה, מתחת לזה השורות נוגעות). גוף: Yarden Body (מ-12.10), Assistant רק כגיבוי. */

/* ---- body ---- */
:root,body,button,input,select,textarea{font-family:'Yarden Body','Assistant',Heebo,Arial,sans-serif}
body{font-weight:400}
/* 13.10.2026: running text back to Regular. At 17px the Light stroke is ~1.5px and Chrome renders it unevenly (some letters bold, some faint);
   Light stays for the big scroll captions (19-26px) where it looks right. */
.mint-cap p{font-weight:300}
.fine-print,.small-label,.form-status,.privacy-note,.image-label,.package-label,.launch-note,.collection-count,.card-mode,.mint-fine{font-weight:400}
/* 12.10.2026, Yarden: everything that is not a heading is in her rounded hand (Yarden Body). Assistant stays only as a fallback for glyphs the font lacks (₪, quotes, arrows). */

/* ---- headings: handwriting, everywhere the same ---- */
h1,h2,h3,.chapter h2,.mint-copy h1,.hero h1,.ways-heading h2,.ways .ways-heading h2,section .ways-heading h2,.section-heading h2,.package-copy h2,.care-strip h2,.details-section h2,.launch-copy h2,.dialog-copy h2,.product-caption h3,.way h3,.upcoming-grid h3{
  font-family:'Yarden Hand',Heebo,Arial,sans-serif;font-weight:400;letter-spacing:0;line-height:1.45;font-synthesis:none}
h3,.product-caption h3,.way h3,.upcoming-grid h3{font-weight:500}
h1 em,h2 em,.chapter h2 em{font-style:normal;font-weight:inherit}
.mint-copy h1{font-size:clamp(44px,4.4vw,68px);line-height:1.45;margin:12px 0 14px;padding-top:.1em}
.chapter h2{letter-spacing:0}

/* ---- other handwriting places ---- */
.mint-cap p b,.gift-card p,.parcel-note,.hero-photo strong{font-family:'Yarden Hand',Heebo,Arial,sans-serif;letter-spacing:0;font-synthesis:none}
.mint-cap p b{font-size:1.15em;font-weight:500;line-height:1.45}
.gift-card p{font-size:22px;font-weight:400;line-height:1.6}
.parcel-note{font-size:17px;font-weight:400;line-height:1.6}
.hero-photo strong{font-size:17px;font-weight:500}

@media(max-width:760px){
  .mint-copy h1{font-size:38px;margin:10px 0 10px}
  .hero-photo strong{font-size:15px}
}

/* ---- subtitles and labels: Yarden Body (12.10.2026). Three voices on the page: handwriting for headings,
   rounded hand for everything between heading and paragraph, Assistant for paragraphs and forms. ---- */
.eyebrow,.small-label,.card-mode,.product-subtitle,.product-category,.nav-links,.nav-links a,.nav-cta,.button,.text-link,.way-link,.way-number,
.collection-filters button,.collection-count,.card-index,.image-label,.package-label,.package-hint,.launch-note,.product-facts dt,.product-launch,
.product-mode-picker button,.mint-cap>span,.mint-dots,.contents li>span,.gift-card small,.gift-card>span,.footer p,.footer>span,.accordions summary,
.grow-image-hint,.product-growing summary,.upcoming>summary,.gift-preview>summary,.segmented button,.collection-note,.section-heading>p,.card-arrow{
  font-family:'Yarden Body','Assistant',Heebo,Arial,sans-serif;font-weight:400;letter-spacing:0;font-synthesis:none}
.button,.nav-cta,.collection-filters button,.product-mode-picker button,.accordions summary,.way-number,.card-index,.product-launch strong,.segmented button{font-weight:500}
.eyebrow{font-weight:400}
/* captions' titles in the video chapters: rounded hand instead of handwriting, so the handwriting stays for the big headings only */
.mint-cap p b{font-family:'Yarden Body','Assistant',Heebo,Arial,sans-serif;font-weight:500;font-size:1.05em;line-height:1.4}
/* the rounded hand sits a little smaller than Assistant at the same size: nudge the tiniest labels up */
.eyebrow{font-size:12px}
.small-label,.collection-count,.image-label,.package-label{font-size:11px}
.card-mode,.way-link,.launch-note,.card-index,.collection-filters button,.product-launch{font-size:12px}
.nav-links{font-size:14px}
@media(max-width:760px){
  .eyebrow{font-size:11px}
  .small-label,.image-label,.package-label,.collection-count{font-size:10px}
  .nav-cta,.button{font-size:12px}
}
/* planted-only launch (12.10.2026): one line instead of the mode filters */
.collection-filters-note{margin:0;font-size:12px;color:var(--muted);font-family:'Yarden Body','Assistant',Arial,sans-serif}

/* ---- reading size and contrast (12.10.2026, review note): paragraphs 17px, small text darker ---- */
:root{--muted:#5a6450}
.section-heading>p,.package-copy>p:not(.eyebrow):not(.fine-print),.accordions details>p,.dialog-copy>p:not(.eyebrow):not(.fine-print):not(.product-subtitle),
.launch-copy>p:not(.eyebrow),.care-strip p:not(.eyebrow),.product-growing p,.mode-contents,.contents li,.mint-copy .hero-description,.mint-copy>p:not(.eyebrow){
  font-size:17px;line-height:1.7}
.accordions summary{font-size:16px}
.accordions details>p{max-width:62ch}
.fine-print,.collection-note,.mint-fine,.privacy-note,.launch-note,.product-growing a,.hero-footnote{font-size:12px;line-height:1.7;color:#5f6a55}
.mint-cap>span,.contents li>span,.collection-count,.image-label,.package-label,.small-label,.card-mode,.product-launch>span,.field label>span,.footer>span{color:#5f6a55}
.eyebrow,.nav-links a,.text-link{color:#4f5a46}
.mint-fine{background:#f0f0eee6}
@media(max-width:760px){
  .section-heading>p,.package-copy>p:not(.eyebrow):not(.fine-print),.accordions details>p,.dialog-copy>p:not(.eyebrow):not(.fine-print):not(.product-subtitle),
  .launch-copy>p:not(.eyebrow),.care-strip p:not(.eyebrow),.product-growing p,.mode-contents,.contents li,.mint-copy .hero-description,.mint-copy>p:not(.eyebrow){font-size:16px;line-height:1.65}
  .accordions summary{font-size:15px}
  .fine-print,.collection-note,.privacy-note,.launch-note,.hero-footnote{font-size:11px}
}

/* ---- scroll reveal (13.10.2026): opacity + transform only, ease-out, staggered cards ---- */
html.js .reveal{opacity:0;transform:translateY(16px);transition:opacity 1.8s cubic-bezier(.25,.1,.25,1),transform 2s cubic-bezier(.16,1,.3,1);transition-delay:var(--reveal-delay,0ms);will-change:opacity,transform}
html.js .reveal.is-in{opacity:1;transform:none;will-change:auto}
@media (prefers-reduced-motion:reduce){html.js .reveal{transform:none;transition:opacity .3s}}

/* ---- product cards on phones (13.10.2026, Yarden: unclear which photo a caption belongs to when stacked) ----
   each card becomes one surface: photo on top, caption inside the same frame, clear gap between cards */
@media(max-width:760px){
  .product-grid{gap:22px}
  #product-grid .product-card{background:#fffdf8;border:1px solid var(--line);border-radius:16px;overflow:hidden;box-shadow:0 10px 30px -22px #2a3a2855}
  #product-grid .product-photo{border-radius:0;aspect-ratio:1.18}
  #product-grid .product-caption{padding:14px 16px 0;flex-direction:column;align-items:center;text-align:center;gap:8px}
  #product-grid .product-caption>div{display:flex;flex-direction:column;align-items:center}
  #product-grid .product-caption h3{margin-top:4px}
  #product-grid .card-mode{padding:0 16px 16px;margin-top:6px;text-align:center}
  .upcoming-grid .product-card{background:#fffdf8;border:1px solid var(--line);border-radius:14px;overflow:hidden}
  .upcoming-grid .product-photo{border-radius:0}
  .upcoming-grid .product-caption{padding:10px 12px 0}
  .upcoming-grid .card-mode{padding:0 12px 12px}
}

/* ---- phone menu (13.10.2026): hamburger right of the logo, small dropdown panel under it ---- */
.menu-button{display:none;position:relative;width:42px;height:42px;border:1px solid #cbd5be;border-radius:50%;background:transparent;cursor:pointer;padding:0;flex:none}
.menu-button span{position:absolute;left:12px;right:12px;height:2px;border-radius:2px;background:var(--ink);top:50%;transition:transform .35s cubic-bezier(.23,1,.32,1)}
.menu-button span:first-child{transform:translateY(-4px)}.menu-button span:last-child{transform:translateY(4px)}
.menu-button[aria-expanded=true] span:first-child{transform:rotate(45deg)}.menu-button[aria-expanded=true] span:last-child{transform:rotate(-45deg)}
.mobile-menu{position:fixed;inset:0;z-index:30;pointer-events:none}
.mobile-menu[hidden]{display:block}
.mobile-menu-backdrop{position:absolute;inset:0;background:transparent}
.mobile-menu.is-open .mobile-menu-backdrop{pointer-events:auto}
.mobile-menu-panel{position:absolute;top:calc(var(--header,72px) + 8px);right:16px;width:min(260px,78vw);background:#fffdf8f5;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid var(--line);border-radius:18px;box-shadow:0 18px 50px -20px #2a3a2866;padding:8px 18px;display:flex;flex-direction:column;opacity:0;transform:translateY(-8px) scale(.97);transform-origin:top right;transition:opacity .3s cubic-bezier(.22,.61,.36,1),transform .3s cubic-bezier(.22,.61,.36,1);pointer-events:none}
.mobile-menu.is-open .mobile-menu-panel{opacity:1;transform:none;pointer-events:auto}
.mobile-menu a{font-family:'Yarden Hand','Yarden Body',Arial,sans-serif;font-size:19px;line-height:1.4;color:var(--ink);text-decoration:none;padding:11px 2px;border-bottom:1px solid #0000000d;opacity:0;transform:translateY(8px);transition:opacity .6s cubic-bezier(.22,.61,.36,1),transform .6s cubic-bezier(.22,.61,.36,1);transition-delay:calc(60ms + var(--i,0) * 70ms)}
.mobile-menu.is-open a{opacity:1;transform:none}
.mobile-menu a:last-child{border-bottom:0}
.mobile-menu a.mobile-menu-small{font-family:'Yarden Body','Assistant',Arial,sans-serif;font-size:12px;color:var(--muted);padding-top:12px}
.header{position:sticky;top:0;z-index:31}  /* sticky (site.css) must survive: the menu only needed the z-index */
@media(max-width:760px){.menu-button{display:block;position:relative;z-index:2}.nav{gap:18px}.nav .brand{margin-inline-end:auto;margin-inline-start:6px}.brand img{display:block}}
@media(prefers-reduced-motion:reduce){.mobile-menu a{transition-delay:0ms;transform:none}}

/* ---- "more ideas" panel (13.10.2026): centred captions, cards fade in one after another when opened ---- */
.upcoming-grid .product-caption{flex-direction:column;align-items:center;text-align:center;gap:6px}
.upcoming-grid .product-caption>div{display:flex;flex-direction:column;align-items:center}
.upcoming-grid .card-mode{text-align:center}
html.js .upcoming-grid .product-card{opacity:0;transform:translateY(10px);transition:opacity 1.3s cubic-bezier(.25,.1,.25,1),transform 1.5s cubic-bezier(.16,1,.3,1);transition-delay:var(--reveal-delay,0ms)}
html.js .upcoming[open] .upcoming-grid .product-card.is-in{opacity:1;transform:none}

/* ---- soft open/close for every <details> (15.10.2026): height is animated by site.js, here only the + sign ---- */
summary>span:last-child,details summary>span{transition:transform .7s cubic-bezier(.65,0,.35,1)}
details.is-animating{overflow:hidden}