/* ============================================================
   הגינה הסודית — Storefront design system (P0)
   Warm, editorial, premium. RTL. Mobile-first.
   Tokens shared with the mobile app / landing pages language.
   ============================================================ */

:root {
    --cream: #faf8f2;
    --sand: #e9e1d2;
    --ink: #16241c;
    --ink-soft: #45544b;
    --forest: #1e4632;
    --leaf: #4a8f5c;
    --leaf-hover: #5a9e6a;
    --terracotta: #c2683f;
    --white: #ffffff;
    --radius: 20px;
    --radius-sm: 12px;
    --shadow: 0 1px 2px rgba(22, 36, 28, .04), 0 10px 28px rgba(22, 36, 28, .07);
    --shadow-lift: 0 2px 6px rgba(22, 36, 28, .06), 0 18px 44px rgba(22, 36, 28, .13);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; } /* author display rules must never defeat the hidden attribute */
html { scroll-behavior: smooth; }
/* NOTE: do NOT put overflow-x hidden/clip on html/body — on this RTL site
   Chrome anchors the clip to the wrong side while anything overflows, and
   the whole page renders with its RIGHT edge cut off ("doesn't fill the
   phone screen", 2026-07-20). Fix overflowing elements directly instead
   (see .sf-hp and .sf-mega). */
body {
    font-family: 'Heebo', system-ui, sans-serif;
    background: var(--cream);
    color: var(--ink);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    /* Sticky footer: short pages (empty search etc.) must not leave the
       footer floating mid-screen with blank space beneath it. */
    min-height: 100vh; display: flex; flex-direction: column;
}
main { flex: 1; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

.sf-container { max-width: 1180px; margin: 0 auto; padding: 0 20px; }

/* ---------- Buttons ---------- */
.sf-btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 13px 26px; border-radius: 12px;
    font-weight: 700; font-size: 16px; cursor: pointer;
    transition: box-shadow .15s ease, background .15s ease;
}
.sf-btn:hover { box-shadow: var(--shadow); }
.sf-btn-primary { background: var(--forest); color: var(--white); }
.sf-btn-primary:hover { background: var(--leaf); }
.sf-btn-ghost { background: transparent; color: var(--forest); border: 2px solid var(--forest); }
.sf-btn-light { background: var(--white); color: var(--forest); }
.sf-btn-wa { background: var(--leaf); color: var(--white); padding: 10px 18px; font-size: 14px; }
.sf-btn-wa:hover { background: var(--leaf-hover); }
.sf-btn-block { width: 100%; justify-content: center; }

/* ---------- Icons ---------- */
.sf-ic { width: 18px; height: 18px; fill: currentColor; flex: none; }
.sf-ic-lg { width: 34px; height: 34px; fill: var(--leaf); flex: none; }

