/* =========================
LAYOUT
========================= */

.sp-layout{
display:grid;
grid-template-columns:320px minmax(0,1fr);
gap:24px;

align-items:start;
}

.sp-sidebar{
position:sticky;
top:90px;
align-self:start;
}

.sp-right{
min-width:0;
}

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

@media(max-width:980px){

.sp-layout{
grid-template-columns:1fr;
}

.sp-sidebar{
position:static;
}

}

/* =========================
SIDEBAR BOX
========================= */

.sp-sidebar-box{
background:#fff;
border-radius:24px;
padding:20px;
margin-bottom:20px;

border:1px solid #eef2f7;

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

.sp-sidebar-box h4{
margin:0 0 16px;

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

color:#0f172a;
}

/* =========================
ABOUT
========================= */

.sp-about-text{
font-size:14px;
line-height:1.9;

color:#64748b;
}

/* =========================
STATS
========================= */

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

padding:12px 0;

border-bottom:1px solid #eef2f7;

font-size:14px;
}

.sp-stat:last-child{
border-bottom:none;
}

.sp-stat strong{
color:#0f172a;
}

/* =========================
HEADER
========================= */

.sp-store-header{
background:#fff;

border-radius:28px;

padding:28px;

margin-bottom:24px;

border:1px solid #eef2f7;

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

.sp-store-title{
margin:0;

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

line-height:1.2;

color:#0f172a;
}

.sp-store-validated{
margin-top:14px;

font-size:14px;
line-height:1.8;

color:#64748b;
}

.sp-store-validated strong{
color:#0f172a;
}

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

.sp-desktop-top{
display:flex;
align-items:center;
justify-content:space-between;
gap:20px;
}

.sp-share{
width:48px;
height:48px;

border-radius:50%;

background:#eff6ff;

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

cursor:pointer;

transition:.25s ease;

flex-shrink:0;
}

.sp-share:hover{
background:#2563eb;
transform:translateY(-2px);
}

.sp-share svg{
width:20px;
height:20px;

fill:#2563eb;

transition:.25s ease;
}

.sp-share:hover svg{
fill:#fff;
}

/* =========================
MORE FROM STORE
========================= */

.sp-more-store-card{
position:relative;

display:flex;
align-items:center;
gap:16px;

padding:18px;

border-radius:24px;

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

text-decoration:none;

overflow:hidden;

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

border:1px solid #eef2f7;

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

.sp-more-store-card:hover{
transform:translateY(-4px);

box-shadow:
0 20px 45px rgba(15,23,42,.10);
}

.sp-more-store-logo{
width:74px;
height:74px;

min-width:74px;

border-radius:24px;

background:#fff;

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

padding:14px;

border:1px solid #eef2f7;
}

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

object-fit:contain;
}

.sp-more-store-content{
flex:1;
}

.sp-more-store-content strong{
display:block;

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

line-height:1.4;

color:#0f172a;

margin-bottom:8px;
}

.sp-more-store-content small{
display:inline-flex;
align-items:center;

padding:7px 12px;

border-radius:999px;

background:#eff6ff;
color:#2563eb;

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

.sp-more-store-arrow{
font-size:22px;
font-weight:900;

color:#2563eb;
}

/* =========================
DEAL STORE LIST
========================= */

.sp-store-mini-list{
display:flex;
flex-direction:column;
gap:14px;
}

.sp-store-mini-item{
display:flex;
align-items:center;
gap:14px;

padding:14px;

border-radius:22px;

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

text-decoration:none;

border:1px solid #eef2f7;

transition:.25s ease;
}

.sp-store-mini-item:hover{
transform:translateY(-3px);

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

.sp-store-mini-item img{
width:64px;
height:64px;

min-width:64px;

border-radius:20px;

background:#fff;

object-fit:contain;

padding:12px;

border:1px solid #eef2f7;
}

.sp-store-mini-item span{
flex:1;

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

line-height:1.5;

color:#0f172a;
}

/* =========================
SEO SECTION
========================= */

.sp-deal-content-section{
margin-top:50px;
}

.sp-seo-box{
background:#fff;

border-radius:32px;

padding:34px;

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

border:1px solid #eef2f7;
}

/* top */
.sp-deal-seo-top{
display:grid;
grid-template-columns:1.2fr .9fr;
gap:34px;

align-items:center;

margin-bottom:34px;
}

.sp-deal-seo-badge{
display:inline-flex;
align-items:center;

padding:10px 16px;

border-radius:999px;

background:#eff6ff;
color:#2563eb;

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

letter-spacing:.4px;

margin-bottom:18px;
}

/* image */
.sp-deal-seo-image{
position:relative;

border-radius:30px;

overflow:hidden;

min-height:300px;

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

background:
linear-gradient(
180deg,
#f8fafc,
#eef2ff
);

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

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

object-fit:cover;

display:block;
}

.sp-deal-seo-intro{
font-size:15px;
line-height:1.9;

color:#64748b;

margin-top:16px;
}

/* =========================
TABS
========================= */

.sp-deal-tabs{
display:flex;
gap:12px;
flex-wrap:wrap;

margin-bottom:26px;
}

.sp-deal-tab{
height:48px;
padding:0 20px;

border:none;
outline:none;

border-radius:16px;

background:#f8fafc;
color:#475569;

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

cursor:pointer;

transition:.25s ease;
}

.sp-deal-tab.active{
background:
linear-gradient(
135deg,
#2563eb,
#0ea5e9
);

color:#fff;

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

/* =========================
CONTENT
========================= */

.sp-deal-tab-content{
display:none;

font-size:15px;
line-height:2;

color:#475569;
}

.sp-deal-tab-content.active{
display:block;
}

.sp-deal-tab-content h3,
.sp-deal-tab-content h4{
font-size:20px;
font-weight:900;

color:#0f172a;

margin:
28px 0 14px;
}

.sp-deal-tab-content p{
margin-bottom:18px;
}

.sp-deal-tab-content ul{
padding-left:22px;
margin-bottom:20px;
}

.sp-deal-tab-content li{
margin-bottom:10px;
}

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

@media(max-width:768px){

.sp-store-header{
padding:20px;
border-radius:24px;
}

.sp-store-title{
font-size:18px;
}

.sp-seo-box{
padding:20px;
border-radius:24px;
}

.sp-deal-seo-top{
grid-template-columns:1fr;
gap:22px;

margin-bottom:26px;
}

.sp-deal-seo-image{
min-height:220px;
border-radius:22px;
}

.sp-deal-seo-intro{
font-size:13px;
line-height:1.8;
}

.sp-deal-tabs{
gap:8px;
margin-bottom:20px;
}

.sp-deal-tab{
height:42px;
padding:0 16px;

font-size:12px;

border-radius:14px;
}

.sp-deal-tab-content{
font-size:13px;
line-height:1.9;
}

.sp-deal-tab-content h3,
.sp-deal-tab-content h4{
font-size:17px;
}

.sp-store-mini-item{
padding:12px;
border-radius:18px;
}

.sp-store-mini-item img{
width:54px;
height:54px;

min-width:54px;

border-radius:18px;
}

.sp-store-mini-item span{
font-size:13px;
}

}

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

.sp-mobile-deal-header{
display:none;
}
.sp-sidebar-close{
display:none;
}

@media(max-width:980px){

/* mobile header */
.sp-mobile-deal-header{

display:flex;
align-items:center;
justify-content:space-between;
gap:16px;

padding:18px;

margin-bottom:18px;

border-radius:24px;

background:#fff;

border:1px solid #eef2f7;

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

/* left */
.sp-mobile-deal-left{
display:flex;
align-items:center;
gap:14px;

min-width:0;
}

/* logo */
.sp-mobile-deal-logo{
width:70px;
height:70px;

min-width:70px;

border-radius:22px;

background:#fff;

padding:12px;

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

border:1px solid #eef2f7;
}

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

object-fit:contain;
}

/* content */
.sp-mobile-deal-content{
min-width:0;
}

.sp-mobile-deal-content h1{
margin:0 0 6px;

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

line-height:1.3;

color:#0f172a;
}

.sp-mobile-deal-content p{
margin:0;

font-size:13px;
line-height:1.6;

color:#64748b;
}

/* actions */
.sp-mobile-deal-actions{
display:flex;
align-items:center;
gap:10px;
}

.sp-mobile-icon-btn{

width:44px;
height:44px;

border:none;
outline:none;

border-radius:16px;

background:#f8fafc;

cursor:pointer;

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

padding:0;

transition:.25s ease;

flex-shrink:0;
}

.sp-mobile-icon-btn:hover{

background:#eff6ff;

transform:translateY(-2px);

}

/* mobile icon */
.sp-mobile-icon-btn svg{

width:20px;
height:20px;

fill:#0f172a;

transition:.25s ease;

flex-shrink:0;
}

/* hover */
.sp-mobile-icon-btn:hover svg{

fill:#2563eb;

}

/* =========================
SIDEBAR DRAWER
========================= */

.sp-sidebar{

position:fixed;

top:0;
left:0;

width:88%;
max-width:360px;

height:100vh;

overflow-y:auto;

background:#fff;

z-index:9999;

padding:50px 20px 20px;

transform:translateX(-100%);

transition:.32s ease;

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

.sp-sidebar.active{
transform:none;
}

/* overlay */
.sp-sidebar-overlay{

position:fixed;

inset:0;

background:rgba(15,23,42,.45);

backdrop-filter:blur(3px);

opacity:0;
visibility:hidden;

transition:.28s ease;

z-index:9998;
}

.sp-sidebar-overlay.active{
opacity:1;
visibility:visible;
}

/* hide desktop header */
.sp-store-header{
display:none;
}

/* close */
.sp-sidebar-close{

position:absolute;

top:18px;
right:18px;

border:none;
outline:none;

background:none;

padding:0;

font-size:28px;
font-weight:300;

line-height:1;

color:#0f172a;

cursor:pointer;

z-index:20;

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

transition:.25s ease;
}

.sp-sidebar-close:hover{

transform:rotate(90deg);

opacity:.7;

}

}