/* =========================
GRID CARD
========================= */
.sp-grid-card{
background:#fff;
border-radius:26px;
overflow:hidden;
position:relative;
transition:.28s ease;
box-shadow:
0 10px 30px rgba(0,0,0,.05);
border:1px solid #eef2f7;
display:flex;
flex-direction:column;
height:100%;
}

/* hover */
.sp-grid-card:hover{
transform:translateY(-5px);
box-shadow:
0 20px 45px rgba(0,0,0,.08);
}

/* glow border */
.sp-grid-card:before{
content:'';
position:absolute;
top:0;
left:0;
width:100%;
height:4px;
background:
linear-gradient(
90deg,
#0ea5e9,
#2563eb
);
z-index:5;
}

/* =========================
FEATURED
========================= */

.sp-grid-card.featured:before{
background:
linear-gradient(
90deg,
#f59e0b,
#facc15
);
}

/* =========================
RIBBONS
========================= */

.sp-grid-ribbon{
height:34px;
display:flex;
align-items:center;
padding:0 16px;
font-size:12px;
font-weight:800;
letter-spacing:.6px;
color:#fff;
text-transform:uppercase;
}

.sp-grid-ribbon.recommended{
background:
linear-gradient(
90deg,
#2563eb,
#60a5fa
);
}

.sp-grid-ribbon.flash_deal{
background:
linear-gradient(
90deg,
#dc2626,
#ef4444
);
}

.sp-grid-ribbon.deal_of_day{
background:
linear-gradient(
90deg,
#ea580c,
#fb923c
);
}

.sp-grid-ribbon.featured{
background:
linear-gradient(
90deg,
#f59e0b,
#facc15
);
}

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

.sp-grid-body{
padding:20px;
display:flex;
flex-direction:column;
align-items:center;
gap:16px;
height:100%;
}

.sp-grid-top{
width:100%;
display:flex;
justify-content:space-between;
align-items:center;
}

.sp-grid-logo-wrap{
display:flex;
justify-content:center;
}

.sp-grid-store-logo{
width:100px;
height:100px;
object-fit:contain;
}

