/*
 * LG SHOWERS — GLOBAL NATIVE MOBILE DESIGN SYSTEM
 *
 * Shared by all native menu pages.
 * Mobile range: 767px and below.
 */

@media (max-width: 767px) {

    /* ======================================================
       GLOBAL PAGE WIDTH
       ====================================================== */

    body.lgsnp-native {
        overflow-x: hidden !important;
    }

    body.lgsnp-native #main,
    body.lgsnp-native .main-content,
    body.lgsnp-native .main-content-wrap,
    body.lgsnp-native .page-content {
        width: 100% !important;
        max-width: none !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    body.lgsnp-native .lgsnp-native-page {
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
    }

    /* ======================================================
       GLOBAL MOBILE HERO
       Applies to native hero systems using .lg-hero
       ====================================================== */

    body.lgsnp-native .lg-hero {
        display: grid !important;
        grid-template-columns: 1fr !important;
        width: 100% !important;
        max-width: none !important;
        min-height: 0 !important;
        margin: 0 !important;
    }

    body.lgsnp-native .lg-copy {
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        padding: 32px 22px 34px !important;
    }

    body.lgsnp-native .lg-kicker {
        margin-bottom: 16px !important;
        font-size: 12px !important;
        line-height: 1.35 !important;
        letter-spacing: 1.4px !important;
    }

    body.lgsnp-native .lg-hero h1 {
        max-width: none !important;
        margin: 0 0 18px !important;
        font-size: clamp(36px, 10vw, 48px) !important;
        line-height: 1.02 !important;
        letter-spacing: -1px !important;
    }

    body.lgsnp-native .lg-copy p {
        max-width: none !important;
        margin: 0 !important;
        font-size: 17px !important;
        line-height: 1.55 !important;
    }

    body.lgsnp-native .lg-actions {
        margin-top: 24px !important;
    }

    body.lgsnp-native .lg-btn {
        width: auto !important;
        min-height: 52px !important;
        padding: 14px 20px !important;
        font-size: 16px !important;
    }

    /* ======================================================
       GLOBAL MOBILE HERO IMAGE
       ====================================================== */

    body.lgsnp-native .lg-image {
        width: 100% !important;
        height: 310px !important;
        min-height: 310px !important;
        padding: 10px 16px 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        overflow: hidden !important;
    }

    body.lgsnp-native .lg-image img {
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        max-height: 310px !important;
        object-fit: contain !important;
        object-position: center bottom !important;
    }

    /* ======================================================
       GLOBAL MOBILE TRUST BAR
       Four desktop items become 2 × 2.
       ====================================================== */

    body.lgsnp-native .lg-trust {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        width: 100% !important;
        min-height: 0 !important;
    }

    body.lgsnp-native .lg-trust-item {
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        min-height: 104px !important;
        padding: 16px 10px !important;
        text-align: center !important;
    }

    body.lgsnp-native .lg-trust-item:nth-child(2n) {
        border-right: 0 !important;
    }

    body.lgsnp-native .lg-trust-item:nth-child(-n+2) {
        border-bottom: 1px solid #d9e5ec !important;
    }

    /* ======================================================
       GLOBAL MOBILE SECTION SPACING
       ====================================================== */

    body.lgsnp-native .lgsnp-native-page section {
        scroll-margin-top: 90px;
    }

    body.lgsnp-native .lg-bf-finder {
        width: 100% !important;
        max-width: none !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

}

/* Smaller phones */
@media (max-width: 420px) {

    body.lgsnp-native .lg-copy {
        padding-left: 18px !important;
        padding-right: 18px !important;
    }

    body.lgsnp-native .lg-hero h1 {
        font-size: 38px !important;
    }

    body.lgsnp-native .lg-copy p {
        font-size: 16px !important;
    }

    body.lgsnp-native .lg-image {
        height: 285px !important;
        min-height: 285px !important;
    }

    body.lgsnp-native .lg-image img {
        max-height: 285px !important;
    }

}

/* ==========================================================
   LG SHOWERS — GLOBAL MOBILE PRODUCT FINDER
   Shared mobile layout.
   Does NOT change finder logic or WPCode.
   ========================================================== */

@media (max-width: 767px) {

    /* Prevent finder from using old desktop viewport breakout */
    body.lgsnp-native #lg-ada-tub-finder,
    body.lgsnp-native #lg-ada-tub-finder .lg-bf-finder {
        position: relative !important;
        left: auto !important;
        right: auto !important;
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        transform: none !important;
        box-sizing: border-box !important;
        overflow-x: hidden !important;
    }

    /* Finder inner containers */
    body.lgsnp-native #lg-ada-tub-finder .lg-bf-shell,
    body.lgsnp-native #lg-ada-tub-finder .lg-bf-inner,
    body.lgsnp-native #lg-ada-tub-finder .lg-bf-container {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: auto !important;
        margin-right: auto !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
        box-sizing: border-box !important;
    }

    /* Finder heading */
    body.lgsnp-native #lg-ada-tub-finder .lg-bf-head,
    body.lgsnp-native #lg-ada-tub-finder .lg-bf-header {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: auto !important;
        margin-right: auto !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
        box-sizing: border-box !important;
        text-align: center !important;
    }

    /* Filter control area */
    body.lgsnp-native #lg-ada-tub-finder .lg-bf-filter-toggle,
    body.lgsnp-native #lg-ada-tub-finder .lg-bf-mobile-filter,
    body.lgsnp-native #lg-ada-tub-finder .lg-bf-filters-toggle {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Results area must stay inside phone */
    body.lgsnp-native #lg-ada-tub-finder .lg-bf-results,
    body.lgsnp-native #lg-ada-tub-finder .lg-bf-products,
    body.lgsnp-native #lg-ada-tub-finder .lg-bf-grid {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        box-sizing: border-box !important;
    }

    /* ONE PRODUCT PER ROW ON MOBILE */
    body.lgsnp-native #lg-ada-tub-finder .lg-bf-grid {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 18px !important;
    }

    /* Product cards */
    body.lgsnp-native #lg-ada-tub-finder .lg-bf-card {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }

    body.lgsnp-native #lg-ada-tub-finder .lg-bf-card img {
        display: block !important;
        max-width: 100% !important;
        height: auto !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    /* Buttons remain finger-friendly */
    body.lgsnp-native #lg-ada-tub-finder .lg-bf-card a,
    body.lgsnp-native #lg-ada-tub-finder .lg-bf-card button {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
}

