:root {

    --cream: #faf7ef;
    --paper: #fffdf8;

    --forest: #40513b;
    --sage: #68795f;

    --terra: #a96148;

    --text: #45483f;
    --muted: #727268;

}


* {
    box-sizing: border-box;
}


html {
    scroll-behavior: smooth;
}


body {

    margin: 0;

    color: var(--text);

    background: var(--paper);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

}


.hero {

    background:
        linear-gradient(
            180deg,
            #f4f6f1,
            #eef2eb
        );

}


.hero-text {

    max-width: 950px;

    margin: auto;

    padding:
        45px
        20px
        30px;

    text-align: center;

}


.small-title {

    color: #68745f;

    font-family:
        Arial,
        sans-serif;

    font-size: 12px;

    font-weight: bold;

    letter-spacing: 4px;

    text-transform: uppercase;

}


.hero h1 {

    margin:
        10px
        0
        0;

    color: var(--forest);

    font-size:
        clamp(
            50px,
            6vw,
            82px
        );

    font-weight: 500;

    line-height: 1;

    letter-spacing: -2px;

}


.decoration {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 13px;

    margin:
        19px
        auto
        12px;

}


.decoration span {

    width: 70px;

    height: 1px;

    background: var(--terra);

}


.leaf-mark {

    color: #596b51;

    font-size: 23px;

}


.hero-text p {

    max-width: 700px;

    margin: auto;

    color: #555d52;

    font-size: 19px;

    line-height: 1.55;

}


.place {

    margin-top: 16px;

    color: #596751;

    font-family:
        Arial,
        sans-serif;

    font-size: 13px;

    font-weight: bold;

    letter-spacing: 2.8px;

}


.farm-image {

    height:
        clamp(
            360px,
            40vw,
            600px
        );

    background:
        url("/assets/hero.webp")
        center center
        /
        cover
        no-repeat;

}


/* PRODUSE */

.products {

    padding:
        90px
        20px
        105px;

    background: #fffdf8;

}


.section-header {

    max-width: 830px;

    margin:
        0
        auto
        55px;

    text-align: center;

}


.terra {
    color: var(--terra);
}


.section-header h2 {

    margin:
        12px
        0
        12px;

    color: var(--forest);

    font-size:
        clamp(
            42px,
            5vw,
            64px
        );

    font-weight: 500;

}


.section-header p {

    margin: auto;

    color: var(--muted);

    font-family:
        Arial,
        sans-serif;

    font-size: 16px;

    line-height: 1.7;

}


.products-grid {

    display: grid;

    grid-template-columns:
        repeat(
            4,
            1fr
        );

    gap: 24px;

    max-width: 1200px;

    margin: auto;

}


.product {

    position: relative;

    overflow: hidden;

    min-height: 320px;

    border:
        1px solid
        rgba(
            63,
            81,
            59,
            .14
        );

    border-radius: 8px;

    background:
        linear-gradient(
            180deg,
            #faf8f2,
            #f0e9dc
        );

    text-align: center;

    cursor: pointer;

    transition:
        transform .3s ease,
        box-shadow .3s ease;

}


.product:hover,
.product.active {

    transform:
        translateY(-5px);

    box-shadow:
        0
        18px
        38px
        rgba(
            52,
            59,
            47,
            .10
        );

}


.illustration {

    position: relative;

    height: 210px;

}


/* TOMATO */

.tom {

    position: absolute;

    width: 72px;

    height: 62px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle at 30% 25%,
            #cb7b68,
            #9f5045
        );

    border:
        2px solid
        #89443b;

}


.tom::before {

    content: "";

    position: absolute;

    top: -11px;

    left: 50%;

    width: 31px;

    height: 20px;

    transform:
        translateX(-50%);

    background: #687a58;

    clip-path:
        polygon(
            50% 0,
            62% 35%,
            100% 20%,
            76% 53%,
            90% 80%,
            57% 67%,
            50% 100%,
            40% 67%,
            8% 80%,
            24% 53%,
            0 20%,
            39% 35%
        );

}


.t1 {
    left: 25%;
    top: 98px;
}

.t2 {
    left: 46%;
    top: 78px;
}

.t3 {
    right: 18%;
    top: 105px;
    transform: scale(.84);
}


/* CHERRY */

