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







   PAINT FOR LIFE







   HOME PAGE







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















.page-home {







    overflow-x: hidden;







}























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







   COMMON HOME SECTION STYLES







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















.section-kicker,







.home-kicker {







    margin: 0 0 10px;















    color: #ff0000;















    font-family: "Outfit", sans-serif;







    font-size: 0.78rem;







    font-weight: 600;















    letter-spacing: 0.12em;







    text-transform: uppercase;







}























.center-heading {







    max-width: 720px;







    margin: 0 auto 44px;















    text-align: center;







}























.center-heading h2 {







    margin-bottom: 0;







}























.text-link {







    display: inline-flex;







    align-items: center;







    gap: 7px;















    color: #2b565e;















    font-family: "Outfit", sans-serif;







    font-size: 0.88rem;







    font-weight: 600;















    transition:







        color 180ms ease,







        transform 180ms ease;







}























.text-link:hover,







.text-link:focus-visible {







    color: #1f454c;







    transform: translateX(2px);







}































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







   HOME HERO







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















.home-hero {
    position: relative;
    width: 100%;
    min-height: 665px;
    height: clamp(520px, 62vh, 620px);
    display: flex;
    align-items: center;
    overflow: hidden;
    background-color: #fbfaf6;
    background-image:linear-gradient(90deg, rgba(255, 255, 255, 0.90) 0%, rgba(255, 255, 255, 0.82) 22%, rgb(255 255 255) 37%, rgb(255 255 255 / 53%) 49%, rgba(255, 255, 255, 0) 62%), url(../images/home/hero-bg.png);
    background-repeat: no-repeat;


    /*







     * Keeps the canvas, paints and flowers visible.







     */







    background-position: center 58%;















    background-size: cover;







}























/* Main inner container */















.home-hero__inner {







    position: relative;







    z-index: 2;















    display: flex;







    /* width: 100%; */







    height: 100%;















    align-items: center;







}























/* Left content */















.home-hero__content {







    width: 44%;







    max-width: 575px;















    padding: 42px 0;







}























/* Small top text */















.home-kicker {







    margin: 0 0 14px;















    color: #2b565e;















    font-family: "Outfit", sans-serif;







    font-size: 0.76rem;







    font-weight: 600;















    letter-spacing: 0.13em;







    text-transform: uppercase;







}























/* Main heading */















.home-hero h1 {







    max-width: 575px;















    margin: 0 0 18px;















    color: #2b565e;















    font-family: "Outfit", sans-serif;















    font-size: clamp(







        2.9rem,







        3.8vw,







        4.35rem







    );















    font-weight: 600;















    line-height: 1.04;















    letter-spacing: -0.045em;







}























.home-hero h1 span {







    display: block;







}























/* Paragraph */















.home-hero__description {







    max-width: 485px;















    margin: 0;















    color: #111;















    font-family: "Outfit", sans-serif;







    font-size: 0.96rem;















    line-height: 1.55;







}























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







   HERO BUTTONS







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















.home-hero__actions {







    display: flex;







    flex-wrap: wrap;















    gap: 10px;















    margin-top: 24px;







}























.hero-button {







    display: inline-flex;















    min-height: 30px;















    align-items: center;







    justify-content: center;















    gap: 7px;















    padding: 8px 17px;















    border: 1px solid #2b565e;







    border-radius: 10px;















    font-family: "Outfit", sans-serif;







    font-size: 0.82rem;







    font-weight: 500;







    letter-spacing: 0.5px;















    line-height: 1;















    transition:







        background-color 180ms ease,







        border-color 180ms ease,







        color 180ms ease,







        transform 180ms ease;







}























.hero-button:hover,







.hero-button:focus-visible {







    transform: translateY(-2px);







}























/* Primary */















.hero-button--primary {







    background: #2b565e;







    color: #fff;







}























.hero-button--primary:hover,







.hero-button--primary:focus-visible {







    border-color: #20474e;















    background: #20474e;















    color: #fff;







}























/* Secondary */















.hero-button--outline {







    border-color: #2b565e;















    background: rgba(255, 255, 255, 0.82);















    color: #2b565e;















    backdrop-filter: blur(5px);







}























.hero-button--outline:hover,







.hero-button--outline:focus-visible {







    background: #2b565e;















    color: #fff;







}























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







   HERO BENEFITS







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















.home-hero__benefits {







    display: flex;







    flex-wrap: wrap;















    align-items: center;















    gap: 22px;















    margin-top: 29px;







}























.hero-benefit {







    display: flex;















    align-items: center;















    gap: 8px;







}


.hero-benefit__icon {
    display: grid;
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    place-items: center;
    border: 1px solid rgba(43, 86, 94, 0.25);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.7);
    color: #2b565e;
    font-size: 0.8rem;
    backdrop-filter: blur(5px);

}


.hero-benefit strong,

.hero-benefit small {

    display: block;
}


.hero-benefit strong {
    color: #2b565e;
    font-size: 17px;
    font-weight: 600;
    line-height: 1.2;

}


.hero-benefit small {
    margin-top: 2px;
    color: #555;
    font-size: 14px;
    line-height: 1.2;
}



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

   ABOUT - PAINT BY NUMBERS AUSTRALIA

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



