/* Global WhatsApp CTA treatment. Loaded from the shared footer so it wins over
   page-specific button themes and stays identical across the public site. */
:is(
    .header-whatsapp,
    .lasto-whatsapp-cta,
    .products-whatsapp-link,
    .service-button-outline,
    .brands-v2-help-copy > a,
    .about-whatsapp > a,
    .contact-primary-button,
    .store-whatsapp-button,
    .promotion-whatsapp-button,
    .chat-product-button,
    .product-mobile-enquiry,
    .comparison-whatsapp-button,
    .comparison-help-bar > a,
    .build-send-whatsapp,
    .product-card-whatsapp,
    .whatsapp-branch-action
){
    border:1.5px solid #36cc78!important;
    background:#fff!important;
    color:#08a94f!important;
    font-family:"Montserrat",Arial,Helvetica,sans-serif!important;
    font-weight:700!important;
    text-transform:none!important;
    letter-spacing:0!important;
    box-shadow:0 6px 17px rgba(25,190,99,.12)!important;
}

:is(
    .header-whatsapp,
    .lasto-whatsapp-cta,
    .products-whatsapp-link,
    .service-button-outline,
    .brands-v2-help-copy > a,
    .about-whatsapp > a,
    .contact-primary-button,
    .store-whatsapp-button,
    .promotion-whatsapp-button,
    .chat-product-button,
    .product-mobile-enquiry,
    .comparison-whatsapp-button,
    .comparison-help-bar > a,
    .build-send-whatsapp,
    .product-card-whatsapp,
    .whatsapp-branch-action
):hover{
    border-color:#12b85d!important;
    background:#f2fff8!important;
    color:#079b48!important;
    box-shadow:0 8px 21px rgba(25,190,99,.18)!important;
}

:is(
    .header-whatsapp,
    .lasto-whatsapp-cta,
    .products-whatsapp-link,
    .service-button-outline,
    .brands-v2-help-copy > a,
    .about-whatsapp > a,
    .contact-primary-button,
    .store-whatsapp-button,
    .promotion-whatsapp-button,
    .chat-product-button,
    .product-mobile-enquiry,
    .comparison-whatsapp-button,
    .comparison-help-bar > a,
    .build-send-whatsapp,
    .product-card-whatsapp,
    .whatsapp-branch-action
) .icon-whatsapp{
    color:#08b957!important;
    stroke:currentColor!important;
}

html[data-site-theme="dark"] :is(
    .header-whatsapp,
    .lasto-whatsapp-cta,
    .products-whatsapp-link,
    .service-button-outline,
    .brands-v2-help-copy > a,
    .about-whatsapp > a,
    .contact-primary-button,
    .store-whatsapp-button,
    .promotion-whatsapp-button,
    .chat-product-button,
    .product-mobile-enquiry,
    .comparison-whatsapp-button,
    .comparison-help-bar > a,
    .build-send-whatsapp,
    .product-card-whatsapp,
    .whatsapp-branch-action
){
    border-color:#36cc78!important;
    background:#fff!important;
    color:#08a94f!important;
}

.whatsapp-picker-heading h2,
.whatsapp-branch-copy strong{
    font-weight:400!important;
}

/* Product Details price should stay readable without returning to the old heavy look. */
.product-details-page .product-detail-price{
    font-size:31px!important;
    font-weight:650!important;
}

.product-details-page .product-detail-original-price{
    font-weight:400!important;
}

.product-details-page :is(
    .product-side-key-specifications__content h3,
    .specification-table th,
    .product-content-tab
){
    font-weight:400!important;
}

/* Only the main Product Details title is reduced. Product-card typography is
   intentionally left to each page's original stylesheet. */
.product-details-page .product-summary h1,
.product-details-page .product-detail-title{
    font-size:clamp(21px,1.8vw,28px)!important;
}

@media (max-width:560px){
    .product-details-page .product-summary h1,
    .product-details-page .product-detail-title{
        font-size:20px!important;
    }

    .product-details-page .product-detail-price{
        font-size:24px!important;
    }
}

/* High-specificity parity for navigation, footer and banner CTAs. These areas
   have their own theme styles, so keep the WhatsApp treatment authoritative in
   system, light and dark modes without changing each button's original label. */