/* ==========================================================
   LG SHOWERS — GLOBAL MOBILE FINDER
   REAL WPCode finder selectors
   ========================================================== */

@media (max-width: 767px) {

    /* Entire finder stays inside mobile viewport */
    body.lgsnp-native #lg-ada-tub-finder .lg-bf-finder {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        left: auto !important;
        right: auto !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        transform: none !important;
        box-sizing: border-box !important;
        overflow-x: hidden !important;
    }

    /* Finder main desktop layout becomes one mobile column */
    body.lgsnp-native #lg-ada-tub-finder .lg-bf-layout {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }

    /* Mobile filter control */
    body.lgsnp-native #lg-ada-tub-finder .lg-mobile-filter-toggle:not(.lg-mobile-filter-toggle-legacy) {
        width: calc(100% - 32px) !important;
        max-width: none !important;
        margin-left: 16px !important;
        margin-right: 16px !important;
        box-sizing: border-box !important;
    }

    /* Results area */
    body.lgsnp-native #lg-ada-tub-finder .lg-results {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
        box-sizing: border-box !important;
        overflow: visible !important;
    }

    /* Results count */
    body.lgsnp-native #lg-ada-tub-finder .lg-results-header {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 0 18px !important;
        box-sizing: border-box !important;
    }

    body.lgsnp-native #lg-ada-tub-finder .lg-results-count {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }

    /* REAL PRODUCT GRID — ONE CARD PER ROW */
    body.lgsnp-native #lg-ada-tub-finder .lg-product-grid {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        gap: 18px !important;
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }

    /* REAL PRODUCT CARD */
    body.lgsnp-native #lg-ada-tub-finder .lg-product-card {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }

    /* Product image */
    body.lgsnp-native #lg-ada-tub-finder .lg-product-image {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    body.lgsnp-native #lg-ada-tub-finder .lg-product-image img {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        margin: 0 auto !important;
        object-fit: contain !important;
    }

    /* Product content */
    body.lgsnp-native #lg-ada-tub-finder .lg-product-content {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    body.lgsnp-native #lg-ada-tub-finder .lg-product-model {
        overflow-wrap: anywhere !important;
    }

    /* Product actions */
    body.lgsnp-native #lg-ada-tub-finder .lg-product-actions {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    body.lgsnp-native #lg-ada-tub-finder .lg-product-button {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
}