.home-about {

    position: relative;

    isolation: isolate;

    overflow: hidden;

    padding: 86px 0;

    background:

        radial-gradient(circle at 92% 18%, rgba(43, 86, 94, 0.07), transparent 24%),

        linear-gradient(180deg, #ffffff 0%, #fbfcfb 100%);

}



.home-about::before {

    position: absolute;

    top: -120px;

    right: -100px;

    z-index: -1;

    width: 360px;

    height: 360px;

    border-radius: 50%;

    background: rgba(238, 245, 244, 0.75);

    content: "";

    filter: blur(2px);

}



.home-about__grid {

    display: grid;

    grid-template-columns:

        minmax(0, 1.12fr)

        minmax(340px, 0.78fr);

    align-items: center;

    gap: clamp(42px, 5vw, 76px);

}



.home-about__content {

    max-width: 890px;

}



.home-about .section-kicker {

    margin-bottom: 12px;

    color: #2b565e;

}



.home-about h2 {

    max-width: 760px;

    margin: 0 0 22px;

    color: #2b565e;

    font-family: "Outfit", sans-serif;

    font-size: clamp(2.15rem, 3.35vw, 3.25rem);

    font-weight: 600;

    line-height: 1.08;

    letter-spacing: -0.025em;

}



.home-about__content p {

    max-width: 900px;

    margin: 0 0 16px;

    color: #222;

    font-size: 18px;

    line-height: 1.72;

}



.home-about__content p:last-child {

    margin-bottom: 0;

}



.home-about__content strong {

    color: #2b565e;

    font-weight: 600;

}



.home-about__media {

    position: relative;

    width: min(100%, 470px);

    margin: 0;

    justify-self: end;

}



/* .home-about__media::before {

    position: absolute;

    top: -18px;

    right: -18px;

    z-index: -1;

    width: 72%;

    height: 68%;

    border-radius: 30px;

    background: #eef5f4;

    content: "";

} */



.home-about__image {

    display: block;

    width: 100%;

    aspect-ratio: 5 / 5;

    object-fit: cover;

    object-position: center;

    border-radius: 28px;

    box-shadow: 0 24px 60px rgba(31, 69, 76, 0.13);

}



/* .home-about__quote {

    position: absolute;

    right: -24px;

    bottom: 26px;

    width: min(230px, 70%);

    padding: 20px 22px;

    border: 1px solid rgba(43, 86, 94, 0.12);

    border-radius: 20px;

    background: rgba(255, 255, 255, 0.94);

    box-shadow: 0 18px 44px rgba(31, 69, 76, 0.13);

    color: #2b565e;

    text-align: left;

    backdrop-filter: blur(10px);

} */



.home-about__quote-label {

    display: block;

    margin-bottom: 7px;

    color: #728482;

    font-size: 0.68rem;

    font-weight: 600;

    letter-spacing: 0.11em;

    text-transform: uppercase;

}



.home-about__quote strong {

    display: block;

    color: #2b565e;

    font-family: "Outfit", sans-serif;

    font-size: clamp(1.35rem, 2vw, 1.75rem);

    font-weight: 600;

    line-height: 1.12;

}



.home-about__quote-heart {

    display: inline-grid;

    width: 32px;

    height: 32px;

    margin-top: 14px;

    place-items: center;

    border: 1px solid rgba(43, 86, 94, 0.18);

    border-radius: 50%;

    color: #2b565e;

    font-size: 1rem;

}



@media (max-width: 960px) {

    .home-about {

        padding: 72px 0;

    }



    .home-about__grid {

        grid-template-columns: 1fr;

        gap: 38px;

    }



    .home-about__content {

        max-width: 100%;

    }



    .home-about__media {

        width: min(100%, 610px);

        justify-self: center;

    }



    .home-about__image {

        aspect-ratio: 4 / 3;

    }



    .home-about__quote {

        right: 18px;

        bottom: 18px;

    }

}



@media (max-width: 640px) {

    .home-about {

        padding: 58px 0;

    }



    .home-about__grid {

        gap: 30px;

    }



    .home-about h2 {

        margin-bottom: 17px;

        font-size: clamp(1.95rem, 9vw, 2.55rem);

    }



    .home-about__content p {

        margin-bottom: 14px;

        font-size: 0.9rem;

        line-height: 1.65;

    }



    .home-about__media {

        width: 100%;

    }



    .home-about__media::before {

        top: -10px;

        right: -8px;

        border-radius: 22px;

    }



    .home-about__image {

        aspect-ratio: 4 / 3;

        border-radius: 20px;

    }



    .home-about__quote {

        position: relative;

        right: auto;

        bottom: auto;

        width: calc(100% - 24px);

        margin: -42px auto 0;

        padding: 17px 18px;

        border-radius: 17px;

        text-align: center;

    }



    .home-about__quote strong {

        font-size: 1.35rem;

    }



    .home-about__quote-heart {

        margin-top: 10px;

    }

}





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







   HOME PRODUCT SECTIONS







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















.home-products-section {







    padding: 76px 0 84px;















    background: #fff;







}























.home-products-section--soft {







    background: #f7faf9;







}























.home-section-heading {







    display: flex;















    align-items: flex-end;







    justify-content: space-between;















    gap: 30px;















    margin-bottom: 18px;







}























.home-section-heading h2 {







    margin: 0 0 10px;















    color: #2b565e;















    font-size: clamp(2rem, 3vw, 2.9rem);







    font-weight: 600;







}























.home-section-description {







    max-width: 1080px;















    margin: 0 0 32px;















    color: #333;















    font-size: 18px;















    line-height: 1.72;







}























.home-section-description strong {







    color: #2b565e;







}























.section-rating {







    display: flex;







    flex-wrap: wrap;







    align-items: center;















    gap: 7px;















    color: #596160;















    font-size: 0.8rem;







}























.section-rating > span {







    color: #f3a21a;















    letter-spacing: 0.08em;







}























.section-rating strong {







    color: #2b565e;















    font-weight: 600;







}































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







   PRODUCT ROW







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















.home-product-row {







    display: grid;















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















    gap: 14px;







}























.home-product-card {







    min-width: 0;















    overflow: hidden;















    border: 1px solid #dfe8e6;







    border-radius: 17px;















    background: #fff;















    box-shadow:







        0 8px 26px rgba(31, 69, 76, 0.05);















    transition:







        transform 180ms ease,







        box-shadow 180ms ease,







        border-color 180ms ease;







}























.home-product-card:hover {







    border-color: #c9dad7;















    box-shadow:







        0 17px 38px rgba(31, 69, 76, 0.11);















    transform: translateY(-4px);







}























.home-product-card__media {







    position: relative;















    overflow: hidden;















    margin: 7px;















    border-radius: 12px;















    background: #edf5f4;







}























.home-product-card__media > a {







    display: block;







}























.home-product-card__media img {







    display: block;















    width: 100%;















    aspect-ratio: 1 / 1;















    object-fit: cover;















    transition:







        transform 300ms ease;







}























.home-product-card:hover .home-product-card__media img {







    transform: scale(1.035);







}























.home-product-card__placeholder {







    display: grid;















    width: 100%;















    aspect-ratio: 1 / 1;















    place-items: center;















    background: #edf5f4;















    color: #2b565e;















    font-size: 2rem;







    font-weight: 600;







}































/* Product badges */















.home-product-card__badges {







    position: absolute;















    top: 8px;







    left: 8px;















    z-index: 2;















    display: flex;







    flex-wrap: wrap;















    gap: 4px;







}























.badge {







    display: inline-flex;















    align-items: center;















    min-height: 22px;















    padding: 4px 8px;















    border-radius: 999px;















    color: #fff;















    font-size: 0.59rem;







    font-weight: 600;















    line-height: 1;







}























.badge--new {







    background: #2d8b76;







}























.badge--sale {







    background: #df6b44;







}























.badge--best {







    background: #f1ab32;







    color: #1b1b1b;







}































/* Wishlist */















.home-product-card__wishlist {







    position: absolute;















    top: 7px;







    right: 7px;















    z-index: 3;















    margin: 0;







}























.home-product-card__wishlist button {







    display: grid;















    width: 32px;







    height: 32px;















    place-items: center;















    padding: 0;















    border: 1px solid rgba(43, 86, 94, 0.12);







    border-radius: 50%;















    background: rgba(255, 255, 255, 0.94);















    color: #2b565e;















    font-family: inherit;







    font-size: 1.05rem;















    transition:







        background 180ms ease,







        transform 180ms ease;







}























.home-product-card__wishlist button:hover {







    background: #fff;















    transform: scale(1.06);







}































/* Product body */















.home-product-card__body {







    padding: 7px 12px 13px;







}























.home-product-card h3 {







    min-height: 39px;















    margin: 0 0 6px;















    color: #111;















    font-family: "Outfit", sans-serif;







    font-size: 0.88rem;







    font-weight: 600;















    line-height: 1.3;







}























.home-product-card h3 a {







    color: inherit;







}























.home-product-card h3 a:hover {







    color: #2b565e;







}























.home-product-card__price {







    display: flex;















    align-items: baseline;







    flex-wrap: wrap;















    gap: 7px;















    margin-bottom: 10px;







}























.home-product-card__price strong {







    color: #2b565e;















    font-size: 0.96rem;







    font-weight: 600;







}























.home-product-card__price s {







    color: #929998;















    font-size: 0.74rem;







}































/* Product actions */















.home-product-card__button,







.home-product-card__stock {







    display: flex;















    width: 100%;















    min-height: 38px;















    align-items: center;







    justify-content: center;















    gap: 7px;















    padding: 7px 11px;















    border: 0;







    border-radius: 999px;















    background: #2b565e;















    color: #fff;















    font-family: "Outfit", sans-serif;







    font-size: 0.75rem;







    font-weight: 600;















    line-height: 1;















    cursor: pointer;















    transition:







        background 180ms ease,







        transform 180ms ease;







}























.home-product-card__button:hover,







.home-product-card__button:focus-visible {







    background: #1f454c;















    transform: translateY(-1px);







}























.home-product-card__stock {







    background: #f2f5f4;















    color: #727a79;















    cursor: default;







}























.home-products-empty {







    grid-column: 1 / -1;















    padding: 34px;















    border: 1px dashed #cfdcda;







    border-radius: 18px;















    background: #fafcfb;















    color: #5f6867;















    text-align: center;







}































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



   WHY CHOOSE PAINT FOR LIFE



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







.why-paint-for-life {



    position: relative;



    isolation: isolate;



    overflow: hidden;



    padding: 74px 0 78px;







    /* background-color: #fbfaf6; */



    background-image:



        linear-gradient(180deg, rgb(255 255 255 / 4%) 0%, rgb(255 255 255 / 61%) 48%, rgb(255 255 255) 100%), url(../images/home/why-choose-bg.png);



    background-repeat: no-repeat;



    background-position: center center;



    background-size: cover;



}







.why-paint-for-life::after {



    position: absolute;



    inset: 0;



    z-index: -1;



    content: "";



    pointer-events: none;



    background: linear-gradient(



        90deg,



        rgba(255, 255, 255, 0.10),



        rgba(255, 255, 255, 0.32) 50%,



        rgba(255, 255, 255, 0.10)



    );



}







.why-paint-for-life .container {



    position: relative;



    z-index: 1;



}







.why-paint-for-life .center-heading {



    max-width: 720px;



    margin: 0 auto 42px;



    text-align: center;



}







.why-paint-for-life .center-heading .section-kicker {



    margin-bottom: 8px;



}







.why-paint-for-life .center-heading h2 {



    margin: 0;



    color: #2b565e;



    font-family: "Outfit", sans-serif;



    font-size: clamp(2rem, 3vw, 2.85rem);



    font-weight: 600;



    line-height: 1.1;



}







.why-grid {



    display: grid;



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



    align-items: stretch;



}







.why-item {



    position: relative;



    display: flex;



    min-width: 0;



    flex-direction: column;



    align-items: center;



    justify-content: flex-start;



    padding: 8px 30px;



    text-align: center;



}







.why-item:not(:last-child)::after {



    position: absolute;



    top: 12px;



    right: 0;



    width: 1px;



    height: calc(100% - 24px);



    content: "";



    background: rgba(43, 86, 94, 0.18);



}







.why-item__icon {



    display: grid;



    width: 64px;



    height: 64px;



    margin: 0 auto 15px;



    place-items: center;



    border: 1px solid rgba(43, 86, 94, 0.18);



    border-radius: 50%;



    background: rgba(255, 255, 255, 0.72);



    color: #2b565e;



    box-shadow: 0 10px 28px rgba(43, 86, 94, 0.07);



    backdrop-filter: blur(6px);



}







.why-item__icon svg {



    width: 32px;



    height: 32px;



    fill: none;



    stroke: currentColor;



    stroke-linecap: round;



    stroke-linejoin: round;



    stroke-width: 1.7;



}







.why-item h3 {



    margin: 0 0 7px;



    color: #2b565e;



    font-family: "Outfit", sans-serif;



    font-size: 1rem;



    font-weight: 600;



    line-height: 1.25;



}







.why-item p {



    max-width: 235px;



    margin: 0 auto;



    color: #384342;



    font-size: 0.84rem;



    line-height: 1.55;



}







@media (max-width: 900px) {



    .why-paint-for-life {



        padding: 64px 0 68px;



        background-position: center center;



    }







    .why-grid {



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



        gap: 0;



    }







    .why-item {



        padding: 26px 24px;



    }







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



        display: block;



    }







    .why-item:nth-child(even)::after {



        display: none;



    }







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



        border-bottom: 1px solid rgba(43, 86, 94, 0.16);



    }



}