html body #lasto-site-header .header-whatsapp,
html body #lasto-site-header .lasto-mobile-nav-actions a:last-child,
html body #lasto-site-header .lasto-mobile-nav-quick-actions a:last-child,
html body .footer .footer-whatsapp-button,
html body main .hero a.lasto-whatsapp-cta,
html body main .products-hero .products-whatsapp-link,
html body main .promotion-hero .promotion-outline-button[href*="wa.me/"],
html body main .promotion-hero .promotion-outline-button[href*="api.whatsapp.com/"]{
    border:1.5px solid #36cc78!important;
    background:#fff!important;
    color:#08a94f!important;
    font-family:"Montserrat",Arial,Helvetica,sans-serif!important;
    font-weight:700!important;
    text-transform:none!important;
    letter-spacing:0!important;
    box-shadow:0 6px 17px rgba(25,190,99,.12)!important;
}

html body #lasto-site-header .header-whatsapp:hover,
html body #lasto-site-header .lasto-mobile-nav-actions a:last-child:hover,
html body #lasto-site-header .lasto-mobile-nav-quick-actions a:last-child:hover,
html body .footer .footer-whatsapp-button:hover,
html body main .hero a.lasto-whatsapp-cta:hover,
html body main .products-hero .products-whatsapp-link:hover,
html body main .promotion-hero .promotion-outline-button[href*="wa.me/"]:hover,
html body main .promotion-hero .promotion-outline-button[href*="api.whatsapp.com/"]:hover{
    border-color:#12b85d!important;
    background:#f2fff8!important;
    color:#079b48!important;
    box-shadow:0 8px 21px rgba(25,190,99,.18)!important;
}

html body #lasto-site-header .header-whatsapp .icon,
html body #lasto-site-header .lasto-mobile-nav-actions a:last-child .icon,
html body #lasto-site-header .lasto-mobile-nav-quick-actions a:last-child .icon,
html body .footer .footer-whatsapp-button .icon,
html body main .hero a.lasto-whatsapp-cta .icon,
html body main .products-hero .products-whatsapp-link .icon{
    color:#08b957!important;
}

html[data-site-theme] body :is(
    #lasto-site-header .header-whatsapp,
    #lasto-site-header .lasto-mobile-nav-actions a:last-child,
    #lasto-site-header .lasto-mobile-nav-quick-actions a:last-child,
    .footer .footer-whatsapp-button,
    main .hero a.lasto-whatsapp-cta,
    main .products-hero .products-whatsapp-link,
    main .promotion-hero .promotion-outline-button[href*="wa.me/"],
    main .promotion-hero .promotion-outline-button[href*="api.whatsapp.com/"]
){
    border-color:#36cc78!important;
    background:#fff!important;
    color:#08a94f!important;
    font-family:"Montserrat",Arial,Helvetica,sans-serif!important;
    font-weight:700!important;
    text-transform:none!important;
    letter-spacing:0!important;
    box-shadow:0 6px 17px rgba(25,190,99,.12)!important;
}

html[data-site-theme] body :is(
    #lasto-site-header .header-whatsapp,
    #lasto-site-header .lasto-mobile-nav-actions a:last-child,
    #lasto-site-header .lasto-mobile-nav-quick-actions a:last-child,
    .footer .footer-whatsapp-button,
    main .hero a.lasto-whatsapp-cta,
    main .products-hero .products-whatsapp-link,
    main .promotion-hero .promotion-outline-button[href*="wa.me/"],
    main .promotion-hero .promotion-outline-button[href*="api.whatsapp.com/"]
):hover{
    border-color:#12b85d!important;
    background:#f2fff8!important;
    color:#079b48!important;
    box-shadow:0 8px 21px rgba(25,190,99,.18)!important;
}

html[data-site-theme] body :is(
    #lasto-site-header .header-whatsapp,
    #lasto-site-header .lasto-mobile-nav-actions a:last-child,
    #lasto-site-header .lasto-mobile-nav-quick-actions a:last-child,
    .footer .footer-whatsapp-button,
    main .hero a.lasto-whatsapp-cta,
    main .products-hero .products-whatsapp-link
) .icon{
    color:#08b957!important;
}

/* Desktop WhatsApp Us parity. The homepage hero CTA is the reference for the
   product and service banners, contact store cards and shared footer. */