/* ---------- Utility top bar ---------- */
.sf-topbar { background: var(--forest); color: rgba(255, 255, 255, .92); font-size: 13px; }
.sf-topbar-inner { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; min-height: 36px; }
.sf-topbar-inner > .sf-topbar-item:first-child { grid-column: 2; justify-self: center; text-align: center; }
.sf-topbar-item { display: inline-flex; align-items: center; gap: 6px; }
.sf-topbar-item .sf-ic { width: 15px; height: 15px; }
.sf-topbar a:hover { color: #9fd3ae; }
.sf-topbar-side { grid-column: 3; justify-self: end; display: inline-flex; align-items: center; gap: 18px; }
@media (max-width: 720px) {
    .sf-topbar-side { display: none; }
    .sf-topbar-inner { grid-template-columns: 1fr; }
    .sf-topbar-inner > .sf-topbar-item:first-child { grid-column: 1; }
}

/* ---------- Header ---------- */
.sf-header {
    position: sticky; top: 0; z-index: 50;
    background: rgba(250, 248, 242, .94); backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--sand);
}
.sf-header-inner { display: flex; flex-wrap: nowrap; align-items: center; gap: 14px; height: 76px; }
.sf-logo { display: flex; align-items: center; gap: 10px; flex: none; }
.sf-logo-mark {
    width: 46px; height: 46px; border-radius: 50%;
    background: var(--white); border: 1px solid var(--sand);
    display: flex; align-items: center; justify-content: center;
    box-shadow: var(--shadow);
}
.sf-logo-mark img { width: 34px; height: 34px; object-fit: contain; }
.sf-logo-mark svg { width: 24px; height: 24px; fill: #fff; }
.sf-logo strong { display: block; font-size: 18px; font-weight: 800; color: var(--forest); line-height: 1.1; }
.sf-logo small { display: block; font-size: 12px; color: var(--ink-soft); }
.sf-nav { display: flex; flex-wrap: nowrap; align-items: center; gap: 13px; font-weight: 500; font-size: 14.5px; white-space: nowrap; min-width: 0; }
.sf-nav a:hover { color: var(--leaf); }
.sf-nav-accent { color: var(--terracotta); font-weight: 700; }
.sf-nav > .sf-nav-accent {
    border: 1.5px solid rgba(194, 104, 63, .45);
    border-radius: 999px; padding: 5px 13px; font-size: 13.5px;
}
.sf-nav > .sf-nav-accent:hover { background: rgba(194, 104, 63, .08); color: var(--terracotta); }
.sf-search {
    display: flex; align-items: center; gap: 8px;
    background: var(--white); border: 1px solid var(--sand); border-radius: 999px;
    padding: 9px 16px; flex: 1; max-width: 220px; min-width: 120px; margin-inline-start: auto;
    color: var(--ink-soft);
}
.sf-search input { border: 0; outline: 0; background: transparent; font-family: inherit; font-size: 14px; width: 100%; color: var(--ink); }
.sf-search { position: relative; } /* anchors the live-suggest dropdown */
.sf-search:focus-within { border-color: var(--leaf); }
.sf-action-search { display: none; }

/* ---------- Live search suggest dropdown ---------- */
.sf-suggest {
    position: absolute; top: calc(100% + 10px); inset-inline-end: 0;
    width: 380px; max-width: 92vw; max-height: 68vh; overflow-y: auto;
    background: var(--white); border: 1px solid var(--sand); border-radius: 16px;
    box-shadow: var(--shadow-lift); z-index: 80; padding: 6px;
}
.sf-suggest-sec { font-size: 11.5px; font-weight: 700; color: var(--ink-soft); padding: 8px 10px 4px; }
.sf-suggest-row {
    display: flex; align-items: center; gap: 10px; padding: 8px 10px;
    border-radius: 10px; font-size: 14px; font-weight: 600; color: var(--ink);
}
.sf-suggest-row:hover { background: rgba(74, 143, 92, .08); color: var(--forest); }
.sf-suggest-row img { width: 38px; height: 38px; border-radius: 8px; object-fit: cover; flex: none; }
.sf-suggest-row span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sf-suggest-row b { color: var(--forest); font-size: 13px; flex: none; }
.sf-suggest-empty { padding: 14px 12px; color: var(--ink-soft); font-size: 13.5px; text-align: center; }
.sf-suggest-all {
    display: block; text-align: center; padding: 10px; margin-top: 4px;
    border-top: 1px solid var(--sand); color: var(--leaf); font-weight: 700; font-size: 13.5px;
}
.sf-suggest-all:hover { color: var(--leaf-hover); }
.sf-search-page { max-width: 460px; margin: 0 0 18px; padding: 11px 16px; }
.sf-header-actions { display: flex; align-items: center; gap: 10px; flex: none; }
.sf-action {
    position: relative; width: 42px; height: 42px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: var(--white); border: 1px solid var(--sand); color: var(--forest);
    transition: border-color .15s ease, color .15s ease;
}
.sf-action:hover { border-color: var(--leaf); color: var(--leaf); }
.sf-action .sf-ic { width: 20px; height: 20px; }
.sf-cart-count {
    position: absolute; top: -4px; inset-inline-end: -4px;
    background: var(--terracotta); color: #fff; font-size: 11px; font-weight: 700;
    min-width: 18px; height: 18px; border-radius: 999px;
    display: flex; align-items: center; justify-content: center; padding: 0 4px;
}
.sf-catbar { display: none; }
@media (max-width: 1080px) {
    .sf-nav, .sf-header-inner .sf-search { display: none; }
    .sf-action-search { display: flex; }
    .sf-header-inner { justify-content: space-between; height: 68px; }
    .sf-catbar {
        display: flex; gap: 8px; overflow-x: auto; padding: 0 16px 12px;
        -webkit-overflow-scrolling: touch; scrollbar-width: none;
    }
    .sf-catbar::-webkit-scrollbar { display: none; }
    .sf-catbar a {
        flex: none; background: var(--white); border: 1px solid var(--sand);
        border-radius: 999px; padding: 7px 14px; font-size: 13px; font-weight: 600; color: var(--forest);
    }
    .sf-catbar a.sf-nav-accent { color: var(--terracotta); border-color: rgba(194, 104, 63, .35); }
    .sf-btn-wa { display: none; }
}

/* ---------- Hero ---------- */
.sf-hero {
    position: relative;
    background:
        radial-gradient(1200px 500px at 85% -10%, rgba(74, 143, 92, .18), transparent 60%),
        radial-gradient(900px 420px at 10% 110%, rgba(194, 104, 63, .12), transparent 60%),
        var(--cream);
    padding: 72px 0 64px;
    overflow: hidden;
}
.sf-hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sf-hero-shade {
    position: absolute; inset: 0;
    background: linear-gradient(to left, rgba(20, 36, 27, .85) 0%, rgba(20, 36, 27, .55) 50%, rgba(20, 36, 27, .12) 100%);
}
.sf-hero-banner { padding: 96px 0 88px; }
.sf-hero-banner .sf-hero-inner { position: relative; }
.sf-hero-banner .sf-hero-copy h1 { color: #fff; text-shadow: 0 2px 18px rgba(10, 22, 15, .55); }
.sf-hero-banner h1 em { color: #9fd3ae; }
.sf-hero-banner .sf-hero-copy p { color: rgba(255, 255, 255, .92); text-shadow: 0 1px 10px rgba(10, 22, 15, .5); }
.sf-hero-banner .sf-eyebrow { background: rgba(255, 255, 255, .16); backdrop-filter: blur(4px); }
.sf-hero-copy { max-width: 640px; }
.sf-eyebrow {
    display: inline-block; background: var(--forest); color: var(--white);
    font-size: 13px; font-weight: 600; padding: 6px 14px; border-radius: 999px; margin-bottom: 18px;
}
.sf-hero h1 { font-size: clamp(40px, 7vw, 68px); font-weight: 900; line-height: 1.05; color: var(--forest); }
.sf-hero h1 em { font-style: normal; color: var(--leaf); }
.sf-hero p { font-size: 19px; color: var(--ink-soft); margin: 20px 0 28px; max-width: 520px; }
.sf-hero-actions { display: flex; gap: 14px; flex-wrap: wrap; }

/* ---------- Trust strip ---------- */
.sf-trust { background: var(--white); border-block: 1px solid var(--sand); }
.sf-trust-grid {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; padding: 20px;
}
.sf-trust-grid > div { display: flex; gap: 11px; align-items: center; justify-content: center; }
.sf-trust-grid strong { display: block; font-size: 15px; color: var(--forest); line-height: 1.3; white-space: nowrap; }
.sf-trust-grid small { display: block; color: var(--ink-soft); font-size: 13px; white-space: nowrap; }
@media (max-width: 900px) {
    .sf-trust-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; padding: 16px 12px; }
    .sf-trust-grid > div { justify-content: flex-start; }
    .sf-trust-grid strong { font-size: 13.5px; }
    .sf-trust-grid small { font-size: 12px; }
}

/* ---------- Sections ---------- */
.sf-section { padding: 40px 0; }
.sf-section-alt { background: var(--white); }
.sf-section-head { text-align: center; margin-bottom: 24px; }
.sf-section-head-start { text-align: start; }
.sf-section-head h1, .sf-section-head h2 { font-size: clamp(28px, 4vw, 40px); font-weight: 900; color: var(--forest); }
.sf-section-head p { color: var(--ink-soft); margin-top: 6px; }

/* ---------- Category tiles — compact circles (sharp-ecommerce style) ---------- */
/* One row ALWAYS on desktop — a column per department; circles shrink via
   min() instead of wrapping when there are many departments. */
.sf-cat-grid {
    display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);
    gap: 14px; justify-items: center; max-width: 1120px; margin: 0 auto;
}
.sf-cat-tile { text-align: center; width: 100%; }
.sf-cat-tile img, .sf-cat-noimg {
    width: min(118px, 100%); height: auto; aspect-ratio: 1 / 1; border-radius: 50%; object-fit: cover;
    margin: 0 auto; display: flex; align-items: center; justify-content: center;
    border: 3px solid var(--white); box-shadow: var(--shadow);
    background: linear-gradient(160deg, var(--forest), var(--leaf));
    transition: transform .2s ease, box-shadow .2s ease;
}
.sf-cat-noimg { background: linear-gradient(160deg, #fdfbf5, var(--sand)); }
.sf-cat-noimg .sf-cat-ic { width: 62px; height: 62px; }
.sf-cat-tile:hover img, .sf-cat-tile:hover .sf-cat-noimg { transform: scale(1.06); box-shadow: var(--shadow-lift); }
.sf-cat-name { display: block; margin-top: 10px; font-weight: 700; font-size: 15px; color: var(--forest); line-height: 1.25; }
@media (max-width: 700px) {
    /* back to a wrapping 4-per-row grid — 8 tiles in one phone row would be unreadable */
    .sf-cat-grid { grid-auto-flow: row; grid-template-columns: repeat(4, 1fr); gap: 8px; }
    .sf-cat-tile img, .sf-cat-noimg { width: 82px; height: 82px; }
    .sf-cat-name { font-size: 12.5px; }
}

/* ---------- Product cards ---------- */
.sf-product-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
@media (max-width: 1000px) { .sf-product-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; } }
.sf-card {
    background: var(--white); border-radius: var(--radius); overflow: hidden;
    box-shadow: var(--shadow); transition: transform .2s ease, box-shadow .2s ease;
    display: flex; flex-direction: column;
}
.sf-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); }
.sf-card-media { position: relative; background: var(--sand); overflow: hidden; }
.sf-card-media img {
    width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0;
    transition: transform .4s ease;
}
.sf-card:hover .sf-card-media img { transform: scale(1.045); }
/* Full-image mode (category card_fit=contain): tall packshots — palms,
   trees — show whole; white bg so white-background packshots blend in. */
.sf-card-media.sf-fit-contain { background: var(--white); }
.sf-card-media.sf-fit-contain img { object-fit: contain; }
.sf-badge {
    position: absolute; top: 12px; inset-inline-start: 12px;
    color: var(--white); font-size: 12px; font-weight: 700;
    padding: 4px 12px; border-radius: 999px;
}
.sf-card-body { padding: 10px 14px 12px; display: flex; flex-direction: column; flex: 1; }
.sf-card-body h3 { font-size: 15px; font-weight: 600; line-height: 1.3; }
.sf-card-price { margin-top: auto; padding-top: 4px; font-size: 19px; font-weight: 800; color: var(--forest); }
.sf-card-price small { font-size: 13px; font-weight: 500; color: var(--ink-soft); margin-inline-end: 4px; }