@media (max-width: 600px) {



    .why-paint-for-life {



        padding: 56px 0 58px;



        background-image:



            linear-gradient(



                180deg,



                rgba(255, 255, 255, 0.62),



                rgba(255, 255, 255, 0.78)



            ),



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



        background-position: center top;



    }







    .why-paint-for-life .center-heading {



        margin-bottom: 26px;



    }







    .why-paint-for-life .center-heading h2 {



        font-size: clamp(1.9rem, 8vw, 2.45rem);



    }







    .why-grid {



        grid-template-columns: 1fr;



    }







    .why-item {



        padding: 24px 12px;



    }







    .why-item::after,



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



        display: none;



    }







    .why-item:not(:last-child) {



        border-bottom: 1px solid rgba(43, 86, 94, 0.15);



    }







    .why-item__icon {



        width: 58px;



        height: 58px;



        margin-bottom: 13px;



    }







    .why-item__icon svg {



        width: 29px;



        height: 29px;



    }



}











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







   HOW IT WORKS / VIDEO







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















.home-how {







    padding: 90px 0;















    background: #fff;







}























.home-how__grid {







    display: grid;















    grid-template-columns:







        minmax(0, 0.92fr)







        minmax(0, 1.08fr);















    align-items: center;















    gap: 58px;







}























.home-how__video {







    overflow: hidden;















    border-radius: 10px;















    background: #edf5f4;















    box-shadow:







        0 22px 58px rgba(31, 69, 76, 0.11);







}























.home-how__video video {







    display: block;















    width: 100%;







    height: 520px;















    object-fit: cover;







}























.home-how h2 {







    margin: 0 0 18px;















    color: #2b565e;















    font-size: clamp(2rem, 3vw, 3rem);







    font-weight: 600;







}























.home-how__content > p:not(.section-kicker) {







    color: #343a3a;















    font-size: 18px;















    line-height: 1.7;







}























.how-steps {







    display: grid;















    gap: 8px;















    margin-top: 26px;







}























.how-step {







    display: flex;















    align-items: center;















    gap: 14px;















    padding: 12px 14px;















    border: 1px solid transparent;







    border-radius: 13px;















    background: #f6faf9;















    transition:







        border-color 180ms ease,







        background 180ms ease;







}























.how-step:hover {







    border-color: #d9e8e5;















    background: #fff;







}























.how-step span {







    display: grid;















    width: 34px;







    height: 34px;















    flex: 0 0 34px;















    place-items: center;















    border-radius: 50%;















    background: #2b565e;















    color: #fff;















    font-size: 0.72rem;







    font-weight: 600;







}























.how-step strong {







    color: #2b565e;















    font-size: 18px;







    font-weight: 500;







}































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







   BRIGHTEN UP YOUR SPACE







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















.brighten-section {







    padding: 88px 0;















    background: #f6faf9;







}























.brighten-intro {







    display: grid;















    grid-template-columns:







        minmax(0, 1fr)







        minmax(320px, 0.62fr);















    align-items: center;















    gap: 56px;







}























.brighten-intro h2 {







    max-width: 700px;















    margin: 0 0 18px;















    color: #2b565e;















    font-size: clamp(2rem, 3vw, 3.1rem);







    font-weight: 600;







}























.brighten-intro p {







    max-width: 770px;















    color: #363c3c;















    font-size: 18px;















    line-height: 1.7;







}























.brighten-actions {







    display: flex;







    flex-wrap: wrap;















    gap: 10px;















    margin-top: 25px;







}























.brighten-intro__image {







    overflow: hidden;















    border-radius: 26px;















    background: #fff;















    box-shadow:







        0 20px 54px rgba(31, 69, 76, 0.11);







}























.brighten-intro__image img {







    display: block;















    width: 100%;















    aspect-ratio: 1 / 0.85;















    object-fit: cover;







}























.brighten-cards {







    display: grid;















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















    gap: 18px;















    margin-top: 50px;







}























.brighten-card {







    position: relative;















    overflow: hidden;















    padding: clamp(26px, 4vw, 42px);















    border: 1px solid #dce8e6;







    border-radius: 22px;















    background: #fff;







}























.brighten-card--accent {







    background:







        linear-gradient(







            135deg,







            #fff9e9 0%,







            #ffffff 75%







        );







}























.brighten-card__number {







    display: block;















    margin-bottom: 28px;















    color: #8aa6a1;















    font-size: 0.76rem;







    font-weight: 600;















    letter-spacing: 0.12em;







}























.brighten-card h3 {







    max-width: 520px;















    margin: 0 0 15px;















    color: #2b565e;















    font-size: clamp(1.35rem, 2vw, 1.9rem);







    font-weight: 600;







}























.brighten-card p {







    color: #404747;















    font-size: 18px;















    line-height: 1.67;







}































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







   REVIEWS







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















.home-reviews {







    padding: 84px 0;















    background: #fff;







}























.review-grid {







    display: grid;















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















    gap: 15px;







}























.review-card {







    padding: 24px;















    border: 1px solid #e1e9e8;







    border-radius: 17px;















    background: #fff;















    box-shadow:







        0 10px 30px rgba(31, 69, 76, 0.05);







}























.review-stars {







    margin-bottom: 12px;















    color: #f3a61d;















    font-size: 0.85rem;















    letter-spacing: 0.08em;







}























.review-card p {







    min-height: 105px;















    margin-bottom: 18px;















    color: #363c3c;















    font-size: 0.86rem;















    line-height: 1.6;







}