@media (min-width:769px){
    html body :is(
        main > .hero .hero-actions a.lasto-whatsapp-cta,
        main .products-hero .products-whatsapp-link,
        main .service-hero .service-button-outline,
        main .store-location-actions .store-whatsapp-button,
        .footer .footer-whatsapp-button
    ){
        width:max-content!important;
        max-width:100%!important;
        min-height:44px!important;
        height:44px!important;
        padding:0 18px!important;
        border:1.5px solid #36cc78!important;
        border-radius:8px!important;
        background:#fff!important;
        color:#08a94f!important;
        -webkit-text-fill-color:#08a94f!important;
        display:inline-flex!important;
        align-items:center!important;
        justify-content:center!important;
        gap:9px!important;
        font-family:"Montserrat",Arial,Helvetica,sans-serif!important;
        font-size:11.5px!important;
        font-weight:700!important;
        line-height:1!important;
        text-transform:none!important;
        letter-spacing:0!important;
        white-space:nowrap!important;
        box-shadow:none!important;
        text-shadow:none!important;
        filter:none!important;
    }

    html body :is(
        main > .hero .hero-actions a.lasto-whatsapp-cta,
        main .products-hero .products-whatsapp-link,
        main .service-hero .service-button-outline,
        main .store-location-actions .store-whatsapp-button,
        .footer .footer-whatsapp-button
    ):hover{
        border-color:#12b85d!important;
        background:#f2fff8!important;
        color:#079b48!important;
        -webkit-text-fill-color:#079b48!important;
        transform:translateY(-1px)!important;
        box-shadow:none!important;
    }

    html body :is(
        main > .hero .hero-actions a.lasto-whatsapp-cta,
        main .products-hero .products-whatsapp-link,
        main .service-hero .service-button-outline,
        main .store-location-actions .store-whatsapp-button,
        .footer .footer-whatsapp-button
    ):focus-visible{
        outline:3px solid rgba(54,204,120,.28)!important;
        outline-offset:3px!important;
    }

    html body :is(
        main > .hero .hero-actions a.lasto-whatsapp-cta,
        main .products-hero .products-whatsapp-link,
        main .service-hero .service-button-outline,
        main .store-location-actions .store-whatsapp-button,
        .footer .footer-whatsapp-button
    ) .icon{
        width:16px!important;
        height:16px!important;
        flex:0 0 16px!important;
        color:#08b957!important;
        fill:currentColor!important;
        filter:none!important;
    }

    html body :is(
        main > .hero .hero-actions a.lasto-whatsapp-cta,
        main .products-hero .products-whatsapp-link,
        main .service-hero .service-button-outline,
        main .store-location-actions .store-whatsapp-button,
        .footer .footer-whatsapp-button
    ) span{
        color:inherit!important;
        -webkit-text-fill-color:inherit!important;
        font:inherit!important;
        line-height:1!important;
        letter-spacing:0!important;
        text-transform:none!important;
    }

    /* The All Products banner has a legacy theme-specific selector with higher
       specificity. Keep it pinned to the same desktop homepage CTA standard. */
    html[data-site-theme] body.products-page main .products-hero.all-products-hero .products-hero-actions .products-whatsapp-link{
        width:max-content!important;
        max-width:100%!important;
        min-height:44px!important;
        height:44px!important;
        padding:0 18px!important;
        border:1.5px solid #36cc78!important;
        border-radius:8px!important;
        background:#fff!important;
        color:#08a94f!important;
        -webkit-text-fill-color:#08a94f!important;
        gap:9px!important;
        font-size:11.5px!important;
        font-weight:700!important;
        line-height:1!important;
        box-shadow:none!important;
    }

    html[data-site-theme] body.products-page main .products-hero.all-products-hero .products-hero-actions .products-whatsapp-link:hover{
        border-color:#12b85d!important;
        background:#f2fff8!important;
        color:#079b48!important;
        -webkit-text-fill-color:#079b48!important;
        transform:translateY(-1px)!important;
        box-shadow:none!important;
    }

    html[data-site-theme] body.products-page main .products-hero.all-products-hero .products-hero-actions .products-whatsapp-link :is(.icon,.icon-whatsapp){
        width:16px!important;
        height:16px!important;
        flex:0 0 16px!important;
        color:#08b957!important;
        fill:currentColor!important;
    }
}

