/* =========================================================
   EASY MOBILITY — BUY FORM
   CLEAN RESPONSIVE CSS
========================================================= */

:root{
    --green:#17302C;
    --green-light:#3B534E;
    --cream:#EEEFE6;
    --cream-dark:#E4E7DC;
    --gold:#C68A3E;
    --gold-dark:#A66E2A;
    --white:#FBFBF7;
    --line:rgba(23,48,44,.14);
    --success:#367653;

    --body:'Inter',Arial,Helvetica,sans-serif;
    --display:'Fraunces',Georgia,serif;
    --mono:'IBM Plex Mono',monospace;
}


/* =========================================================
   RESET
========================================================= */

*{
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{
    margin:0;
    padding:0;
    background:var(--cream);
    color:var(--green);
    font-family:var(--body);
    line-height:1.55;
    overflow-x:hidden;
}

img{
    max-width:100%;
    height:auto;
    display:block;
}

a{
    color:inherit;
    text-decoration:none;
}

button,
input,
select,
textarea{
    font:inherit;
}

button{
    cursor:pointer;
}

.container,
.wrap{
    width:100%;
    max-width:1160px;
    margin:0 auto;
    padding-left:28px;
    padding-right:28px;
}


/* =========================================================
   HEADER
========================================================= */

header{
    position:sticky;
    top:0;
    z-index:1000;

    background:rgba(238,239,230,.96);
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);

    border-bottom:1px solid var(--line);
}

.navbar{
    min-height:70px;

    display:flex;
    align-items:center;
    justify-content:space-between;

    gap:25px;

    position:relative;
}


/* =========================================================
   LOGO
========================================================= */

.logo{
    display:flex;
    align-items:center;
    gap:10px;

    font-family:var(--display);
    font-size:20px;
    font-weight:600;

    white-space:nowrap;

    flex-shrink:0;
}

.logo-mark{
    width:30px;
    height:30px;

    border-radius:50%;

    background:var(--green);

    position:relative;
    flex-shrink:0;
}

.logo-mark:after{
    content:"";

    position:absolute;

    width:10px;
    height:10px;

    left:8px;
    top:8px;

    border:2px solid var(--cream);

    border-radius:50%;

    border-right-color:transparent;

    transform:rotate(45deg);
}


/* =========================================================
   DESKTOP NAVIGATION
========================================================= */

.nav-links{
    display:flex;
    align-items:center;
    justify-content:center;

    gap:30px;

    margin:0;
    padding:0;

    list-style:none;

    flex:1;
}

.nav-links a{
    display:block;

    font-size:14px;
    font-weight:500;

    color:var(--green);

    opacity:.82;

    white-space:nowrap;

    transition:
        color .2s ease,
        opacity .2s ease;
}

.nav-links a:hover{
    color:var(--gold-dark);
    opacity:1;
}


/* =========================================================
   BUY NOW BUTTON
========================================================= */

.btn{
    display:inline-flex;

    align-items:center;
    justify-content:center;

    min-height:44px;

    padding:11px 21px;

    border-radius:4px;

    border:1px solid transparent;

    font-size:14px;
    font-weight:600;

    text-decoration:none;

    transition:
        background .2s ease,
        color .2s ease,
        border-color .2s ease,
        transform .2s ease;
}

.btn-primary{
    background:var(--green);
    color:var(--cream);
    border-color:var(--green);
}

.btn-primary:hover{
    background:var(--gold-dark);
    border-color:var(--gold-dark);
    transform:translateY(-1px);
}

.desktop-buy{
    flex-shrink:0;
}


/* =========================================================
   MOBILE MENU BUTTON
========================================================= */

.menu-toggle{
    display:none;

    width:42px;
    height:42px;

    padding:0;

    border:0;
    background:transparent;

    flex-direction:column;
    justify-content:center;
    align-items:center;

    gap:5px;

    position:relative;

    z-index:1100;
}

.menu-toggle span{
    display:block;

    width:24px;
    height:2px;

    background:var(--green);

    border-radius:2px;

    transition:
        transform .25s ease,
        opacity .2s ease;
}


/* =========================================================
   TRUST BAR
========================================================= */

.trust{
    background:var(--green);
    color:#fff;

    padding:10px 0;
}

.trust-inner{
    display:flex;

    justify-content:center;
    align-items:center;

    flex-wrap:wrap;

    gap:12px 28px;

    font-family:var(--mono);

    font-size:11px;

    text-transform:uppercase;

    letter-spacing:.04em;
}

.trust-item{
    display:flex;
    align-items:center;

    gap:7px;

    white-space:nowrap;
}

