@import url('https://fonts.googleapis.com/css2?family=Barlow:wght@400;500;600;700&family=Montserrat:wght@300;400;500;600;700&display=swap');

:root { --ink:#16231a; --muted:#5e6b60; --lime:#a5d937; --lime-dark:#4f7010; --pale:#f6f8f1; --line:#dde4d3; --white:#fff; --shell:1240px; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:#fff; font:16px/1.6 Barlow,Arial,sans-serif; }
a { color:inherit; text-decoration:none; }
button,input,textarea { font:inherit; }
button { cursor:pointer; }
.skip-link { position:absolute; left:-9999px; z-index:999; padding:12px 18px; background:var(--ink); color:#fff; }
.skip-link:focus { left:16px; top:16px; }
.section-shell { width:min(calc(100% - 56px),var(--shell)); margin-inline:auto; }
.site-header { position:sticky; top:0; z-index:30; display:flex; align-items:center; justify-content:space-between; gap:24px; min-height:82px; padding:16px max(28px,calc((100vw - var(--shell))/2)); background:rgba(255,255,255,.96); border-bottom:1px solid transparent; backdrop-filter:blur(10px); }
.site-header.is-scrolled { border-color:var(--line); }
.brand { display:inline-flex; flex-direction:column; align-items:stretch; gap:6px; min-width:112px; font:500 25px/.9 Montserrat,sans-serif; letter-spacing:.01em; }
.brand i { display:block; position:relative; height:2px; background:var(--ink); }
.brand i::before { content:""; position:absolute; left:0; top:50%; width:9px; height:9px; border:1.5px solid var(--ink); border-radius:50%; transform:translateY(-50%); background:#fff; }
.main-nav { display:flex; align-items:center; gap:26px; font:600 13px Montserrat,sans-serif; }
.main-nav > a { color:#425045; }
.main-nav > a:hover,.text-link:hover { color:var(--lime-dark); }
.cart-trigger { border:0; border-radius:100px; padding:11px 17px; color:var(--ink); background:var(--lime); font:600 13px Montserrat,sans-serif; }
.cart-trigger b { display:inline-grid; min-width:18px; height:18px; place-items:center; margin-left:5px; border-radius:50%; color:#fff; background:var(--ink); font-size:11px; }
.menu-toggle { display:none; border:0; background:none; font:600 13px Montserrat,sans-serif; }
.menu-toggle span,.menu-toggle::after { display:block; width:20px; height:1.5px; margin:5px 0 0; content:""; background:var(--ink); }
.hero { display:grid; grid-template-columns:minmax(0,1fr) minmax(420px,1fr); min-height:640px; background:var(--pale); }
.hero-content { align-self:center; max-width:650px; padding:90px max(28px,calc((100vw - var(--shell))/2)); padding-right:52px; }
.eyebrow,.section-label small { margin:0 0 17px; color:var(--lime-dark); font:600 11px Montserrat,sans-serif; letter-spacing:.15em; text-transform:uppercase; }
h1,h2,h3 { margin:0; font-family:Montserrat,sans-serif; letter-spacing:-.025em; }
h1 { max-width:10ch; font-size:clamp(46px,5.2vw,74px); font-weight:300; line-height:1.05; }
.hero-copy { max-width:480px; margin:27px 0 31px; color:var(--muted); font-size:20px; line-height:1.5; }
.hero-actions,.callout-actions { display:flex; align-items:center; gap:19px; flex-wrap:wrap; }
.button { display:inline-flex; align-items:center; justify-content:center; min-height:52px; padding:13px 25px; border:1.5px solid transparent; border-radius:100px; font:600 14px Montserrat,sans-serif; text-align:center; transition:transform .18s,background .18s; }
.button:hover { transform:translateY(-2px); }
.button-dark { color:#fff; background:var(--ink); }
.button-dark:hover { background:#2c3a2f; }
.button-outline { border-color:var(--ink); background:transparent; }
.text-link { display:inline-flex; gap:8px; align-items:center; color:var(--ink); font:600 14px Montserrat,sans-serif; }
.hero-art { min-height:460px; background:linear-gradient(90deg,rgba(246,248,241,0),rgba(246,248,241,.08)),url("img/intro-bg3.jpg") 62% center/cover no-repeat; }
.about { padding-block:110px; }
.section-label { display:flex; align-items:center; gap:10px; }
.section-label span { position:relative; width:53px; height:2px; background:var(--lime); }
.section-label span::before { content:""; position:absolute; left:0; top:50%; width:9px; height:9px; border:2px solid var(--lime); border-radius:50%; transform:translateY(-50%); background:#fff; }
.section-label small { margin:0; }
.about-grid { display:grid; grid-template-columns:1.07fr .83fr; gap:9vw; margin-top:28px; }
.about h2,.products h2,.contact h2 { max-width:16ch; font-size:clamp(31px,3.8vw,48px); font-weight:300; line-height:1.15; }
.about p { margin:0 0 22px; color:var(--muted); font-size:18px; }
.about .text-link { margin-top:8px; }
.products { padding-bottom:112px; }
.products-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:50px; margin-bottom:35px; }
.products-heading h2 { margin-top:19px; }
.products-heading > p { max-width:390px; margin:0; color:var(--muted); font-size:17px; }
.filter-row { display:flex; gap:10px; flex-wrap:wrap; padding-bottom:31px; }
.filter-row button { padding:10px 19px; border:1.5px solid var(--line); border-radius:100px; color:var(--ink); background:#fff; font:500 13px Montserrat,sans-serif; }
.filter-row button[aria-pressed="true"] { border-color:var(--lime); background:var(--lime); }
.product-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:22px; }
.product-card { overflow:hidden; border:0; padding:0; background:#fff; text-align:left; }
.product-image { display:block; width:100%; aspect-ratio:4/3; background:#fbfcf8 center/cover no-repeat; transition:transform .3s; }
.product-card:hover .product-image { transform:scale(1.03); }
.product-card:focus-visible,.filter-row button:focus-visible { outline:3px solid var(--lime-dark); outline-offset:3px; }
.product-copy { padding:17px 2px 5px; }
.product-category { display:block; margin-bottom:5px; color:var(--lime-dark); font:600 10px Montserrat,sans-serif; letter-spacing:.13em; text-transform:uppercase; }
.product-name { display:block; font:500 15px/1.4 Montserrat,sans-serif; }
.show-more { display:block; margin:42px auto 0; padding:14px 29px; border:1.5px solid #c9d6b6; border-radius:100px; color:var(--ink); background:#fff; font:600 14px Montserrat,sans-serif; }
.shipping { padding:103px 0; color:#fff; background:var(--ink); }
.shipping-inner { display:grid; grid-template-columns:.96fr 1fr; gap:10vw; align-items:start; }
.shipping .section-label small { color:var(--lime); }
.shipping .section-label span { background:var(--lime); }
.shipping .section-label span::before { border-color:var(--lime); background:var(--ink); }
.shipping h2 { max-width:13ch; margin-top:20px; font-size:clamp(31px,3.8vw,48px); font-weight:300; line-height:1.15; }
.shipping-copy { max-width:520px; padding-top:29px; }
.shipping-copy p { margin:0 0 18px; color:#c7d2c3; font-size:20px; line-height:1.55; }
.shipping-copy .text-link { margin-top:11px; color:var(--lime); }
.contact-callout { padding:72px 0; background:var(--lime); }
.callout-inner { display:flex; align-items:center; justify-content:space-between; gap:45px; }
.contact-callout .eyebrow { color:#385300; }
.contact-callout h2 { font-size:clamp(29px,3.1vw,39px); font-weight:600; }
.contact-callout p:not(.eyebrow) { margin:8px 0 0; color:#2c3a2f; font-size:18px; }
.contact-callout .button-outline { border-color:var(--ink); }
.contact { display:grid; grid-template-columns:.78fr 1fr; gap:80px; padding-block:108px; }
.contact h2 { margin:17px 0 31px; }
dl { margin:0; border-top:1px solid var(--line); }
dl div { padding:20px 0; border-bottom:1px solid var(--line); }
dt { margin-bottom:6px; color:var(--lime-dark); font:600 10px Montserrat,sans-serif; letter-spacing:.14em; text-transform:uppercase; }
dd { margin:0; font-size:17px; }
dd a:hover { color:var(--lime-dark); }
.contact-form { padding:clamp(25px,4vw,44px); background:var(--pale); }
.contact-form h3 { font-size:23px; font-weight:500; }
.contact-form > p { margin:5px 0 25px; color:var(--muted); }
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.contact-form label { display:grid; gap:7px; margin-bottom:16px; font:600 12px Montserrat,sans-serif; }
.contact-form input:not([type="checkbox"]),.contact-form textarea { width:100%; padding:13px 14px; border:1px solid var(--line); border-radius:0; color:var(--ink); background:#fff; font:16px Barlow,sans-serif; outline:none; }
.contact-form input:focus,.contact-form textarea:focus { border-color:var(--lime-dark); box-shadow:0 0 0 2px rgba(165,217,55,.35); }
.contact-form .consent { display:flex; align-items:flex-start; gap:9px; margin:22px 0; color:#435147; font:400 13px/1.5 Barlow,sans-serif; }
.contact-form .honeypot { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.consent input { margin-top:3px; accent-color:var(--lime-dark); }
.consent a { text-decoration:underline; }
.form-status { min-height:24px; color:var(--lime-dark); }
.form-status.is-error { color:#a03535; }
.cart-drawer { position:fixed; top:0; right:0; z-index:60; display:flex; flex-direction:column; width:min(100%,420px); height:100dvh; padding:25px; background:#fff; box-shadow:-12px 0 40px rgba(10,30,15,.15); transform:translateX(105%); transition:transform .25s ease; }
.cart-drawer.is-open { transform:translateX(0); }
.drawer-header { display:flex; align-items:center; justify-content:space-between; padding-bottom:19px; border-bottom:1px solid var(--line); }
.drawer-header h2 { font-size:24px; font-weight:400; }
.drawer-header button,.dialog-close { border:0; color:var(--ink); background:transparent; font-size:34px; line-height:1; }
.drawer-empty { color:var(--muted); }
.cart-list { display:grid; gap:14px; padding:20px 0; margin:0; list-style:none; overflow:auto; }
.cart-list li { display:grid; grid-template-columns:1fr auto; gap:10px; align-items:center; padding-bottom:14px; border-bottom:1px solid var(--line); }
.cart-list h3 { font-size:15px; font-weight:500; }
.cart-list p { margin:3px 0 0; color:var(--lime-dark); font:600 10px Montserrat,sans-serif; letter-spacing:.1em; text-transform:uppercase; }
.cart-list button { border:0; color:var(--muted); background:transparent; font-size:13px; text-decoration:underline; }
.drawer-actions { display:grid; gap:11px; margin-top:auto; padding-top:15px; border-top:1px solid var(--line); }
.backdrop { position:fixed; inset:0; z-index:50; background:rgba(16,27,18,.45); }
.whatsapp-fab { position:fixed; right:25px; bottom:24px; z-index:35; display:inline-flex; align-items:center; gap:8px; min-height:52px; padding:12px 19px; border:0; border-radius:100px; color:#fff; background:#25d366; box-shadow:0 9px 27px rgba(22,35,26,.24); font:600 13px Montserrat,sans-serif; transition:transform .18s,box-shadow .18s; }
.whatsapp-fab:hover { transform:translateY(-2px); box-shadow:0 13px 30px rgba(22,35,26,.3); }
.whatsapp-fab > span:first-child,.whatsapp-popup-icon { display:grid; width:23px; height:23px; place-items:center; border:1.8px solid currentColor; border-radius:50%; font-size:13px; font-weight:700; }
.whatsapp-popup { position:fixed; right:25px; bottom:89px; z-index:35; display:grid; grid-template-columns:auto 1fr; column-gap:12px; width:min(340px,calc(100% - 38px)); padding:18px 42px 17px 18px; border:1px solid #dce7d2; border-radius:13px; color:var(--ink); background:#fff; box-shadow:0 12px 36px rgba(22,35,26,.18); opacity:0; transform:translateY(12px); pointer-events:none; transition:opacity .2s,transform .2s; }
.whatsapp-popup.is-open { opacity:1; transform:translateY(0); pointer-events:auto; }
.whatsapp-popup[aria-hidden="true"] { visibility:hidden; }
.whatsapp-popup-icon { width:34px; height:34px; color:#fff; border-color:#25d366; background:#25d366; }
.whatsapp-popup strong { display:block; font:600 14px Montserrat,sans-serif; }
.whatsapp-popup p { margin:2px 0 10px; color:var(--muted); font-size:14px; }
.whatsapp-popup a { justify-self:start; color:#18883e; font:600 13px Montserrat,sans-serif; }
.whatsapp-popup-close { position:absolute; top:8px; right:9px; width:26px; height:26px; border:0; border-radius:50%; color:var(--muted); background:transparent; font-size:23px; line-height:1; }
.whatsapp-popup-close:hover { color:var(--ink); background:var(--pale); }
.product-dialog { width:min(900px,calc(100% - 32px)); max-height:calc(100dvh - 32px); padding:0; border:0; box-shadow:0 15px 70px rgba(0,0,0,.35); }
.product-dialog::backdrop { background:rgba(16,27,18,.78); }
.dialog-close { position:absolute; top:12px; right:14px; z-index:2; width:40px; height:40px; border-radius:50%; background:#fff; }
.dialog-detail { display:grid; grid-template-columns:1.1fr .9fr; }
.dialog-detail .detail-image { min-height:440px; background:#fbfcf8 center/contain no-repeat; }
.detail-copy { align-self:center; padding:42px; }
.detail-copy h2 { margin:8px 0 26px; font-size:30px; font-weight:400; line-height:1.2; }
.site-footer { padding:57px 0 30px; color:#d5decb; background:var(--ink); }
.footer-inner { display:grid; grid-template-columns:1.4fr .55fr .7fr; gap:50px; padding-bottom:35px; border-bottom:1px solid rgba(255,255,255,.12); }
.brand-footer { color:#fff; }
.brand-footer i { background:#fff; }
.brand-footer i::before { border-color:#fff; background:var(--ink); }
.footer-inner p { max-width:320px; margin:21px 0 0; color:#9fae95; }
.footer-inner div:not(:first-child) { display:grid; align-content:start; gap:9px; }
.footer-inner strong { margin-bottom:4px; color:var(--lime); font:600 10px Montserrat,sans-serif; letter-spacing:.14em; text-transform:uppercase; }
.footer-inner a:hover { color:var(--lime); }
.footer-inner span { color:#9fae95; }
.footer-bottom { display:flex; gap:24px; padding-top:20px; color:#7d8c74; font-size:14px; }
.footer-bottom a:hover { color:var(--lime); }
.policy-page { background:var(--pale); }
.policy { max-width:800px; padding-block:80px; }
.policy h1 { max-width:none; margin:20px 0 30px; font-size:clamp(42px,5vw,64px); }
.policy h2 { margin:35px 0 8px; font-size:25px; font-weight:500; }
.policy-note { margin-top:45px; color:var(--muted); font-size:14px; }
@media (max-width:800px) { .site-header { min-height:72px; } .menu-toggle { display:block; } .main-nav { position:absolute; top:72px; left:0; right:0; display:none; align-items:stretch; gap:0; padding:12px 28px 22px; border-bottom:1px solid var(--line); background:#fff; } .main-nav.is-open { display:grid; } .main-nav > a,.cart-trigger { padding:12px 0; } .cart-trigger { width:max-content; margin-top:8px; padding:10px 16px; } .hero { grid-template-columns:1fr; } .hero-content { order:2; padding:55px 28px 65px; } .hero-art { min-height:370px; } .about,.contact,.shipping { padding-block:76px; } .about-grid,.contact,.shipping-inner { grid-template-columns:1fr; gap:38px; } .products-heading,.callout-inner { display:grid; gap:24px; } .shipping-copy { padding-top:0; } .product-grid { grid-template-columns:repeat(2,1fr); gap:17px; } .contact { gap:46px; } .footer-inner { grid-template-columns:1fr 1fr; gap:35px; } .footer-inner > :first-child { grid-column:1/-1; } }
@media (max-width:480px) { .section-shell { width:min(calc(100% - 38px),var(--shell)); } .hero-content { padding-inline:19px; } .hero-art { min-height:300px; } .hero-copy { font-size:18px; } .form-grid,.dialog-detail { grid-template-columns:1fr; } .dialog-detail .detail-image { min-height:260px; } .detail-copy { padding:30px; } .footer-inner { grid-template-columns:1fr; } .footer-inner > :first-child { grid-column:auto; } .whatsapp-fab { right:19px; bottom:18px; } .whatsapp-popup { right:19px; bottom:81px; } .whatsapp-fab-label { display:none; } }