/* ---------- CTA band ---------- */
.sf-cta-band { background: linear-gradient(135deg, var(--forest), #143324); color: var(--white); padding: 56px 0; }
.sf-cta-inner { display: flex; align-items: center; justify-content: space-between; gap: 28px; flex-wrap: wrap; }
.sf-cta-band h2 { font-size: clamp(24px, 3.5vw, 34px); font-weight: 900; }
.sf-cta-band p { opacity: .85; margin-top: 6px; }

/* ---------- Product page ---------- */
.sf-breadcrumbs { font-size: 14px; color: var(--ink-soft); margin-bottom: 20px; }
.sf-breadcrumbs a:hover { color: var(--leaf); }
.sf-product-page { display: grid; grid-template-columns: 1.1fr 1fr; gap: 40px; align-items: start; }
@media (max-width: 900px) { .sf-product-page { grid-template-columns: 1fr; } }
.sf-product-media {
    border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow);
    background: radial-gradient(120% 120% at 50% 0%, #f4eee0 0%, var(--sand) 100%);
    display: flex; align-items: center; justify-content: center;
    min-height: 340px; padding: 18px;
}
.sf-product-media img {
    max-width: 100%; max-height: 60vh; width: auto; height: auto;
    object-fit: contain; border-radius: var(--radius-sm);
}
@media (max-width: 900px) { .sf-product-media { min-height: 0; padding: 12px; } .sf-product-media img { max-height: 48vh; } }
.sf-product-info h1 { font-size: clamp(26px, 4vw, 38px); font-weight: 900; color: var(--forest); line-height: 1.15; }
.sf-product-price { font-size: 30px; margin: 14px 0; }
.sf-product-desc { color: var(--ink-soft); margin-bottom: 18px; }
.sf-variations { background: var(--white); border-radius: var(--radius-sm); padding: 16px; margin-bottom: 18px; box-shadow: var(--shadow); }
.sf-variations h4 { font-size: 14px; color: var(--ink-soft); margin-bottom: 8px; }
.sf-variations ul { list-style: none; }
.sf-variations li { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px dashed var(--sand); }
.sf-variations li:last-child { border-bottom: none; }
.sf-trust-box { background: rgba(74, 143, 92, .1); border: 1px solid rgba(74, 143, 92, .25); border-radius: var(--radius-sm); padding: 14px 16px; margin-bottom: 18px; }
.sf-trust-box p { font-size: 14px; color: var(--ink-soft); }
.sf-note { font-size: 13px; color: var(--ink-soft); text-align: center; margin-top: 10px; }
.sf-note-inline { font-size: 13px; color: var(--ink-soft); }
.sf-related-head { margin-top: 56px; }
.sf-empty { background: var(--white); border-radius: var(--radius); padding: 40px 24px; text-align: center; color: var(--ink-soft); box-shadow: var(--shadow); }
.sf-empty p { margin-bottom: 16px; }
.sf-empty .sf-btn { margin: 0 auto; }

/* ---------- Footer ---------- */
.sf-footer { background: var(--ink); color: rgba(255, 255, 255, .8); margin-top: 0; }
.sf-footer-grid { display: grid; grid-template-columns: 1.5fr .8fr 1fr 1.3fr; gap: 32px; padding: 48px 20px 28px; }
@media (max-width: 800px) {
    /* Everything stays — just tighter: 2-column links, smaller type. */
    .sf-footer-grid { grid-template-columns: 1fr 1fr; gap: 20px 24px; padding-top: 36px; }
    .sf-footer-links { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 14px; }
    .sf-footer p { font-size: 12.5px; line-height: 1.55; }
}
@media (max-width: 520px) { .sf-footer-grid { grid-template-columns: 1fr; } }
.sf-footer h4 { color: var(--white); margin-bottom: 8px; }
.sf-footer a { color: #9fd3ae; }
.sf-footer p { font-size: 14px; }
.sf-logo-footer strong { color: var(--white); font-size: 18px; }
.sf-footer-bottom { padding: 16px 20px 28px; font-size: 13px; opacity: .6; border-top: 1px solid rgba(255, 255, 255, .12); text-align: center; }
.sf-footer-credit a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.sf-footer-credit a:hover { color: #9fd3ae; }
@media (max-width: 560px) {
    .sf-footer-credit { display: block; margin-top: 4px; }
    .sf-footer-credit-sep { display: none; }
}

/* ---------- Buy row / qty ---------- */
.sf-buy-row { display: flex; gap: 12px; align-items: stretch; margin: 18px 0 10px; }
.sf-btn-grow { flex: 1; justify-content: center; font-size: 17px; }
.sf-btn-secondary-gap { margin-bottom: 18px; }
.sf-qty {
    display: flex; align-items: center; gap: 4px;
    background: var(--white); border: 1px solid var(--sand); border-radius: 999px; padding: 4px;
}
.sf-qty button {
    width: 36px; height: 36px; border: 0; border-radius: 50%;
    background: var(--cream); color: var(--forest); font-size: 18px; font-weight: 700;
    cursor: pointer; font-family: inherit;
}
.sf-qty button:hover { background: var(--sand); }
.sf-qty span { min-width: 28px; text-align: center; font-weight: 700; }
.sf-variation-options { display: flex; flex-direction: column; gap: 6px; }
.sf-variation-opt { display: block; cursor: pointer; }
.sf-variation-opt input { position: absolute; opacity: 0; }
.sf-variation-opt span {
    display: block; padding: 10px 14px; border: 1.5px solid var(--sand); border-radius: var(--radius-sm);
    background: var(--cream); transition: border-color .15s ease, background .15s ease;
}
.sf-variation-opt input:checked + span { border-color: var(--leaf); background: rgba(74, 143, 92, .08); }
.sf-shake { animation: sf-shake .4s ease; }
@keyframes sf-shake { 25% { transform: translateX(4px); } 50% { transform: translateX(-4px); } 75% { transform: translateX(3px); } }
.sf-added { background: var(--forest) !important; }

/* ---------- Sub-category image circles (category pages) ---------- */
.sf-subcat-circles { display: flex; flex-wrap: wrap; gap: 14px; margin: 2px 0 22px; }
.sf-subcat-c { text-align: center; width: 84px; flex: none; }
.sf-subcat-img {
    width: 76px; height: 76px; border-radius: 50%; object-fit: cover;
    display: flex; align-items: center; justify-content: center; margin: 0 auto;
    border: 2.5px solid var(--white); box-shadow: var(--shadow);
    background: linear-gradient(160deg, var(--forest), var(--leaf));
    color: #fff; font-weight: 800; font-size: 15px;
    transition: transform .18s ease, border-color .18s ease;
}
.sf-subcat-c:hover .sf-subcat-img { transform: scale(1.06); }
.sf-subcat-c.is-active .sf-subcat-img { border-color: var(--leaf); }
.sf-subcat-name { display: block; margin-top: 6px; font-size: 12.5px; font-weight: 700; color: var(--forest); line-height: 1.2; }
.sf-subcat-c.is-active .sf-subcat-name { color: var(--leaf); }
@media (max-width: 700px) {
    .sf-subcat-circles { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 4px; -webkit-overflow-scrolling: touch; }
    .sf-subcat-circles::-webkit-scrollbar { display: none; }
    .sf-subcat-c { width: 72px; }
    .sf-subcat-img { width: 64px; height: 64px; }
}

/* ---------- Sub-category chips (category pages) ---------- */
.sf-subcat-chips {
    display: flex; flex-wrap: wrap; gap: 8px; margin: -4px 0 18px;
    /* Stays pinned under the sticky header while scrolling long categories.
       The translucent blurred strip + shadow only materialize once it is
       actually stuck (.is-stuck via shop.js) — otherwise it looks untouched. */
    position: sticky; top: 76px; z-index: 40;
    padding: 8px 0;
}
.sf-subcat-chips.is-stuck {
    background: rgba(250, 248, 242, 0.88);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    box-shadow: 0 10px 22px -14px rgba(22, 36, 28, .25);
}
.sf-subcat-chips a {
    flex: none; background: var(--white); border: 1.5px solid var(--sand);
    border-radius: 999px; padding: 7px 15px;
    font-size: 13.5px; font-weight: 600; color: var(--forest);
    transition: border-color .15s ease, background .15s ease;
}
.sf-subcat-chips a:hover { border-color: var(--leaf); }
.sf-subcat-chips a.is-active { background: var(--forest); border-color: var(--forest); color: #fff; }
@media (max-width: 700px) {
    .sf-subcat-chips { flex-wrap: nowrap; overflow-x: auto; top: 68px; padding-bottom: 4px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
    .sf-subcat-chips::-webkit-scrollbar { display: none; }
}

/* ---------- Collection cards v2: creative side tab ---------- */
.sf-colcards { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; padding-top: 6px; }
.sf-colcards .sf-colcard { width: calc(20% - 13px); min-width: 180px; }
@media (max-width: 1000px) {
    .sf-colcards { gap: 14px; }
    .sf-colcards .sf-colcard { width: calc(50% - 7px); min-width: 0; }
}
.sf-colcard { position: relative; }
.sf-colcard .sf-card { height: 100%; }
.sf-colcard-tab {
    position: absolute; top: 10px; inset-inline-end: 10px; z-index: 2;
    display: flex; align-items: center;
    background: rgba(30, 70, 50, .85); backdrop-filter: blur(6px);
    color: #fff; font-weight: 800; font-size: 12.5px; line-height: 1;
    padding: 7px 13px; border-radius: 999px;
    box-shadow: 0 3px 12px rgba(22, 36, 28, .25);
    transition: background .18s ease;
}
.sf-colcard-tab:hover { background: var(--leaf); }
@media (max-width: 560px) {
    .sf-colcard-tab { font-size: 11.5px; padding: 6px 11px; top: 8px; inset-inline-end: 8px; }
}

/* ---------- Collection cards (one per collection, arrow header) ---------- */
.sf-collections-grid { margin-bottom: 20px; }
.sf-collection-card { display: flex; flex-direction: column; gap: 8px; }
.sf-collection-head {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    font-weight: 800; font-size: 14px; color: var(--forest); padding: 0 2px;
    transition: color .15s ease;
}
.sf-collection-head:hover { color: var(--leaf); }
.sf-collection-head i {
    width: 30px; height: 30px; border-radius: 50%; flex: none;
    background: var(--leaf); color: #fff;
    display: flex; align-items: center; justify-content: center;
    transition: background .15s ease;
}
.sf-collection-head:hover i { background: var(--leaf-hover); }
.sf-collection-card .sf-card { flex: 1; }

/* ---------- Cart psychology: upgrade chips + cross-sell ---------- */
.sf-upgrade {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    background: rgba(74, 143, 92, .07); border: 1px dashed rgba(74, 143, 92, .45);
    border-radius: 10px; padding: 8px 12px; margin: -4px 0 10px;
    font-size: 13px; color: var(--forest);
}
.sf-upgrade span { line-height: 1.4; }
.sf-upgrade em { display: block; font-style: normal; font-size: 12px; color: var(--ink-soft); }
.sf-upgrade button {
    flex: none; border: 0; background: var(--leaf); color: #fff; border-radius: 999px;
    padding: 7px 16px; font-family: inherit; font-weight: 700; font-size: 13px; cursor: pointer;
}
.sf-upgrade button:hover { background: var(--leaf-hover); }
.sf-cross-row { display: flex; gap: 10px; overflow-x: auto; padding: 4px 0; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.sf-cross-row::-webkit-scrollbar { display: none; }
.sf-cross-card {
    flex: none; width: 132px; background: var(--white);
    border: 1px solid var(--sand); border-radius: 12px; padding: 8px;
}
.sf-cross-card img { width: 100%; aspect-ratio: 1/1; object-fit: cover; border-radius: 8px; }
.sf-cross-name {
    display: block; font-size: 12.5px; font-weight: 600; margin: 7px 0 4px;
    line-height: 1.3; max-height: 2.6em; overflow: hidden;
}
.sf-cross-foot { display: flex; justify-content: space-between; align-items: center; font-size: 13px; font-weight: 700; color: var(--forest); }
.sf-cross-foot button, .sf-cross-foot a {
    border: 0; background: transparent; color: var(--leaf);
    font-weight: 700; font-size: 12.5px; cursor: pointer; font-family: inherit;
}
.sf-cross-foot button:hover, .sf-cross-foot a:hover { color: var(--leaf-hover); }
.sf-cart-cross { margin: 24px 0 6px; }
.sf-cart-cross h3 { color: var(--forest); font-size: 18px; margin-bottom: 10px; }
.sf-drawer-cross { padding: 10px 16px 12px; border-top: 1px solid var(--sand); }
.sf-drawer-cross h4 { font-size: 13px; color: var(--ink-soft); margin-bottom: 8px; font-weight: 600; }

/* Compact cart rows inside the narrow drawer — keep names readable */
.sf-drawer .sf-cart-row { gap: 8px; padding: 9px 10px; }
.sf-drawer .sf-cart-row img, .sf-drawer .sf-cart-noimg { width: 46px; height: 46px; border-radius: 8px; }
.sf-drawer .sf-cart-row-info strong {
    font-size: 13px; line-height: 1.3;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.sf-drawer .sf-cart-row-info small { font-size: 11.5px; }
.sf-drawer .sf-cart-row-price { font-size: 13px; }
.sf-drawer .sf-qty { padding: 2px; gap: 2px; }
.sf-drawer .sf-qty button { width: 26px; height: 26px; font-size: 14px; }
.sf-drawer .sf-qty span { min-width: 20px; font-size: 13px; }
.sf-drawer .sf-cart-remove { font-size: 18px; padding: 2px 4px; }
.sf-drawer .sf-upgrade { padding: 7px 10px; font-size: 12px; }
.sf-drawer .sf-upgrade em { font-size: 11px; }
.sf-drawer .sf-upgrade button { padding: 6px 12px; font-size: 12px; }
.sf-drawer .sf-cross-card { width: 102px; padding: 6px; }
.sf-drawer .sf-cross-name { font-size: 11.5px; margin: 5px 0 3px; }
.sf-drawer .sf-cross-foot { font-size: 12px; }
.sf-drawer .sf-cross-foot button, .sf-drawer .sf-cross-foot a { font-size: 11.5px; }

/* ---------- Garden builder quiz — light funnel stage ---------- */
.sf-quiz-stage {
    background:
        radial-gradient(900px 420px at 88% -10%, rgba(74, 143, 92, .14), transparent 60%),
        radial-gradient(700px 360px at 8% 108%, rgba(194, 104, 63, .09), transparent 60%),
        var(--cream);
    padding: 6vh 0 10vh;
    min-height: calc(100vh - 118px); /* full-screen funnel — no footer below */
    display: flex; flex-direction: column; justify-content: center;
}
/* In a column flex, the container's auto margins disable stretching and it
   shrink-wraps to the widest text line — force full width back. */
.sf-quiz-stage .sf-container { width: 100%; }
.sf-quiz-head { max-width: 760px; margin: 0 auto 26px; }
.sf-quiz-meta { display: flex; justify-content: space-between; align-items: baseline; }
.sf-quiz-count { font-size: 13px; color: var(--ink-soft); }
.sf-quiz-count b { color: var(--forest); font-size: 16px; }
.sf-quiz-brand { font-size: 12px; color: var(--ink-soft); opacity: .7; font-weight: 600; }
.sf-quiz-progress { height: 6px; background: var(--sand); border-radius: 999px; margin: 10px 0 12px; overflow: hidden; }
.sf-quiz-progress span { display: block; height: 100%; background: linear-gradient(90deg, var(--leaf), var(--forest)); border-radius: 999px; transition: width .5s cubic-bezier(.22, 1, .36, 1); }
.sf-quiz-summary { display: flex; flex-wrap: wrap; gap: 6px; }
.sf-quiz-summary i {
    font-style: normal; font-size: 12px; font-weight: 600; color: var(--forest);
    background: var(--white); border: 1px solid rgba(74, 143, 92, .35);
    padding: 3px 11px; border-radius: 999px;
}
.sf-quiz { max-width: 760px; margin: 0 auto; }
.sf-quiz-step { display: none; }
.sf-quiz-step.is-active { display: block; animation: sf-quiz-in .4s ease; }
/* Opacity-only — transforms left card text blurry on Windows */
@keyframes sf-quiz-in { from { opacity: 0; } to { opacity: 1; } }
.sf-quiz-step h2 { font-size: clamp(24px, 4.5vw, 34px); font-weight: 900; color: var(--forest); line-height: 1.15; }
.sf-quiz-step > p { color: var(--ink-soft); margin: 8px 0 20px; font-size: 15px; }

/* Segment cards — full-bleed photos, frosted-glass labels */
.sf-quiz-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.sf-quiz-card {
    position: relative; border-radius: 20px; overflow: hidden; cursor: pointer;
    border: 2.5px solid transparent; aspect-ratio: 4/3; background: var(--forest);
    box-shadow: var(--shadow);
    transition: border-color .18s ease, box-shadow .18s ease;
}
.sf-quiz-card:hover { box-shadow: var(--shadow-lift); }
.sf-quiz-card input { position: absolute; opacity: 0; }
.sf-quiz-card img {
    position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
    transition: transform .4s ease;
}
.sf-quiz-card:hover img { transform: scale(1.05); }
.sf-quiz-card > span {
    position: absolute; inset-inline: 12px; bottom: 12px;
    padding: 13px 14px; border-radius: 14px; text-align: center;
    font-weight: 800; font-size: 17px; color: #fff; line-height: 1.3;
    background: rgba(14, 30, 21, .4);
    backdrop-filter: blur(10px) saturate(1.3);
    -webkit-backdrop-filter: blur(10px) saturate(1.3);
    border: 1px solid rgba(255, 255, 255, .22);
    text-shadow: 0 1px 6px rgba(0, 0, 0, .35);
    transition: background .2s ease, border-color .2s ease;
}
.sf-quiz-card-plan {
    background:
        radial-gradient(420px 220px at 85% 0%, rgba(255, 255, 255, .14), transparent 60%),
        linear-gradient(150deg, var(--terracotta), #8f4c2c);
}
.sf-quiz-card-plan > span { background: rgba(90, 44, 22, .3); }
.sf-quiz-card > span small { display: block; font-size: 12.5px; font-weight: 600; opacity: .85; margin-top: 3px; }
.sf-quiz-tick {
    position: absolute; top: 12px; inset-inline-start: 12px; width: 30px; height: 30px;
    border-radius: 50%; background: var(--leaf); color: #fff; z-index: 1;
    display: flex; align-items: center; justify-content: center;
    opacity: 0; transition: opacity .18s ease;
    box-shadow: 0 2px 12px rgba(0, 0, 0, .4);
}
.sf-quiz-card.is-picked, .sf-quiz-card:has(input:checked) { border-color: #9fd3ae; }
.sf-quiz-card.is-picked > span, .sf-quiz-card:has(input:checked) > span {
    background: rgba(58, 112, 80, .5); border-color: rgba(159, 211, 174, .65);
}
.sf-quiz-card.is-picked .sf-quiz-tick, .sf-quiz-card:has(input:checked) .sf-quiz-tick { opacity: 1; }

/* Full-width option rows (single-choice steps — tap advances) */
.sf-quiz-opts { display: flex; flex-direction: column; gap: 11px; }
.sf-quiz-opt { display: block; cursor: pointer; }
.sf-quiz-opt input { position: absolute; opacity: 0; }
.sf-quiz-opt span {
    display: block; padding: 17px 20px; border-radius: 14px;
    background: var(--white); border: 1.5px solid var(--sand); box-shadow: var(--shadow);
    font-weight: 700; font-size: 16px; color: var(--ink);
    transition: border-color .15s ease, background .15s ease;
}
.sf-quiz-opt span:hover { border-color: var(--leaf); }
.sf-quiz-opt span:active { background: rgba(74, 143, 92, .1); }
.sf-quiz-opt.is-picked span, .sf-quiz-opt input:checked + span {
    border-color: var(--leaf); background: rgba(74, 143, 92, .08); color: var(--forest);
}

/* Contact card */
.sf-quiz-contact { background: var(--white); border-radius: 18px; padding: 22px; border: 1px solid var(--sand); box-shadow: var(--shadow); }

.sf-quiz-error { color: #b3402e; font-size: 14px; margin-top: 12px; font-weight: 600; }
.sf-quiz-nav { display: flex; flex-direction: column; gap: 8px; margin-top: 24px; }
.sf-quiz-nav .sf-btn { font-size: 16.5px; padding: 15px 26px; }
.sf-quiz-back {
    align-self: center; border: 0; background: transparent; color: var(--ink-soft);
    font-family: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer;
    padding: 8px 14px; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--sand);
}
.sf-quiz-back:hover { color: var(--leaf); text-decoration-color: var(--leaf); }
@media (max-width: 560px) {
    .sf-quiz-stage { padding: 26px 0 60px; }
    .sf-quiz-cards { gap: 10px; }
    .sf-quiz-card > span { font-size: 14px; padding: 10px 10px; inset-inline: 8px; bottom: 8px; border-radius: 12px; }
}

.sf-build-wa {
    display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
    background: var(--white); border-radius: var(--radius-sm);
    padding: 14px 18px; box-shadow: var(--shadow); margin-bottom: 8px;
}
.sf-build-wa span { color: var(--ink-soft); font-weight: 600; }

/* ---------- Harvest journey (fruit trees) ---------- */
.sf-journey {
    background: linear-gradient(135deg, var(--forest), #143324);
    color: #fff; border-radius: var(--radius);
    padding: 22px 20px 18px; margin: 18px 0 0;
}
.sf-journey-head h3 { font-size: 17px; font-weight: 800; color: #fff; margin-bottom: 20px; }
.sf-journey-track { position: relative; height: 96px; margin: 0 4px; }
.sf-journey-line {
    position: absolute; top: 14px; inset-inline: 0; height: 3px;
    background: rgba(255, 255, 255, .16); border-radius: 2px;
}
.sf-journey-fill {
    position: absolute; top: 14px; inset-inline-start: 0; height: 3px; width: 0;
    background: #9fd3ae; border-radius: 2px; transition: width .5s ease;
}
.sf-journey-start, .sf-journey-end {
    position: absolute; top: 26px; font-size: 11px; line-height: 1.35;
    color: rgba(255, 255, 255, .5);
}
.sf-journey-start { inset-inline-start: 0; }
.sf-journey-end { inset-inline-end: 0; text-align: end; }
.sf-journey-stop {
    position: absolute; top: 6px; width: 88px; transform: translateX(50%);
    text-align: center; cursor: pointer; user-select: none;
}
[dir="ltr"] .sf-journey-stop { transform: translateX(-50%); }
.sf-journey-stop i {
    display: block; width: 13px; height: 13px; border-radius: 50%;
    background: #143324; border: 2.5px solid rgba(255, 255, 255, .45);
    margin: 0 auto 10px; transition: background .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.sf-journey-stop strong { display: block; font-size: 14px; color: rgba(255, 255, 255, .85); }
.sf-journey-stop em { display: block; font-style: normal; font-size: 11px; color: rgba(255, 255, 255, .55); line-height: 1.3; }
.sf-journey-stop.is-active i { background: #9fd3ae; border-color: #9fd3ae; box-shadow: 0 0 0 5px rgba(159, 211, 174, .22); }
.sf-journey-stop.is-active strong { color: #9fd3ae; }
.sf-journey-stop.is-active em { color: rgba(255, 255, 255, .85); }
.sf-journey-desc { margin-top: 4px; font-size: 14.5px; font-weight: 600; color: #dff0e4; min-height: 1.6em; }
.sf-journey-pop { animation: sf-journey-pop .35s ease; }
@keyframes sf-journey-pop { 0% { opacity: .15; transform: translateY(5px); } 100% { opacity: 1; transform: none; } }
.sf-journey-note { margin-top: 8px; font-size: 12px; color: rgba(255, 255, 255, .5); }
@media (max-width: 480px) {
    .sf-journey-stop { width: 72px; }
    .sf-journey-stop strong { font-size: 13px; }
    .sf-journey-stop em { font-size: 10px; }
}

/* ---------- Cart page ---------- */
.sf-narrow { max-width: 760px; }
.sf-cart-row {
    display: flex; align-items: center; gap: 14px;
    background: var(--white); border-radius: var(--radius-sm);
    padding: 12px 14px; margin-bottom: 10px; box-shadow: var(--shadow);
}
.sf-cart-row img, .sf-cart-noimg { width: 62px; height: 62px; border-radius: 10px; object-fit: cover; background: var(--sand); flex: none; }
.sf-cart-row-info { flex: 1; min-width: 0; }
.sf-cart-row-info strong { display: block; font-size: 15px; }
.sf-cart-row-info small { color: var(--ink-soft); }
.sf-cart-row-price { display: block; color: var(--forest); font-weight: 700; font-size: 14px; }
.sf-cart-remove {
    border: 0; background: transparent; color: var(--ink-soft);
    font-size: 22px; cursor: pointer; padding: 4px 8px; font-family: inherit;
}
.sf-cart-remove:hover { color: var(--terracotta); }
@media (max-width: 560px) {
    /* Cart PAGE rows get the same compact treatment as the drawer —
       otherwise long plant names collapse to a word-per-line column. */
    .sf-cart-row { gap: 8px; padding: 9px 10px; }
    .sf-cart-row img, .sf-cart-noimg { width: 46px; height: 46px; border-radius: 8px; }
    .sf-cart-row-info strong {
        font-size: 13px; line-height: 1.3;
        display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    }
    .sf-cart-row-info small { font-size: 11.5px; }
    .sf-cart-row-price { font-size: 13px; }
    .sf-qty { padding: 2px; gap: 2px; }
    .sf-qty button { width: 28px; height: 28px; font-size: 14px; }
    .sf-qty span { min-width: 20px; font-size: 13px; }
    .sf-upgrade { flex-wrap: wrap; }
}
.sf-cart-empty { background: var(--white); border-radius: var(--radius); padding: 48px 20px; text-align: center; box-shadow: var(--shadow); }
.sf-cart-empty p { color: var(--ink-soft); margin-bottom: 16px; }
.sf-cart-summary { background: var(--white); border-radius: var(--radius); padding: 22px; margin-top: 18px; box-shadow: var(--shadow); }
.sf-cart-total { display: flex; justify-content: space-between; align-items: center; font-size: 18px; margin-bottom: 8px; }
.sf-cart-total strong { font-size: 26px; color: var(--forest); }
.sf-cart-summary .sf-btn { margin: 10px 0 6px; }

/* ---------- Info pages / forms ---------- */
.sf-info-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 28px; }
@media (max-width: 800px) { .sf-info-cards { grid-template-columns: 1fr; } }
.sf-info-card { background: var(--white); border-radius: var(--radius); padding: 22px; box-shadow: var(--shadow); }
.sf-info-card h3 { color: var(--forest); margin-bottom: 6px; }
.sf-info-card p { color: var(--ink-soft); font-size: 14px; }
.sf-info-cards-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .sf-info-cards-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .sf-info-cards-4 { grid-template-columns: 1fr; } }

/* ---------- Account: login + orders ---------- */
.sf-login-card { max-width: 460px; }
.sf-member-perks { padding-top: 6px; }
.sf-member-perks h3 { color: var(--forest); font-size: 18px; margin-bottom: 12px; }
.sf-check, .sf-form-card label.sf-check { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; color: var(--ink-soft); font-weight: 400; margin: 4px 0 14px; cursor: pointer; }
.sf-check input, .sf-form-card label.sf-check input {
    /* the generic form-field input rule (width:100%, border, padding) must
       not touch checkboxes — it turns them into a full-width bar */
    width: auto; min-width: 0; flex: none; display: inline-block;
    margin: 3px 0 0; padding: 0; border: 0; background: none;
    accent-color: var(--leaf);
}
.sf-order-row {
    display: flex; align-items: center; gap: 14px;
    padding: 12px 2px; border-bottom: 1px dashed var(--sand);
}
.sf-order-row:last-child { border-bottom: 0; }
.sf-order-main { flex: 1; min-width: 0; }
.sf-order-main strong { display: block; font-size: 14.5px; }
.sf-order-main small { color: var(--ink-soft); font-size: 12px; }
.sf-order-status {
    background: rgba(74, 143, 92, .1); color: var(--forest);
    font-size: 12px; font-weight: 600; border-radius: 999px; padding: 3px 10px; flex: none;
}
.sf-order-total { color: var(--forest); flex: none; }
.sf-order-link { color: var(--leaf); font-weight: 700; font-size: 13px; flex: none; }
.sf-account-actions { display: flex; gap: 12px; margin-top: 16px; flex-wrap: wrap; }

.sf-cta-inline { text-align: center; background: var(--white); border-radius: var(--radius); padding: 28px; box-shadow: var(--shadow); }
.sf-cta-inline p { color: var(--ink-soft); margin-bottom: 14px; }
.sf-prose h2 { color: var(--forest); font-size: 22px; margin: 26px 0 10px; }
.sf-prose p, .sf-prose li { color: var(--ink-soft); }
.sf-prose ul { padding-inline-start: 20px; margin: 10px 0; }
.sf-prose li { margin-bottom: 6px; }
.sf-prose a { color: var(--leaf); font-weight: 600; }
.sf-consult-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 40px; align-items: start; }
@media (max-width: 900px) { .sf-consult-grid { grid-template-columns: 1fr; } }
.sf-checklist { list-style: none; margin-top: 8px; }
.sf-checklist li { position: relative; padding-inline-start: 30px; margin-bottom: 12px; color: var(--ink-soft); }
.sf-checklist li::before {
    content: '✓'; position: absolute; inset-inline-start: 0; top: 0;
    width: 22px; height: 22px; border-radius: 50%; background: rgba(74, 143, 92, .15);
    color: var(--leaf); font-weight: 700; font-size: 13px;
    display: flex; align-items: center; justify-content: center;
}
.sf-form-card { background: var(--white); border-radius: var(--radius); padding: 26px; box-shadow: var(--shadow-lift); }
.sf-form-card h3 { color: var(--forest); margin-bottom: 14px; font-size: 20px; }
.sf-form-card label { display: block; font-weight: 600; font-size: 14px; margin-bottom: 12px; }
.sf-form-card input, .sf-form-card textarea {
    display: block; width: 100%; margin-top: 5px;
    border: 1.5px solid var(--sand); border-radius: var(--radius-sm);
    padding: 11px 14px; font-family: inherit; font-size: 15px; background: var(--cream);
    outline: none; transition: border-color .15s ease;
}
.sf-form-card input:focus, .sf-form-card textarea:focus { border-color: var(--leaf); background: var(--white); }
.sf-form-error { color: #b3402e; font-size: 13px; margin: -8px 0 10px; }
.sf-form-success { text-align: center; padding: 28px 6px; }
.sf-form-success h3 { font-size: 24px; }
.sf-form-success p { color: var(--ink-soft); margin-top: 8px; }
/* Honeypot: invisible to humans but present for bots. NO offscreen left:
   -9999px — on an RTL page that stretched the scrollable area 9999px to the
   LEFT (endless sideways scroll on checkout/account/consult forms). A
   zero-size transparent box at its natural spot hides just as well.
   !important because the generic form-field input rule (width:100% +
   padding) is more specific and was re-inflating the field to full width —
   leaving a 42px left overflow on every form page (measured 2026-07-20). */
input.sf-hp, .sf-hp {
    position: absolute !important; inset-inline-start: 0 !important;
    width: 0 !important; height: 0 !important; min-width: 0 !important; min-height: 0 !important;
    padding: 0 !important; border: 0 !important; margin: 0 !important;
    opacity: 0 !important; overflow: hidden !important; pointer-events: none !important;
}
.sf-footer-links { list-style: none; }
.sf-footer-links li { margin-bottom: 6px; }
.sf-footer-links a { font-size: 14px; }

/* ---------- WhatsApp bubble: see "בואו נדבר" pill rules at the end ---------- */

/* ---------- P1: product gallery ---------- */
.sf-gallery-thumbs { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.sf-gallery-thumbs button {
    width: 64px; height: 64px; border-radius: 12px; border: 2px solid transparent;
    padding: 0; overflow: hidden; cursor: pointer; background: var(--sand); flex: none;
}
.sf-gallery-thumbs button.is-active { border-color: var(--leaf); }
.sf-gallery-thumbs img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---------- P1: variation swatches ---------- */
.sf-variation-swatches { flex-direction: row; flex-wrap: wrap; gap: 8px; }
.sf-swatch-opt span {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 8px 14px; border-radius: 999px; font-size: 14px;
}
.sf-swatch-img { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; flex: none; }
.sf-swatch-dot { width: 18px; height: 18px; border-radius: 50%; border: 1px solid rgba(0, 0, 0, .12); flex: none; }

/* ---------- P1: collection rows + page ---------- */
.sf-collection-row { margin-bottom: 36px; }
.sf-collection-row:last-child { margin-bottom: 0; }
.sf-row-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 14px; }
.sf-row-head h3 { font-size: 22px; font-weight: 900; color: var(--forest); }
.sf-row-head a { color: var(--leaf); font-weight: 600; font-size: 14px; white-space: nowrap; }
.sf-row-head a:hover { color: var(--forest); }
.sf-row-slider {
    display: grid; grid-auto-flow: column; grid-auto-columns: min(250px, 68vw);
    gap: 16px; overflow-x: auto; padding-bottom: 10px;
    scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch;
}
.sf-row-slider .sf-card { scroll-snap-align: start; }
.sf-collection-tag {
    display: inline-block; margin-top: 8px; font-size: 13px; font-weight: 600;
    color: var(--leaf); background: rgba(74, 143, 92, .1);
    border: 1px solid rgba(74, 143, 92, .25); border-radius: 999px; padding: 3px 12px;
}
.sf-collection-tag:hover { background: rgba(74, 143, 92, .18); }

/* ---------- P1: long description ---------- */
.sf-product-longdesc { margin-top: 52px; max-width: 820px; }
.sf-product-longdesc h2 { font-size: 24px; font-weight: 900; color: var(--forest); margin-bottom: 10px; }
.sf-product-longdesc div { color: var(--ink-soft); line-height: 1.75; }

/* ---------- P1.5: design polish (frontend-design pass) ---------- */
.sf-hero:not(.sf-hero-banner)::after {
    content: ''; position: absolute; inset-inline-end: -60px; bottom: -70px;
    width: 420px; height: 420px; pointer-events: none; opacity: .05;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%231e4632'%3E%3Crect x='11.2' y='10' width='1.6' height='11' rx='0.8'/%3E%3Cellipse cx='8' cy='8.5' rx='4.6' ry='2.8' transform='rotate(-38 8 8.5)'/%3E%3Cellipse cx='16' cy='8.5' rx='4.6' ry='2.8' transform='rotate(38 16 8.5)'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* Hand-drawn terracotta stroke under the highlighted hero word. */
.sf-hero h1 em {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 12' preserveAspectRatio='none'%3E%3Cpath d='M3 9 C 30 3, 80 2, 117 6' fill='none' stroke='%23c2683f' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat bottom / 100% .22em;
    padding-bottom: .14em;
}
.sf-hero-banner h1 em {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 12' preserveAspectRatio='none'%3E%3Cpath d='M3 9 C 30 3, 80 2, 117 6' fill='none' stroke='%239fd3ae' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* Trust-strip icons sit in soft leaf discs. */
.sf-trust-grid .sf-ic-lg {
    width: 44px; height: 44px; padding: 9px; border-radius: 50%;
    background: rgba(74, 143, 92, .12);
}

/* Pressed state + accessible focus. */
.sf-btn:active { transform: translateY(0) scale(.98); }
:focus-visible { outline: 2px solid var(--leaf); outline-offset: 2px; border-radius: 4px; }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ---------- "NEW" badge for the planted-planters section ---------- */
.sf-head-with-badge { display: inline-flex; align-items: center; gap: 12px; }
.sf-new-badge {
    position: relative; overflow: hidden;
    display: inline-flex; align-items: center; gap: 5px;
    background: linear-gradient(135deg, var(--terracotta), #d98354);
    color: var(--white); font-size: 14px; font-weight: 800;
    padding: 5px 14px; border-radius: 999px; vertical-align: middle;
    animation: sf-new-pulse 2.2s ease-out infinite;
}
.sf-new-badge svg { width: 14px; height: 14px; fill: currentColor; }
.sf-new-badge::after {
    content: ''; position: absolute; top: 0; bottom: 0; width: 36px;
    background: linear-gradient(105deg, transparent, rgba(255, 255, 255, .55), transparent);
    inset-inline-start: -50px;
    animation: sf-new-shine 2.8s ease-in-out infinite;
}
@keyframes sf-new-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(194, 104, 63, .45); }
    70%  { box-shadow: 0 0 0 12px rgba(194, 104, 63, 0); }
    100% { box-shadow: 0 0 0 0 rgba(194, 104, 63, 0); }
}
@keyframes sf-new-shine {
    0%, 55% { inset-inline-start: -50px; }
    85%, 100% { inset-inline-start: calc(100% + 20px); }
}

/* ---------- Blog ---------- */
.sf-center-cta { text-align: center; margin-top: 28px; }
/* Narrow, square-ish cards; row centers even when not full (Ofir feedback). */
.sf-blog-grid { display: grid; grid-template-columns: repeat(auto-fill, 250px); gap: 18px; justify-content: center; }
@media (max-width: 600px) { .sf-blog-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; } }
.sf-blog-card {
    background: var(--white); border-radius: var(--radius); overflow: hidden;
    box-shadow: var(--shadow); display: flex; flex-direction: column;
    transition: transform .2s ease, box-shadow .2s ease;
}
.sf-blog-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); }
.sf-blog-media { aspect-ratio: 4/3; position: relative; overflow: hidden; background: var(--sand); }
.sf-blog-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.sf-blog-card:hover .sf-blog-media img { transform: scale(1.045); }
.sf-blog-body { padding: 12px 14px 14px; display: flex; flex-direction: column; flex: 1; gap: 6px; }
.sf-blog-body h3 {
    font-size: 15px; font-weight: 800; color: var(--forest); line-height: 1.3;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.sf-blog-body p {
    font-size: 13px; color: var(--ink-soft);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.sf-blog-more { margin-top: auto; color: var(--leaf); font-weight: 700; font-size: 14px; }

/* ---------- Blog post page ---------- */
.sf-post h1 { font-size: clamp(28px, 4.5vw, 42px); font-weight: 900; color: var(--forest); line-height: 1.15; }
.sf-post-subtitle { font-size: 18px; color: var(--ink-soft); margin-top: 8px; }
.sf-post-meta { font-size: 13px; color: var(--ink-soft); margin: 12px 0 20px; }
.sf-post-hero { width: 100%; max-height: 400px; object-fit: cover; border-radius: var(--radius); box-shadow: var(--shadow); margin-bottom: 24px; }
.sf-post-content { line-height: 1.85; color: var(--ink); margin-bottom: 32px; }
.sf-post-content h2, .sf-post-content h3 { color: var(--forest); margin: 24px 0 8px; }
.sf-post-content p { margin-bottom: 14px; }
.sf-post-content img { max-width: 100%; max-height: 460px; object-fit: cover; border-radius: var(--radius-sm); margin: 14px 0; }
.sf-post-content ul, .sf-post-content ol { margin: 0 0 14px 0; padding-inline-start: 22px; }
.sf-post-content a { color: var(--leaf); text-decoration: underline; }

/* ---------- Best-sellers department tabs ---------- */
.sf-tabs {
    display: flex; justify-content: center; gap: 26px; margin-bottom: 24px;
    overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.sf-tabs::-webkit-scrollbar { display: none; }
.sf-tab {
    background: none; border: 0; cursor: pointer; font-family: inherit;
    font-size: 16px; font-weight: 600; color: var(--ink-soft);
    padding: 6px 2px 10px; border-bottom: 2.5px solid transparent;
    white-space: nowrap; transition: color .15s ease, border-color .15s ease;
}
.sf-tab:hover { color: var(--forest); }
.sf-tab.is-active { color: var(--forest); font-weight: 800; border-bottom-color: var(--leaf); }
.sf-tab-panel { display: none; }
.sf-tab-panel.is-active { display: block; }
@media (max-width: 700px) { .sf-tabs { justify-content: flex-start; gap: 18px; } .sf-tab { font-size: 14.5px; } }

/* ---------- Mega menu ---------- */
.sf-nav-item { position: relative; }
.sf-nav-item > a { display: inline-flex; align-items: center; gap: 3px; padding: 26px 0; }
.sf-caret { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2.4; opacity: .55; }
.sf-mega {
    position: absolute; top: 100%; inset-inline-start: -14px; z-index: 60;
    min-width: 230px; background: var(--white); border-radius: 0 0 14px 14px;
    box-shadow: var(--shadow-lift); border-top: 3px solid var(--leaf);
    padding: 14px 16px 12px;
    /* display:none while closed — visibility:hidden boxes still occupy
       geometry, and 5 megas poking 230px+ leftwards (RTL) widened every
       page. The fade still works in modern browsers via allow-discrete +
       @starting-style; older ones just pop the menu open with no fade. */
    display: none;
    opacity: 0; visibility: hidden; transform: translateY(6px);
    transition: opacity .15s ease, transform .15s ease, visibility .15s allow-discrete, display .15s allow-discrete;
}
.sf-nav-item:hover .sf-mega, .sf-nav-item:focus-within .sf-mega {
    display: block; opacity: 1; visibility: visible; transform: translateY(0);
}
@starting-style {
    .sf-nav-item:hover .sf-mega, .sf-nav-item:focus-within .sf-mega {
        opacity: 0; transform: translateY(6px);
    }
}
.sf-mega-cols { display: flex; flex-direction: column; gap: 2px; }
.sf-mega-cols a { display: block; padding: 7px 8px; border-radius: 8px; font-size: 14px; font-weight: 500; white-space: nowrap; }
.sf-mega-cols a:hover { background: var(--cream); color: var(--forest); }
.sf-mega-all { display: block; margin-top: 8px; padding: 8px; border-top: 1px solid var(--sand); color: var(--leaf); font-weight: 700; font-size: 13.5px; }
.sf-mega-all:hover { color: var(--forest); }

/* ---------- Product-card colour swatches (collection siblings) ---------- */
.sf-card-swatches { display: flex; align-items: center; gap: 5px; margin-top: 7px; }
.sf-dot {
    width: 16px; height: 16px; border-radius: 50%; overflow: hidden; flex: none;
    border: 1px solid rgba(22, 36, 28, .18); background: var(--sand);
}
.sf-dot img { width: 100%; height: 100%; object-fit: cover; }
.sf-dot.is-current { outline: 2px solid var(--forest); outline-offset: 1.5px; }
.sf-dot-more { font-size: 11.5px; color: var(--ink-soft); font-weight: 600; }

/* ---------- Category product count ---------- */
.sf-count { font-size: 14px; font-weight: 500; color: var(--ink-soft); margin-inline-start: 8px; }

/* ---------- Promo strip ---------- */
.sf-promo-bar {
    background: linear-gradient(135deg, var(--terracotta), #d98354);
    color: var(--white); text-align: center; font-weight: 700; font-size: 14px;
    padding: 9px 16px;
}

/* ---------- "בואו נדבר" pill (was round WA bubble) ---------- */
.sf-wa-bubble {
    position: fixed; bottom: 18px; inset-inline-start: 18px; z-index: 80;
    display: inline-flex; align-items: center; gap: 8px;
    background: var(--forest); color: var(--white); font-weight: 700; font-size: 15px;
    padding: 11px 20px; border-radius: 999px;
    box-shadow: 0 8px 26px rgba(30, 70, 50, .4);
    transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.sf-wa-bubble:hover { background: var(--leaf); transform: translateY(-2px); box-shadow: 0 12px 32px rgba(30, 70, 50, .45); }

/* ---------- Hero carousel ---------- */
.sf-hero-slide { position: absolute; inset: 0; opacity: 0; transition: opacity .9s ease; }
.sf-hero-slide.is-active { opacity: 1; }
/* All copy slides share one grid cell → the hero locks to the TALLEST
   slide's height and never jumps when a subtitle wraps to two lines. */
.sf-hero-banner .sf-hero-copy { display: grid; }
.sf-hero-copy-slide {
    grid-area: 1 / 1; opacity: 0; visibility: hidden; pointer-events: none;
    display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end;
}
.sf-hero-copy-slide.is-active { opacity: 1; visibility: visible; pointer-events: auto; animation: sf-hero-copy-in .6s ease; }
@keyframes sf-hero-copy-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.sf-hero-dots { display: flex; gap: 8px; margin-top: 26px; }
.sf-hero-dots button {
    width: 10px; height: 10px; border-radius: 50%; border: 0; cursor: pointer; padding: 0;
    background: rgba(255, 255, 255, .45); transition: background .15s ease, width .15s ease;
}
.sf-hero-dots button.is-active { background: var(--white); width: 26px; border-radius: 999px; }

/* ---------- Mini-cart drawer ---------- */
.sf-drawer-overlay {
    position: fixed; inset: 0; z-index: 90;
    background: rgba(22, 36, 28, .45);
}
.sf-drawer {
    position: fixed; top: 0; bottom: 0; inset-inline-end: 0; z-index: 91;
    width: min(380px, 92vw); background: var(--white);
    display: flex; flex-direction: column;
    transform: translateX(-100%); visibility: hidden;
    transition: transform .28s ease, visibility .28s;
    box-shadow: -8px 0 40px rgba(22, 36, 28, .2);
}
[dir="rtl"] .sf-drawer { transform: translateX(-100%); }
.sf-drawer.is-open { transform: translateX(0); visibility: visible; }
.sf-drawer-head {
    display: flex; justify-content: space-between; align-items: center;
    padding: 16px 18px; border-bottom: 1px solid var(--sand);
    color: var(--forest); font-size: 17px;
}
.sf-drawer-head button { border: 0; background: none; font-size: 26px; cursor: pointer; color: var(--ink-soft); line-height: 1; }
.sf-drawer-items { flex: 1; overflow-y: auto; padding: 14px; }
.sf-drawer-items .sf-cart-row { box-shadow: none; border: 1px solid var(--sand); }
.sf-drawer-empty { text-align: center; color: var(--ink-soft); padding: 30px 0; }
.sf-drawer-foot { padding: 14px 18px 18px; border-top: 1px solid var(--sand); }
.sf-drawer-foot .sf-btn { margin-top: 8px; }

/* ---------- Checkout ---------- */
.sf-checkout { display: grid; grid-template-columns: 1.4fr 1fr; gap: 22px; align-items: start; }
/* Mobile: steps flow top-down (1 delivery → 2 details → 3 payment) and the
   summary+pay button come LAST — no more pay-button-first confusion. */
@media (max-width: 900px) { .sf-checkout { grid-template-columns: 1fr; } }
.sf-step-n {
    display: inline-flex; align-items: center; justify-content: center;
    width: 23px; height: 23px; border-radius: 50%; flex: none;
    background: var(--forest); color: #fff;
    font-style: normal; font-size: 13px; font-weight: 800;
    margin-inline-end: 8px; vertical-align: -4px;
}
/* iOS Safari auto-zooms on focus when inputs are under 16px — prevent it. */
@media (max-width: 700px) {
    .sf-field input, .sf-field textarea,
    .sf-form-card input, .sf-form-card textarea, .sf-search input { font-size: 16px; }
}
.sf-form-card { background: var(--white); border-radius: var(--radius); padding: 20px 22px; box-shadow: var(--shadow); margin-bottom: 16px; }
.sf-form-card h3 { color: var(--forest); font-size: 17px; margin-bottom: 14px; }
.sf-field { margin-bottom: 12px; }
.sf-field label { display: block; font-size: 13.5px; font-weight: 600; color: var(--ink-soft); margin-bottom: 5px; }
.sf-label-hint { font-weight: 400; opacity: .75; }
.sf-field input, .sf-field textarea {
    width: 100%; border: 1.5px solid var(--sand); border-radius: var(--radius-sm);
    background: var(--cream); padding: 11px 14px; font-family: inherit; font-size: 15px; color: var(--ink);
}
.sf-field input:focus, .sf-field textarea:focus { outline: none; border-color: var(--leaf); background: var(--white); }
.sf-hp { position: absolute; opacity: 0; height: 0; width: 0; pointer-events: none; }
.sf-choice-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 14px; align-items: stretch; }
.sf-choice-col { display: flex; flex-direction: column; gap: 10px; }
.sf-choice { display: flex; cursor: pointer; }
.sf-choice input { position: absolute; opacity: 0; }
.sf-choice span {
    display: block; flex: 1; padding: 12px 14px; border: 1.5px solid var(--sand);
    border-radius: var(--radius-sm); background: var(--cream);
    transition: border-color .15s ease, background .15s ease;
}
.sf-choice strong { display: block; font-size: 15px; color: var(--forest); }
.sf-choice small { color: var(--ink-soft); font-size: 12.5px; }
.sf-choice input:checked + span { border-color: var(--leaf); background: rgba(74, 143, 92, .07); }
.sf-co-line { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px dashed var(--sand); font-size: 14px; }
.sf-co-line small { color: var(--ink-soft); }
.sf-co-item img, .sf-co-noimg {
    width: 42px; height: 42px; border-radius: 8px; object-fit: cover;
    background: var(--sand); flex: none;
}
.sf-co-item > span { flex: 1; min-width: 0; }
.sf-co-item > strong { flex: none; color: var(--forest); }
.sf-checkout-summary .sf-cart-total { margin-top: 12px; }
.sf-co-error { background: rgba(194, 104, 63, .1); border: 1px solid rgba(194, 104, 63, .35); color: #9c4a24; border-radius: var(--radius-sm); padding: 10px 14px; margin: 10px 0; font-size: 14px; }
.sf-checkout-summary .sf-btn { margin-top: 12px; }

/* ---------- Thanks page ---------- */
.sf-thanks-card { background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow); padding: 40px 28px; text-align: center; }
.sf-thanks-check {
    width: 74px; height: 74px; border-radius: 50%; margin: 0 auto 18px;
    background: rgba(74, 143, 92, .12); color: var(--leaf);
    display: flex; align-items: center; justify-content: center;
}
.sf-thanks-check svg { width: 38px; height: 38px; }
.sf-thanks-card h1 { font-size: clamp(26px, 4vw, 36px); font-weight: 900; color: var(--forest); }
.sf-thanks-sub { color: var(--ink-soft); margin: 8px 0 20px; }
.sf-thanks-card .sf-trust-box { text-align: start; }
.sf-thanks-items { max-width: 460px; margin: 20px auto 24px; text-align: start; }
.sf-thanks-row { display: flex; justify-content: space-between; gap: 10px; padding: 8px 0; border-bottom: 1px dashed var(--sand); font-size: 14.5px; }
.sf-thanks-total { border-bottom: 0; font-weight: 800; color: var(--forest); font-size: 16px; }

/* ---------- Category SEO text block ---------- */
.sf-seo-text { margin-top: 48px; max-width: 860px; color: var(--ink-soft); }
.sf-seo-text h2 { font-size: 20px; font-weight: 800; color: var(--forest); margin-bottom: 8px; }
.sf-seo-text p { line-height: 1.8; font-size: 14.5px; }

/* ---------- Accessibility widget (IS-5568 aid) ---------- */

/* ---------- Rich product description (AI copywriter output) ---------- */
.sf-prose p { margin: 0 0 14px; line-height: 1.85; }
.sf-prose h3 { font-size: 17px; font-weight: 800; color: var(--forest); margin: 22px 0 10px; }
.sf-prose ul, .sf-prose ol { list-style: none; padding: 0; margin: 0 0 14px; }
.sf-prose li { padding: 4px 0; line-height: 1.8; }
.sf-prose strong { color: var(--forest); }