/* Mobile hero rhythm: equal vertical breathing room around banner copy. */
@media (max-width:768px){
    html body main > .hero .hero-content,
    html body.products-page .products-hero-copy,
    html body.services-page .service-hero-copy,
    html body.contact-page .contact-hero-copy,
    html body.brands-page .brands-v2-hero-copy,
    html body.careers-page .career-hero-copy,
    html body.build-pc-page .build-pc-hero-copy{
        padding-block:16px!important;
        justify-content:center!important;
        box-sizing:border-box!important;
    }

    /* Contact has its own compact copy rhythm; keep it top-aligned so the
       short hero does not leave an empty dark band above the text. */
    html body.contact-page .contact-hero-copy{
        padding:12px 7px 12px 14px!important;
        justify-content:flex-start!important;
    }
}

/* Keep the WhatsApp branch picker copy on one compact line on phones. */
@media (max-width:780px){
    .whatsapp-picker-heading h2,
    .whatsapp-picker-description,
    .whatsapp-branch-copy strong,
    .whatsapp-branch-copy>span,
    .whatsapp-branch-copy small,
    .whatsapp-picker-note{
        white-space:nowrap!important;
        overflow:hidden!important;
        text-overflow:ellipsis!important;
    }

    /* Compact WhatsApp branch picker only. */
    .whatsapp-picker-heading{gap:9px!important;padding-right:44px!important}
    .whatsapp-picker-heading{padding:16px 14px 8px!important;padding-right:44px!important}
    .whatsapp-picker-heading h2{font-size:16px!important;letter-spacing:-.04em!important;overflow:visible!important;text-overflow:clip!important}
    .whatsapp-picker-description{font-size:9.5px!important;overflow:visible!important;text-overflow:clip!important}
    .whatsapp-branch-copy strong,
    .whatsapp-branch-copy>span,
    .whatsapp-branch-copy small,
    .whatsapp-picker-note{
        overflow:visible!important;
        text-overflow:clip!important;
    }
    .whatsapp-branch-copy small{font-weight:700!important}
    .whatsapp-picker-icon{width:44px!important;height:44px!important;flex-basis:44px!important}
    .whatsapp-picker-icon .icon{width:27px!important;height:27px!important}
    .whatsapp-branch-option{
        min-height:72px!important;
        grid-template-columns:48px minmax(0,1fr) 36px!important;
        gap:8px!important;
        padding:8px!important;
        border-radius:14px!important;
    }
    .whatsapp-picker-body{padding:6px 12px 12px!important}
    .whatsapp-branch-options{gap:8px!important}
    .whatsapp-picker-note{margin-top:10px!important}
    .whatsapp-branch-avatar{width:48px!important;height:48px!important}
    .whatsapp-branch-arrow{width:36px!important;height:36px!important}
    .whatsapp-branch-arrow .icon{width:16px!important;height:16px!important}
}

/* Component-safe mobile exceptions: these links are overlays/navigation items,
   not standalone CTA buttons. Keep their labels and native component shapes. */