/* ==========================================================
   LG SHOWERS — MOBILE PRODUCT CARD POLISH
   One product per row, compact phone presentation.
   ========================================================== */

@media (max-width: 767px) {

    body.lgsnp-native #lg-ada-tub-finder .lg-results {
        padding-left: 14px !important;
        padding-right: 14px !important;
    }

    body.lgsnp-native #lg-ada-tub-finder .lg-results-header {
        margin-bottom: 16px !important;
    }

    body.lgsnp-native #lg-ada-tub-finder .lg-results-count {
        font-size: 26px !important;
        line-height: 1.15 !important;
    }

    body.lgsnp-native #lg-ada-tub-finder .lg-product-grid {
        gap: 16px !important;
    }

    body.lgsnp-native #lg-ada-tub-finder .lg-product-card {
        border-radius: 14px !important;
        overflow: hidden !important;
    }

    /* Compact product image area */
    body.lgsnp-native #lg-ada-tub-finder .lg-product-image {
        height: 270px !important;
        min-height: 270px !important;
        padding: 12px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        overflow: hidden !important;
    }

    body.lgsnp-native #lg-ada-tub-finder .lg-product-image img {
        width: 100% !important;
        height: 100% !important;
        max-width: 100% !important;
        max-height: 246px !important;
        object-fit: contain !important;
        object-position: center !important;
    }

    /* Compact product information */
    body.lgsnp-native #lg-ada-tub-finder .lg-product-content {
        padding: 20px !important;
    }

    body.lgsnp-native #lg-ada-tub-finder .lg-product-model {
        margin-bottom: 20px !important;
        font-size: 21px !important;
        line-height: 1.2 !important;
    }

    body.lgsnp-native #lg-ada-tub-finder .lg-product-spec {
        margin-bottom: 13px !important;
        font-size: 16px !important;
        line-height: 1.4 !important;
    }

    body.lgsnp-native #lg-ada-tub-finder .lg-product-actions {
        gap: 10px !important;
        margin-top: 20px !important;
    }

    body.lgsnp-native #lg-ada-tub-finder .lg-product-button {
        min-height: 50px !important;
        padding: 13px 16px !important;
        font-size: 16px !important;
        line-height: 1.2 !important;
    }
}

@media (max-width: 420px) {

    body.lgsnp-native #lg-ada-tub-finder .lg-product-image {
        height: 240px !important;
        min-height: 240px !important;
    }

    body.lgsnp-native #lg-ada-tub-finder .lg-product-image img {
        max-height: 216px !important;
    }

    body.lgsnp-native #lg-ada-tub-finder .lg-product-content {
        padding: 18px !important;
    }

    body.lgsnp-native #lg-ada-tub-finder .lg-product-model {
        font-size: 19px !important;
    }
}

/* ==========================================================
   LG SHOWERS — FINAL MOBILE PRODUCT CARD POLISH
   Compact scan-friendly product presentation.
   ========================================================== */

