/*
====================================================
TrendBridge UI Framework
Module : Product Cards
Version : 1.0.0
====================================================
*/

/* ===========================
Card
=========================== */

.ab-pgrid-card{

position:relative;

overflow:hidden;

border-radius:22px;

transition:
transform .35s ease,
box-shadow .35s ease,
border-color .35s ease;

border:1px solid rgba(0,0,0,.06);

background:#fff;

}

.ab-pgrid-card:hover{

transform:translateY(-8px);

box-shadow:
0 18px 45px rgba(0,0,0,.12);

}

/* ===========================
Media
=========================== */

.ab-pgrid-media{

position:relative;

overflow:hidden;

border-radius:18px;

background:#fafafa;

}

.ab-pgrid-img-primary,
.ab-pgrid-img-hover{

transition:
transform .55s ease,
opacity .45s ease;

}

.ab-pgrid-card:hover
.ab-pgrid-img-primary{

transform:scale(1.08);

}

.ab-pgrid-img-hover{

opacity:0;

}

.ab-pgrid-card:hover
.ab-pgrid-img-hover{

opacity:1;

}

.ab-pgrid-card:hover
.ab-pgrid-img-primary{

opacity:0;

}

/* ===========================
Add Button
=========================== */

.ab-pgrid-add-btn{

position:absolute;

bottom:18px;

left:50%;

transform:
translateX(-50%)
translateY(70px);

opacity:0;

transition:.35s;

border-radius:14px;

}

.ab-pgrid-card:hover
.ab-pgrid-add-btn{

opacity:1;

transform:
translateX(-50%)
translateY(0);

}

/* ===========================
Badge
=========================== */

.ab-pgrid-badge{

border-radius:50px;

padding:7px 12px;

font-weight:700;

letter-spacing:.3px;

box-shadow:
0 8px 20px rgba(0,0,0,.15);

}

/* ===========================
Name
=========================== */

.ab-pgrid-name{

transition:.25s;

}

.ab-pgrid-card:hover
.ab-pgrid-name{

color:#F5B51D;

}

/* ===========================
Price
=========================== */

.ab-pgrid-price{

font-weight:700;

transition:.25s;

}

.ab-pgrid-card:hover
.ab-pgrid-price{

transform:scale(1.05);

}

/* ===========================
Swatches
=========================== */

.ab-pgrid-swatch{

transition:.25s;

cursor:pointer;

}

.ab-pgrid-swatch:hover{

transform:scale(1.2);

}

/* ===========================
Shine
=========================== */

.ab-pgrid-card::before{

content:"";

position:absolute;

top:0;

left:-140%;

width:70%;

height:100%;

background:
linear-gradient(
90deg,
transparent,
rgba(255,255,255,.35),
transparent);

transform:skewX(-20deg);

transition:.8s;

pointer-events:none;

}

.ab-pgrid-card:hover::before{

left:170%;

}
/* ===========================
Reveal
=========================== */

.ab-pgrid-card{

opacity:0;

transform:translateY(30px);

}

.ab-pgrid-card.tb-card-visible{

opacity:1;

transform:translateY(0);

transition:
opacity .6s ease,
transform .6s ease;

}

/* ===========================
Touch
=========================== */

.ab-pgrid-card.tb-touch{

transform:translateY(-5px);

}

/* ===========================
Ripple
=========================== */

.ab-pgrid-add-btn{

overflow:hidden;

position:absolute;

}

.tb-ripple{

position:absolute;

width:10px;

height:10px;

background:rgba(255,255,255,.55);

border-radius:50%;

transform:translate(-50%,-50%);

animation:tbRipple .6s linear;

pointer-events:none;

}

@keyframes tbRipple{

from{

width:0;

height:0;

opacity:.7;

}

to{

width:220px;

height:220px;

opacity:0;

}

}
/* ==================================================
TrendBridge Product Cards V2
================================================== */

/* Premium Hover */

.ab-pgrid-card{

backface-visibility:hidden;

transform-style:preserve-3d;

}

.ab-pgrid-card:hover{

transform:
translateY(-10px)
scale(1.015);

}

/* Image */

.ab-pgrid-media{

background:#f8f8f8;

}

.ab-pgrid-card:hover .ab-pgrid-img-primary{

transform:scale(1.12);

}

/* Info */

.ab-pgrid-info{

transition:.35s;

}

.ab-pgrid-card:hover .ab-pgrid-info{

transform:translateY(-4px);

}

/* Button */

.ab-pgrid-add-btn{

box-shadow:
0 10px 25px rgba(0,0,0,.18);

}

.ab-pgrid-add-btn:hover{

transform:
translateX(-50%)
translateY(0)
scale(1.06);

}

/* Sale Badge */

.ab-sale-badge{

animation:tbBadge 2.5s infinite;

}

@keyframes tbBadge{

0%,100%{

transform:scale(1);

}

50%{

transform:scale(1.08);

}

}

/* Swatches */

.ab-pgrid-swatch{

box-shadow:
0 0 0 2px #fff;

}

.ab-pgrid-swatch:hover{

box-shadow:
0 0 0 2px #F5B51D;

}
/* ==================================================
TrendBridge Product Cards V3
================================================== */

/* Glass Card */

.ab-pgrid-card{

backdrop-filter:blur(14px);

-webkit-backdrop-filter:blur(14px);

overflow:hidden;

}

/* Gradient Border */