.ch {

    position: absolute;

    width: 43px;

    height: 40px;

    border-radius: 50%;

    background: #a85549;

    border: 2px solid #89443b;

}


.c1 {
    left: 27%;
    top: 105px;
}

.c2 {
    left: 42%;
    top: 74px;
}

.c3 {
    right: 27%;
    top: 104px;
}

.c4 {
    left: 48%;
    top: 126px;
}


/* CUCUMBER */

.cu {

    position: absolute;

    width: 44px;

    height: 110px;

    border-radius:
        48%
        52%
        45%
        55%
        /
        15%
        18%
        82%
        85%;

    background:
        linear-gradient(
            90deg,
            #536d4b,
            #7d916b,
            #526b49
        );

    border:
        2px solid
        #4b6244;

}


.cu1 {
    left: 29%;
    top: 64px;
    transform: rotate(-12deg);
}

.cu2 {
    left: 47%;
    top: 51px;
    transform: rotate(4deg);
}

.cu3 {
    right: 23%;
    top: 67px;
    transform: rotate(14deg);
}


/* PUMPKIN */

.pump {

    position: absolute;

    left: 50%;

    top: 92px;

    width: 135px;

    height: 86px;

    transform:
        translateX(-50%);

    border-radius: 50%;

    background:
        repeating-radial-gradient(
            ellipse at center,
            #b87850 0,
            #b87850 18px,
            #9d6547 19px,
            #b87850 22px
        );

    border:
        2px solid
        #89583f;

}


.pump::before {

    content: "";

    position: absolute;

    left: 61px;

    top: -25px;

    width: 13px;

    height: 30px;

    background: #657750;

    border-radius: 5px;

}


/* ONIONS */

.on {

    position: absolute;

    width: 66px;

    height: 70px;

    border-radius:
        50%
        50%
        45%
        45%;

    background:
        linear-gradient(
            90deg,
            #b68d66,
            #d2b48b,
            #aa815d
        );

    border:
        2px solid
        #927050;

}


.on::before {

    content: "";

    position: absolute;

    top: -37px;

    left: 25px;

    width: 16px;

    height: 44px;

    background: #728263;

    border-radius:
        100%
        0
        100%
        0;

}


.on1 {
    left: 25%;
    top: 103px;
}

.on2 {
    left: 46%;
    top: 87px;
}

.on3 {
    right: 18%;
    top: 107px;
    transform: scale(.8);
}


/* CARROTS + PARSNIPS */

.car,
.par {

    position: absolute;

    width: 40px;

    height: 105px;

    clip-path:
        polygon(
            7% 0,
            93% 0,
            51% 100%
        );

}


.car {
    background: #b76e49;
}


.par {
    background: #d8c9a2;
}


.car::before,
.par::before {

    content: "";

    position: absolute;

    top: -39px;

    left: 0;

    width: 40px;

    height: 43px;

    background: #708162;

    clip-path:
        polygon(
            45% 100%,
            0 20%,
            35% 43%,
            31% 0,
            55% 43%,
            88% 6%,
            68% 48%,
            100% 30%
        );

}


.car1,
.par1 {

    left: 30%;

    top: 76px;

    transform:
        rotate(-9deg);

}


.car2,
.par2 {

    left: 48%;

    top: 66px;

    transform:
        rotate(4deg);

}


.car3,
.par3 {

    right: 24%;

    top: 81px;

    transform:
        rotate(14deg)
        scale(.9);

}


/* PRODUCT TEXT */

.product h3 {

    margin:
        4px
        0
        6px;

    color: var(--forest);

    font-size: 24px;

    font-weight: 500;

}


.product > p {

    margin:
        0
        15px
        25px;

    color: var(--muted);

    font-family:
        Arial,
        sans-serif;

    font-size: 13px;

    line-height: 1.5;

}


.product-info {

    position: absolute;

    top: 14px;

    left: 14px;

    right: 14px;

    padding: 10px;

    opacity: 0;

    transform:
        translateY(-5px);

    border:
        1px solid
        rgba(
            63,
            81,
            59,
            .16
        );

    background:
        rgba(
            250,
            248,
            241,
            .96
        );

    color: #5c6658;

    font-family:
        Arial,
        sans-serif;

    font-size: 12px;

    transition: .25s;

}


