/* Saraf · mobile pass (round 13): home page (front page, body.sf-home). Loaded only at max-width 767px.
   One gutter (16px), one chapter rhythm (56px), one type scale: hero 60 · chapter 40 · cards 20/22 · body 17. */

/* ---------- rhythm and type ---------- */
body.sf-home { --sp-ch: 56px; }
body.sf-home .chapter .h2, body.sf-home .shead .h2 { font-size: 2.5rem; line-height: .95; }
body.sf-home .chapter .lead, body.sf-home .shead .lead { font-size: 1.0625rem; line-height: 1.6; }
body.sf-home .chead { margin-bottom: 24px; gap: 12px; }
body.sf-home .shead { padding: var(--sp-ch) var(--gutter) 24px; margin-bottom: 0; gap: 14px; }
body.sf-home .shead__main { gap: 12px; }

/* small text links grow to a 44px tap target, vertically only */
body.sf-home .link-more, body.sf-home .shead__more, body.sf-home .band__cta, body.sf-home .athome__card a, body.sf-home .form__wa, body.sf-home .contact__details a { min-height: 44px; display: inline-flex; align-items: center; }

/* chapter CTAs: one full-width button, same height everywhere */
body.sf-home .orbit__copy .btn, body.sf-home .custom__card .btn, body.sf-home .cfg__actions .btn, body.sf-home .ig__cta .btn, body.sf-home .night__in .btn { align-self: stretch; width: 100%; justify-content: center; min-height: 52px; }

/* ---------- hero: video, copy, then the SARAF letters ---------- */
body.sf-home .hero--pour .hero__title { font-size: 3.75rem !important; line-height: .9; }
body.sf-home .hero--pour .eyebrow { font-size: .8125rem; letter-spacing: .02em; }
body.sf-home .hero--pour .hero__lead { font-size: 1.0625rem; line-height: 1.6; }
body.sf-home .hero--pour .hero__ctas .btn { min-height: 52px; }
/* the three facts: one quiet row, no browser bullets */
body.sf-home .hero--pour .hero__facts { list-style: none; margin: 6px 0 0; padding: 16px 0 0; display: flex; flex-wrap: nowrap; justify-content: space-between; gap: 8px; font-size: .8125rem; line-height: 1.3; }
body.sf-home .hero--pour .hero__facts li { list-style: none; white-space: nowrap; padding-inline-start: 11px; }
body.sf-home .hero--pour .hero__facts li::before { width: 5px; height: 5px; top: .5em; }
/* "בית לאומנות בעץ" under the letters: the tag sits beside the letters' wrapper, so the payoff rule never reached it */
body.sf-home .hero--payoff .hero__pzoom:has(.hero__pword.is-in) ~ .hero__ptag { opacity: 1; }
body.sf-home .hero--payoff .hero__ptag { margin: 14px auto 0; gap: 12px; }
@media (prefers-reduced-motion: reduce) { body.sf-home .hero--payoff .hero__ptag { opacity: 1; } }

/* ---------- 01 collection: a clean scroller that starts on the gutter ---------- */
body.sf-home .sf-wd-cats, body.sf-home .elementor-widget-wd_product_categories.sf-wd-cats { padding-bottom: 0 !important; }
body.sf-home .sf-wd-cats .wd-cats { scroll-padding-inline: var(--gutter); gap: 12px; padding-bottom: 0; }
body.sf-home .sf-wd-cats .wd-cat { flex: 0 0 64vw; width: 64vw !important; max-width: 260px; }
body.sf-home .sf-wd-cats .wd-cat-thumb { margin-bottom: 12px; }
html body.sf-home .sf-wd-cats .wd-cat-content .wd-entities-title { font-size: 1.375rem; }

