/* Mobile overrides: hamburger + sliding dropdown + compact nav behavior */
@media (max-width: 768px) {

    /* reduce hero width on mobile */
    .hero-grid {
        width: 100vw;
        /* max-wid th: var(--max-width); */
    }

    .hero-text img {
        max-width: 95vw;
        height: auto;
    }

    .hero-text h1 {
        font-size: 2.2rem;
    }

    .button-row {
        grid-template-columns: 1fr;
    }

    /* Adjust nav container: logo left, menu area center (hidden initially), burger right */
    .nav-container {
        grid-template-columns: auto 1fr auto;
        padding: 10px 16px;
        align-items: center;
    }

    /* Hamburger: visible on mobile; placed on right grid column */
    .hamburger {
        display: inline-flex;
        flex-direction: column;
        gap: 6px;
        justify-self: end;
        align-self: center;
        cursor: pointer;
        z-index: 1100;
    }

    .hamburger span {
        width: 26px;
        height: 3px;
        background: var(--white);
        border-radius: 3px;
        display: block;
        transition: transform .28s ease, opacity .2s ease;
    }

    /* Animate hamburger into X when the checkbox is checked */
    .nav-toggle:checked + .nav-logo + .nav-links + .hamburger span:nth-child(1) {
        transform: translateY(8px) rotate(45deg);
    }
    .nav-toggle:checked + .nav-logo + .nav-links + .hamburger span:nth-child(2) {
        opacity: 0;
    }
    .nav-toggle:checked + .nav-logo + .nav-links + .hamburger span:nth-child(3) {
        transform: translateY(-8px) rotate(-45deg);
    }

    /* Mobile dropdown: use max-height for smooth slide */
    .nav-links {
        position: absolute;
        left: 0;
        top: 100%;
        width: 100%;
        background: var(--green-dark);
        flex-direction: column;
        align-items: center;
        gap: 12px;

        padding: 0 0;
        overflow: hidden;
        max-height: 0;                /* collapsed */
        transition: max-height .36s cubic-bezier(.2,.9,.3,1), padding .28s ease;
    }

    /* When checked, expand menu */
    .nav-toggle:checked + .nav-logo + .nav-links {
        max-height: 480px; /* enough for menu items (adjust if more items) */
        padding: 14px 0 18px 0;
    }

    /* Menu links: larger touch targets */
    .nav-links a {
        display: block;
        padding: 12px 20px;
        width: 100%;
        text-align: center;
        font-size: 1rem;
    }

    /* Keep underline visible on mobile active */
    .nav-links a::after { bottom: 8px; height:2px; }

    /* Ensure hamburger label is keyboard-focusable */
    .hamburger:focus { outline: 2px solid rgba(255,255,255,0.12); outline-offset: 2px; }

    /* Close any desktop-specific overflow */
    .product-grid { gap: .8rem; }
    .item:hover {
        transform: none;
        transition: none;
    }

}