.product-info strong {

    display: block;

    margin-bottom: 3px;

    color: var(--terra);

}


.product:hover .product-info,
.product.active .product-info {

    opacity: 1;

    transform: none;

}


/* STORY */

.story {

    padding:
        100px
        20px;

    background: #ebe5d9;

}


.story-inner {

    display: grid;

    grid-template-columns:
        .8fr
        1.2fr;

    align-items: center;

    gap: 70px;

    max-width: 1050px;

    margin: auto;

}


.monogram {

    width: 205px;

    height: 205px;

    display: grid;

    place-items: center;

    margin: auto;

    border:
        1px solid
        rgba(
            63,
            81,
            59,
            .28
        );

    border-radius: 50%;

    color: #728168;

    font-size: 58px;

    letter-spacing: 4px;

}


.story h2 {

    margin:
        12px
        0
        17px;

    color: var(--forest);

    font-size:
        clamp(
            38px,
            5vw,
            54px
        );

    font-weight: 500;

}


.story p {

    color: #625f57;

    font-size: 18px;

    line-height: 1.75;

}


/* CONTACT */

.contact {

    padding:
        90px
        20px;

    background: var(--forest);

    text-align: center;

}


.contact-inner {

    max-width: 760px;

    margin: auto;

}


.light {
    color: #bdc7b6;
}


.contact h2 {

    margin:
        15px
        0;

    color: #f7f2e8;

    font-size:
        clamp(
            40px,
            5vw,
            60px
        );

    font-weight: 500;

}


.contact p {

    max-width: 620px;

    margin: auto;

    color: #d2d8cf;

    font-family:
        Arial,
        sans-serif;

    font-size: 16px;

    line-height: 1.7;

}


.phone {

    display: inline-block;

    margin-top: 28px;

    padding:
        15px
        29px;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            .4
        );

    color: #f7f2e8;

    text-decoration: none;

    font-family:
        Arial,
        sans-serif;

    font-weight: bold;

    transition: .2s;

}


.phone:hover {

    color: var(--forest);

    background: #f7f2e8;

}


.contact-place {

    margin-top: 23px;

    color: #aeb9a9;

    font-family:
        Arial,
        sans-serif;

    font-size: 12px;

    letter-spacing: 2px;

    text-transform: uppercase;

}


footer {

    padding:
        25px
        15px;

    background: #2d3a2a;

    color: #919d8d;

    text-align: center;

    font-family:
        Arial,
        sans-serif;

    font-size: 12px;

    letter-spacing: 1px;

}


/* RESPONSIVE */

@media (max-width: 950px) {

    .products-grid {
        grid-template-columns:
            repeat(
                2,
                1fr
            );
    }

    .story-inner {
        grid-template-columns: 1fr;
        gap: 35px;
    }

}


@media (max-width: 600px) {

    .hero-text {
        padding-top: 38px;
    }

    .hero h1 {
        font-size: 46px;
    }

    .hero-text p {
        font-size: 16px;
    }

    .farm-image {
        height: 380px;
    }

    .products {
        padding-top: 70px;
    }

    .products-grid {

        grid-template-columns: 1fr;

        max-width: 380px;

    }

    .story {
        padding:
            75px
            20px;
    }

}