/* ---------- 02 the work strip: title and link on one line, straight cards ---------- */
body.sf-home .strip { padding-block: var(--sp-ch); }
body.sf-home .strip__head { flex-direction: row; flex-wrap: nowrap; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 20px; }
body.sf-home .strip__head .chead { margin-bottom: 0; }
body.sf-home .strip__head .shead__more { flex: none; }
/* one link style for 'to the shop': the gold rule of 01 */
body.sf-home .shead__more { border-bottom: 1px solid var(--sf-gold); gap: 8px; color: var(--sf-ink); }
body.sf-home .strip__track { gap: 12px; }
body.sf-home .strip__item, body.sf-home .strip__item:hover { transform: none; gap: 10px; }
body.sf-home .strip__track:not(.strip__track--grid) .strip__item { width: 60vw; max-width: 250px; }
/* the grid version: two equal columns inside the gutter, six works (the link right above leads to the rest) */
body.sf-home .strip__track--grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 12px; padding-inline: 0; }
body.sf-home .strip__track--grid .strip__item { width: auto; min-width: 0; }
body.sf-home .strip__track--grid .strip__item:nth-child(n+7) { display: none; }
body.sf-home .strip__meta { flex-direction: column; justify-content: flex-start; gap: 2px; }
body.sf-home .strip__meta b { font-family: var(--f-display); font-size: 1.25rem; font-weight: 700; color: var(--sf-ink); line-height: 1.05; }
body.sf-home .strip__meta small { font-size: .8125rem; line-height: 1.3; }

