/* =========================
GRID
========================= */

.sp-deal-grid{
display:grid;

grid-template-columns:
repeat(auto-fit,minmax(280px,1fr));

gap:22px;
}

/* =========================
CARD
========================= */

.sp-deal-card{
background:#fff;

border-radius:28px;

overflow:hidden;

position:relative;

box-shadow:
0 12px 35px rgba(15,23,42,.06);

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

border:1px solid #eef2f7;
}

.sp-deal-card:hover{
transform:translateY(-6px);

box-shadow:
0 24px 50px rgba(15,23,42,.12);
}

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

.sp-deal-image-wrap{
position:relative;

height:190px;

background:
linear-gradient(
180deg,
#f8fafc 0%,
#eff6ff 100%
);

display:flex;
align-items:center;
justify-content:center;

overflow:hidden;
}

.sp-deal-image-wrap img{
width:100%;
height:100%;

object-fit:contain;

padding:20px;

transition:transform .35s ease;
}

.sp-deal-card:hover
.sp-deal-image-wrap img{
transform:scale(1.05);
}

/* =========================
TOP ACTIONS
========================= */

.sp-deal-top-actions{
position:absolute;

top:14px;
left:14px;

z-index:20;
}

/* save */
.sp-deal-save{
width:42px;
height:42px;

border-radius:50%;

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

backdrop-filter:blur(12px);

display:flex;
align-items:center;
justify-content:center;

cursor:pointer;

font-size:18px;

box-shadow:
0 10px 25px rgba(15,23,42,.12);

transition:.25s ease;
}

.sp-deal-save:hover{
transform:scale(1.08);
}

.sp-deal-save.saved{
background:#fee2e2;
}

/* =========================
FLOATING DISCOUNT
========================= */

.sp-deal-floating-discount{
position:absolute;

left:50%;
top:175px;

transform:translateX(-50%);

min-width:80px;
padding:0 14px;

height:28px;

border-radius:999px;

background:
linear-gradient(
135deg,
#dc2626,
#ef4444
);

display:inline-flex;
align-items:center;
justify-content:center;

color:#fff;

font-size:12px;
font-weight:700;

letter-spacing:.4px;

white-space:nowrap;

z-index:15;

box-shadow:
0 12px 30px rgba(220,38,38,.25);
}

/* =========================
STORE ROW
========================= */

.sp-deal-store-row{
display:flex;
align-items:center;
gap:10px;

margin-bottom:14px;

padding-bottom:14px;

border-bottom:
1px solid #eef2f7;
}

/* logo */
.sp-deal-store-logo{
width:42px;
height:42px;

min-width:42px;

border-radius:50%;

background:#fff;

display:flex;
align-items:center;
justify-content:center;

padding:8px;

border:1px solid #eef2f7;

box-shadow:
0 8px 18px rgba(15,23,42,.06);
}

.sp-deal-store-logo img{
max-width:100%;
max-height:100%;

object-fit:contain;
}

/* store */
.sp-deal-store{
font-size:12px;
font-weight:700;
color:#2563eb;
}

/* inline discount */
.sp-deal-inline-discount{
margin-left:auto;

padding:7px 10px;

border-radius:999px;

background:#dc2626;
color:#fff;

font-size:10px;
font-weight:800;

letter-spacing:.3px;
}

/* =========================
SHARE
========================= */

.sp-deal-share{
margin-left:auto;

width:34px;
height:34px;

border-radius:12px;

background:#eff6ff;

display:flex;
align-items:center;
justify-content:center;

cursor:pointer;

transition:
transform .25s ease,
background .25s ease;
}

.sp-deal-share:hover{
transform:translateY(-2px);

background:#dbeafe;
}

/* svg */
.sp-deal-share svg{
width:16px;
height:16px;

fill:#2563eb;

transition:.25s ease;
}

/* hover */
.sp-deal-share:hover svg{
transform:scale(1.08);
}

/* =========================
BADGE
========================= */

.sp-deal-badge{
position:absolute;

top:16px;
right:16px;

padding:8px 12px;

border-radius:999px;

font-size:11px;
font-weight:800;

z-index:5;
}

.sp-deal-badge.hot{
background:#fff7ed;
color:#ea580c;
}

.sp-deal-badge.trending{
background:#eff6ff;
color:#2563eb;
}

.sp-deal-badge.featured{
background:#ecfeff;
color:#0891b2;
}

/* =========================
BODY
========================= */

.sp-deal-body{
padding:
34px 18px 18px;
}

/* =========================
TITLE
========================= */

.sp-deal-title{
font-size:15px;
line-height:1.5;
font-weight:800;

color:#0f172a;

margin:0 0 14px;

overflow:hidden;

display:-webkit-box;
-webkit-line-clamp:2;
-webkit-box-orient:vertical;

min-height:46px;
}