@media (max-width:768px){
    html body #lasto-site-header .lasto-mobile-nav-quick-actions a:last-child span{
        display:inline!important;
        position:static!important;
        width:auto!important;
        height:auto!important;
        margin:0!important;
        color:#08a94f!important;
        font-size:12px!important;
        line-height:1.2!important;
        font-weight:750!important;
        text-indent:0!important;
        opacity:1!important;
        visibility:visible!important;
        clip:auto!important;
        clip-path:none!important;
        -webkit-text-fill-color:#08a94f!important;
    }
    html body.contact-page .contact-method-whatsapp a,
    html[data-site-theme] body.contact-page .contact-method-whatsapp a{
        border:0!important;
        background:transparent!important;
        color:transparent!important;
        box-shadow:none!important;
    }
    html body.contact-page .contact-method-whatsapp a:hover,
    html[data-site-theme] body.contact-page .contact-method-whatsapp a:hover{
        border:0!important;
        background:transparent!important;
        color:transparent!important;
        box-shadow:none!important;
    }

    /* Product Details: keep the mobile Enquire CTA identical in both themes. */
    html body.product-details-page .product-mobile-actions .product-mobile-enquiry,
    html[data-site-theme="light"] body.product-details-page .product-mobile-actions .product-mobile-enquiry,
    html[data-site-theme="dark"] body.product-details-page .product-mobile-actions .product-mobile-enquiry{
        border:1px solid #18a558!important;
        background:#20ad61!important;
        color:#fff!important;
        box-shadow:0 8px 22px rgba(7,92,45,.24)!important;
        -webkit-text-fill-color:#fff!important;
    }
    html body.product-details-page .product-mobile-actions .product-mobile-enquiry:hover,
    html[data-site-theme="light"] body.product-details-page .product-mobile-actions .product-mobile-enquiry:hover,
    html[data-site-theme="dark"] body.product-details-page .product-mobile-actions .product-mobile-enquiry:hover{
        border-color:#15934e!important;
        background:#199c55!important;
        color:#fff!important;
        box-shadow:0 9px 24px rgba(7,92,45,.28)!important;
        -webkit-text-fill-color:#fff!important;
    }
    html body.product-details-page .product-mobile-actions .product-mobile-enquiry .icon,
    html body.product-details-page .product-mobile-actions .product-mobile-enquiry .icon-whatsapp,
    html[data-site-theme] body.product-details-page .product-mobile-actions .product-mobile-enquiry .icon,
    html[data-site-theme] body.product-details-page .product-mobile-actions .product-mobile-enquiry .icon-whatsapp{
        display:block!important;
        width:17px!important;
        height:17px!important;
        flex:0 0 17px!important;
        color:#fff!important;
        fill:currentColor!important;
        opacity:1!important;
        visibility:visible!important;
    }

}

@media (max-width:768px){
    html body main > .hero .hero-actions a.lasto-whatsapp-cta,
    html body.products-page main .products-hero:not(.all-products-hero) .products-hero-actions .products-whatsapp-link{
        min-height:31px!important;
        height:31px!important;
        padding:0 11px!important;
        border:1.5px solid #36cc78!important;
        border-radius:7px!important;
        background:#ffffff!important;
        color:#08a94f!important;
        -webkit-text-fill-color:#08a94f!important;
        gap:6px!important;
        font-family:"Montserrat",Arial,Helvetica,sans-serif!important;
        font-size:9.5px!important;
        font-weight:700!important;
        line-height:1!important;
        text-transform:none!important;
        letter-spacing:0!important;
        box-shadow:none!important;
        text-shadow:none!important;
        filter:none!important;
    }

    html body main > .hero .hero-actions a.lasto-whatsapp-cta:hover,
    html body.products-page main .products-hero:not(.all-products-hero) .products-hero-actions .products-whatsapp-link:hover,
    html body main > .hero .hero-actions a.lasto-whatsapp-cta:focus-visible,
    html body.products-page main .products-hero:not(.all-products-hero) .products-hero-actions .products-whatsapp-link:focus-visible{
        border-color:#12b85d!important;
        background:#f2fff8!important;
        color:#079b48!important;
        -webkit-text-fill-color:#079b48!important;
        box-shadow:none!important;
        text-shadow:none!important;
        filter:none!important;
    }

    html body main > .hero .hero-actions a.lasto-whatsapp-cta .icon,
    html body main > .hero .hero-actions a.lasto-whatsapp-cta .icon-whatsapp,
    html body.products-page main .products-hero:not(.all-products-hero) .products-hero-actions .products-whatsapp-link .icon,
    html body.products-page main .products-hero:not(.all-products-hero) .products-hero-actions .products-whatsapp-link .icon-whatsapp{
        width:13px!important;
        height:13px!important;
        flex:0 0 13px!important;
        color:#08b957!important;
        fill:currentColor!important;
        filter:none!important;
        text-shadow:none!important;
    }

    html body main > .hero .hero-actions a.lasto-whatsapp-cta span,
    html body.products-page main .products-hero:not(.all-products-hero) .products-hero-actions .products-whatsapp-link span{
        color:#08a94f!important;
        -webkit-text-fill-color:#08a94f!important;
        font-family:"Montserrat",Arial,Helvetica,sans-serif!important;
        font-size:9.5px!important;
        font-weight:700!important;
        line-height:1!important;
        text-transform:none!important;
        letter-spacing:0!important;
        text-shadow:none!important;
        filter:none!important;
    }
}