/* ============================================================



   PAINT FOR LIFE



   GLOBAL RESPONSIVE



============================================================ */











/* ============================================================



   LARGE LAPTOP



   1280px



============================================================ */







@media (max-width: 1280px) {







    .home-hero__content {



        width: 45%;



        max-width: 550px;



    }











    .home-hero h1 {



        font-size: clamp(



            2.75rem,



            4vw,



            3.95rem



        );



    }











    .home-hero {



        background-position: 54% center;



    }







}











/* ============================================================



   LAPTOP / SMALL DESKTOP



   1120px



============================================================ */







@media (max-width: 1120px) {







    /* --------------------------------------------------------



       HOMEPAGE HERO



    -------------------------------------------------------- */







    .home-hero {



        min-height: 520px;







        background-position: 58% center;



    }











    .home-hero__content {



        width: 49%;



        max-width: 520px;



    }











    .home-hero h1 {



        font-size: clamp(



            2.65rem,



            4.5vw,



            3.7rem



        );



    }











    .home-hero__description {



        max-width: 430px;







        font-size: 0.92rem;



    }











    .home-hero__benefits {



        gap: 14px;



    }











    /* --------------------------------------------------------



       HOMEPAGE PRODUCTS



    -------------------------------------------------------- */







    .home-product-row {



        grid-template-columns: none;







        grid-auto-flow: column;



        grid-auto-columns: minmax(205px, 28vw);







        gap: 14px;







        overflow-x: auto;







        padding-bottom: 12px;







        scroll-snap-type: x proximity;







        scrollbar-width: thin;



        scrollbar-color: #b9ceca transparent;



    }











    .home-product-card {



        scroll-snap-align: start;



    }











    .home-product-row::-webkit-scrollbar {



        height: 5px;



    }











    .home-product-row::-webkit-scrollbar-track {



        background: transparent;



    }











    .home-product-row::-webkit-scrollbar-thumb {



        border-radius: 999px;







        background: #b9ceca;



    }







}











/* ============================================================



   TABLET LANDSCAPE



   960px



============================================================ */







@media (max-width: 960px) {







    /* --------------------------------------------------------



       HERO



    -------------------------------------------------------- */







    .home-hero {



        min-height: 520px;



        height: auto;



        max-height: none;







        background-image:



            linear-gradient(



                90deg,



                rgba(255, 255, 255, 0.98) 0%,



                rgba(255, 255, 255, 0.95) 35%,



                rgba(255, 255, 255, 0.74) 51%,



                rgba(255, 255, 255, 0.28) 68%,



                rgba(255, 255, 255, 0) 88%



            ),



            url("../images/home/hero-bg.png");







        background-size: cover;



        background-position: 62% center;



    }











    .home-hero__inner {



        min-height: 520px;



    }











    .home-hero__content {



        width: 56%;



        max-width: 490px;







        padding: 45px 0;



    }











    .home-hero h1 {



        font-size: clamp(



            2.5rem,



            5.5vw,



            3.45rem



        );



    }











    .home-hero__description {



        max-width: 410px;



    }











    /* --------------------------------------------------------



       ABOUT



    -------------------------------------------------------- */







    .home-about__grid {



        grid-template-columns: 1fr;







        gap: 28px;



    }











    .home-about__quote {



        max-width: 100%;



        min-height: 205px;



    }











    /* --------------------------------------------------------



       WHY US



    -------------------------------------------------------- */







    .why-grid {



        grid-template-columns:



            repeat(2, minmax(0, 1fr));



    }











    .why-item {



        padding: 26px 24px;







        border-right: 0;



        border-bottom: 1px solid #dbe7e5;



    }











    .why-item:nth-child(odd) {



        border-right: 1px solid #dbe7e5;



    }











    .why-item:nth-last-child(-n + 2) {



        border-bottom: 0;



    }











    /* --------------------------------------------------------



       HOW IT WORKS



    -------------------------------------------------------- */







    .home-how__grid {



        grid-template-columns: 1fr;







        gap: 34px;



    }











    .home-how__video video {



        height: 440px;



    }











    /* --------------------------------------------------------



       BRIGHTEN



    -------------------------------------------------------- */







    .brighten-intro {



        grid-template-columns: 1fr;







        gap: 34px;



    }











    .brighten-intro__image {



        width: min(100%, 640px);



    }











    /* --------------------------------------------------------



       REVIEWS



    -------------------------------------------------------- */







    .review-grid {



        grid-template-columns:



            repeat(2, minmax(0, 1fr));



    }











    /* --------------------------------------------------------



       FAQ + FORM



    -------------------------------------------------------- */







    .home-support__grid {



        grid-template-columns: 1fr;







        gap: 34px;



    }











    /* --------------------------------------------------------



       PRODUCT DETAIL



    -------------------------------------------------------- */







    .product-detail {



        grid-template-columns: 1fr;



    }











    /* --------------------------------------------------------



       CART



    -------------------------------------------------------- */







    .cart-layout {



        grid-template-columns: 1fr;



    }











    .cart-summary {



        position: static;



    }











    /* --------------------------------------------------------



       CHECKOUT



    -------------------------------------------------------- */







    .checkout-layout {



        grid-template-columns: 1fr;



    }











    .checkout-summary {



        position: static;



    }







}