/* HERO IMAGE FIX */
.farm-image {
    height: 510px;
    background-image: url("/assets/hero.webp");
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

@media (max-width: 700px) {
    .farm-image {
        height: 390px;
        background-size: cover;
        background-position: center center;
    }
}

/* =========================================================
   PROTECȚIE UI
========================================================= */

html,
body {
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
}

/* browserul nu încearcă să tragă imaginile */
img,
svg,
.farm-image {
    -webkit-user-drag: none;
    user-drag: none;
}

/* permitem totuși selectarea unde ar fi nevoie */
input,
textarea {
    -webkit-user-select: text;
    user-select: text;
}


/* =========================================================
   PRODUCT CARDS - look mai natural / botanical
========================================================= */

.products {
    background: #fcfaf5;
}

.products-grid {
    gap: 28px;
}

.product {
    background:
        linear-gradient(
            180deg,
            #fffdf8 0%,
            #f5efe3 100%
        ) !important;

    border: 1px solid rgba(93, 91, 75, .18) !important;
    border-radius: 14px !important;

    box-shadow:
        0 8px 25px rgba(72, 66, 52, .05);

    transition:
        transform .25s ease,
        box-shadow .25s ease,
        border-color .25s ease;
}

.product:hover,
.product.active {
    transform: translateY(-4px);
    border-color: rgba(79, 91, 68, .28) !important;
    box-shadow:
        0 18px 35px rgba(67, 58, 42, .10);
}

.illustration {
    position: relative;
    height: 225px !important;
    margin: 14px 14px 8px;
    border-radius: 18px;

    background:
        radial-gradient(circle at 30% 20%, rgba(255,255,255,.80), transparent 30%),
        linear-gradient(180deg, #fbf8f0 0%, #f1eadc 100%);

    overflow: hidden;
}

/* umbră fină sub legume */
.illustration::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 26px;
    width: 120px;
    height: 18px;
    transform: translateX(-50%);
    border-radius: 50%;
    background: rgba(87, 73, 52, .12);
    filter: blur(6px);
}

/* text */
.product h3 {
    margin-top: 4px !important;
    margin-bottom: 8px !important;
    font-size: 26px !important;
    line-height: 1.1;
    color: #44583e !important;
}

.product > p {
    margin: 0 16px 26px !important;
    font-size: 14px !important;
    line-height: 1.55 !important;
    color: #6d6b62 !important;
}

/* info box */
.product-info {
    top: 14px !important;
    left: 14px !important;
    right: 14px !important;
    padding: 12px 14px !important;
    border-radius: 10px;
    background: rgba(255, 251, 242, .96) !important;
    border: 1px solid rgba(114, 103, 82, .16) !important;
    box-shadow: 0 6px 15px rgba(56, 47, 35, .06);
}

/* =========================================================
   TOMATOES
========================================================= */

.tom {
    width: 78px !important;
    height: 70px !important;

    border: 2px solid #94493d !important;
    border-radius: 46% 54% 51% 49% / 51% 48% 52% 49% !important;

    background:
        radial-gradient(circle at 32% 28%, #e7a18d 0 12%, #cb735f 34%, #ab5648 100%) !important;

    box-shadow:
        inset -6px -8px 10px rgba(115, 43, 33, .16),
        0 8px 10px rgba(64, 39, 28, .08);
}

.tom::before {
    content: "";
    position: absolute;
    top: -13px;
    left: 50%;
    width: 34px;
    height: 22px;
    transform: translateX(-50%);
    background: #6e805c;
    clip-path: polygon(50% 0, 62% 34%, 100% 20%, 76% 53%, 90% 80%, 57% 67%, 50% 100%, 40% 67%, 8% 80%, 24% 53%, 0 20%, 39% 34%);
}

.tom::after {
    content: "";
    position: absolute;
    left: 17px;
    top: 14px;
    width: 18px;
    height: 10px;
    border-radius: 50%;
    background: rgba(255,255,255,.22);
    transform: rotate(-22deg);
}

.t1 { left: 22% !important; top: 102px !important; }
.t2 { left: 43% !important; top: 79px !important; }
.t3 { right: 18% !important; top: 109px !important; transform: scale(.88) !important; }

/* =========================================================
   CHERRY
========================================================= */

.ch {
    width: 46px !important;
    height: 43px !important;
    border: 2px solid #8f463d !important;
    border-radius: 50% !important;

    background:
        radial-gradient(circle at 32% 30%, #dc8e7d 0 10%, #bc6253 34%, #9e4e44 100%) !important;

    box-shadow:
        inset -4px -5px 7px rgba(104, 41, 35, .15),
        0 6px 8px rgba(64, 39, 28, .06);
}

.ch::after {
    content: "";
    position: absolute;
    left: 10px;
    top: 9px;
    width: 10px;
    height: 7px;
    border-radius: 50%;
    background: rgba(255,255,255,.20);
}

.c1 { left: 25% !important; top: 108px !important; }
.c2 { left: 41% !important; top: 72px !important; }
.c3 { right: 23% !important; top: 106px !important; }
.c4 { left: 50% !important; top: 129px !important; }

/* =========================================================
   CUCUMBERS
========================================================= */

.cu {
    width: 48px !important;
    height: 130px !important;

    border: 2px solid #506644 !important;
    border-radius: 48% 52% 42% 58% / 11% 15% 85% 89% !important;

    background:
        linear-gradient(
            90deg,
            #5f7a53 0%,
            #86a072 36%,
            #6f895f 62%,
            #4e6644 100%
        ) !important;

    box-shadow:
        inset -8px -8px 12px rgba(39, 60, 33, .18),
        0 10px 10px rgba(52, 46, 31, .07);
}

.cu::after {
    content: "";
    position: absolute;
    left: 11px;
    top: 14px;
    width: 8px;
    height: 72px;
    border-radius: 20px;
    background: rgba(255,255,255,.14);
    transform: rotate(4deg);
}

.cu1 { left: 26% !important; top: 42px !important; transform: rotate(-14deg) !important; }
.cu2 { left: 45% !important; top: 31px !important; transform: rotate(2deg) !important; }
.cu3 { right: 20% !important; top: 44px !important; transform: rotate(13deg) !important; }

/* =========================================================
   PUMPKIN
========================================================= */

.pump {
    width: 150px !important;
    height: 98px !important;
    top: 92px !important;

    border: 2px solid #915c3b !important;
    border-radius: 50% !important;

    background:
        radial-gradient(circle at 30% 25%, rgba(255,255,255,.16) 0 8%, transparent 9%),
        repeating-radial-gradient(
            ellipse at center,
            #c37d4e 0 14px,
            #aa6a43 15px 16px,
            #c37d4e 17px 30px
        ) !important;

    box-shadow:
        inset -9px -9px 12px rgba(103, 58, 33, .16),
        0 10px 10px rgba(62, 49, 30, .06);
}

.pump::before {
    left: 68px !important;
    top: -23px !important;
    width: 14px !important;
    height: 28px !important;
    background: linear-gradient(180deg,#71855c,#5e714c) !important;
}

.pump::after {
    content: "";
    position: absolute;
    left: 25px;
    top: 18px;
    width: 24px;
    height: 12px;
    border-radius: 50%;
    background: rgba(255,255,255,.10);
    transform: rotate(-20deg);
}

/* =========================================================
   ONIONS
========================================================= */

.on {
    width: 70px !important;
    height: 78px !important;

    border: 2px solid #9b795a !important;
    border-radius: 50% 50% 43% 43% / 50% 50% 46% 46% !important;

    background:
        linear-gradient(
            90deg,
            #bb956a 0%,
            #d9bc93 42%,
            #c59d72 58%,
            #a97f5b 100%
        ) !important;

    box-shadow:
        inset -7px -7px 11px rgba(112, 81, 49, .12),
        0 8px 9px rgba(65, 50, 33, .05);
}

.on::before {
    top: -39px !important;
    left: 27px !important;
    width: 16px !important;
    height: 42px !important;
    background: linear-gradient(180deg,#7f8d6e,#6c7d5e) !important;
    transform: rotate(12deg);
}

.on::after {
    content: "";
    position: absolute;
    left: 19px;
    top: 18px;
    width: 18px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255,255,255,.10);
    filter: blur(1px);
}

.on1 { left: 23% !important; top: 100px !important; }
.on2 { left: 45% !important; top: 78px !important; }
.on3 { right: 18% !important; top: 104px !important; transform: scale(.84) !important; }

/* =========================================================
   CARROTS
========================================================= */

.car,
.par {
    width: 44px !important;
    height: 118px !important;
    box-shadow: 0 8px 10px rgba(62, 49, 30, .05);
}

.car {
    background:
        linear-gradient(
            90deg,
            #b96f47 0%,
            #cc8357 48%,
            #a55f3d 100%
        ) !important;
}

.par {
    background:
        linear-gradient(
            90deg,
            #cfc29b 0%,
            #e6dab8 48%,
            #c7b487 100%
        ) !important;
}

.car::before,
.par::before {
    top: -38px !important;
    width: 42px !important;
    height: 42px !important;
    background: #7b896d !important;
}

.car1, .par1 { left: 28% !important; top: 70px !important; transform: rotate(-10deg) !important; }
.car2, .par2 { left: 47% !important; top: 58px !important; transform: rotate(3deg) !important; }
.car3, .par3 { right: 22% !important; top: 76px !important; transform: rotate(12deg) scale(.92) !important; }

/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {
    .illustration {
        height: 205px !important;
    }

    .product h3 {
        font-size: 22px !important;
    }
}