/* =========================
POPULAR STORES
========================= */

.sp-store-grid{
display:grid;
grid-template-columns:repeat(5,1fr);
gap:22px;
}

/* =========================
PREMIUM STORE CARD
========================= */

.sp-store-card{
position:relative;
overflow:hidden;
isolation:isolate;

background:
linear-gradient(
145deg,
#ffffff,
#f8fbff
);

border-radius:28px;

height:170px;

text-decoration:none;

border:1px solid rgba(226,232,240,.9);

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

transition:
transform .35s cubic-bezier(.22,1,.36,1),
box-shadow .35s ease,
border-color .3s ease;
}

/* glow layer */
.sp-store-card:before{
content:'';

position:absolute;
inset:0;

background:
radial-gradient(
circle at top right,
rgba(59,130,246,.16),
transparent 42%
);

opacity:0;

transition:.35s ease;

z-index:-2;
}

/* animated glow */
.sp-store-card:after{
content:'';

position:absolute;

left:-30%;
bottom:-30%;

width:160px;
height:160px;

border-radius:50%;

background:
radial-gradient(
circle,
rgba(37,99,235,.12),
transparent 72%
);

opacity:0;

transition:.45s ease;

z-index:-2;
}

/* hover */
.sp-store-card:hover{
transform:
translateY(-8px)
scale(1.015);

border-color:#bfdbfe;

box-shadow:
0 28px 60px rgba(37,99,235,.14);
}

/* glow show */
.sp-store-card:hover:before,
.sp-store-card:hover:after{
opacity:1;
}

/* =========================
NORMAL
========================= */

.sp-store-normal{
position:absolute;
inset:0;

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

padding:16px;

transition:.35s ease;
}

/* =========================
LOGO
========================= */

.sp-store-normal > img{
height:68px;
max-width:100%;

object-fit:contain;

border-radius:18px;

padding:10px;

background:#fff;

border:1px solid #eef2f7;

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

margin-bottom:18px;

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

/* logo hover */
.sp-store-card:hover .sp-store-normal > img{
transform:
translateY(-4px)
scale(1.06);

box-shadow:
0 20px 35px rgba(37,99,235,.12);
}

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

/* title */
.sp-store-normal h4{
font-size:15px;
font-weight:800;

letter-spacing:-.2px;

color:#0f172a;

margin:0;

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

transition:.25s ease;

text-align:center;

position:relative;
}

/* hover */
.sp-store-card:hover .sp-store-normal h4{
color:#2563eb;
}

/* =========================
TOTAL OFFERS
========================= */

/* total offers */
.sp-store-total{
position:absolute;

top:16px;
left:16px;

padding:9px 14px;

border-radius:999px;

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

backdrop-filter:blur(10px);

border:1px solid rgba(255,255,255,.7);

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

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

color:#2563eb;

opacity:0;

transform:
translateY(-8px);

transition:.3s ease;

z-index:5;
}

/* show */
.sp-store-card:hover .sp-store-total{
opacity:1;
transform:translateY(0);
}

/* =========================
EXTERNAL LINK ICON
========================= */

/* external link icon */
.sp-store-link-icon{
position:absolute;

right:18px;
bottom:18px;

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

width:34px;
height:34px;

border-radius:12px;

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

border:1px solid #bfdbfe;

opacity:0;

transform:
translateY(8px)
scale(.9);

transition:.3s ease;

z-index:5;
}

/* image */
.sp-store-link-icon img{
width:15px;
height:15px;

object-fit:contain;

transition:.25s ease;
}

/* hover */
.sp-store-card:hover .sp-store-link-icon{
opacity:1;

transform:
translateY(0)
scale(1);
}

/* animate */
.sp-store-card:hover .sp-store-link-icon img{
transform:
translate(2px,-2px);
}

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

@media(max-width:1100px){

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

}

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

@media(max-width:768px){

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

.sp-store-card{
height:158px;
border-radius:22px;
}

.sp-store-normal{
padding:12px;
}

.sp-store-normal > img{
height:58px;
padding:8px;
border-radius:16px;
margin-bottom:14px;
}

.sp-store-normal h4{
font-size:13px;
line-height:1.35;
text-align:center;
}

.sp-store-total{
top:12px;
left:12px;

font-size:10px;

padding:7px 10px;
}
.sp-store-link-icon{
right:12px;
bottom:12px;

width:30px;
height:30px;

border-radius:10px;
}

.sp-store-link-icon img{
width:13px;
height:13px;
}

/* softer hover on mobile */
.sp-store-card:hover{
transform:translateY(-4px);
}

}