/* ---------- 03 at home: the label sits on its own wine tag at the top of the photo, the card overlaps the bottom ---------- */
body.sf-home .athome__in { position: static; padding-block: 0 var(--sp-ch); }
/* the photo starts at the top of its chapter (the general chapter padding pushed the tag onto the cream above it) */
body.sf-home .chapter.athome:not(.hero) { padding-block: 0; }
body.sf-home .athome__eyebrow { position: absolute; z-index: 2; top: 20px; inset-inline-start: var(--gutter); margin: 0; padding: 6px 12px; border-radius: 2px; background: rgba(102,12,12,.88); color: #FAF7F2; }
body.sf-home .athome__card { position: relative; z-index: 1; padding: 20px 20px 18px; }
body.sf-home .athome__card b { font-size: 2rem; }
body.sf-home .athome__card p { font-size: 1rem; }

/* ---------- 04 band ---------- */
body.sf-home .band { min-height: 0; }
body.sf-home .band__in { padding-block: 72px; gap: 14px; }
body.sf-home .band__line { font-size: 2.375rem; line-height: 1; }

/* ---------- 05 orbit ---------- */
body.sf-home .orbit__stage { padding-block: var(--sp-ch); gap: 24px; }
body.sf-home .orbit__copy { gap: 0; }
body.sf-home .orbit__copy .lead { margin-bottom: 20px; }

/* ---------- 06 workshops: 4:5 film, the cards use the full width, two buttons side by side ---------- */
body.sf-home .ws__in { gap: 28px; }
body.sf-home .ws__media .slab, body.sf-home .ws__media .slab.slab--tall { width: 100%; max-width: none; aspect-ratio: 4 / 5; max-height: none; }
body.sf-home .ws__media .slab video { width: 100%; height: 100%; object-fit: cover; }
/* the badge moves to the top corner: at the bottom it sat on the film's burned-in subtitles */
body.sf-home .ws__media .slab__badge { top: 14px; bottom: auto; inset-inline-start: 14px; padding: 7px 12px; font-size: .8125rem; }
body.sf-home .wscard { padding: 18px 0; padding-inline-end: 48px; gap: 6px; }
body.sf-home .wscard__name { font-size: 1.25rem; }
body.sf-home .wscard__price { font-size: 1rem; font-weight: 600; }
body.sf-home .wscard__text { font-size: 1rem; line-height: 1.55; }
body.sf-home .wscard__go { inset-inline-end: 0; width: 36px; height: 36px; }
body.sf-home .ws__ctas { flex-wrap: nowrap; gap: 10px; margin-top: 24px; }
body.sf-home .ws__ctas .btn { flex: 1 1 0; min-width: 0; min-height: 52px; padding-inline: 12px; justify-content: center; white-space: nowrap; }

/* ---------- 07 custom: the photo stays inside its chapter (it was spilling over the workshop buttons) ---------- */
body.sf-home .custom { overflow: hidden; overflow: clip; isolation: isolate; }
body.sf-home .custom__in { padding-block: 72px; }
body.sf-home .custom__card { padding: 26px 20px 22px; gap: 16px; }
body.sf-home .custom__card .h2 { max-width: none; }

/* ---------- 08 configurator ---------- */
body.sf-home .cfg__in { gap: 28px; }
body.sf-home .cfg__opts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
body.sf-home .cfg__step--legs .cfg__opts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
body.sf-home .cfg__opt { min-height: 44px; min-width: 0; padding: 0 8px; justify-content: center; text-align: center; font-size: .9375rem; line-height: 1.2; }
body.sf-home .cfg__form { gap: 22px; }
body.sf-home .cfg__note { text-align: center; align-self: center; }

/* ---------- 09 instagram ---------- */
body.sf-home .ig__handle { min-height: 44px; }
body.sf-home .ig__grid { gap: 6px; }
body.sf-home .ig__cta { margin-top: 24px; }

/* ---------- 10 night statement ---------- */
body.sf-home .night { min-height: 76svh; }
body.sf-home .night__title { font-size: 3.375rem; line-height: .92; }
body.sf-home .night__in { padding-block: 96px var(--sp-ch); gap: 18px; }

/* ---------- 11 contact: 16px fields (no iOS zoom), a calmer message box ---------- */
body.sf-home .contact__in { gap: 36px; }
body.sf-home .contact__details { gap: 6px; }
/* the hours break at the '·': weekdays on one line, Friday on the next */
body.sf-home .contact__details li:nth-child(3):not(:has(a)) > span { max-width: 14.5em; }
/* the right icons: a phone for the number, a clock for the hours */
body.sf-home .contact__details li:has(a[href^="tel:"]) > .sf-ico, body.sf-home .contact__details li:nth-child(3):not(:has(a)) > .sf-ico { display: none; }
body.sf-home .contact__details li:has(a[href^="tel:"])::before, body.sf-home .contact__details li:nth-child(3):not(:has(a))::before { content: ""; flex: none; width: 20px; height: 20px; background: var(--sf-wine); -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat; }
body.sf-home .contact__details li:has(a[href^="tel:"]) { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 16.4v2.8a1.9 1.9 0 0 1-2.1 1.9 18.8 18.8 0 0 1-8.2-2.9 18.5 18.5 0 0 1-5.7-5.7A18.8 18.8 0 0 1 2.1 4.2 1.9 1.9 0 0 1 4 2.1h2.8a1.9 1.9 0 0 1 1.9 1.6c.1.9.3 1.8.7 2.7a1.9 1.9 0 0 1-.4 2L7.8 9.6a15.2 15.2 0 0 0 5.7 5.7l1.2-1.2a1.9 1.9 0 0 1 2-.4c.9.3 1.8.6 2.7.7a1.9 1.9 0 0 1 1.6 1.9z'/%3E%3C/svg%3E"); }
body.sf-home .contact__details li:nth-child(3):not(:has(a)) { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E"); }
body.sf-home .form__grid { gap: 14px; }
body.sf-home .form__field { gap: 2px; }
body.sf-home .form__field > span { font-size: .9375rem; }
body.sf-home .form__field input, body.sf-home .form__field textarea { font-size: 1rem; }
body.sf-home .form__field input { height: 44px; min-height: 44px; }
body.sf-home .form__field textarea { min-height: 112px; height: 112px; resize: none; }
body.sf-home .form__actions { gap: 14px; }
/* the empty status line added a dead gap above the footer */
body.sf-home .form__msg:empty { display: none; }

/* ===== round 14b (Orel: "במובייל לא נראה טוב"): the phone opens like the desktop, full-screen pour with the title on it ===== */
body.sf-home .hero--pour .hero__pstage { background: var(--sf-paper); }
body.sf-home .hero--payoff .hero__pdisc { position: absolute !important; inset: 0 0 auto 0; height: 100svh; height: 100lvh; z-index: 0; overflow: hidden; }
body.sf-home .hero--pour .hero__pvideo { position: absolute !important; inset: 0; width: 100% !important; height: 100% !important; aspect-ratio: auto; margin: 0 !important; object-fit: cover; object-position: 53% 50%; }
body.sf-home .hero--pour .hero__pveil { display: block !important; position: absolute; inset: 0; z-index: 1; opacity: 1 !important;
	background: linear-gradient(to top, rgba(22,14,11,.86) 0%, rgba(22,14,11,.55) 38%, rgba(22,14,11,.08) 62%, rgba(22,14,11,.35) 100%) !important; }
body.sf-home .hero--pour .hero__in { position: relative; z-index: 2; min-height: 100svh; display: flex !important; flex-direction: column; justify-content: flex-end; padding: calc(var(--hdr-h) + 24px) var(--gutter) calc(var(--dock-h, 66px) + 36px) !important; }
body.sf-home .hero--pour .hero__copy { gap: 14px; }
body.sf-home .hero--pour .eyebrow { color: var(--sf-gold-soft) !important; }
body.sf-home .hero--pour .hero__title, body.sf-home .hero--pour .hero__title .w { color: #FAF7F2 !important; }
body.sf-home .hero--pour .hero__title em, body.sf-home .hero--pour .hero__title em .w { color: var(--sf-gold-soft) !important; }
body.sf-home .hero--pour .hero__title { font-size: clamp(3.6rem, 18vw, 4.6rem) !important; text-shadow: 0 2px 24px rgba(0,0,0,.35); }
body.sf-home .hero--pour .hero__lead { color: rgba(250,247,242,.9) !important; }
body.sf-home .hero--pour .hero__facts { display: none !important; }
html body.sf-home .hero--pour .hero__ctas .btn--sand { background: transparent !important; color: #FAF7F2 !important; border: 1.5px solid rgba(250,247,242,.7) !important; }
body.sf-home .hero--pour .hero__ctas { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
body.sf-home .hero--pour .hero__ctas .btn { width: 100%; justify-content: center; }
/* the header floats light over the film until it sticks */
body.sf-home .whb-header:not(.whb-sticked) { --sf-hdr-ink: #FAF7F2; }
body.sf-home .whb-header:not(.whb-sticked) .whb-row { background: transparent !important; box-shadow: none !important; }
body.sf-home .whb-header:not(.whb-sticked) .site-logo img { filter: brightness(0) invert(1) opacity(.95); }
body.sf-home .whb-header:not(.whb-sticked) .wd-tools-icon, body.sf-home .whb-header:not(.whb-sticked) .wd-tools-element > a { color: #FAF7F2 !important; }
/* the SARAF letters, after the film, with air */
body.sf-home .hero--payoff .hero__pword { margin-top: 56px; }

/* workshops: three video cards you swipe, not three full screens */
body.sf-home .wsv__grid { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); scrollbar-width: none; }
body.sf-home .wsv__grid::-webkit-scrollbar { display: none; }
body.sf-home .wsv { flex: 0 0 78vw; aspect-ratio: 3 / 4.3; scroll-snap-align: start; }
body.sf-home .wsv__name { font-size: 2.2rem; }
body.sf-home .wsv__ctas { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
body.sf-home .wsv__ctas .btn { width: 100%; justify-content: center; min-height: 52px; padding-inline: 10px; }

/* selected work: six on the phone, names a touch larger */
body.sf-home .strip__track--grid .strip__item:nth-child(n+7) { display: none; }

/* the contact form: fields you can see */
body.sf-home .form__field input, body.sf-home .form__field textarea { background: #FBF8F3 !important; border: 1px solid var(--sf-line) !important; min-height: 50px; border-radius: 2px !important; padding: 12px 14px; }

/* ===== round 14c (Orel: "הרבה יותר מרווח"): more air on the phone ===== */
body.sf-home { --sp-ch: 88px; --gutter: 22px; }
body.sf-home .chapter:not(.hero) { padding-block: var(--sp-ch); }
body.sf-home .sf-sec.e-con { padding-block: var(--sp-ch) !important; }
body.sf-home .chead, body.sf-home .shead { margin-bottom: 36px; gap: 16px; }
body.sf-home .chapter .h2, body.sf-home .shead .h2, body.sf-home .sf-h2 .elementor-heading-title { margin-bottom: 4px; }
body.sf-home .chapter .lead, body.sf-home .shead .lead, body.sf-home .sf-lead p { line-height: 1.75; }
body.sf-home .strip__track--grid { row-gap: 32px; column-gap: 14px; }
body.sf-home .strip__track--grid .strip__meta { padding-top: 6px; }
body.sf-home .sf-wd-cats .wd-cats { gap: 16px; }
body.sf-home .hero--payoff .hero__pword { margin-top: 72px; }
body.sf-home .hero--payoff .hero__ptag { margin-bottom: 24px; }
body.sf-home .athome__in { padding-bottom: var(--sp-ch); }
body.sf-home .cfg__in { gap: 36px; }
body.sf-home .cfg__step { margin-bottom: 8px; }
body.sf-home .wsv__ctas { margin-top: 32px; }
body.sf-home .custom__in { padding-block: var(--sp-ch) !important; }
body.sf-home .ig__grid { gap: 10px; }
body.sf-home .night__in { padding-block: 120px 88px; }
body.sf-home .contact__in, body.sf-home .sf-w--contact .wrap { gap: 40px; }
body.sf-home .form { gap: 18px; }
/* the at-home photo starts at the chapter's edge, so its label sits on the photo */
body.sf-home .chapter.athome { padding-top: 0 !important; margin-top: 24px; }

/* workshop films: the burned-in subtitles sit at the bottom of each reel; frame from the top and darken the foot so they never run under the name and price */
body.sf-home .wsv__video { object-position: 50% 0%; }
body.sf-home .wsv__veil { background: linear-gradient(to top, rgba(22,14,11,.95) 0%, rgba(22,14,11,.86) 26%, rgba(22,14,11,.4) 50%, rgba(22,14,11,0) 68%), linear-gradient(to bottom, rgba(22,14,11,.3), rgba(22,14,11,0) 24%); }

/* round 16 (approved by Orel 11.10.2026): a calmer phone home. Three chapters stay desktop-only (the table separator, Instagram,
   the night statement), the works grid shows four, and the chapters breathe more. */
body.sf-home { --sp-ch: 96px; }
body.sf-home .e-con:has(.sf-w--athome), body.sf-home .e-con:has(.sf-w--instagram), body.sf-home .e-con:has(.sf-w--night),
body.sf-home .sf-w--athome, body.sf-home .sf-w--instagram, body.sf-home .sf-w--night { display: none !important; }
body.sf-home .strip__track--grid .strip__item:nth-child(n+5) { display: none !important; }

/* planner on the phone: the heading, then the picture pinned under the header while the options scroll beneath it,
   so every tap shows its change. A lower frame keeps the picture and the options on one screen. */
body.sf-home .cfg__in { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }
body.sf-home .cfg__copy { display: contents; }
body.sf-home .cfg__copy > .chead { order: 1; }
body.sf-home .cfg__preview { order: 2; position: sticky; top: 0; z-index: 3; align-self: start; padding-block: 10px 8px; margin-inline: calc(-1 * var(--gutter, 22px)); padding-inline: var(--gutter, 22px); background: var(--ground, var(--sf-paper-2)); }
body.sf-home .cfg__form { order: 3; }
body.sf-home .cfg__frame { aspect-ratio: 16 / 11; max-width: 100%; box-shadow: 0 18px 30px -22px rgba(36,24,18,.55); }
body.sf-home .cfg__caption { inset-inline-start: 10px; bottom: 10px; padding: 6px 10px; border-radius: 10px; }
body.sf-home .cfg__caption b { font-size: 1.05rem; }
body.sf-home .cfg__caption small { display: none; }

/* Orel 11.10: the hero kicker read as background over the light wood, and the headline can be a touch bigger */
body.sf-home .hero--pour .eyebrow { font-size: 15px !important; font-weight: 700; letter-spacing: .06em; color: #FAF7F2 !important; text-shadow: 0 1px 2px rgba(0,0,0,.55), 0 2px 14px rgba(0,0,0,.5); }
body.sf-home .hero--pour .eyebrow::before, body.sf-home .hero--pour .eyebrow::after { background: #FAF7F2 !important; opacity: .85; }
body.sf-home .hero--pour .hero__title { font-size: clamp(4rem, 20.5vw, 5.2rem) !important; }