/* ============================================================



   TABLET / LARGE MOBILE



   760px



============================================================ */







@media (max-width: 760px) {







    /* --------------------------------------------------------



       GLOBAL



    -------------------------------------------------------- */







    .container {



        width: min(



            100% - 28px,



            var(--container)



        );



    }











    h1 {



        font-size: 2.7rem;



    }











    .page-hero {



        padding: 60px 0 52px;



    }











    .content-section,



    .product-listing {



        padding: 50px 0;



    }











    .form-grid,



    .product-grid {



        grid-template-columns: 1fr;



    }











    /* --------------------------------------------------------



       HOME HERO



    -------------------------------------------------------- */







    .home-hero {



        display: block;







        min-height: 640px;



        height: auto;







        /*



         * On mobile the text stays at the top.



         * The artwork remains visible toward the lower-right.



         */



        background-image:



            linear-gradient(



                180deg,



                rgba(255, 255, 255, 1) 0%,



                rgba(255, 255, 255, 0.99) 35%,



                rgba(255, 255, 255, 0.95) 48%,



                rgba(255, 255, 255, 0.66) 59%,



                rgba(255, 255, 255, 0.20) 76%,



                rgba(255, 255, 255, 0.03) 100%



            ),



            url("../images/home/hero-bg.png");







        background-size: cover;







        background-position:



            center center,



            67% center;



    }











    .home-hero__inner {



        min-height: 640px;







        align-items: flex-start;



    }











    .home-hero__content {



        width: 100%;



        max-width: 100%;







        padding:



            38px



            0



            265px;



    }











    .home-kicker {



        margin-bottom: 10px;







        font-size: 0.66rem;







        letter-spacing: 0.11em;



    }











    .home-hero h1 {



        max-width: 500px;







        margin-bottom: 14px;







        font-size: clamp(



            2.35rem,



            9.7vw,



            3.15rem



        );







        line-height: 1.02;



    }











    .home-hero__description {



        max-width: 455px;







        font-size: 0.9rem;







        line-height: 1.5;



    }











    .home-hero__actions {



        gap: 8px;







        margin-top: 18px;



    }











    .hero-button {



        min-height: 38px;







        padding: 8px 14px;







        font-size: 0.78rem;



    }











    /*



     * Hide these on phones.



     * Otherwise the hero becomes unnecessarily tall.



     */







    .home-hero__benefits {



        display: none;



    }











    /* --------------------------------------------------------



       HOME SECTIONS



    -------------------------------------------------------- */







    .home-about,



    .home-products-section,



    .why-paint-for-life,



    .home-how,



    .brighten-section,



    .home-reviews,



    .home-support {



        padding-top: 58px;



        padding-bottom: 58px;



    }











    .home-about h2,



    .home-section-heading h2,



    .home-how h2,



    .brighten-intro h2,



    .home-faq h2,



    .quick-enquiry h2 {



        font-size: clamp(



            1.9rem,



            7vw,



            2.5rem



        );



    }











    /* --------------------------------------------------------



       HOME ABOUT



    -------------------------------------------------------- */







    .home-about p {



        font-size: 0.92rem;







        line-height: 1.68;



    }











    /* --------------------------------------------------------



       PRODUCT SECTION HEADINGS



    -------------------------------------------------------- */







    .home-section-heading {



        flex-direction: column;







        align-items: flex-start;







        gap: 8px;



    }











    .home-section-description {



        margin-bottom: 25px;







        font-size: 0.88rem;







        line-height: 1.65;



    }











    .section-rating {



        font-size: 0.74rem;



    }











    /* --------------------------------------------------------



       HOMEPAGE PRODUCT ROW



    -------------------------------------------------------- */







    .home-product-row {



        grid-auto-columns:



            minmax(185px, 68vw);







        gap: 12px;



    }











    /* --------------------------------------------------------



       WHY US



    -------------------------------------------------------- */







    .why-grid {



        grid-template-columns: 1fr;



    }











    .why-item,



    .why-item:nth-child(odd),



    .why-item:nth-last-child(-n + 2) {



        border-right: 0;



        border-bottom: 1px solid #dbe7e5;



    }











    .why-item:last-child {



        border-bottom: 0;



    }











    /* --------------------------------------------------------



       VIDEO



    -------------------------------------------------------- */







    .home-how__video {



        border-radius: 20px;



    }











    .home-how__video video {



        height: 370px;



    }











    /* --------------------------------------------------------



       BRIGHTEN



    -------------------------------------------------------- */







    .brighten-cards {



        grid-template-columns: 1fr;



    }











    /* --------------------------------------------------------



       REVIEWS



    -------------------------------------------------------- */







    .review-grid {



        grid-template-columns: 1fr;



    }











    .review-card p {



        min-height: auto;



    }











    /* --------------------------------------------------------



       QUICK ENQUIRY



    -------------------------------------------------------- */







    .enquiry-grid {



        grid-template-columns: 1fr;



    }











    .enquiry-grid__full {



        grid-column: auto;



    }











    /* --------------------------------------------------------



       CART ITEM



    -------------------------------------------------------- */







    .cart-item {



        grid-template-columns:



            82px



            minmax(0, 1fr);



    }











    .cart-item > div,



    .cart-item > form,



    .cart-item > strong {



        grid-column: 2;



    }











    .cart-item__image {



        grid-column: 1;



        grid-row: 1 / span 4;







        width: 82px;



        height: 82px;



    }











    /* --------------------------------------------------------



       BUTTON ROW



    -------------------------------------------------------- */







    .button-row {



        grid-template-columns: 1fr;



    }







}











