/* Fruit Link Site — new header, home hero, footer and mobile bar (approved design: header v4, hero C v3, footer v1). Built from design-lab/home/home-preview-header-v4-hero-c-v3.html by build/mk_css.py. Do not edit by hand: edit the source and rebuild. */ @font-face{font-family:'FL Inter';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/fl-inter-400.woff) format('woff')} @font-face{font-family:'FL Inter';font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/fl-inter-600.woff) format('woff')} @font-face{font-family:'FL Inter';font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/fl-inter-700-cyr.woff) format('woff');unicode-range:U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116} @font-face{font-family:'FL Inter';font-style:normal;font-weight:800;font-display:swap;src:url(../fonts/fl-inter-800-cyr.woff) format('woff');unicode-range:U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116} /* scoped reset: theme and page-builder rules must not leak into the new parts */ #fl-hdr,#fl-hero,#fl-ftr,#fl-mbar{font-family:'FL Inter',system-ui,sans-serif;color:#1F2421;line-height:1.5;text-align:left;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale} #fl-hdr,#fl-hero,#fl-ftr,#fl-mbar,#fl-hdr *,#fl-hdr *:before,#fl-hdr *:after,#fl-hero *,#fl-hero *:before,#fl-hero *:after,#fl-ftr *,#fl-ftr *:before,#fl-ftr *:after,#fl-mbar *,#fl-mbar *:before,#fl-mbar *:after{box-sizing:border-box} #fl-hdr ul,#fl-hdr ol,#fl-hero ul,#fl-ftr ul,#fl-mbar ul{margin:0;padding:0;list-style:none} #fl-hdr li,#fl-hero li,#fl-ftr li,#fl-mbar li{margin:0} #fl-hdr p,#fl-hero p,#fl-ftr p{margin:0} #fl-hdr a,#fl-hero a,#fl-ftr a,#fl-mbar a{text-decoration:none;box-shadow:none} /* theme rules like a,button{transition:all .3s} would also animate visibility and block focus: limit what may animate */ #fl-hdr *,#fl-hero *,#fl-ftr *,#fl-mbar *{transition-property:color,background-color,border-color,box-shadow,transform,opacity,fill,stroke} #fl-hdr button,#fl-hero button,#fl-ftr button{margin:0;text-transform:none;letter-spacing:normal;line-height:normal;min-height:0;min-width:0;box-shadow:none;text-shadow:none} #fl-hdr img,#fl-hero img,#fl-ftr img{max-width:none;border:0;border-radius:0;box-shadow:none} #fl-hdr svg,#fl-hero svg,#fl-ftr svg,#fl-mbar svg{overflow:visible} #fl-hero h1{text-transform:none;text-align:left} #fl-hero,#fl-ftr{font-size:18px;line-height:1.6} @media (max-width:899.98px){#fl-ftr{font-size:16px}} #fl-ftr address{margin:0} #fl-hero .fl-s-list a{text-decoration-line:underline} .fl-sprite{position:absolute;width:0;height:0;overflow:hidden} /* the old header/footer (Header Footer Elementor templates) stay in WordPress, unused while this plugin is on */ body.fl-site-on #masthead,body.fl-site-on #colophon,body.fl-site-on #top-bar-wrap{display:none!important} /* home page: the old Smart Slider block is replaced by the new hero (fallback if Elementor still prints it) */ body.fl-has-hero .elementor-element-2a7adbf{display:none!important} /* non-home pages have no hero under the header: header is solid white from the start */ body.fl-site-on:not(.fl-has-hero) #fl-hdr .fl-bar:before{background:#fff} /* logged-in admins: keep the sticky header below the WordPress toolbar */ @media (min-width:783px){body.admin-bar #fl-hdr{top:32px}} @media (min-width:601px) and (max-width:782px){body.admin-bar #fl-hdr{top:46px}} /* OceanWP "scroll to top" button sits above the mobile bar */ @media (max-width:899.98px){body.fl-site-on #scroll-top{bottom:calc(70px + env(safe-area-inset-bottom))}} /* ===== hdr ===== */ :root{--fl-green:#178320;--fl-deep:#0E5214;--fl-orange:#EF5122;--fl-orange-deep:#D13C0F;--fl-orange-dark:#B5340D;--fl-orange-text:#C8390E;--fl-orange-tint:#FDEEE9;--fl-tint:#EAF4EB;--fl-field:#F7F5F0;--fl-text:#1F2421;--fl-muted:#565b56;--fl-line:#E4E1DA;--fl-hdr-h:124px;--fl-hdr-cut:48px;--fl-logo-h:108px;--fl-logo-s:.6;--fl-hdr-ease:cubic-bezier(.2,.7,.1,1)} html{scroll-padding-top:calc(var(--fl-hdr-h) - var(--fl-hdr-cut) + 8px)} #fl-hdr .fl-skip{position:absolute;left:12px;top:-80px;z-index:1000;padding:12px 16px;border-radius:10px;background:var(--fl-deep);color:#fff;font:600 15px/1.2 'FL Inter',system-ui,sans-serif;text-decoration:none} #fl-hdr .fl-skip:focus{top:12px} #fl-hdr{position:sticky;top:0;z-index:100;height:var(--fl-hdr-h);pointer-events:none;font-family:'FL Inter',system-ui,sans-serif} #fl-hdr :focus-visible{outline:3px solid var(--fl-deep);outline-offset:2px;border-radius:10px} #fl-hdr ul{list-style:none;margin:0;padding:0} #fl-hdr .fl-bar{position:relative;z-index:0;height:var(--fl-hdr-h);pointer-events:auto;transition:transform .35s var(--fl-hdr-ease)} /* D4: transparent at the top of the page (the hero shows through), solid white after 80px; no backdrop blur */ #fl-hdr .fl-bar:before{content:"";position:absolute;inset:0;z-index:-1;background:rgba(255,255,255,0);border-bottom:1px solid transparent;transition:background .35s,box-shadow .35s,border-color .35s} #fl-hdr .fl-bar-in{position:relative;max-width:1320px;height:100%;margin:0 auto;padding:0 24px;display:flex;align-items:center;gap:20px;transition:transform .35s var(--fl-hdr-ease)} #fl-hdr.fl-is-condensed .fl-bar{transform:translateY(calc(-1 * var(--fl-hdr-cut)))} #fl-hdr.fl-is-condensed .fl-bar-in{transform:translateY(calc(var(--fl-hdr-cut) / 2))} #fl-hdr.fl-is-condensed .fl-bar:before{background:#fff;border-color:var(--fl-line);box-shadow:0 12px 28px -18px rgba(31,36,33,.35)} #fl-hdr .fl-brand{position:relative;z-index:3;flex:none;display:block;border-radius:10px} #fl-hdr .fl-brand img{display:block;height:var(--fl-logo-h);width:calc(var(--fl-logo-h) * .907);object-fit:contain;transform-origin:left center;transition:transform .35s var(--fl-hdr-ease)} #fl-hdr.fl-is-condensed .fl-brand img{transform:scale(var(--fl-logo-s))} /* main menu */ #fl-hdr .fl-nav{flex:1;min-width:0;display:flex;justify-content:center} #fl-hdr .fl-menu{display:flex;align-items:center;gap:2px} #fl-hdr .fl-menu>li>a,#fl-hdr .fl-sub-btn{position:relative;display:flex;align-items:center;gap:6px;height:44px;padding:0 14px;border:0;border-radius:10px;background:none;font:600 15px/1 'FL Inter',system-ui,sans-serif;color:var(--fl-text);text-decoration:none;white-space:nowrap;cursor:pointer} #fl-hdr .fl-menu>li>a:after,#fl-hdr .fl-sub-btn:after{content:"";position:absolute;left:14px;right:14px;bottom:6px;height:2px;border-radius:2px;background:var(--fl-orange);transform:scaleX(0);transform-origin:left;transition:transform .3s var(--fl-hdr-ease)} #fl-hdr .fl-menu>li>a:hover:after,#fl-hdr .fl-menu>li>a[aria-current="page"]:after,#fl-hdr .fl-sub-btn:hover:after,#fl-hdr .fl-is-open>.fl-sub-btn:after{transform:scaleX(1)} #fl-hdr .fl-menu>li>a:hover,#fl-hdr .fl-menu>li>a[aria-current="page"],#fl-hdr .fl-sub-btn:hover,#fl-hdr .fl-is-open>.fl-sub-btn{color:var(--fl-deep)} #fl-hdr .fl-sub-btn svg{width:14px;height:14px;flex:none;transition:transform .3s var(--fl-hdr-ease)} #fl-hdr .fl-is-open>.fl-sub-btn svg{transform:rotate(180deg)} /* products panel: in the HTML from the start, hidden with CSS only */ #fl-hdr .fl-sub{position:absolute;left:50%;top:calc(100% + 6px);width:min(680px,calc(100vw - 48px));display:grid;grid-template-columns:1fr;gap:0;padding:26px 28px 0;background:#fff;border:1px solid var(--fl-line);border-radius:20px;box-shadow:0 30px 60px -28px rgba(31,36,33,.42);opacity:0;visibility:hidden;transform:translate(-50%,8px);transition:opacity .2s,transform .3s var(--fl-hdr-ease),visibility 0s .3s} #fl-hdr .fl-sub:before{content:"";position:absolute;left:0;right:0;top:-60px;height:60px} #fl-hdr .fl-is-open>.fl-sub,html:not(.fl-js) #fl-hdr .fl-has-sub:hover>.fl-sub,html:not(.fl-js) #fl-hdr .fl-has-sub:focus-within>.fl-sub{opacity:1;visibility:visible;transform:translate(-50%,0);transition:opacity .2s,transform .3s var(--fl-hdr-ease)} #fl-hdr .fl-sub-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr;grid-template-rows:repeat(4,auto) 1fr;gap:2px 24px;align-content:start} #fl-hdr .fl-g-citrus{grid-column:1;grid-row:1/6} #fl-hdr .fl-g-solo{grid-column:2} #fl-hdr .fl-g-veg{grid-column:3;grid-row:1/6} #fl-hdr .fl-g-t{display:flex;align-items:center;gap:10px;min-height:40px;border-radius:8px;font:700 16px/1.2 'Plus Jakarta Sans','FL Inter',system-ui,sans-serif;color:var(--fl-text);text-decoration:none} #fl-hdr a.fl-g-t:hover{color:var(--fl-green)} #fl-hdr .fl-g-t i{width:9px;height:9px;border-radius:50%;background:var(--fl-c);flex:none} #fl-hdr .fl-g li a{display:flex;align-items:center;min-height:36px;padding-left:19px;border-radius:8px;font:400 15px/1.3 'FL Inter',system-ui,sans-serif;color:#363c37;text-decoration:none} #fl-hdr .fl-g li a:hover{color:var(--fl-deep);text-decoration:underline;text-underline-offset:4px} #fl-hdr .fl-sub-foot{grid-column:1/-1;margin-top:18px;padding:12px 0 16px;border-top:1px solid var(--fl-line)} #fl-hdr .fl-all{display:inline-flex;align-items:center;gap:8px;min-height:40px;border-radius:8px;font:600 15px/1 'FL Inter',system-ui,sans-serif;color:var(--fl-orange-text);text-decoration:none} #fl-hdr .fl-all svg{width:16px;height:16px;transition:transform .3s var(--fl-hdr-ease)} #fl-hdr .fl-all:hover svg{transform:translateX(3px)} /* right side */ #fl-hdr .fl-tools{flex:none;display:flex;align-items:center;gap:12px} /* language: button + 5 real links, list in the HTML, hidden with CSS only */ #fl-hdr .fl-lang{position:relative;z-index:3} #fl-hdr .fl-lang-btn{display:flex;align-items:center;gap:6px;height:44px;padding:0 10px;border:1px solid var(--fl-line);border-radius:12px;background:#fff;font:600 13.5px/1 'FL Inter',system-ui,sans-serif;color:var(--fl-text);white-space:nowrap;cursor:pointer} #fl-hdr .fl-lang-btn:hover,#fl-hdr .fl-lang.fl-is-open .fl-lang-btn{border-color:var(--fl-orange)} #fl-hdr .fl-lang-btn .fl-gl{width:18px;height:18px;color:var(--fl-orange)} #fl-hdr .fl-lang-btn .fl-cv{width:12px;height:12px;transition:transform .3s var(--fl-hdr-ease)} #fl-hdr .fl-lang.fl-is-open .fl-cv{transform:rotate(180deg)} #fl-hdr .fl-lang-list{position:absolute;right:0;top:calc(100% + 10px);width:216px;padding:6px;background:#fff;border:1px solid var(--fl-line);border-radius:14px;box-shadow:0 24px 48px -24px rgba(31,36,33,.45);opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity .2s,transform .25s var(--fl-hdr-ease),visibility 0s .25s} #fl-hdr .fl-lang.fl-is-open .fl-lang-list,html:not(.fl-js) #fl-hdr .fl-lang:hover .fl-lang-list,html:not(.fl-js) #fl-hdr .fl-lang:focus-within .fl-lang-list{opacity:1;visibility:visible;transform:none;transition:opacity .2s,transform .25s var(--fl-hdr-ease)} #fl-hdr .fl-lang-list a{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:44px;padding:0 12px;border-radius:10px;font:400 15px/1.2 'FL Inter',system-ui,sans-serif;color:var(--fl-text);text-decoration:none} #fl-hdr .fl-lang-list a:hover{background:var(--fl-field)} #fl-hdr .fl-lang-list a[aria-current]{background:var(--fl-tint);color:var(--fl-deep);font-weight:600} #fl-hdr .fl-lang-list svg{width:16px;height:16px;flex:none;visibility:hidden} #fl-hdr .fl-lang-list a[aria-current] svg{visibility:visible} #fl-hdr .fl-wa{display:flex;align-items:center;gap:8px;height:44px;padding:0 14px 0 10px;border:1px solid var(--fl-line);border-radius:12px;background:#fff;font:600 14.5px/1 'FL Inter',system-ui,sans-serif;color:var(--fl-text);text-decoration:none;white-space:nowrap} #fl-hdr .fl-wa:hover{border-color:#128C3E} #fl-hdr .fl-wa svg{width:22px;height:22px;flex:none;color:#128C3E} #fl-hdr .fl-wa-n{display:none} #fl-hdr .fl-cta{display:flex;align-items:center;gap:8px;height:46px;padding:0 18px;border-radius:12px;background:var(--fl-orange-deep);font:600 15px/1 'FL Inter',system-ui,sans-serif;color:#fff;text-decoration:none;white-space:nowrap;transition:background .25s} #fl-hdr .fl-cta:hover{background:var(--fl-orange-dark)} #fl-hdr .fl-cta svg{width:16px;height:16px;transition:transform .3s var(--fl-hdr-ease)} #fl-hdr .fl-cta:hover svg{transform:translateX(3px)} #fl-hdr .fl-burger{display:none} /* tablet / small laptop 900-1199 px: same items, tighter, WhatsApp icon only */ @media (max-width:1199.98px){ :root{--fl-hdr-h:108px;--fl-hdr-cut:36px;--fl-logo-h:92px;--fl-logo-s:.68} #fl-hdr .fl-bar-in{gap:12px;padding:0 18px} #fl-hdr .fl-menu>li>a,#fl-hdr .fl-sub-btn{padding:0 10px;font-size:14.5px} #fl-hdr .fl-menu>li>a:after,#fl-hdr .fl-sub-btn:after{left:10px;right:10px} #fl-hdr .fl-tools{gap:8px} #fl-hdr .fl-wa{width:44px;padding:0;justify-content:center} #fl-hdr .fl-wa-t{display:none} } @media (max-width:1023.98px){ :root{--fl-hdr-h:100px;--fl-hdr-cut:28px;--fl-logo-h:84px;--fl-logo-s:.74} #fl-hdr .fl-menu>li>a,#fl-hdr .fl-sub-btn{padding:0 8px;font-size:14px} #fl-hdr .fl-menu>li>a:after,#fl-hdr .fl-sub-btn:after{left:8px;right:8px} #fl-hdr .fl-lang-btn{padding:0 8px;gap:4px} #fl-hdr .fl-cta{padding:0 14px;font-size:14px} #fl-hdr .fl-cta svg{display:none} } /* mobile < 900 px: top bar (logo, language, menu) stays fixed while scrolling; the SAME