.review-card strong,







.review-card small {







    display: block;







}























.review-card strong {







    color: #2b565e;















    font-size: 0.84rem;







    font-weight: 600;







}























.review-card small {







    margin-top: 2px;















    color: #7a8281;















    font-size: 0.72rem;







}































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







   FAQ + QUICK ENQUIRY







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















.home-support {







    padding: 84px 0 96px;















    background: #f7faf9;







}























.home-support__grid {







    display: grid;















    grid-template-columns:







        minmax(0, 0.9fr)







        minmax(0, 1.1fr);















    align-items: start;















    gap: 40px;







}























.home-faq h2,







.quick-enquiry h2 {







    margin: 0 0 12px;















    color: #2b565e;















    font-size: clamp(2rem, 3vw, 2.7rem);







    font-weight: 600;







}































/* FAQ */















.faq-list {







    display: grid;















    gap: 9px;















    margin-top: 24px;







}























.faq-list details {







    overflow: hidden;















    border: 1px solid #dce7e5;







    border-radius: 12px;















    background: #fff;







}























.faq-list summary {







    position: relative;















    padding: 15px 48px 15px 17px;















    color: #222;















    font-size: 0.9rem;







    font-weight: 500;















    cursor: pointer;















    list-style: none;







}























.faq-list summary::-webkit-details-marker {







    display: none;







}























.faq-list summary::after {







    position: absolute;















    top: 50%;







    right: 17px;















    color: #2b565e;















    content: "+";















    font-size: 1.15rem;







    font-weight: 500;















    transform: translateY(-50%);







}























.faq-list details[open] summary::after {







    content: "−";







}























.faq-list details p {







    margin: 0;















    padding: 0 17px 16px;















    color: #596160;















    font-size: 0.86rem;















    line-height: 1.62;







}































/* Enquiry */















.quick-enquiry {







    padding: clamp(25px, 4vw, 40px);















    border: 1px solid #dce7e5;







    border-radius: 24px;















    background: #fff;















    box-shadow:







        0 17px 46px rgba(31, 69, 76, 0.07);







}























.quick-enquiry > p:not(.section-kicker) {







    color: #616968;















    font-size: 0.9rem;







}























.enquiry-grid {







    display: grid;















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















    gap: 13px;















    margin: 22px 0 18px;







}























.enquiry-grid__full {







    grid-column: 1 / -1;







}























.quick-enquiry label span {







    display: block;















    margin-bottom: 6px;















    color: #333;















    font-size: 0.78rem;







    font-weight: 500;







}























.quick-enquiry input,







.quick-enquiry textarea {







    width: 100%;















    border: 1px solid #dce5e4;







    border-radius: 10px;















    background: #fbfdfc;















    color: #111;















    outline: none;















    transition:







        border-color 180ms ease,







        box-shadow 180ms ease;







}























.quick-enquiry input {







    min-height: 45px;















    padding: 0 13px;







}























.quick-enquiry textarea {







    min-height: 132px;















    padding: 12px 13px;















    resize: vertical;







}























.quick-enquiry input:focus,







.quick-enquiry textarea:focus {







    border-color: #86aaa4;















    box-shadow:







        0 0 0 3px rgba(43, 86, 94, 0.08);







}









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

   CREATIVE FUN FOR KIDS, ADULTS & FAMILIES

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



.creative-audience {

    position: relative;



    padding: 88px 0 92px;



    overflow: hidden;



    background:

        linear-gradient(

            180deg,

            #ffffff 0%,

            #f7faf9 100%

        );

}





.creative-audience::before {

    position: absolute;



    top: -130px;

    left: -130px;



    width: 360px;

    height: 360px;



    border-radius: 50%;



    background:

        rgba(43, 86, 94, 0.045);



    content: "";



    pointer-events: none;

}





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

   HEADING

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



.creative-audience__heading {

    max-width: 850px;



    margin: 0 auto 42px;



    text-align: center;

}





.creative-audience__heading h2 {

    max-width: 800px;



    margin: 0 auto 15px;



    color: #2b565e;



    font-family: "Outfit", sans-serif;

    font-size: clamp(2rem, 3.2vw, 3rem);

    font-weight: 600;



    line-height: 1.1;



    letter-spacing: -0.025em;

}





.creative-audience__heading > p:last-child {

    max-width: 720px;



    margin: 0 auto;



    color: #4f5756;



    font-size: 0.94rem;



    line-height: 1.68;

}





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

   GRID

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



.creative-audience__grid {

    display: grid;



    grid-template-columns:

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



    gap: 20px;



    align-items: stretch;

}





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

   CARD

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



.audience-card {

    display: flex;



    min-width: 0;



    flex-direction: column;



    overflow: hidden;



    border: 1px solid #dfe8e6;

    border-radius: 22px;



    background: #fff;



    box-shadow:

        0 12px 34px rgba(31, 69, 76, 0.055);



    transition:

        border-color 180ms ease,

        box-shadow 180ms ease,

        transform 180ms ease;

}





.audience-card:hover {

    border-color: #c8d9d6;



    box-shadow:

        0 22px 48px rgba(31, 69, 76, 0.11);



    transform: translateY(-5px);

}





/* Middle card */



.audience-card--featured {

    border-color:

        rgba(43, 86, 94, 0.24);



    box-shadow:

        0 17px 44px rgba(31, 69, 76, 0.09);

}





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

   IMAGE

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



.audience-card__image {

    position: relative;



    display: block;



    overflow: hidden;

}





.audience-card__image::after {

    position: absolute;



    right: 0;

    bottom: 0;

    left: 0;



    height: 35%;



    background:

        linear-gradient(

            180deg,

            transparent,

            rgba(0, 0, 0, 0.16)

        );



    content: "";



    pointer-events: none;

}





.audience-card__image img {

    display: block;



    width: 100%;

    height: 260px;



    object-fit: cover;



    transition:

        transform 350ms ease;

}





.audience-card:hover

.audience-card__image img {

    transform: scale(1.035);

}





/* Category tag */



.audience-card__tag {

    position: absolute;



    top: 16px;

    left: 16px;



    z-index: 2;



    display: inline-flex;



    min-height: 29px;



    align-items: center;



    padding: 5px 11px;



    border: 1px solid

        rgba(255, 255, 255, 0.6);



    border-radius: 999px;



    background:

        rgba(255, 255, 255, 0.91);



    color: #2b565e;



    font-size: 0.7rem;

    font-weight: 600;



    backdrop-filter: blur(8px);

}





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

   CARD CONTENT

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



.audience-card__content {

    display: flex;



    flex: 1;



    flex-direction: column;



    padding: 25px 24px 24px;

}





.audience-card h3 {

    margin: 0 0 12px;



    color: #2b565e;



    font-family: "Outfit", sans-serif;

    font-size: 1.35rem;

    font-weight: 600;



    line-height: 1.22;

}





.audience-card__content > p {

    margin: 0 0 20px;



    color: #4d5554;



    font-size: 0.88rem;



    line-height: 1.62;

}





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

   FEATURE LIST

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



.audience-card__features {

    display: grid;



    gap: 13px;



    margin: 0 0 24px;



    padding: 0;



    list-style: none;

}





.audience-card__features li {

    display: grid;



    grid-template-columns:

        28px

        minmax(0, 1fr);



    align-items: start;



    gap: 10px;

}





.audience-card__features li > span {

    display: grid;



    width: 27px;

    height: 27px;



    place-items: center;



    border-radius: 50%;



    background: #edf5f4;



    color: #2b565e;



    font-size: 0.72rem;

    font-weight: 700;

}





.audience-card__features strong,

.audience-card__features small {

    display: block;

}





.audience-card__features strong {

    margin-bottom: 2px;



    color: #2b565e;



    font-size: 0.81rem;

    font-weight: 600;

}





.audience-card__features small {

    color: #68706f;



    font-size: 0.74rem;



    line-height: 1.42;

}





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

   BUTTON

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