.sp-grid-discount{
padding:10px 18px;
border-radius:14px;
background:linear-gradient(135deg,#0ea5e9,#2563eb);
font-size:13px;
font-weight:800;
color:#fff;
}

.sp-grid-title{
margin:0;
width:100%;
text-align:center;
font-size:18px;
font-weight:800;
line-height:1.6;
min-height:86px;
}

.sp-grid-title a{
color:#111827;
text-decoration:none;
}

.sp-grid-divider{
width:100%;
height:1px;
background:#eef2f7;
}

.sp-grid-reveal{
width:100%;
}

.sp-grid-bottom{
display:none;
}

/* Share Button */
.sp-grid-share{

width:42px;
height:42px;

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

border-radius:14px;

background:
linear-gradient(
135deg,
#eff6ff,
#dbeafe
);

border:1px solid #bfdbfe;

cursor:pointer;

transition:.25s;

flex-shrink:0;

}

.sp-grid-share:hover{

background:
linear-gradient(
135deg,
#2563eb,
#1d4ed8
);

transform:
translateY(-2px);

box-shadow:
0 10px 24px rgba(37,99,235,.25);

}

.sp-grid-share svg{

width:18px;
height:18px;

display:block;

fill:#2563eb;

transition:.25s;

}

.sp-grid-share:hover svg{

fill:#fff;

}

/* Save button */
.sp-grid-save{

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

height:42px;

padding:0 14px;

border-radius:14px;

background:#f8fafc;

border:1px solid #e2e8f0;

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

cursor:pointer;

transition:.25s;

}

.sp-grid-save:hover{

transform:translateY(-2px);

background:#fff1f2;

border-color:#fecdd3;

}

.sp-grid-save.saved{

background:
linear-gradient(
135deg,
#fee2e2,
#fecaca
);

border-color:#fca5a5;

color:#dc2626;

}

/* Stats */
.sp-grid-stats{

display:flex;
justify-content:center;
flex-wrap:wrap;

gap:8px;

width:100%;

}

.sp-grid-badge{

padding:7px 12px;

border-radius:999px;

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

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

gap:4px;

}

.sp-grid-badge.verified{

background:#dcfce7;
color:#15803d;

}

.sp-grid-badge.success{

background:#eff6ff;
color:#2563eb;

}

.sp-grid-badge.used{

background:#fff7ed;
color:#ea580c;

}

/* Button */
.sp-grid-inner{

height:58px;

border-radius:18px;

overflow:hidden;

position:relative;

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

box-shadow:
0 10px 25px rgba(37,99,235,.22);

}

.sp-grid-overlay-text{

font-size:14px;
font-weight:800;
color:white;
letter-spacing:.3px;

text-transform:uppercase;

}

.sp-grid-reveal{

width:100%;

cursor:pointer;

transition:.25s;

}

.sp-grid-reveal:hover{

transform:
translateY(-2px);

}

.sp-grid-hidden{

height:58px;

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

font-size:18px;
font-weight:900;

letter-spacing:2px;

color:#ffffff22;

user-select:none;

pointer-events:none;

}

.sp-grid-overlay{

position:absolute;

top:0;
left:0;

width:100%;
height:100%;

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

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

z-index:5;

transition:.4s;

}

.sp-grid-reveal.revealed .sp-grid-overlay{

opacity:0;
visibility:hidden;

}

/* Store Link */
.sp-grid-store-link{

width:100%;

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

gap:8px;

padding:14px;

border-radius:16px;

background:
linear-gradient(
135deg,
#eff6ff,
#dbeafe
);

border:1px solid #bfdbfe;

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

color:#2563eb;

text-decoration:none;

transition:.25s;

cursor:pointer;

}

.sp-grid-store-link:hover{

background:
linear-gradient(
135deg,
#2563eb,
#1d4ed8
);

color:#fff;

transform:
translateY(-2px);

box-shadow:
0 10px 24px rgba(37,99,235,.25);

}

.sp-grid-store-link svg{

width:15px;
height:15px;

fill:currentColor;

transition:.25s;

}

.sp-grid-store-link:hover svg{

transform:
translateX(2px)
translateY(-2px);

}

/* =========================
RESPONSIVE
========================= */

@media(max-width:768px){

.sp-grid-body{

padding:18px;

gap:12px;

}

.sp-grid-store-logo{

width:78px;
height:48px;

}

.sp-grid-title{

font-size:15px;
font-weight: 700;
line-height:1.5;
min-height: 70px;
}

.sp-grid-desc{

font-size:13px;

min-height:auto;

-webkit-line-clamp:3;

}

/* =========================
MOBILE GRID HEADER
========================= */

/* mobile compact */
.sp-grid-body{
grid-template-columns:72px 1fr;
gap:12px;
padding:16px;
}

.sp-grid-discount{
width:100px;
height:42px;
border-radius:10px;
font-size:14px;
}

.sp-grid-stats{
margin-bottom:14px;
gap:6px;
}

.sp-grid-badge{
padding:4px 8px;
font-size:10px;
}

/* reveal full width */
.sp-grid-reveal{
grid-column:1 / -1;
}

/* smaller button */
.sp-grid-inner,
.sp-grid-hidden{
height:42px;
}

.sp-grid-hidden{
font-size:14px;
letter-spacing:1px;
padding-right:24px;
}

/* overlay */
.sp-grid-overlay{
width:78%;
}

/* button text */
.sp-grid-overlay-text{
font-size:11px;
gap:6px;
}

/* bottom meta */
.sp-grid-bottom{
grid-column:1 / -1;
margin-top:14px;
padding-top:14px;
}

/* mobile bottom row */
.sp-grid-bottom{
display:grid;
grid-template-columns:auto 1fr auto;
align-items:center;
gap:12px;
}

/* store link centered */
.sp-grid-store-link{
justify-self:center;
font-size:12px;
text-align:center;
}

/* save */
.sp-grid-save{
font-size:13px;
}

/* share */
.sp-grid-share{
justify-self:end;
}

/* smaller share */
.sp-grid-share{
width:34px;
height:34px;
border-radius:10px;
}

.sp-grid-share svg{
width:16px;
height:16px;
}

/* remove hover effects */
.sp-grid-card:hover,
.sp-grid-reveal:hover{
transform:none;
box-shadow:none;
}

/* mobile footer */
.sp-grid-bottom{
grid-template-columns:auto 1fr auto;
gap:10px;
}

/* compact */
.sp-grid-save,
.sp-grid-store-link{
padding:8px 12px;
font-size:11px;
}

/* share */
.sp-grid-share{
width:38px;
height:38px;
border-radius:12px;
}

}