/* =====================================================
   JOUSH TREND - LUXURY PRODUCT CARD (dark green info)
   Load AFTER shop.css / dress.css
===================================================== */

.product-card{
    background:#023020;
    overflow:hidden;
    transition:transform .45s cubic-bezier(.2,.7,.2,1),
               box-shadow .45s ease,
               border-color .45s ease;
}
.product-card:hover{
    transform:translateY(-6px);
    box-shadow:0 24px 44px -18px rgba(2,48,32,.55);
    border-color:#b08a45;
}

.product-card .product-image{
    transition:transform .9s cubic-bezier(.2,.7,.2,1);
}
.product-card:hover .product-image{
    transform:scale(1.05);
}

/* ---------- INFO AREA (was white) ---------- */
.product-card .product-info{
    --mx:50%;
    --my:50%;
    position:relative;
    overflow:hidden;
    padding:24px 56px 22px 20px;
    text-align:center;
    background:linear-gradient(160deg,#023020 0%,#06402c 100%);
    isolation:isolate;
}

/* gold glow that follows the mouse */
.product-card .product-info::after{
    content:"";
    position:absolute;
    inset:0;
    z-index:-1;
    background:radial-gradient(180px circle at var(--mx) var(--my),
               rgba(212,180,106,.28),transparent 70%);
    opacity:0;
    transition:opacity .4s ease;
}
.product-card .product-info:hover::after{
    opacity:1;
}

/* gold line growing from the centre */
.product-card .product-info::before{
    content:"";
    position:absolute;
    top:0;
    left:50%;
    width:0;
    height:2px;
    background:#d4b46a;
    transform:translateX(-50%);
    transition:width .5s cubic-bezier(.2,.7,.2,1);
}
.product-card:hover .product-info::before{
    width:75%;
}

.product-card .product-category{
    display:inline-block;
    font-size:12px;
    letter-spacing:.22em;
    text-transform:uppercase;
    color:#d4b46a;
    font-weight:500;
    transition:letter-spacing .4s ease;
}
.product-card:hover .product-category{
    letter-spacing:.32em;
}

.product-card .product-name{
    display:inline-block;
    margin:8px 0 6px;
    padding-bottom:3px;
    font-family:'Cormorant Garamond',Georgia,serif;
    font-size:24px;
    font-weight:600;
    line-height:1.2;
    color:#f6efdd;
    background:linear-gradient(#d4b46a,#d4b46a) 50% 100% / 0 1px no-repeat;
    transition:background-size .45s ease;
}
.product-card:hover .product-name{
    background-size:100% 1px;
}

.product-card .product-price{
    font-size:20px;
    font-weight:600;
    color:#e8cf8f;
    transition:transform .4s ease;
}
.product-card:hover .product-price{
    transform:scale(1.07);
}
.product-card .product-price small{
    font-size:12px;
    font-weight:500;
    letter-spacing:.08em;
    color:#b9c9be;
}

/* round arrow button (added by JS) */
.product-card .info-go{
    position:absolute;
    right:16px;
    top:50%;
    width:36px;
    height:36px;
    border-radius:50%;
    border:1px solid #d4b46a;
    background:transparent;
    color:#d4b46a;
    display:grid;
    place-items:center;
    cursor:pointer;
    font-size:15px;
    opacity:0;
    transform:translate(18px,-50%);
    transition:opacity .35s ease,transform .45s cubic-bezier(.2,.7,.2,1),
               background .3s ease,color .3s ease;
}
.product-card:hover .info-go,
.product-card .info-go:focus-visible{
    opacity:1;
    transform:translate(0,-50%);
}
.product-card .info-go:hover{
    background:#d4b46a;
    color:#023020;
}

/* touch phones: no hover, so always show arrow */
@media (hover:none){
    .product-card .info-go{
        opacity:1;
        transform:translate(0,-50%);
    }
}

/* ---------- ADD TO BAG states ---------- */
.add-to-cart-btn{
    transition:background .3s ease,color .3s ease;
}
.add-to-cart-btn.is-added{
    background:#b08a45 !important;
    color:#fff !important;
}
.add-to-cart-btn.is-loading{
    opacity:.7;
    pointer-events:none;
}

/* ---------- TOAST ---------- */
.joush-toast{
    position:fixed;
    left:50%;
    bottom:28px;
    transform:translate(-50%,140px);
    background:#023020;
    color:#fff;
    padding:14px 24px;
    border:1px solid #d4b46a;
    border-radius:40px;
    font-family:'Montserrat',sans-serif;
    font-size:13px;
    letter-spacing:.05em;
    z-index:9000;
    transition:transform .45s cubic-bezier(.2,.7,.2,1);
}
.joush-toast.show{
    transform:translate(-50%,0);
}

@media (prefers-reduced-motion:reduce){
    .product-card,
    .product-card *{
        transition:none !important;
    }
}

/* =====================================================
   HOVER: image covers the FULL card, text stays on top
===================================================== */
@media (hover:hover){

    .product-card{
        position:relative;
    }

    /* full-card image layer (created by JS) */
    .product-card .card-bg{
        position:absolute;
        inset:0;
        z-index:0;
        pointer-events:none;
        background-size:cover;
        background-position:center top;
        background-repeat:no-repeat;
        opacity:0;
        transform:scale(1.04);
        transition:opacity .55s ease,transform 1s cubic-bezier(.2,.7,.2,1);
    }
    /* dark fade at the bottom so the text is readable */
    .product-card .card-bg::after{
        content:"";
        position:absolute;
        inset:0;
        background:linear-gradient(to top,
                   rgba(2,48,32,.95) 0%,
                   rgba(2,48,32,.65) 24%,
                   rgba(2,48,32,0) 52%);
    }
    .product-card:hover .card-bg{
        opacity:1;
        transform:scale(1.08);
    }

    /* top image + buttons sit above the layer */
    .product-card .product-image-wrap{
        position:relative;
        z-index:1;
        background:transparent;
    }
    .product-card .product-image{
        transition:opacity .55s ease,transform 1s cubic-bezier(.2,.7,.2,1);
    }
    .product-card:hover .product-image{
        opacity:0;
    }

    /* info area becomes see-through on hover, text unchanged */
    .product-card .product-info{
        z-index:1;
        background:#023020;
        transition:background-color .55s ease;
    }
    .product-card:hover .product-info{
        background:rgba(2,48,32,0);
    }
}

/* whole card is clickable (product detail page) */
.product-card{
    cursor:pointer;
}

/* image wrap oda hover area ah text area varaikum neettu */
.product-card .product-image-wrap {
    overflow: visible;              /* extended area clip aagakoodathu */
}

.product-card .product-image-wrap .product-image {
    border-radius: 10px;            /* overflow visible aanadhala image corner clip */
}

.product-card .product-image-wrap::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;                      /* image keela irundhu start */
    height: 135px;                  /* text area height ku match pannunga */
}

/* text area mela mouse pona image wrap hover ku pogum */
.product-card .product-info {
    pointer-events: none;
}

.product-card .product-info .info-go {
    pointer-events: auto;           /* arrow button click aaganum */
}

.product-card:hover .product-info::after {
    opacity: 1;
}

/* =====================================================
   Add to Bag + Quick View: hover-la mattum theriyanum
===================================================== */
@media (hover:hover){

    .product-card:not(:hover):not(:focus-within) .add-to-cart-btn,
    .product-card:not(:hover):not(:focus-within) .quick-view,
    .product-card:not(:hover):not(:focus-within) .quick-view a{
        display:none !important;
        opacity:0 !important;
        visibility:hidden !important;
        pointer-events:none !important;
    }

}

/* =====================================================
   Normal-um hover look: image full card + transparent green
===================================================== */

.product-card{
    position:relative;
}

/* full-card image layer eppavum theriyum */
.product-card .card-bg{
    position:absolute;
    inset:0;
    z-index:0;
    pointer-events:none;
    background-size:cover;
    background-position:center top;
    background-repeat:no-repeat;
    opacity:1;
    transform:none;
}
.product-card:hover .card-bg{
    transform:scale(1.04);
}

/* green gradient (idhu dhaan andha transparent green) */
.product-card .card-bg::after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(to top,
               rgba(2,48,32,.95) 0%,
               rgba(2,48,32,.65) 24%,
               rgba(2,48,32,0) 52%);
}

/* mela irukkura image maraindhu, card-bg image theriyum */
.product-card .product-image-wrap{
    position:relative;
    z-index:1;
    background:transparent;
}
.product-card .product-image{
    opacity:0;
}

/* info area: eppavum transparent */
.product-card .product-info,
.product-card:hover .product-info{
    z-index:1;
    background:transparent;
}

/* =====================================================
   Image wrap-la: image, badge, wishlist thavira ellaam
   hover-la mattum theriyum (Add to Bag, Quick View, etc.)
===================================================== */
@media (hover:hover){

    .product-card:not(:hover):not(:focus-within) .product-image-wrap > *:not(.product-image-link):not(.product-badge):not(.wishlist-btn){
        display:none !important;
    }

}

/* arrow button remove */
.product-card .info-go{
    display:none !important;
}

/* arrow-ku vachirundha right padding remove, text center-la varum */
.product-card .product-info{
    padding:24px 20px 22px 20px;
}