.audience-card__button {

    display: inline-flex;



    width: fit-content;



    min-height: 30px;



    align-items: center;

    justify-content: center;



    gap: 8px;



    margin-top: auto;



    padding: 8px 26px;



    border: 1px solid #2b565e;

    border-radius: 10px;



    background: #2b565e;



    color: #fff;



    font-family: "Outfit", sans-serif;

    font-size: 0.78rem;

    font-weight: 500;



    letter-spacing: 0.6px;



    transition:

        background 180ms ease,

        color 180ms ease,

        transform 180ms ease;

}





.audience-card__button:hover,

.audience-card__button:focus-visible {

    background: #20474e;



    color: #fff;



    transform: translateY(-2px);

}





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

   TABLET

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



@media (max-width: 960px) {



    .creative-audience {

        padding: 72px 0 76px;

    }





    .creative-audience__grid {

        grid-template-columns:

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

    }





    /*

     * Family card spans full row.

     */



    .audience-card--featured {

        grid-column: 1 / -1;



        display: grid;



        grid-template-columns:

            minmax(0, 0.9fr)

            minmax(0, 1.1fr);

    }





    .audience-card--featured

    .audience-card__image img {

        height: 100%;

        min-height: 370px;

    }



}





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

   MOBILE

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



@media (max-width: 700px) {



    .creative-audience {

        padding: 58px 0 62px;

    }





    .creative-audience__heading {

        margin-bottom: 30px;



        text-align: left;

    }





    .creative-audience__heading h2 {

        margin-left: 0;



        font-size:

            clamp(

                1.95rem,

                8vw,

                2.45rem

            );

    }





    .creative-audience__heading > p:last-child {

        margin-left: 0;

    }





    .creative-audience__grid {

        grid-template-columns: 1fr;



        gap: 16px;

    }





    .audience-card--featured {

        grid-column: auto;



        display: flex;

    }





    .audience-card__image img,

    .audience-card--featured

    .audience-card__image img {

        height: 250px;

        min-height: 0;

    }





    .audience-card__content {

        padding: 22px 20px;

    }





    .audience-card h3 {

        font-size: 1.25rem;

    }



}





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

   SMALL MOBILE

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



@media (max-width: 480px) {



    .creative-audience {

        padding: 52px 0 56px;

    }





    .audience-card {

        border-radius: 18px;

    }





    .audience-card__image img,

    .audience-card--featured

    .audience-card__image img {

        height: 220px;

    }





    .audience-card__content {

        padding: 19px 17px 20px;

    }





    .audience-card__features {

        margin-bottom: 20px;

    }





    .audience-card__button {

        min-height: 38px;



        padding: 7px 14px;



        font-size: 0.75rem;

    }



}


/* ============================================================
   HOMEPAGE PRODUCT GRID — 4 CARDS × 2 ROWS
   Added 29 Sep 2026
============================================================ */

/*
 * Desktop:
 * - exactly 4 cards in each row
 * - homepage PHP loads 8 items, producing 2 rows
 * - no horizontal product carousel on desktop
 */
.home-products-section .shop-product-row {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-auto-flow: row;
    grid-auto-columns: auto;

    gap: 32px 22px;

    overflow: visible;

    padding: 6px 2px 2px;

    scroll-snap-type: none;
}

/* Keep each product card aligned neatly inside the 4-column grid. */
.home-products-section .shop-product-card {
    width: 100%;
    min-width: 0;
    scroll-snap-align: none;
}

/* Product images remain proportional and consistent across both rows. */
.home-products-section .shop-product-card__media {
    width: 100%;
}

.home-products-section .shop-product-card__image-link img,
.home-products-section .shop-product-card__placeholder {
    width: 100%;
    aspect-ratio: 1 / 1;
}

/* ============================================================
   HOMEPAGE PARAGRAPHS — 18PX
============================================================ */

/*
 * Main paragraph/copy text only.
 * Small labels, section kickers, ratings and product metadata stay compact.
 */
.page-home .home-hero__description,
.page-home .home-about__content p,
.page-home .home-section-description,
.page-home .creative-audience__heading > p:last-child,
.page-home .audience-card__content > p,
.page-home .why-item p,
.page-home .home-how__content > p:not(.section-kicker),
.page-home .brighten-intro p,
.page-home .brighten-card p,
.page-home .review-card p,
.page-home .faq-list details p,
.page-home .quick-enquiry > p:not(.section-kicker) {
    font-size: 18px;
    line-height: 1.7;
}

/* ============================================================
   PRODUCT GRID RESPONSIVE
============================================================ */

/* Tablet and smaller laptops: 2 cards per row. */
@media (max-width: 800px) {

    .home-products-section .shop-product-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 26px 16px;

        overflow: visible;

        padding-bottom: 0;
    }

}

/* Mobile: keep a clean 2-column shop layout. */
@media (max-width: 560px) {

    .home-products-section .shop-product-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 24px 12px;
    }

    .home-products-section .shop-product-card__content {
        padding-right: 2px;
        padding-left: 2px;
    }

}

/* Very narrow screens: one card per row for readability. */
@media (max-width: 360px) {

    .home-products-section .shop-product-row {
        grid-template-columns: 1fr;
        gap: 28px;
    }

}


/* ============================================================
   FINAL HOME COMPLETION UPDATE
   - 3 collection cards below Discover Your Creativity
   - corrected FAQ
   - corrected Quick Enquiry form
   - keeps 4 × 2 desktop product grid
============================================================ */


/* ============================================================
   COLLECTION CARDS
============================================================ */

.home-category-showcase {
    position: relative;
    padding: 10px 0 82px;
    overflow: hidden;
    background: #fff;
}

.home-category-showcase__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.home-category-card {
    position: relative;
    isolation: isolate;
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(150px, 0.95fr);
    min-height: 255px;
    overflow: hidden;
    border: 1px solid rgba(43, 86, 94, 0.08);
    border-radius: 24px;
    color: #153d44;
    text-decoration: none;
    box-shadow: 0 12px 34px rgba(34, 72, 78, 0.07);
    transition:
        transform 220ms ease,
        box-shadow 220ms ease;
}

.home-category-card::before {
    position: absolute;
    top: -45px;
    right: -45px;
    z-index: -1;
    width: 145px;
    height: 145px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.38);
    content: "";
}

.home-category-card::after {
    position: absolute;
    right: 15%;
    bottom: -65px;
    z-index: -1;
    width: 140px;
    height: 140px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.24);
    content: "";
}

.home-category-card:hover,
.home-category-card:focus-visible {
    transform: translateY(-4px);
    box-shadow: 0 20px 44px rgba(34, 72, 78, 0.12);
}

.home-category-card--adults {
    background:
        linear-gradient(
            120deg,
            #e4f3e5 0%,
            #edf7ec 48%,
            #d6ead9 100%
        );
}

.home-category-card--kids {
    background:
        linear-gradient(
            120deg,
            #fff1c7 0%,
            #fff7dc 48%,
            #f8e2a8 100%
        );
}

.home-category-card--supplies {
    background:
        linear-gradient(
            120deg,
            #e4f3f8 0%,
            #eff9fc 48%,
            #cfe8f2 100%
        );
}

.home-category-card__content {
    position: relative;
    z-index: 3;
    display: flex;
    min-width: 0;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    padding: 30px 8px 30px 30px;
}

.home-category-card__eyebrow {
    margin-bottom: 4px;
    color: #2b565e;
    font-family: "Outfit", sans-serif;
    font-size: 0.76rem;
    font-weight: 600;
    letter-spacing: 0.04em;
}

.home-category-card h3 {
    margin: 0 0 10px;
    color: #174b54;
    font-family: "Outfit", sans-serif;
    font-size: clamp(1.75rem, 2.35vw, 2.35rem);
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.025em;
}

.home-category-card p {
    max-width: 220px;
    margin: 0 0 22px;
    color: #29484d;
    font-size: 15px;
    line-height: 1.45;
}

.home-category-card__button {
    display: inline-flex;
    min-height: 39px;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 8px 15px;
    border: 1px solid #2b565e;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.48);
    color: #214d55;
    font-size: 0.78rem;
    font-weight: 600;
    transition:
        background 180ms ease,
        color 180ms ease,
        transform 180ms ease;
}

