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

:root {
    --green:#285c4a;
    --green-dark:#194535;
    --cream:#f6f5ef;
    --blue:#e6f0f1;
    --ink:#233b36;
    --muted:#52665f;
    --white:#fff;
    --line:#d5e2dc
}

* {
    box-sizing:border-box
}

body {
    margin:0;
    background:var(--cream);
    color:var(--ink);
    font-family:Nunito,Arial,sans-serif;
    font-size:17px;
    line-height:1.55
}

a {
    color:inherit
}

main {
    min-height:100vh
}

.site-nav {
    background:var(--green);
    color:white;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:24px;
    padding:18px max(28px,calc((100vw - 1160px)/2));
    box-shadow:0 3px 12px #152b2420
}

.brand {
    font-size:27px;
    font-weight:800;
    letter-spacing:-.5px;
    text-decoration:none;
    white-space:nowrap
}

.site-nav ul {
    list-style:none;
    margin:0;
    padding:0;
    display:flex;
    gap:12px;
    align-items:center
}

.site-nav li {
    list-style:none
}

.site-nav a {
    text-decoration:none
}

.site-nav ul a {
    font-size:19px;
    font-weight:700;
    display:block;
    padding:9px 17px;
    border-radius:8px
}

.site-nav ul a:hover,.site-nav ul a:focus-visible,.site-nav ul a[aria-current=page] {
    background:#ffffff26
}

.container {
    max-width:1160px;
    margin:0 auto;
    padding:32px 24px 65px
}

.hero {
    background:var(--blue);
    padding:46px 26px;
    text-align:center;
    border-bottom:1px solid var(--line)
}

.hero h1 {
    font-size:clamp(32px,4vw,48px);
    line-height:1.15;
    margin:0 0 12px;
    color:var(--green-dark)
}

.hero p {
    font-size:19px;
    max-width:660px;
    margin:0 auto;
    color:var(--muted)
}

.section-heading {
    font-size:28px;
    color:var(--green-dark);
    margin:0 0 8px
}

.section-intro {
    color:var(--muted);
    margin:0 0 22px
}

.dog-grid {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:24px
}

.card {
    background:white;
    border-radius:14px;
    overflow:hidden;
    box-shadow:0 5px 20px #233b3617;
    border:1px solid var(--line);
    text-align:center;
    padding-bottom:22px
}

.card--avatar {
    display:block;
    width:100%;
    height:205px;
    object-fit:cover
}

.card--title {
    font-size:22px;
    color:var(--green-dark);
    margin:15px 0 13px
}

.card--link,.primary-button {
    display:inline-block;
    background:var(--green);
    color:white;
    padding:10px 25px;
    border:0;
    border-radius:8px;
    text-decoration:none;
    font:700 17px Nunito,Arial,sans-serif;
    cursor:pointer
}

.card--link:hover,.primary-button:hover {
    background:var(--green-dark)
}

.card--link:focus-visible,.primary-button:focus-visible {
    outline:3px solid #f2ba59;
    outline-offset:3px
}

.site-footer {
    text-align:center;
    padding:25px;
    background:var(--blue);
    color:var(--muted);
    font-size:15px
}

.form-wrap {
    max-width:580px;
    margin:48px auto 70px;
    padding:32px;
    background:white;
    border:1px solid var(--line);
    border-radius:14px;
    box-shadow:0 5px 20px #233b3617
}

.form-wrap h1 {
    color:var(--green-dark);
    font-size:31px;
    margin:0 0 6px
}

.form-wrap>p {
    color:var(--muted);
    margin:0 0 25px
}

.form-wrap label {
    display:block;
    font-weight:700;
    margin:15px 0 6px
}

.form-wrap input {
    width:100%;
    padding:12px;
    border:1px solid #aabbb3;
    border-radius:7px;
    font:inherit
}

.form-wrap .phone-fields {
    display:grid;
    grid-template-columns:1fr 1fr 1.5fr;
    gap:10px
}

.form-wrap button {
    margin-top:24px
}

.product-grid {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:24px
}

.product-card {
    background:white;
    border:1px solid var(--line);
    border-radius:14px;
    padding:22px;
    text-align:center;
    box-shadow:0 5px 20px #233b3617
}

.product-card img {
    width:100%;
    max-width:230px;
    height:220px;
    object-fit:contain
}

.product-card h2 {
    font-size:21px;
    color:var(--green-dark);
    margin:12px 0 0
}

/* Legacy dog detail page retains its original HTML;
 limit image size and align its card. */
.row1 {
    display:flex;
    justify-content:center
}

.card_full {
    width:min(100%,650px);
    background:white;
    border-radius:14px;
    padding:24px;
    margin:22px auto;
    text-align:center;
    box-shadow:0 5px 20px #233b3617
}

.card_full .card--avatar {
    width:min(100%,380px);
    height:260px;
    object-fit:cover;
    margin:auto;
    border-radius:9px
}

.card_full .description {
    margin-top:18px
}

.card_full .card--title {
    margin:16px 0
}

.card_full .card--link {
    margin-top:4px
}

@media(max-width:780px) {
    .dog-grid,.product-grid {
        grid-template-columns:repeat(2,minmax(0,1fr))
    }

    .site-nav {
        padding:16px 22px
    }

    .site-nav ul a {
        font-size:17px;
        padding:8px
    }

}

@media(max-width:540px) {
    .site-nav {
        flex-direction:column;
        gap:8px
    }

    .site-nav ul {
        flex-wrap:wrap;
        justify-content:center
    }

    .dog-grid,.product-grid {
        grid-template-columns:1fr
    }

    .hero {
        padding:35px 20px
    }

    .container {
        padding:28px 18px
    }

    .form-wrap {
        margin:24px 15px;
        padding:23px
    }

    .card--avatar {
        height:240px
    }

}