.guides-page{
    padding:18px 14px 30px;
}


/* ---------------------------------------------------------
   Header
   --------------------------------------------------------- */

.guides-page__head{
    padding:9px 5px 3px;
    margin-bottom:16px;
}

.guides-page__head small{
    display:block;

    color:#98df50;

    font-size:11px;
    font-weight:400;
    letter-spacing:1.25px;
}

.guides-page__head h1{
    margin:5px 0 7px;

    color:#fff;

    font-size:30px;
    line-height:1.05;
    font-weight:400;
    letter-spacing:-.45px;
}

.guides-page__head p{
    max-width:440px;
    margin:0;

    color:#d1ddd4;

    font-size:12.5px;
    line-height:1.45;
}


/* ---------------------------------------------------------
   Search
   --------------------------------------------------------- */

.guides-page__search{
    display:flex;
    align-items:center;
    gap:9px;

    min-height:47px;
    margin-bottom:11px;
    padding:0 13px;

    border:1px solid #31543c;
    border-radius:14px;

    background:#10291b;

    box-shadow:0 5px 14px rgba(0,0,0,.11);
}

.guides-page__search > span{
    flex:0 0 auto;

    color:#9ddc61;

    font-size:22px;
    line-height:1;
}

.guides-page__search input{
    width:100%;
    min-width:0;
    padding:13px 0;

    border:0;
    outline:0;

    background:transparent;
    color:#fff;

    font-size:13px;
    font-weight:400;
}

.guides-page__search input::placeholder{
    color:#91a096;
}


/* ---------------------------------------------------------
   Filters
   --------------------------------------------------------- */

.guides-page__filters{
    display:flex;
    gap:7px;

    margin:0 -14px 23px;
    padding:0 14px 3px;

    overflow-x:auto;

    scrollbar-width:none;
}

.guides-page__filters::-webkit-scrollbar{
    display:none;
}

.guides-page__filters button{
    flex:0 0 auto;

    padding:7px 11px;

    border:1px solid #31543c;
    border-radius:999px;

    background:#0d2518;
    color:#cbd7ce;

    font-size:13px;
    line-height:1;
    font-weight:400;
}

.guides-page__filters button.is-active{
    border-color:#8dca4e;

    background:#dff4c3;
    color:#214424;
}


/* ---------------------------------------------------------
   Sections
   --------------------------------------------------------- */

.guides-page__section{
    margin-bottom:27px;
}

.guides-page__section-head{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:12px;

    margin-bottom:10px;
    padding:0 3px;
}

.guides-page__section-head small{
    display:block;

    margin-bottom:3px;

    color:#97dc52;

    font-size:11px;
    font-weight:400;
    letter-spacing:1.15px;
}

.guides-page__section-head h2{
    margin:0;

    color:#fff;

    font-size:20px;
    line-height:1.1;
    font-weight:400;
}

.guides-page__section-head > span{
    padding-bottom:2px;

    color:#8f9d93;

    font-size:11px;

    white-space:nowrap;
}


/* ---------------------------------------------------------
   Popular guides
   Listing-inspired care cards
   --------------------------------------------------------- */

.guides-page__popular{
    display:grid;
    gap:12px;
}

.guides-page__guide-card{
    position:relative;

    display:block;
    overflow:hidden;

    border:1px solid #d9c68f;
    border-radius:19px;

    background:
        linear-gradient(
            145deg,
            #fffaf1 0%,
            #f6efd9 100%
        );

    color:#172019;

    box-shadow:
        0 9px 22px rgba(3,27,15,.20),
        0 2px 6px rgba(0,0,0,.10);

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

    -webkit-tap-highlight-color:transparent;
}

.guides-page__guide-card:active{
    transform:translateY(2px) scale(.992);

    box-shadow:
        0 5px 12px rgba(3,27,15,.20);
}

.guides-page__guide-photo{
    position:relative;

    height:156px;
    overflow:hidden;

    background:#173423;
}