/* =========================
PRICING
========================= */

.sp-deal-pricing{
display:flex;
align-items:center;
justify-content:space-between;
gap:14px;

margin-bottom:18px;
}

/* price left */
.sp-deal-price-left{
display:flex;
align-items:center;
gap:10px;
flex-wrap:wrap;
}

.sp-deal-new-price{
font-size:26px;
font-weight:900;
color:#111827;
}

.sp-deal-old-price{
font-size:14px;
color:#94a3b8;
text-decoration:line-through;
}

/* =========================
META
========================= */

.sp-deal-meta{
display:flex;
justify-content:space-between;

font-size:12px;
font-weight:700;

color:#64748b;

margin-bottom:18px;
}

.sp-deal-users{
font-size:12px;
font-weight:800;

color:#64748b;

white-space:nowrap;
}

/* =========================
ACTIONS
========================= */

.sp-deal-actions{
display:flex;
justify-content:space-between;
align-items:center;

margin-bottom:18px;
}

.sp-deal-save,
.sp-deal-share{
cursor:pointer;

font-size:13px;
font-weight:700;

color:#475569;

transition:.2s ease;
}

.sp-deal-save:hover,
.sp-deal-share:hover{
color:#2563eb;
}

/* =========================
BUTTON
========================= */

.sp-deal-btn{
display:flex;
align-items:center;
justify-content:center;

width:100%;
height:54px;

border-radius:18px;

background:
linear-gradient(
135deg,
#2563eb,
#0ea5e9
);

color:#fff;

font-size:14px;
font-weight:800;

text-decoration:none;

transition:.25s ease;
}

.sp-deal-btn:hover{
transform:translateY(-2px);
}

/* =========================
DEAL TOAST
========================= */

.sp-deal-toast{
position:fixed;

left:50%;
bottom:24px;

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

background:#111827;
color:#fff;

padding:14px 18px;

border-radius:14px;

font-size:13px;
font-weight:700;

z-index:99999;

opacity:0;

transition:.28s ease;

box-shadow:
0 18px 40px rgba(0,0,0,.22);
}

.sp-deal-toast.show{
opacity:1;

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

/* =========================
TABLET
========================= */

@media(max-width:1100px){

.sp-deal-grid{
grid-template-columns:repeat(3,1fr);
}

}

/* =========================
MOBILE
========================= */

@media(max-width:768px){

.sp-deal-grid{
grid-template-columns:repeat(2,1fr);
gap:14px;
}

.sp-deal-card{
border-radius:20px;
}

.sp-deal-image-wrap img{
padding:12px;
}

.sp-deal-discount,
.sp-deal-badge{
padding:6px 9px;
font-size:9px;
}

.sp-deal-body{
padding:14px;
}

.sp-deal-store{
font-size:10px;
margin-bottom:8px;
}

.sp-deal-title{
font-size:13px;
line-height:1.45;

min-height:42px;

margin-bottom:10px;
}

.sp-deal-pricing{
gap:8px;
margin-bottom:10px;
}

.sp-deal-new-price{
font-size:17px;
}

.sp-deal-old-price{
font-size:11px;
}

.sp-deal-meta{
flex-direction:column;
gap:4px;

font-size:10px;

margin-bottom:12px;
}

.sp-deal-actions{
margin-bottom:12px;
}

.sp-deal-save,
.sp-deal-share{
font-size:11px;
}

.sp-deal-badge {
    top: 8px;
    right: 8px;
}

.sp-deal-btn{
height:42px;

font-size:12px;

border-radius:14px;
}
/* mobile logo row */
.sp-deal-store-row{
gap:8px;
margin-bottom:10px;
}

.sp-deal-store-logo{
width:34px;
height:34px;

min-width:34px;

padding:6px;
}

.sp-deal-store{
font-size:11px;
}

.sp-deal-inline-discount{
padding:5px 8px;
font-size:9px;
}

/* smaller image */
.sp-deal-image-wrap{
height:135px;
}

.sp-deal-image-wrap img {
    width: 90%;
    height: 90%;
}

/* mobile floating discount */
.sp-deal-floating-discount{
top:125px;

left:50%;

transform:translateX(-50%);

height:22px;

padding:0 6px;

font-size:11px;

border-radius:12px;
}

/* mobile save */
.sp-deal-save{
width:34px;
height:34px;

font-size:15px;
}

/* mobile body */
.sp-deal-body{
padding:
28px 14px 14px;
}

/* mobile share */
.sp-deal-share{
width:28px;
height:28px;

border-radius:10px;
}

.sp-deal-share svg{
width:13px;
height:13px;
}

/* mobile availed */
.sp-deal-users{
font-size:10px;
}

}