.check{
    width:17px;
    height:17px;

    border-radius:50%;

    background:var(--gold);

    color:var(--green);

    display:flex;
    align-items:center;
    justify-content:center;

    font-size:10px;
    font-weight:bold;

    flex-shrink:0;
}


/* =========================================================
   PAGE
========================================================= */

.page{
    padding:65px 0 80px;
}


/* =========================================================
   PAGE TITLE
========================================================= */

.page-title{
    max-width:700px;

    margin:0 auto 48px;

    text-align:center;
}

.eyebrow{
    display:inline-block;

    font-family:var(--mono);

    font-size:11px;

    text-transform:uppercase;

    letter-spacing:.13em;

    color:var(--gold-dark);

    font-weight:600;
}

.page-title h1{
    font-family:var(--display);

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

    line-height:1.05;

    margin:12px 0 15px;
}

.page-title p{
    max-width:570px;

    margin:0 auto;

    color:var(--green-light);

    font-size:16px;
}


/* =========================================================
   CHECKOUT
========================================================= */

.checkout{
    display:grid;

    grid-template-columns:
        minmax(0,1fr)
        minmax(0,1.05fr);

    gap:28px;

    align-items:start;
}


/* =========================================================
   PRODUCT CARD
========================================================= */

.product-card{
    width:100%;

    background:var(--white);

    border:1px solid var(--line);

    border-radius:14px;

    overflow:hidden;

    box-shadow:
        0 18px 45px rgba(23,48,44,.07);

    position:sticky;
    top:95px;

    min-width:0;
}

.product-image{
    min-height:350px;
    padding:30px;
}

.product-image img{
    width:100%;
    max-width:410px;
    height:310px;
    object-fit:contain;
}

.product-badge{
    position:absolute;

    left:20px;
    top:20px;

    background:var(--green);

    color:#fff;

    border-radius:30px;

    padding:8px 14px;

    font-family:var(--mono);

    font-size:10px;

    letter-spacing:.05em;

    z-index:2;
}

.product-info{
    padding:30px;
}

.stock{
    display:flex;
    align-items:center;

    gap:7px;

    color:var(--success);

    font-family:var(--mono);

    font-size:11px;

    text-transform:uppercase;
}

.stock-dot{
    width:7px;
    height:7px;

    border-radius:50%;

    background:var(--success);

    flex-shrink:0;
}

.product-name{
    font-family:var(--display);

    font-size:28px;

    line-height:1.2;

    margin:12px 0 5px;
}

.price{
    font-family:var(--display);

    font-size:40px;

    font-weight:600;

    line-height:1.1;

    margin:8px 0;
}

.price small{
    font-family:var(--body);

    font-size:14px;

    color:var(--green-light);
}

.shipping-included{
    color:var(--success);

    font-size:12px;

    font-weight:600;
}


/* =========================================================
   PRODUCT SPECS
========================================================= */

.specs{
    margin-top:25px;

    border-top:1px solid var(--line);
}

.spec{
    display:flex;

    justify-content:space-between;

    align-items:flex-start;

    gap:15px;

    padding:12px 0;

    border-bottom:1px solid var(--line);

    font-size:13px;
}

.spec span{
    color:var(--green-light);
}

.spec strong{
    text-align:right;
}


/* =========================================================
   FORM CARD
========================================================= */

.form-card{
    width:100%;

    background:var(--white);

    border:1px solid var(--line);

    border-radius:14px;

    padding:36px;

    box-shadow:
        0 18px 45px rgba(23,48,44,.07);

    min-width:0;
}

.form-card h2{
    font-family:var(--display);

    font-size:30px;

    line-height:1.2;

    margin:0 0 6px;
}

.form-subtitle{
    color:var(--green-light);

    font-size:14px;

    margin:0 0 30px;
}


/* =========================================================
   FORM SECTIONS
========================================================= */

.form-section{
    margin-bottom:30px;
}

.section-title{
    display:flex;

    align-items:center;

    gap:10px;

    font-weight:700;

    font-size:15px;

    margin-bottom:17px;
}

.step-number{
    width:27px;
    height:27px;

    flex-shrink:0;

    background:var(--green);

    color:#fff;

    border-radius:50%;

    display:flex;

    align-items:center;
    justify-content:center;

    font-family:var(--mono);

    font-size:11px;
}


/* =========================================================
   FORM GRID
========================================================= */

.form-grid{
    display:grid;

    grid-template-columns:
        minmax(0,1fr)
        minmax(0,1fr);

    gap:15px;
}

.field{
    min-width:0;

    margin-bottom:14px;
}

.field.full{
    grid-column:1 / -1;
}