.guides-page__guide-photo::after{
    content:"";

    position:absolute;
    z-index:1;
    right:0;
    bottom:0;
    left:0;

    height:45px;

    background:
        linear-gradient(
            180deg,
            transparent,
            rgba(7,25,15,.22)
        );

    pointer-events:none;
}

.guides-page__guide-photo img{
    display:block;

    width:100%;
    height:100%;

    object-fit:cover;
}

.guides-page__guide-level{
    position:absolute;
    z-index:2;

    top:10px;
    right:10px;

    padding:6px 9px;

    border:1px solid rgba(255,255,255,.34);
    border-radius:999px;

    background:rgba(13,35,22,.78);
    color:#fff;

    box-shadow:0 2px 7px rgba(0,0,0,.18);

    backdrop-filter:blur(6px);
    -webkit-backdrop-filter:blur(6px);

    font-size:11px;
    line-height:1;
    font-weight:400;
}

.guides-page__guide-body{
    padding:12px 13px 13px;
}

.guides-page__guide-body > small{
    display:block;

    margin-bottom:4px;

    color:#669245;

    font-size:11px;
    line-height:1;
    font-weight:400;
    letter-spacing:1px;
}

.guides-page__guide-title{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
}

.guides-page__guide-title > div{
    min-width:0;
}

.guides-page__guide-title h3{
    margin:0;

    color:#123c27;

    font-size:19px;
    line-height:1.12;
    font-weight:500;
    letter-spacing:-.2px;
}

.guides-page__guide-title em{
    display:block;

    margin-top:3px;

    color:#72756d;

    font-size:11px;
    line-height:1.2;
    font-weight:400;
}

.guides-page__guide-title > span{
    flex:0 0 auto;

    color:#5e7d55;

    font-size:27px;
    line-height:1;
}

.guides-page__guide-body > p{
    display:-webkit-box;
    overflow:hidden;

    margin:9px 0;

    color:#555d56;

    font-size:11px;
    line-height:1.42;

    -webkit-box-orient:vertical;
    -webkit-line-clamp:2;
}

.guides-page__guide-meta{
    display:flex;
    flex-wrap:wrap;
    gap:5px;
}

.guides-page__guide-meta span{
    padding:5px 7px;

    border-radius:7px;

    background:#eee3c8;
    color:#615c50;

    font-size:11px;
    line-height:1;

    white-space:nowrap;
}

.guides-page__guide-link{
    display:flex;
    align-items:center;
    justify-content:space-between;

    margin-top:11px;
    padding-top:9px;

    border-top:1px solid #dfd3b8;

    color:#31633c;

    font-size:13px;
    line-height:1;
    font-weight:400;
}

.guides-page__guide-link span{
    font-size:17px;
    line-height:1;
}


/* ---------------------------------------------------------
   Habitats
   --------------------------------------------------------- */

.guides-page__habitats{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:9px;
}

.guides-page__habitat{
    position:relative;

    min-height:131px;
    padding:13px 12px 28px;

    border:1px solid #31543c;
    border-radius:15px;

    background:
        radial-gradient(
            circle at 100% 0%,
            rgba(120,186,67,.16),
            transparent 48%
        ),
        linear-gradient(
            145deg,
            #102d1e,
            #0b2116
        );

    box-shadow:0 6px 16px rgba(0,0,0,.13);
}

.guides-page__habitat-icon{
    display:block;

    margin-bottom:9px;

    font-size:25px;
    line-height:1;
}

.guides-page__habitat h3{
    margin:0 0 5px;

    color:#fff;

    font-size:14px;
    line-height:1.15;
    font-weight:400;
}

.guides-page__habitat p{
    margin:0;

    color:#b8c8bd;

    font-size:13px;
    line-height:1.4;
}

.guides-page__habitat-arrow{
    position:absolute;

    right:12px;
    bottom:9px;

    color:#86b46e;

    font-size:20px;
    line-height:1;
}


/* ---------------------------------------------------------
   Discover rail
   --------------------------------------------------------- */

.guides-page__section--discover{
    margin-top:2px;
}