.home-category-card:hover .home-category-card__button,
.home-category-card:focus-visible .home-category-card__button {
    background: #2b565e;
    color: #fff;
    transform: translateX(2px);
}

.home-category-card__visual {
    position: relative;
    z-index: 2;
    min-width: 0;
    overflow: hidden;
}

.home-category-card__visual img {
    position: absolute;
    top: 18px;
    right: -18px;
    width: calc(100% + 18px);
    height: calc(100% - 18px);
    object-fit: cover;
    object-position: center;
    border-radius: 46px 0 0 0;
    box-shadow: -10px 14px 28px rgba(35, 75, 81, 0.08);
    transition: transform 260ms ease;
}

.home-category-card:hover .home-category-card__visual img,
.home-category-card:focus-visible .home-category-card__visual img {
    transform: scale(1.035);
}


/* Paint supplies vector illustration */

.home-category-card__visual--supplies {
    display: grid;
    place-items: center;
    padding: 17px 10px 5px 0;
}

.home-category-card__visual--supplies svg {
    width: 118%;
    max-width: 300px;
    height: auto;
    overflow: visible;
}

.supply-shadow {
    fill: rgba(32, 73, 80, 0.10);
}

.supply-palette {
    fill: #fffaf1;
    stroke: #2b565e;
    stroke-width: 4;
    stroke-linejoin: round;
}

.paint-dot {
    stroke: none;
}

.paint-dot--one {
    fill: #f5b33d;
}

.paint-dot--two {
    fill: #e45b55;
}

.paint-dot--three {
    fill: #78b6d9;
}

.paint-dot--four {
    fill: #6fa76d;
}

.paint-dot--five {
    fill: #ae79bc;
}

.supply-brush {
    fill: none;
    stroke: #2b565e;
    stroke-width: 7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.supply-brush path:nth-child(2) {
    fill: #e7b369;
    stroke-width: 3;
}

.supply-brush path:nth-child(3) {
    fill: #4a8090;
    stroke-width: 3;
}

.supply-pots {
    fill: #fff;
    stroke: #2b565e;
    stroke-width: 4;
}


/* ============================================================
   FAQ + QUICK ENQUIRY — FINAL
============================================================ */

.home-support {
    position: relative;
    padding: 88px 0 96px;
    overflow: hidden;
    background:
        radial-gradient(
            circle at 8% 12%,
            rgba(43, 86, 94, 0.055),
            transparent 24%
        ),
        linear-gradient(
            180deg,
            #fafcfb 0%,
            #f4f8f7 100%
        );
}

.home-support__grid {
    display: grid;
    grid-template-columns:
        minmax(0, 0.92fr)
        minmax(0, 1.08fr);
    align-items: stretch;
    gap: 36px;
}

.home-faq,
.quick-enquiry {
    min-width: 0;
}

.home-faq {
    padding: 18px 0;
}

.home-faq .section-kicker,
.quick-enquiry .section-kicker {
    margin-bottom: 10px;
    color: #d93b32;
}

.home-faq h2,
.quick-enquiry h2 {
    margin: 0;
    color: #2b565e;
    font-family: "Outfit", sans-serif;
    font-size: clamp(2.25rem, 3.7vw, 3.35rem);
    font-weight: 600;
    line-height: 1.05;
    letter-spacing: -0.035em;
}

.home-faq__intro,
.quick-enquiry__intro {
    max-width: 660px;
    margin: 16px 0 0;
    color: #596160;
    font-size: 18px;
    line-height: 1.65;
}


/* FAQ accordion */

.faq-list {
    display: grid;
    gap: 12px;
    margin-top: 27px;
}

.faq-list details {
    overflow: hidden;
    border: 1px solid #d8e3e1;
    border-radius: 15px;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 7px 20px rgba(31, 69, 76, 0.035);
    transition:
        border-color 180ms ease,
        box-shadow 180ms ease,
        background 180ms ease;
}

.faq-list details:hover,
.faq-list details[open] {
    border-color: #bcd1cd;
    background: #fff;
    box-shadow: 0 11px 27px rgba(31, 69, 76, 0.07);
}

.faq-list summary {
    position: relative;
    display: flex;
    min-height: 67px;
    align-items: center;
    padding: 17px 56px 17px 20px;
    color: #152e33;
    font-family: "Outfit", sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.4;
    cursor: pointer;
    list-style: none;
}

.faq-list summary::-webkit-details-marker {
    display: none;
}

.faq-list summary::after {
    position: absolute;
    top: 50%;
    right: 19px;
    display: grid;
    width: 30px;
    height: 30px;
    place-items: center;
    border-radius: 50%;
    background: #edf5f3;
    color: #2b565e;
    content: "+";
    font-size: 1.12rem;
    font-weight: 500;
    line-height: 1;
    transform: translateY(-50%);
    transition:
        background 180ms ease,
        color 180ms ease,
        transform 180ms ease;
}

.faq-list details[open] summary::after {
    background: #2b565e;
    color: #fff;
    content: "−";
    transform: translateY(-50%) rotate(180deg);
}

.faq-list details p {
    margin: 0;
    padding: 0 20px 20px;
    color: #4f5958;
    font-size: 18px;
    line-height: 1.65;
}


/* Enquiry card */

.quick-enquiry {
    align-self: stretch;
    padding: clamp(28px, 3.4vw, 44px);
    border: 1px solid #d8e3e1;
    border-radius: 27px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 20px 54px rgba(31, 69, 76, 0.08);
}

.quick-enquiry__form {
    margin-top: 27px;
}

.enquiry-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 18px;
    row-gap: 17px;
    margin: 0;
}

.enquiry-grid label {
    display: block;
    min-width: 0;
}

.enquiry-grid__full {
    grid-column: 1 / -1;
}

.quick-enquiry label > span {
    display: block;
    margin-bottom: 7px;
    color: #1f3438;
    font-size: 14px;
    font-weight: 500;
}

.required-mark {
    color: #d93b32;
    font-weight: 600;
}

.quick-enquiry input,
.quick-enquiry textarea {
    display: block;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    border: 1px solid #d5dfdd;
    border-radius: 12px;
    background: #fff;
    color: #17282c;
    font-family: "Outfit", sans-serif;
    font-size: 15px;
    outline: 0;
    transition:
        border-color 180ms ease,
        box-shadow 180ms ease,
        background 180ms ease;
}

.quick-enquiry input {
    min-height: 51px;
    padding: 0 15px;
}

.quick-enquiry textarea {
    min-height: 155px;
    padding: 14px 15px;
    line-height: 1.55;
    resize: vertical;
}

.quick-enquiry input::placeholder,
.quick-enquiry textarea::placeholder {
    color: #9aa5a3;
    opacity: 1;
}

.quick-enquiry input:hover,
.quick-enquiry textarea:hover {
    border-color: #b9cac7;
}

.quick-enquiry input:focus,
.quick-enquiry textarea:focus {
    border-color: #5d8d86;
    background: #fff;
    box-shadow: 0 0 0 4px rgba(43, 86, 94, 0.09);
}

.quick-enquiry__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-top: 19px;
}

.quick-enquiry__footer p {
    margin: 0;
    color: #7a8482;
    font-size: 12px;
    line-height: 1.4;
}

.quick-enquiry__submit {
    flex: 0 0 auto;
    min-width: 160px;
    min-height: 47px;
    justify-content: center;
}


/* ============================================================
   RESPONSIVE — CATEGORY + FAQ / FORM
============================================================ */

@media (max-width: 1080px) {

    .home-category-showcase__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .home-category-card--supplies {
        grid-column: 1 / -1;
    }

    .home-category-card--supplies {
        grid-template-columns: minmax(0, 1fr) minmax(220px, 0.7fr);
    }

    .home-support__grid {
        grid-template-columns: 1fr;
        gap: 34px;
    }

    .home-faq {
        padding-bottom: 0;
    }

}