/* ============================================================



   MOBILE



   600px



============================================================ */







@media (max-width: 600px) {







    .home-about__quote {



        min-height: 180px;







        border-radius: 22px;



    }











    .home-about__quote p {



        font-size: 1.55rem;



    }











    .brighten-intro__image {



        border-radius: 20px;



    }











    .brighten-card {



        border-radius: 18px;



    }











    .quick-enquiry {



        border-radius: 20px;



    }











    .wishlist-item {



        grid-template-columns: 1fr;



    }







}











/* ============================================================



   SMALL MOBILE



   480px



============================================================ */







@media (max-width: 480px) {







    /* --------------------------------------------------------



       GLOBAL CONTAINER



    -------------------------------------------------------- */







    .container {



        width: min(



            100% - 24px,



            var(--container)



        );



    }











    /* --------------------------------------------------------



       HERO



    -------------------------------------------------------- */







    .home-hero {



        min-height: 600px;







        background-image:



            linear-gradient(



                180deg,



                rgba(255, 255, 255, 1) 0%,



                rgba(255, 255, 255, 0.99) 36%,



                rgba(255, 255, 255, 0.95) 50%,



                rgba(255, 255, 255, 0.58) 63%,



                rgba(255, 255, 255, 0.12) 80%,



                rgba(255, 255, 255, 0) 100%



            ),



            url("../images/home/hero-bg.png");







        background-size: cover;







        background-position:



            center,



            66% center;



    }











    .home-hero__inner {



        min-height: 600px;



    }











    .home-hero__content {



        padding-top: 31px;



        padding-bottom: 235px;



    }











    .home-kicker {



        font-size: 0.61rem;



    }











    .home-hero h1 {



        max-width: 390px;







        font-size: clamp(



            2.1rem,



            10.5vw,



            2.7rem



        );







        letter-spacing: -0.035em;



    }











    .home-hero__description {



        max-width: 360px;







        font-size: 0.84rem;



    }











    .home-hero__actions {



        gap: 7px;



    }











    .hero-button {



        min-height: 37px;







        padding: 7px 13px;







        font-size: 0.74rem;



    }











    /* --------------------------------------------------------



       PRODUCT CAROUSEL



    -------------------------------------------------------- */







    .home-product-row {



        grid-auto-columns:



            minmax(175px, 75vw);







        gap: 10px;



    }











    .home-product-card h3 {



        font-size: 0.83rem;



    }











    /* --------------------------------------------------------



       FAQ



    -------------------------------------------------------- */







    .faq-list summary {



        padding:



            14px



            42px



            14px



            15px;







        font-size: 0.83rem;



    }











    .faq-list summary::after {



        right: 15px;



    }











    .faq-list details p {



        padding:



            0



            15px



            15px;







        font-size: 0.81rem;



    }











    /* --------------------------------------------------------



       QUICK ENQUIRY



    -------------------------------------------------------- */







    .quick-enquiry {



        padding: 22px 18px;



    }







}











