
/* ==========================================================
   PADIDAR HOME PRODUCT/SERVICE CARD GLASS TEST V1
   6 visible cards + no frame + red glass hover
   ========================================================== */


/* ==========================================================
   RAIL
   ========================================================== */

html body.home.pf-site
.pf-cards-seven{

    gap:16px !important;

    padding:
        10px 2px 18px !important;

    box-sizing:border-box !important;
}


/*
 * DESKTOP:
 * exactly 6 cards inside visible width.
 *
 * 5 spaces × 16px = 80px
 */
@media (min-width:1200px){

    html body.home.pf-site
    .pf-cards-seven > .pf-product-card{

        flex:
            0 0 calc((100% - 80px) / 6) !important;

        width:
            calc((100% - 80px) / 6) !important;

        min-width:
            calc((100% - 80px) / 6) !important;

        max-width:
            calc((100% - 80px) / 6) !important;

    }

}


/* medium desktop / tablet remains comfortable */

@media (min-width:801px) and (max-width:1199px){

    html body.home.pf-site
    .pf-cards-seven{

        gap:14px !important;
    }

    html body.home.pf-site
    .pf-cards-seven > .pf-product-card{

        flex:
            0 0 calc((100% - 42px) / 4) !important;

        width:
            calc((100% - 42px) / 4) !important;

        min-width:
            calc((100% - 42px) / 4) !important;

        max-width:
            calc((100% - 42px) / 4) !important;
    }

}


/* ==========================================================
   NORMAL CARD
   No visible frame
   ========================================================== */

html body.home.pf-site
.pf-cards-seven
> .pf-product-card{

    position:relative !important;

    isolation:isolate !important;

    box-sizing:border-box !important;

    overflow:hidden !important;

    border:
        1px solid transparent !important;

    border-radius:
        14px !important;

    background:
        rgba(255,255,255,.84) !important;

    box-shadow:
        0 5px 18px rgba(6,44,82,.035) !important;

    transform:
        translateY(0)
        scale(1) !important;

    transition:
        transform .30s cubic-bezier(.2,.7,.25,1),
        border-color .30s ease,
        box-shadow .30s ease,
        background .30s ease !important;
}


/*
 * very soft red glass layer
 * invisible normally
 */
html body.home.pf-site
.pf-cards-seven
> .pf-product-card::after{

    content:"" !important;

    position:absolute !important;

    inset:0 !important;

    z-index:20 !important;

    pointer-events:none !important;

    border-radius:
        inherit !important;

    opacity:0 !important;

    background:
        linear-gradient(
            135deg,
            rgba(239,29,52,.105) 0%,
            rgba(239,29,52,.055) 42%,
            rgba(239,29,52,.025) 100%
        ) !important;

    transition:
        opacity .30s ease !important;
}


/* ==========================================================
   IMAGE
   ========================================================== */

html body.home.pf-site
.pf-cards-seven
> .pf-product-card
> img{

    transition:
        transform .42s cubic-bezier(.2,.7,.25,1),
        filter .35s ease !important;
}


/* ==========================================================
   HOVER / KEYBOARD FOCUS
   ========================================================== */

html body.home.pf-site
.pf-cards-seven
> .pf-product-card:hover,

html body.home.pf-site
.pf-cards-seven
> .pf-product-card:focus-visible{

    transform:
        translateY(-5px)
        scale(1.015) !important;

    border-color:
        rgba(238,27,47,.63) !important;

    background:
        rgba(255,250,251,.94) !important;

    box-shadow:
        0 15px 33px rgba(162,15,31,.12),
        0 0 0 1px rgba(238,27,47,.08),
        0 0 25px rgba(238,27,47,.075) !important;

    outline:none !important;
}


html body.home.pf-site
.pf-cards-seven
> .pf-product-card:hover::after,

html body.home.pf-site
.pf-cards-seven
> .pf-product-card:focus-visible::after{

    opacity:1 !important;
}


/* image reacts very softly */

html body.home.pf-site
.pf-cards-seven
> .pf-product-card:hover
> img,

html body.home.pf-site
.pf-cards-seven
> .pf-product-card:focus-visible
> img{

    transform:
        scale(1.035) !important;

    filter:
        saturate(1.07)
        contrast(1.02)
        brightness(1.015) !important;
}


/* ==========================================================
   CLICK FEEDBACK
   ========================================================== */

html body.home.pf-site
.pf-cards-seven
> .pf-product-card:active{

    transform:
        translateY(-1px)
        scale(.992) !important;

    border-color:
        rgba(238,27,47,.82) !important;

    box-shadow:
        0 7px 18px rgba(162,15,31,.13) !important;

    transition-duration:
        .09s !important;
}


/* ==========================================================
   CTA INSIDE CARD
   Preserve red identity, slightly glassier
   ========================================================== */

html body.home.pf-site
.pf-cards-seven
> .pf-product-card
> div
> span{

    position:relative !important;

    z-index:25 !important;

    border:
        1px solid rgba(255,255,255,.20) !important;

    box-shadow:
        0 5px 12px rgba(225,22,42,.10) !important;

    transition:
        transform .25s ease,
        box-shadow .25s ease !important;
}


html body.home.pf-site
.pf-cards-seven
> .pf-product-card:hover
> div
> span{

    transform:
        translateY(-1px) !important;

    box-shadow:
        0 7px 16px rgba(225,22,42,.18) !important;
}


/* ==========================================================
   MOBILE
   Keep current horizontal mobile UX.
   Only apply visual hover/focus styling.
   ========================================================== */

@media (max-width:800px){

    html body.home.pf-site
    .pf-cards-seven{

        gap:12px !important;
    }

    /*
     * Width is intentionally NOT changed here.
     * Existing mobile rules remain in control.
     */

    html body.home.pf-site
    .pf-cards-seven
    > .pf-product-card{

        border:
            1px solid transparent !important;

        border-radius:
            12px !important;
    }

}


/* ==========================================================
   END PADIDAR HOME PRODUCT/SERVICE CARD GLASS TEST V1
   ========================================================== */