@media (max-width: 760px) {

    .home-category-showcase {
        padding: 4px 0 64px;
    }

    .home-category-showcase__grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .home-category-card,
    .home-category-card--supplies {
        grid-column: auto;
        grid-template-columns: minmax(0, 1fr) minmax(135px, 0.78fr);
        min-height: 220px;
        border-radius: 20px;
    }

    .home-category-card__content {
        padding: 24px 5px 24px 23px;
    }

    .home-category-card h3 {
        font-size: 1.75rem;
    }

    .home-category-card p {
        margin-bottom: 17px;
        font-size: 14px;
    }

    .home-category-card__visual img {
        top: 15px;
        right: -14px;
        height: calc(100% - 15px);
        border-radius: 34px 0 0 0;
    }

    .home-support {
        padding: 66px 0 72px;
    }

    .home-faq h2,
    .quick-enquiry h2 {
        font-size: clamp(2rem, 10vw, 2.7rem);
    }

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

    .enquiry-grid__full {
        grid-column: auto;
    }

    .quick-enquiry__footer {
        align-items: stretch;
        flex-direction: column;
    }

    .quick-enquiry__submit {
        width: 100%;
    }

}


@media (max-width: 480px) {

    .home-category-card {
        grid-template-columns: minmax(0, 1.1fr) minmax(112px, 0.65fr);
        min-height: 205px;
    }

    .home-category-card__content {
        padding: 21px 3px 21px 19px;
    }

    .home-category-card__eyebrow {
        font-size: 0.67rem;
    }

    .home-category-card h3 {
        margin-bottom: 7px;
        font-size: 1.55rem;
    }

    .home-category-card p {
        margin-bottom: 14px;
        font-size: 13px;
        line-height: 1.4;
    }

    .home-category-card__button {
        min-height: 36px;
        padding: 7px 12px;
        font-size: 0.7rem;
    }

    .quick-enquiry {
        padding: 24px 18px;
        border-radius: 21px;
    }

    .faq-list summary {
        min-height: 62px;
        padding: 15px 51px 15px 16px;
        font-size: 15px;
    }

    .faq-list summary::after {
        right: 15px;
        width: 28px;
        height: 28px;
    }

    .faq-list details p {
        padding: 0 16px 17px;
        font-size: 16px;
    }

}


/* ============================================================
   CATEGORY REFERENCE IMAGE — EXACT SUPPLIED DESIGN

   This section intentionally uses the user's supplied reference
   artwork directly. No generated images or replacement graphics.
============================================================ */

.home-category-reference {
    padding: 10px 0 80px;
    background: #fff;
}

.category-reference-strip {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.category-reference-strip > img {
    display: block;
    width: 100%;
    height: auto;
}

/*
 * Transparent clickable areas.
 * Percentages follow the original pixel positions in the supplied strip:
 *
 * Adults   : 0 → 569
 * Kids     : 592 → 1137
 * Supplies : 1160 → 1704
 */
.category-reference-hotspot {
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 2;
    display: block;
    border-radius: 28px;
    outline: 0;
}

.category-reference-hotspot--adults {
    left: 0;
    width: 33.39%;
}

.category-reference-hotspot--kids {
    left: 34.74%;
    width: 31.98%;
}

.category-reference-hotspot--supplies {
    left: 68.08%;
    width: 31.92%;
}

.category-reference-hotspot:focus-visible {
    outline: 3px solid #2b565e;
    outline-offset: -3px;
}

.category-reference-visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}


/* Mobile crops are hidden on desktop. */

.category-reference-mobile {
    display: none;
}


/* ============================================================
   RESPONSIVE
============================================================ */

@media (max-width: 800px) {

    .home-category-reference {
        padding: 6px 0 64px;
    }

    .category-reference-strip {
        display: none;
    }

    .category-reference-mobile {
        display: grid;
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .category-reference-mobile__card {
        display: block;
        overflow: hidden;
        border-radius: 22px;
        box-shadow: 0 10px 28px rgba(31, 69, 76, 0.07);
        transition:
            transform 180ms ease,
            box-shadow 180ms ease;
    }

    .category-reference-mobile__card:hover,
    .category-reference-mobile__card:focus-visible {
        transform: translateY(-2px);
        box-shadow: 0 14px 34px rgba(31, 69, 76, 0.11);
    }

    .category-reference-mobile__card img {
        display: block;
        width: 100%;
        height: auto;
    }

}

@media (max-width: 480px) {

    .category-reference-mobile {
        gap: 12px;
    }

    .category-reference-mobile__card {
        border-radius: 17px;
    }

}

/* ============================================================
   HOME COLLECTION CARDS
============================================================ */
.home-collections {
    padding: 20px 0 82px;
    background: #fff;
}
.home-collections__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}
.collection-card {
    position: relative;
    display: block;
    min-height: 275px;
    overflow: hidden;
    border: 1px solid rgba(43, 86, 94, .10);
    border-radius: 10px;
    background-repeat: no-repeat;
    background-position: center right;
    background-size: cover;
    color: #173e46;
    text-decoration: none;
    box-shadow: 0 12px 35px rgba(30,65,72,.06);
    transition: transform .22s ease, box-shadow .22s ease;
}
.collection-card:hover,
.collection-card:focus-visible {
    transform: translateY(-4px);
    box-shadow: 0 20px 45px rgba(30,65,72,.12);
}
.collection-card--adults {
    background-color: #e8f2e3;
    background-image:
        linear-gradient(90deg, rgba(232,242,227,1) 0%, rgba(232,242,227,.97) 38%, rgba(232,242,227,.62) 52%, rgba(232,242,227,.06) 72%),
        url("../images/home/category-adults-bg.png");
}
.collection-card--kids {
    background-color: #fff1c9;
    background-image:
        linear-gradient(90deg, rgba(255,241,201,1) 0%, rgba(255,241,201,.97) 38%, rgba(255,241,201,.62) 52%, rgba(255,241,201,.06) 72%),
        url("../images/home/category-kids-bg.png");
}
.collection-card--supplies {
    background-color: #e6f1f7;
    background-image:
        linear-gradient(90deg, rgba(230,241,247,1) 0%, rgba(230,241,247,.97) 38%, rgba(230,241,247,.62) 52%, rgba(230,241,247,.06) 72%),
        url("../images/home/category-supplies-bg.png");
}
.collection-card__content {
    position: relative;
    z-index: 2;
    display: flex;
    width: 58%;
    min-height: 260px;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    padding: 14px 10px 14px 10px;
    /* gap: 10px; */
}
.collection-card__label {
    margin-bottom: 7px;
    color: #234b53;
    font-family: "Outfit", sans-serif;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.2;
}
.collection-card h3 {
    margin: 0 0 14px;
    color: #194a54;
    font-family: "Outfit", sans-serif;
    font-size: clamp(2.2rem, 3vw, 3.2rem);
    font-weight: 600;
    line-height: .98;
    letter-spacing: -.035em;
}
.collection-card p {
    max-width: 230px;
    margin: 0 0 26px;
    color: #183a41;
    font-family: "Outfit", sans-serif;
    font-size: 18px;
    font-weight: 400;
    line-height: 1.48;
}
.collection-card__button {
    display: inline-flex;
    min-height: 30px;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 10px 20px;
    border: 1.5px solid #2b565e;
    border-radius: 10px;
    background: rgba(255,255,255,.50);
    color: #214b53;
    font-family: "Outfit", sans-serif;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.6px;
    transition: background .18s ease, color .18s ease, transform .18s ease;
}
.collection-card:hover .collection-card__button,
.collection-card:focus-visible .collection-card__button {
    background: #2b565e;
    color: #fff;
    transform: translateX(3px);
}
@media (max-width: 1050px) {
    .home-collections__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .collection-card--supplies { grid-column: 1 / -1; }
    .collection-card--supplies .collection-card__content { width: 45%; }
}
@media (max-width: 700px) {
    .home-collections { padding: 10px 0 60px; }
    .home-collections__grid { grid-template-columns: 1fr; gap: 16px; }
    .collection-card, .collection-card--supplies { grid-column: auto; min-height: 260px; border-radius: 22px; }
    .collection-card__content, .collection-card--supplies .collection-card__content {
        width: 64%; min-height: 260px; padding: 26px 8px 26px 24px;
    }
    .collection-card h3 { font-size: 2.25rem; }
    .collection-card p { max-width: 200px; margin-bottom: 20px; font-size: 16px; line-height: 1.45; }
    .collection-card__button { min-height: 42px; padding: 8px 15px; font-size: 13px; }
}
@media (max-width: 430px) {
    .collection-card { min-height: 230px; }
    .collection-card__content, .collection-card--supplies .collection-card__content {
        width: 68%; min-height: 230px; padding: 22px 4px 22px 19px;
    }
    .collection-card__label { font-size: 12px; }
    .collection-card h3 { margin-bottom: 10px; font-size: 1.9rem; }
    .collection-card p { max-width: 170px; margin-bottom: 16px; font-size: 14px; }
    .collection-card__button { min-height: 38px; padding: 7px 12px; font-size: 12px; }
}
.home-section-description--admin + .home-section-description,
.home-faq__intro--admin + .home-faq__intro {
    display: none;
}