/* ============================================================



   VERY SMALL MOBILE



   370px



============================================================ */







@media (max-width: 370px) {







    .home-hero {



        min-height: 585px;







        background-position:



            center,



            64% center;



    }











    .home-hero__inner {



        min-height: 585px;



    }











    .home-hero__content {



        padding-top: 28px;



        padding-bottom: 225px;



    }











    .home-hero h1 {



        font-size: 2rem;



    }











    .home-hero__description {



        font-size: 0.82rem;



    }











    .home-hero__actions {



      align-items: flex-start;







        flex-direction: column;



    }











    .hero-button {



        width: auto;



    }











    .home-product-row {



        grid-auto-columns: 82vw;



    }







}

/* ============================================================

   HOMEPAGE HERO — MOBILE EXTRA-SPACE FIX

   Keeps the artwork visible while removing the oversized blank gap.

============================================================ */

@media (max-width: 760px) {

    .page-home .home-hero {

        min-height: 600px;

        height: auto;

        margin-bottom: 0;

    }



    .page-home .home-hero__inner {

        min-height: 600px;

    }



    .page-home .home-hero__content {

        padding-top: 34px;

        padding-bottom: 220px;

    }



    .page-home .home-about {

        padding-top: 34px;

    }

}



@media (max-width: 480px) {

    .page-home .home-hero {

        min-height: 570px;

    }



    .page-home .home-hero__inner {

        min-height: 570px;

    }



    .page-home .home-hero__content {

        padding-top: 28px;

        padding-bottom: 198px;

    }



    .page-home .home-about {

        padding-top: 28px;

    }

}



@media (max-width: 370px) {

    .page-home .home-hero,

    .page-home .home-hero__inner {

        min-height: 555px;

    }



    .page-home .home-hero__content {

        padding-bottom: 185px;

    }

}