.guides-page__discover{
    display:flex;
    gap:9px;

    margin-right:-14px;
    margin-left:-14px;
    padding:2px 14px 10px;

    overflow-x:auto;

    scroll-snap-type:x proximity;
    scrollbar-width:none;
}

.guides-page__discover::-webkit-scrollbar{
    display:none;
}

.guides-page__discover-card{
    flex:0 0 158px;

    min-height:174px;
    padding:12px;

    scroll-snap-align:start;

    border:1px solid #d9cba6;
    border-radius:16px;

    background:
        radial-gradient(
            circle at 100% 0%,
            rgba(122,174,72,.11),
            transparent 45%
        ),
        linear-gradient(
            145deg,
            #fffaf0,
            #f8eed8
        );

    color:#1b261d;

    box-shadow:
        0 6px 16px rgba(0,0,0,.14),
        inset 0 1px 0 rgba(255,255,255,.90);
}

.guides-page__discover-top{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:8px;

    margin-bottom:9px;
}

.guides-page__discover-icon{
    display:flex;
    align-items:center;
    justify-content:center;

    width:42px;
    height:42px;

    border:1px solid #c9d8bd;
    border-radius:12px;

    background:#e6f0d9;

    font-size:23px;
}

.guides-page__discover-top > span{
    padding:4px 6px;

    border:1px solid #c8d7b5;
    border-radius:999px;

    color:#546c43;

    font-size:11px;
    line-height:1;
}

.guides-page__discover-card > small{
    display:block;

    margin-bottom:4px;

    color:#658049;

    font-size:11px;
    line-height:1;
    letter-spacing:.7px;
    text-transform:uppercase;
}

.guides-page__discover-card h3{
    margin:0;

    color:#153c28;

    font-size:14px;
    line-height:1.15;
    font-weight:500;
}

.guides-page__discover-card em{
    display:block;

    margin-top:3px;

    color:#73776f;

    font-size:12px;
    line-height:1.2;
    font-weight:400;
}

.guides-page__discover-foot{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;

    margin-top:14px;
    padding-top:8px;

    border-top:1px solid #ddd2b8;
}

.guides-page__discover-foot span{
    overflow:hidden;

    color:#666d63;

    font-size:12px;

    text-overflow:ellipsis;
    white-space:nowrap;
}

.guides-page__discover-foot strong{
    color:#4e7745;

    font-size:20px;
    line-height:1;
    font-weight:400;
}


/* ---------------------------------------------------------
   Growing library
   --------------------------------------------------------- */

.guides-page__library-note{
    display:grid;
    grid-template-columns:39px minmax(0,1fr);
    gap:10px;

    padding:13px;

    border:1px solid #d5c691;
    border-radius:15px;

    background:#fff6df;
    color:#1d2c21;
}

.guides-page__library-note > span{
    font-size:27px;
}

.guides-page__library-note small{
    display:block;

    margin-bottom:3px;

    color:#657d42;

    font-size:11px;
    font-weight:400;
    letter-spacing:1px;
}

.guides-page__library-note strong{
    display:block;

    font-size:12px;
    line-height:1.25;
    font-weight:500;
}

.guides-page__library-note p{
    margin:4px 0 0;

    color:#666a61;

    font-size:13px;
    line-height:1.4;
}


/* ---------------------------------------------------------
   Small phones
   --------------------------------------------------------- */

@media (max-width:370px){

    .guides-page{
        padding-right:12px;
        padding-left:12px;
    }

    .guides-page__filters{
        margin-right:-12px;
        margin-left:-12px;

        padding-right:12px;
        padding-left:12px;
    }

    .guides-page__guide-card{
        grid-template-columns:43px minmax(0,1fr) 12px;
        gap:8px;
    }

    .guides-page__guide-icon{
        width:43px;
        height:43px;

        font-size:24px;
    }

    .guides-page__guide-head > span{
        display:none;
    }

    .guides-page__discover{
        margin-right:-12px;
        margin-left:-12px;

        padding-right:12px;
        padding-left:12px;
    }

    .guides-page__discover-card{
        flex-basis:150px;
    }
}