/* ============================================================
   FINAL UI POLISH — 06 OCT 2026
   - Feature-list copy fixed at 16px
   - Quick enquiry required stars stay inline
   - Mobile product-section "View More" moves below cards
============================================================ */

/* Keep all three Creative Audience card feature lines readable. */
.page-home .audience-card__features strong,
.page-home .audience-card__features small {
    font-size: 16px;
    line-height: 1.55;
}

.page-home .audience-card__features strong {
    margin-bottom: 2px;
}

/* Required mark must stay beside the label, never on its own line. */
.page-home .quick-enquiry label > span {
    display: inline-flex;
    align-items: baseline;
    gap: 3px;
    max-width: 100%;
    vertical-align: top;
}

.page-home .quick-enquiry label > .required-mark,
.page-home .quick-enquiry .required-mark {
    display: inline !important;
    margin: 0 0 0 3px !important;
    vertical-align: baseline;
}

@media (max-width: 760px) {
    /*
     * On phones the section CTA belongs after the products.
     * display:contents lets the existing header link participate in
     * the section container ordering without duplicating PHP markup.
     */
    .page-home .home-products-section > .container {
        display: flex;
        flex-direction: column;
    }

    .page-home .home-products-section .home-section-heading {
        display: contents;
    }

    .page-home .home-products-section .home-section-heading > div {
        order: 1;
        margin-bottom: 16px;
    }

    .page-home .home-products-section .home-section-description {
        order: 2;
        margin-bottom: 26px;
    }

    .page-home .home-products-section .shop-product-row {
        order: 3;
    }

    .page-home .home-products-section .home-section-heading > .text-link {
        order: 4;
        align-self: center;
        min-height: 44px;
        margin-top: 24px;
        padding: 0 18px;
        border: 1px solid #2b565e;
        border-radius: 10px;
        background: #fff;
        color: #2b565e;
        font-size: 0.82rem;
        font-weight: 600;
        text-decoration: none;
    }

    .page-home .home-products-section .home-section-heading > .text-link:hover,
    .page-home .home-products-section .home-section-heading > .text-link:focus-visible {
        background: #2b565e;
        color: #fff;
        transform: none;
    }
}

/* ============================================================
   CUSTOMER REVIEWS — AUTO LOOP
============================================================ */

.home-reviews {
    position: relative;
    overflow: hidden;
    padding: 82px 0 88px;
    background:
        radial-gradient(circle at 0 0, rgba(243, 170, 52, .055), transparent 25%),
        #fff;
}

.home-reviews__heading {
    max-width: 900px;
    margin: 0 auto 38px;
    text-align: center;
}

.home-reviews__heading .section-kicker {
    margin-bottom: 10px;
    color: #e0453c;
}

.home-reviews__heading h2 {
    margin: 0;
    color: #2b565e;
    font-family: "Outfit", sans-serif;
    font-size: clamp(2.15rem, 3.4vw, 3.55rem);
    font-weight: 600;
    line-height: 1.08;
    letter-spacing: -.035em;
}

.home-review-carousel {
    --review-gap: 20px;
    --review-visible: 4;

    position: relative;
    width: 100%;
}

.home-review-carousel__viewport {
    width: 100%;
    overflow: hidden;
    padding: 4px 2px 14px;
}

.home-review-carousel__track {
    display: flex;
    width: 100%;
    gap: var(--review-gap);
    align-items: stretch;
    will-change: transform;
}

.home-review-card {
    display: flex;
    min-width: 0;
    flex: 0 0 calc(
        (100% - (var(--review-gap) * (var(--review-visible) - 1)))
        / var(--review-visible)
    );
    flex-direction: column;
    overflow: hidden;
    border: 1px solid #e0e8e7;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 13px 34px rgba(31, 69, 76, .075);
    transform: translateZ(0);
}

.home-review-card__media {
    position: relative;
    overflow: hidden;
    margin: 12px 12px 0;
    border-radius: 12px;
    background: #edf5f4;
}

.home-review-card__media img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 11;
    object-fit: cover;
    object-position: center;
    transition: transform 280ms ease;
}

.home-review-card:hover .home-review-card__media img {
    transform: scale(1.025);
}

.home-review-card__body {
    display: flex;
    /* min-height: 275px; */
    flex: 1 1 auto;
    flex-direction: column;
    align-items: center;
    padding: 18px 20px 20px;
    text-align: center;
}

.home-review-card__body h3 {
    margin: 0 0 8px;
    color: #2b565e;
    font-family: "Outfit", sans-serif;
    font-size: 1.15rem;
    font-weight: 600;
    line-height: 1.25;
}

.home-review-card__stars {
    margin-bottom: 14px;
    color: #f3aa34;
    font-size: .95rem;
    letter-spacing: .07em;
    line-height: 1;
}

.home-review-card__body > p {
    margin: 0;
    color: #202725;
    font-size: 15px;
    line-height: 1.55;
}

.home-review-card__verified {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    /* margin-top: auto; */
    padding-top: 18px;
    color: #7a8583;
}

.home-review-card__verified > span {
    display: grid;
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
    place-items: center;
    color: #aab8b5;
}

.home-review-card__verified svg {
    width: 20px;
    height: 20px;
    fill: #eef3f2;
    stroke: currentColor;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.home-review-card__verified small {
    font-size: 12px;
    font-weight: 500;
    line-height: 1.2;
}

.home-review-carousel.is-paused .home-review-carousel__track {
    will-change: auto;
}

/* 3 cards */
@media (max-width: 1100px) {
    .home-review-carousel {
        --review-visible: 3;
        --review-gap: 18px;
    }
}

/* 2 cards */
@media (max-width: 820px) {
    .home-reviews {
        padding: 68px 0 72px;
    }

    .home-reviews__heading {
        margin-bottom: 30px;
    }

    .home-review-carousel {
        --review-visible: 2;
        --review-gap: 15px;
    }

    .home-review-card__body {
        min-height: 250px;
    }
}

/* 1 card */
@media (max-width: 560px) {
    .home-reviews {
        padding: 54px 0 60px;
    }

    .home-reviews__heading {
        margin-bottom: 24px;
    }

    .home-reviews__heading h2 {
        font-size: clamp(1.9rem, 9vw, 2.4rem);
    }

    .home-review-carousel {
        --review-visible: 1;
        --review-gap: 12px;
    }

    .home-review-carousel__viewport {
        overflow: hidden;
        padding-inline: 1px;
    }

    .home-review-card {
        border-radius: 16px;
    }

    .home-review-card__media {
        margin: 10px 10px 0;
    }

    .home-review-card__media img {
        aspect-ratio: 4 / 3;
    }

    .home-review-card__body {
        min-height: 235px;
        padding: 16px 18px 18px;
    }

    .home-review-card__body h3 {
        font-size: 1.08rem;
    }

    .home-review-card__body > p {
        font-size: 14px;
        line-height: 1.55;
    }
}

@media (prefers-reduced-motion: reduce) {
    .home-review-carousel__viewport {
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
    }

    .home-review-carousel__viewport::-webkit-scrollbar {
        display: none;
    }

    .home-review-card {
        scroll-snap-align: start;
    }

    .home-review-carousel__track {
        transform: none !important;
    }
}