@media (max-width: 767px) {

    body.lgsnp-native #lg-ada-tub-finder .lg-product-image {
        height: 230px !important;
        min-height: 230px !important;
        padding: 10px 14px !important;
    }

    body.lgsnp-native #lg-ada-tub-finder .lg-product-image img {
        width: auto !important;
        height: 100% !important;
        max-width: 100% !important;
        max-height: 210px !important;
        object-fit: contain !important;
    }

    body.lgsnp-native #lg-ada-tub-finder .lg-product-content {
        padding: 18px !important;
    }

    body.lgsnp-native #lg-ada-tub-finder .lg-product-model {
        margin: 0 0 16px !important;
        font-size: 20px !important;
        line-height: 1.2 !important;
    }

    body.lgsnp-native #lg-ada-tub-finder .lg-product-spec {
        margin: 0 0 10px !important;
        font-size: 15px !important;
        line-height: 1.35 !important;
    }

    body.lgsnp-native #lg-ada-tub-finder .lg-product-actions {
        margin-top: 16px !important;
        gap: 8px !important;
    }

    body.lgsnp-native #lg-ada-tub-finder .lg-product-button {
        min-height: 48px !important;
        padding: 12px 14px !important;
        font-size: 15px !important;
    }
}

@media (max-width: 420px) {

    body.lgsnp-native #lg-ada-tub-finder .lg-product-image {
        height: 205px !important;
        min-height: 205px !important;
    }

    body.lgsnp-native #lg-ada-tub-finder .lg-product-image img {
        max-height: 185px !important;
    }

    body.lgsnp-native #lg-ada-tub-finder .lg-product-content {
        padding: 16px !important;
    }

    body.lgsnp-native #lg-ada-tub-finder .lg-product-model {
        font-size: 18px !important;
    }

    body.lgsnp-native #lg-ada-tub-finder .lg-product-spec {
        font-size: 15px !important;
    }
}

/* ==========================================================
   GLOBAL FINDER SECTION SPACING — MOBILE
   ========================================================== */

@media (max-width: 767px) {

    body.lgsnp-native:not(.page-id-8880) .lg-bf-finder {
        padding-top: 34px !important;
    }

    body.lgsnp-native .lg-bf-intro {
        margin-top: 0 !important;
    }

}

/* ==========================================================
   GLOBAL HELP + TRUST — MOBILE
   ========================================================== */

@media (max-width:767px){

    body.lgsnp-native .lgsnp-help{
        grid-template-columns:1fr;
        gap:14px;
        padding:20px 18px;
    }

    body.lgsnp-native .lgsnp-help-kicker{
        font-size:10px;
        letter-spacing:.9px;
    }

    body.lgsnp-native .lgsnp-help h2{
        font-size:21px;
        line-height:1.2;
    }

    body.lgsnp-native .lgsnp-help p{
        font-size:13px;
        line-height:1.5;
    }

    body.lgsnp-native .lgsnp-help-btn{
        width:100%;
        min-width:0;
        min-height:50px;
        padding:12px 16px;
        font-size:12px;
    }

    body.lgsnp-native .lgsnp-trust{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

    body.lgsnp-native .lgsnp-trust > div{
        min-height:76px;
        padding:11px 6px;
    }

    body.lgsnp-native .lgsnp-trust > div:nth-child(3){
        border-left:0;
        border-top:1px solid #d9e6ee;
    }

    body.lgsnp-native .lgsnp-trust > div:nth-child(4){
        border-top:1px solid #d9e6ee;
    }

    body.lgsnp-native .lgsnp-trust strong{
        font-size:10px;
    }

    body.lgsnp-native .lgsnp-trust span{
        font-size:9px;
    }

    body.lgsnp-native .lgsnp-trust + [id$="-finder"]{
        margin-top:34px;
    }

}

@media (max-width:370px){

    /* Keep the four-card trust section at 2 columns
       even on very small mobile screens. */

    body.lgsnp-native .lgsnp-trust{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

    body.lgsnp-native .lgsnp-trust > div + div{
        border-left:1px solid #d9e6ee;
    }

    body.lgsnp-native .lgsnp-trust > div:nth-child(3){
        border-left:0;
        border-top:1px solid #d9e6ee;
    }

    body.lgsnp-native .lgsnp-trust > div:nth-child(4){
        border-top:1px solid #d9e6ee;
    }

}