/* =========================================================
   FORM ELEMENTS
========================================================= */

label{
    display:block;

    font-size:12px;

    font-weight:600;

    margin-bottom:7px;
}

input,
select,
textarea{
    width:100%;

    min-width:0;

    border:1px solid #ccd4cc;

    border-radius:7px;

    background:#fcfdfb;

    padding:13px;

    font:14px var(--body);

    color:var(--green);

    outline:none;

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

input{
    height:46px;
}

select{
    height:46px;
}

input:focus,
select:focus,
textarea:focus{
    border-color:var(--gold);

    box-shadow:
        0 0 0 3px rgba(198,138,62,.12);
}

textarea{
    min-height:100px;

    resize:vertical;
}


/* =========================================================
   COLOURS
========================================================= */

.colours{
    display:flex;

    align-items:center;

    flex-wrap:wrap;

    gap:13px;
}

.colour-option{
    position:relative;
}

.colour-option input{
    position:absolute;

    width:1px;
    height:1px;

    opacity:0;

    pointer-events:none;
}

.colour{
    width:42px;
    height:42px;

    display:block;

    border-radius:50%;

    border:3px solid #fff;

    box-shadow:
        0 0 0 1px #ccd2cb;

    cursor:pointer;

    transition:
        transform .2s ease,
        box-shadow .2s ease;
}

.colour:hover{
    transform:scale(1.06);
}

.colour-option input:checked + .colour{
    box-shadow:
        0 0 0 2px var(--gold-dark),
        0 0 0 5px #fff;
}


/* =========================================================
   DELIVERY
========================================================= */

.delivery-box{
    background:#eef5ee;

    border:1px solid #d4e4d5;

    border-radius:9px;

    padding:14px;

    color:#386447;

    font-size:13px;

    display:flex;

    gap:10px;

    margin-bottom:20px;
}

.delivery-icon{
    font-size:18px;

    flex-shrink:0;
}


/* =========================================================
   ORDER SUMMARY
========================================================= */

.summary{
    background:var(--cream);

    border:1px solid var(--line);

    border-radius:10px;

    padding:19px;

    margin-bottom:20px;
}

.summary-row{
    display:flex;

    justify-content:space-between;

    align-items:flex-start;

    gap:20px;

    padding:7px 0;

    font-size:14px;
}

.summary-row span:last-child{
    text-align:right;
}

.summary-total{
    border-top:1px solid var(--line);

    margin-top:8px;

    padding-top:15px;

    font-size:20px;

    font-weight:700;

    color:var(--green);
}


/* =========================================================
   ORDER BUTTON
========================================================= */

.order-btn{
    width:100%;

    min-height:54px;

    border:0;

    padding:15px 17px;

    border-radius:7px;

    background:var(--green);

    color:#fff;

    font:600 15px var(--body);

    cursor:pointer;

    transition:
        background .2s ease,
        transform .2s ease;
}

.order-btn:hover{
    background:var(--gold-dark);

    transform:translateY(-1px);
}

.secure{
    text-align:center;

    color:var(--green-light);

    font-size:11px;

    margin-top:11px;
}


/* =========================================================
   BENEFITS
========================================================= */

.benefits{
    margin-top:28px;

    display:grid;

    grid-template-columns:
        repeat(3,minmax(0,1fr));

    gap:15px;
}

.benefit{
    background:var(--white);

    border:1px solid var(--line);

    border-radius:10px;

    padding:20px;
}

.benefit-icon{
    color:var(--gold-dark);

    font-size:20px;

    margin-bottom:10px;
}

.benefit h3{
    margin:0 0 5px;

    font-size:14px;
}

.benefit p{
    color:var(--green-light);

    font-size:12.5px;

    margin:0;
}


/* =========================================================
   REASSURANCE
========================================================= */

.reassurance{
    margin-top:65px;

    background:var(--green);

    color:var(--cream);

    border-radius:14px;

    padding:55px 30px;

    text-align:center;
}

.reassurance h2{
    font-family:var(--display);

    font-size:34px;

    line-height:1.2;

    margin:0 0 12px;
}

.reassurance p{
    max-width:650px;

    margin:0 auto;

    color:rgba(238,239,230,.68);
}

.reassurance-grid{
    max-width:750px;

    margin:32px auto 0;

    display:grid;

    grid-template-columns:
        repeat(3,minmax(0,1fr));

    gap:20px;
}

.reassurance strong{
    display:block;

    color:var(--gold);

    font-family:var(--display);

    font-size:24px;
}

.reassurance span{
    color:rgba(238,239,230,.6);

    font-size:12px;
}


/* =========================================================
   FOOTER
========================================================= */

footer{
    background:#102622;

    color:#fff;

    padding:50px 0 25px;
}

.footer-grid{
    display:grid;

    grid-template-columns:
        1.5fr 1fr 1fr;

    gap:40px;
}

.footer-logo{
    font-family:var(--display);

    font-size:21px;

    margin-bottom:12px;
}

footer h4{
    font-family:var(--mono);

    text-transform:uppercase;

    font-size:11px;

    letter-spacing:.1em;

    color:rgba(255,255,255,.55);
}

footer p,
footer li{
    color:rgba(255,255,255,.62);

    font-size:13px;
}

footer ul{
    list-style:none;

    margin:0;
    padding:0;
}

footer li{
    margin-bottom:9px;
}

footer a:hover{
    color:var(--gold);
}

.footer-bottom{
    margin-top:35px;

    padding-top:20px;

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

    display:flex;

    justify-content:space-between;

    flex-wrap:wrap;

    gap:10px;

    color:rgba(255,255,255,.45);

    font-size:11px;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width:1000px){

    .nav-links{
        gap:18px;
    }

    .checkout{
        grid-template-columns:1fr;
    }

    .product-card{
        position:static;
    }

    .benefits{
        grid-template-columns:
            repeat(3,minmax(0,1fr));
    }

    .footer-grid{
        grid-template-columns:1fr 1fr;
    }
}


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

@media (max-width:768px){

    .container,
    .wrap{
        padding-left:18px;
        padding-right:18px;
    }

    /* Header */

    .navbar{
        min-height:64px;

        gap:10px;
    }

    .logo{
        font-size:19px;
    }

    .nav-links{
        display:none;

        position:absolute;

        top:calc(100% + 8px);

        left:10px;
        right:10px;

        width:auto;

        flex-direction:column;

        align-items:stretch;

        justify-content:flex-start;

        gap:2px;

        padding:10px;

        background:var(--white);

        border:1px solid var(--line);

        border-radius:12px;

        box-shadow:
            0 14px 35px rgba(0,0,0,.14);

        z-index:1050;

        flex:none;
    }

    .nav-links.active{
        display:flex;
    }

    .nav-links a{
        width:100%;

        padding:14px 15px;

        border-radius:8px;

        font-size:14px;

        opacity:1;
    }

    .nav-links a:hover{
        background:var(--cream-dark);

        color:var(--green);
    }

    .desktop-buy{
        display:none !important;
    }

    .menu-toggle{
        display:flex;
    }

    /* Hamburger → X */

    .menu-toggle.active span:nth-child(1){
        transform:
            translateY(7px)
            rotate(45deg);
    }

    .menu-toggle.active span:nth-child(2){
        opacity:0;
    }

    .menu-toggle.active span:nth-child(3){
        transform:
            translateY(-7px)
            rotate(-45deg);
    }


    /* Trust */

    .trust{
        padding:9px 0;
    }

    .trust-inner{
        justify-content:flex-start;

        gap:8px 16px;

        font-size:9px;
    }

    .trust-item{
        white-space:normal;
    }

    .check{
        width:15px;
        height:15px;

        font-size:9px;
    }


    /* Page */

    .page{
        padding:45px 0 60px;
    }

    .page-title{
        margin-bottom:35px;
    }

    .page-title h1{
        font-size:
            clamp(34px,9vw,46px);
    }

    .page-title p{
        font-size:15px;
    }


    /* Checkout */

    .checkout{
        grid-template-columns:1fr;

        gap:22px;
    }


    /* Product */

    .product-card{
        width:100%;
    }

      .product-image{
        min-height:290px;
        padding:24px;
    }

    .product-image img{
        max-width:350px;
        height:245px;
    }

    .product-badge{
        left:14px;
        top:14px;

        padding:7px 11px;

        font-size:9px;
    }

    .product-info{
        padding:23px;
    }

    .product-name{
        font-size:25px;
    }

    .price{
        font-size:36px;
    }


    /* Form */

    .form-card{
        padding:23px;

        border-radius:12px;
    }

    .form-card h2{
        font-size:27px;
    }

    .form-subtitle{
        margin-bottom:25px;
    }

    .form-grid{
        grid-template-columns:1fr;

        gap:0;
    }

    .field.full{
        grid-column:auto;
    }


    /* Benefits */

    .benefits{
        grid-template-columns:1fr;

        gap:12px;
    }


    /* Reassurance */

    .reassurance{
        margin-top:45px;

        padding:40px 22px;

        border-radius:12px;
    }

    .reassurance h2{
        font-size:29px;
    }

    .reassurance-grid{
        grid-template-columns:1fr;

        gap:22px;
    }


    /* Footer */

    .footer-grid{
        grid-template-columns:1fr;

        gap:28px;
    }

    .footer-bottom{
        flex-direction:column;

        align-items:flex-start;
    }
}


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

@media (max-width:480px){

    .container,
    .wrap{
        padding-left:15px;
        padding-right:15px;
    }

    .navbar{
        min-height:62px;
    }

    .logo{
        font-size:18px;
    }

    .logo-mark{
        width:28px;
        height:28px;
    }

    .logo-mark:after{
        width:9px;
        height:9px;

        left:7px;
        top:7px;
    }

    .menu-toggle{
        width:40px;
        height:40px;
    }


    /* Trust */

    .trust-inner{
        display:grid;

        grid-template-columns:1fr 1fr;

        gap:8px 12px;

        font-size:8px;
    }


    /* Page */

    .page{
        padding:35px 0 50px;
    }

    .page-title{
        margin-bottom:28px;
    }

    .page-title h1{
        font-size:34px;

        line-height:1.08;
    }

    .page-title p{
        font-size:14px;
    }


    /* Product */

    .product-image{
        min-height:255px;

        padding:20px;
    }

    .product-image img{
        height:215px;
    }

    .product-info{
        padding:20px;
    }

    .product-name{
        font-size:23px;
    }

    .price{
        font-size:34px;
    }

    .spec{
        font-size:12px;

        gap:10px;
    }


    /* Form */

    .form-card{
        padding:19px;
    }

    .form-card h2{
        font-size:25px;
    }

    .section-title{
        font-size:14px;
    }

    input,
    select{
        height:45px;
    }

    input,
    select,
    textarea{
        padding:12px;

        font-size:14px;
    }

    textarea{
        min-height:110px;
    }

    .colour{
        width:38px;
        height:38px;
    }


    /* Summary */

    .summary{
        padding:15px;
    }

    .summary-row{
        font-size:13px;

        gap:12px;
    }

    .summary-total{
        font-size:18px;
    }

    .order-btn{
        min-height:52px;

        font-size:14px;
    }


    /* Reassurance */

    .reassurance{
        padding:35px 18px;
    }

    .reassurance h2{
        font-size:27px;
    }


    /* Footer */

    footer{
        padding:40px 0 25px;
    }

    .footer-grid{
        gap:25px;
    }
}


/* =========================================================
   VERY SMALL DEVICES
========================================================= */

@media (max-width:360px){

    .logo{
        font-size:16px;
    }

    .logo-mark{
        width:26px;
        height:26px;
    }

    .page-title h1{
        font-size:31px;
    }

    .product-image{
        min-height:235px;
    }

    .product-image img{
        height:195px;
    }

    .form-card{
        padding:16px;
    }

    .trust-inner{
        font-size:7.5px;
    }
}


/* =========================================================
   ACCESSIBILITY
========================================================= */

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible{
    outline:3px solid rgba(198,138,62,.35);

    outline-offset:2px;
}


/* =========================================================
   PREVENT OVERFLOW
========================================================= */

.checkout,
.product-card,
.form-card,
.form-grid,
.benefits,
.reassurance-grid{
    min-width:0;
}

.field,
.form-section{
    min-width:0;
}

input,
select,
textarea{
    max-width:100%;
}
/* =====================================================
   FOOTER SOCIAL ICONS
===================================================== */

.footer-social {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 18px;
    margin-top: 20px;
    padding: 8px 0;
}

.footer-social a {
    width: 40px;
    height: 40px;

    display: flex;
    align-items: center;
    justify-content: center;

    border: 1px solid rgba(255,255,255,.25);
    border-radius: 50%;

    color: #fff;
    background: rgba(255,255,255,.03);

    text-decoration: none;
    font-size: 17px;

    transition: all .3s ease;
}

.footer-social a:hover {
    transform: translateY(-3px);
    background: rgba(255,255,255,.12);
    border-color: rgba(255,255,255,.6);
    color: #fff;
    box-shadow: 0 4px 12px rgba(0,0,0,.25);
}


/* Mobile */
@media (max-width:480px) {

    .footer-social {
        gap: 14px;
        margin-top: 18px;
        padding: 6px 0;
    }

    .footer-social a {
        width: 38px;
        height: 38px;
        font-size: 16px;
    }

}
.logo {
    display: flex;
    align-items: center;
}

.logo img {
    display: block;
    position: relative;
    top: -15px;
}

/* Mobile */
@media (max-width: 768px) {
    .logo img {
        top: -10px;
    }
}