.ab-pgrid-card::after{

content:"";

position:absolute;

inset:0;

padding:1px;

border-radius:22px;

background:
linear-gradient(
135deg,
rgba(245,181,29,.35),
transparent,
rgba(245,181,29,.15));

-webkit-mask:
linear-gradient(#fff 0 0) content-box,
linear-gradient(#fff 0 0);

-webkit-mask-composite:xor;

mask-composite:exclude;

pointer-events:none;

opacity:0;

transition:.35s;

}

.ab-pgrid-card:hover::after{

opacity:1;

}

/* Image */

.ab-pgrid-media img{

will-change:transform;

}

/* Premium Badge */

.ab-pgrid-badge{

backdrop-filter:blur(8px);

-webkit-backdrop-filter:blur(8px);

}

/* Price */

.ab-pgrid-price{

font-size:1.08rem;

}

/* Button */

.ab-pgrid-add-btn{

transition:
transform .30s,
box-shadow .30s,
background .30s;

}

.ab-pgrid-add-btn:hover{

box-shadow:

0 14px 35px rgba(245,181,29,.28);

}

/* Swatches */

.ab-pgrid-swatch{

transition:
transform .25s,
box-shadow .25s;

}

.ab-pgrid-swatch:hover{

transform:scale(1.25);

}

/* Shine */

.ab-pgrid-card:hover::before{

animation:tbShine .9s;

}

@keyframes tbShine{

from{

left:-120%;

}

to{

left:180%;

}

}
/*==================================================
TrendBridge Universal Product Cards
يطبق نفس الـ Hover على جميع كروت المنتجات
==================================================*/

/* جميع أنواع الكروت */

:is(
.ab-pgrid-card,
.ab-related-card,
.ab-featured-card,
.ab-product-card,
.ab-product-item,
.product-card,
.product-item,
.product-box
){

position:relative;
overflow:hidden;
border-radius:22px;

transition:
transform .35s ease,
box-shadow .35s ease,
border-color .35s ease;

}

/* Hover */

:is(
.ab-pgrid-card,
.ab-related-card,
.ab-featured-card,
.ab-product-card,
.ab-product-item,
.product-card,
.product-item,
.product-box
):hover{

transform:
translateY(-10px)
scale(1.015);

box-shadow:
0 18px 45px rgba(0,0,0,.12);

}

/* الصورة */

:is(
.ab-pgrid-card,
.ab-related-card,
.ab-featured-card,
.ab-product-card,
.ab-product-item,
.product-card,
.product-item,
.product-box
):hover
.ab-pgrid-img-primary,

:is(
.ab-pgrid-card,
.ab-related-card,
.ab-featured-card,
.ab-product-card,
.ab-product-item,
.product-card,
.product-item,
.product-box
):hover
.product-image img{

transform:scale(1.12);

}

/* اسم المنتج */

:is(
.ab-pgrid-card,
.ab-related-card,
.ab-featured-card,
.ab-product-card,
.ab-product-item,
.product-card,
.product-item,
.product-box
):hover
.ab-pgrid-name,

:is(
.ab-pgrid-card,
.ab-related-card,
.ab-featured-card,
.ab-product-card,
.ab-product-item,
.product-card,
.product-item,
.product-box
):hover
.product-title,

:is(
.ab-pgrid-card,
.ab-related-card,
.ab-featured-card,
.ab-product-card,
.ab-product-item,
.product-card,
.product-item,
.product-box
):hover
h3,

:is(
.ab-pgrid-card,
.ab-related-card,
.ab-featured-card,
.ab-product-card,
.ab-product-item,
.product-card,
.product-item,
.product-box
):hover
h4{

color:#F5B51D;

transform:scale(1.03);

transition:.25s;

}

/* السعر */

:is(
.ab-pgrid-card,
.ab-related-card,
.ab-featured-card,
.ab-product-card,
.ab-product-item,
.product-card,
.product-item,
.product-box
):hover
.ab-pgrid-price,

:is(
.ab-pgrid-card,
.ab-related-card,
.ab-featured-card,
.ab-product-card,
.ab-product-item,
.product-card,
.product-item,
.product-box
):hover
.product-price{

transform:scale(1.05);

}

/* معلومات المنتج */

:is(
.ab-pgrid-card,
.ab-related-card,
.ab-featured-card,
.ab-product-card,
.ab-product-item,
.product-card,
.product-item,
.product-box
):hover
.ab-pgrid-info,

:is(
.ab-pgrid-card,
.ab-related-card,
.ab-featured-card,
.ab-product-card,
.ab-product-item,
.product-card,
.product-item,
.product-box
):hover
.product-info{

transform:translateY(-4px);

transition:.35s;

}
/* ==========================================
TrendBridge Product List Hover
========================================== */

.ab-pgrid-card:hover .ab-plist-name{

color:#F5B51D;

transform:scale(1.03);

transition:.25s ease;

}

.ab-plist-name{

transition:
color .25s ease,
transform .25s ease;

transform-origin:right center;

}

.ab-plist-price{

transition:transform .25s ease;

}

.ab-pgrid-card:hover .ab-plist-price{

transform:scale(1.05);

}

.ab-price-old{

transition:transform .25s ease,opacity .25s ease;

}

.ab-pgrid-card:hover .ab-price-old{

transform:scale(1.05);

opacity:.85;

}
/* ==========================================
TrendBridge Product List Hover
========================================== */

.ab-plist-card{

transition:
transform .35s ease,
box-shadow .35s ease;

}

.ab-plist-card:hover{

transform:
translateY(-10px)
scale(1.015);

box-shadow:
0 18px 45px rgba(0,0,0,.12);

}

.ab-plist-card:hover .ab-plist-name{

color:#F5B51D;

transform:scale(1.03);

}

.ab-plist-name{

transition:
color .25s ease,
transform .25s ease;

display:inline-block;

}

.ab-plist-card:hover .ab-plist-price{

transform:scale(1.05);

}

.ab-plist-price,
.ab-price-old{

transition:transform .25s ease;

display:inline-block;

}

.ab-plist-card:hover .ab-price-old{

transform:scale(1.05);

}