/* Desktop/tablet homepage — ported from desktop.html */
body.xb-body-home-redesign.xb-body-home-desktop {
  --white:#fff; --bg:#f7f7f5; --ink:#0c0c0b; --ink2:#5a5a55; --ink3:#a8a8a2;
  --border:#eaeae6; --border2:#d4d4ce;
  --accent:#FF6B00; --accent-pale:#fff4ec; --accent-deep:#cc5500;
  --blue:#2563EB; --blue-pale:#eef3ff; --blue-deep:#1a45b8;
  --green:#15803d; --green-pale:#f0fdf4;
  --red:#dc2626; --red-pale:#fef2f2;
  --sh-xs:0 1px 3px rgba(0,0,0,.05);
  --sh-sm:0 2px 8px rgba(0,0,0,.06),0 1px 3px rgba(0,0,0,.04);
  --sh-md:0 6px 24px rgba(0,0,0,.08);
  --sh-lg:0 16px 48px rgba(0,0,0,.11);
  --r-sm:10px; --r-md:14px; --r-lg:20px; --r-xl:28px; --r-full:999px;
  --shell:1240px; --nav-h:68px;
  background: #f7f7f5;
}
/* ================================================================
   XPRESSBUY247 — DESKTOP STOREFRONT
Full-width · White · Syne + DM Sans · 1200px shell
================================================================ */
.storefront-desktop-home,.storefront-desktop-home *,.storefront-desktop-home *::before,.storefront-desktop-home *::after{box-sizing:border-box;margin:0;padding:0;}
.storefront-desktop-home{
--white:#fff; --bg:#f7f7f5; --ink:#0c0c0b; --ink2:#5a5a55; --ink3:#a8a8a2;
--border:#eaeae6; --border2:#d4d4ce;
--accent:#FF6B00; --accent-pale:#fff4ec; --accent-deep:#cc5500;
--blue:#2563EB; --blue-pale:#eef3ff; --blue-deep:#1a45b8;
--green:#15803d; --green-pale:#f0fdf4;
--red:#dc2626; --red-pale:#fef2f2;
--sh-xs:0 1px 3px rgba(0,0,0,.05);
--sh-sm:0 2px 8px rgba(0,0,0,.06),0 1px 3px rgba(0,0,0,.04);
--sh-md:0 6px 24px rgba(0,0,0,.08);
--sh-lg:0 16px 48px rgba(0,0,0,.11);
--r-sm:10px; --r-md:14px; --r-lg:20px; --r-xl:28px; --r-full:999px;
--shell:1240px; --nav-h:68px;
}
.storefront-desktop-home{scroll-behavior:smooth;}
body.xb-body-home-redesign.xb-body-home-desktop{
font-family:'DM Sans',sans-serif; background:var(--bg); color:var(--ink);
font-size:15px; line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
.storefront-desktop-home h1,.storefront-desktop-home h2,.storefront-desktop-home h3,.storefront-desktop-home h4,.storefront-desktop-home .syne{font-family:'Syne',sans-serif;}
.storefront-desktop-home a{color:inherit; text-decoration:none;}
.storefront-desktop-home img{display:block; max-width:100%;}
.storefront-desktop-home svg{display:block;}
.storefront-desktop-home button,.storefront-desktop-home input,.storefront-desktop-home select,.storefront-desktop-home textarea{font:inherit;}
.storefront-desktop-home [hidden]{display:none!important;}
/* ── SHELL ── */
.storefront-desktop-home .shell{max-width:var(--shell); margin:0 auto; padding:0 40px;}
/* ================================================================
   TOP NAV
================================================================ */
.storefront-desktop-home .site-nav{
position:sticky; top:0; z-index:300;
background:rgba(255,255,255,.94);
backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
border-bottom:1px solid var(--border);
height:var(--nav-h);
}
.storefront-desktop-home .nav-inner{
max-width:var(--shell); margin:0 auto; padding:0 40px;
height:100%; display:grid;
grid-template-columns:auto 1fr auto;
align-items:center; gap:32px;
}
.storefront-desktop-home .nav-brand{
display:flex; align-items:center; gap:8px;
font-family:'Syne',sans-serif; font-weight:800;
font-size:20px; letter-spacing:-.6px; color:var(--ink);
}
.storefront-desktop-home .brand-pip{
width:8px; height:8px; background:var(--accent); border-radius:50%;
}
.storefront-desktop-home .brand-caption{
font-size:11px; font-weight:500; color:var(--ink3);
letter-spacing:.3px; margin-top:-2px;
}
/* Search */
.storefront-desktop-home .nav-search{
position:relative; max-width:500px;
display:grid; grid-template-columns:1.4rem 1fr auto;
align-items:center; gap:0;
background:var(--bg); border:1.5px solid var(--border);
border-radius:var(--r-full); height:44px; padding:0 6px 0 16px;
transition:border-color .15s, background .15s;
}
.storefront-desktop-home .nav-search:focus-within{border-color:var(--blue); background:var(--white);}
.storefront-desktop-home .nav-search svg{width:15px; height:15px; color:var(--ink3); flex-shrink:0;}
.storefront-desktop-home .nav-search input{
border:none; outline:none; background:transparent;
font-size:14px; color:var(--ink); padding:0 12px; width:100%;
}
.storefront-desktop-home .nav-search input::placeholder{color:var(--ink3);}
.storefront-desktop-home .nav-search-btn{
height:32px; padding:0 16px; border-radius:var(--r-full);
background:var(--ink); color:#fff; border:none; cursor:pointer;
font-size:13px; font-weight:600; white-space:nowrap;
transition:opacity .15s;
}
.storefront-desktop-home .nav-search-btn:hover{opacity:.85;}
/* Nav actions */
.storefront-desktop-home .nav-actions{display:flex; align-items:center; gap:10px;}
.storefront-desktop-home .nav-icon{
width:40px; height:40px; border-radius:50%;
border:1px solid var(--border); background:var(--white);
display:flex; align-items:center; justify-content:center;
cursor:pointer; color:var(--ink2); position:relative;
box-shadow:var(--sh-xs); transition:border-color .15s;
}
.storefront-desktop-home .nav-icon:hover{border-color:var(--border2);}
.storefront-desktop-home .nav-icon svg{width:17px; height:17px; stroke-width:1.8;}
.storefront-desktop-home .nav-badge{
position:absolute; top:-3px; right:-3px;
width:16px; height:16px; background:var(--accent); color:#fff;
font-size:9px; font-weight:700; border-radius:50%;
display:flex; align-items:center; justify-content:center;
border:2px solid #fff; font-family:'Syne',sans-serif;
}
.storefront-desktop-home .nav-signin{
height:40px; padding:0 22px; border-radius:var(--r-full);
background:var(--ink); color:#fff; border:none; cursor:pointer;
font-size:13px; font-weight:600; display:flex; align-items:center; gap:6px;
transition:opacity .15s;
}
.storefront-desktop-home .nav-signin:hover{opacity:.85;}
/* ── CATEGORY BAR ── */
.storefront-desktop-home .cat-bar{
background:var(--white); border-bottom:1px solid var(--border);
overflow-x:auto; scrollbar-width:none;
}
.storefront-desktop-home .cat-bar::-webkit-scrollbar{display:none;}
.storefront-desktop-home .cat-bar-inner{
max-width:var(--shell); margin:0 auto; padding:0 40px;
display:flex; align-items:center; gap:4px; height:48px;
white-space:nowrap;
}
.storefront-desktop-home .cat-pill{
padding:7px 16px; border-radius:var(--r-full);
font-size:13px; font-weight:500; cursor:pointer;
border:1.5px solid transparent; color:var(--ink2);
background:transparent; transition:all .15s; white-space:nowrap;
}
.storefront-desktop-home .cat-pill:hover{background:var(--bg); color:var(--ink);}
.storefront-desktop-home .cat-pill.active{background:var(--ink); color:#fff; border-color:var(--ink);}
/* ================================================================
   PAGE WRAPPER
================================================================ */
.storefront-desktop-home .page-wrap{max-width:var(--shell); margin:0 auto; padding:0 40px 80px;}
/* ================================================================
   HERO — split 2-col
================================================================ */
.storefront-desktop-home .hero{
margin:32px 0 0;
background:var(--ink); border-radius:var(--r-xl);
display:grid; grid-template-columns:1fr 480px;
align-items:center; gap:0; overflow:hidden;
min-height:440px; position:relative;
}
.storefront-desktop-home .hero-glow{
position:absolute; inset:0; pointer-events:none;
background:
radial-gradient(ellipse at 80% 15%,rgba(255,107,0,.22) 0%,transparent 50%),
radial-gradient(ellipse at 5% 90%,rgba(37,99,235,.18) 0%,transparent 50%);
}
.storefront-desktop-home .hero-grid-lines{
position:absolute; inset:0; pointer-events:none;
background-image:
linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),
linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);
background-size:44px 44px;
}
.storefront-desktop-home .hero-left{
position:relative; z-index:1; padding:56px 52px;
}
.storefront-desktop-home .hero-kicker{
display:inline-flex; align-items:center; gap:7px;
background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.13);
color:rgba(255,255,255,.75); font-size:11px; font-weight:600;
padding:5px 12px; border-radius:var(--r-full);
letter-spacing:.7px; text-transform:uppercase; margin-bottom:20px;
}
.storefront-desktop-home .kicker-dot{
width:6px; height:6px; background:#4ade80; border-radius:50%;
animation:blink 2s infinite;
}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.3}}
.storefront-desktop-home .hero h1{
font-size:clamp(42px,5.5vw,68px); font-weight:800;
color:#fff; line-height:.96; letter-spacing:-2.5px;
margin-bottom:18px;
}
.storefront-desktop-home .hero h1 em{color:var(--accent); font-style:normal;}
.storefront-desktop-home .hero-copy{
color:rgba(255,255,255,.6); font-size:16px; line-height:1.65;
max-width:400px; margin-bottom:32px;
}
.storefront-desktop-home .hero-btns{display:flex; gap:12px; flex-wrap:wrap;}
.storefront-desktop-home .btn-accent{
height:48px; padding:0 28px; border-radius:var(--r-full);
background:var(--accent); color:#fff; border:none; cursor:pointer;
font-size:15px; font-weight:600; display:inline-flex; align-items:center; gap:8px;
transition:opacity .15s, transform .15s;
}
.storefront-desktop-home .btn-accent:hover{opacity:.9; transform:translateY(-1px);}
.storefront-desktop-home .btn-ghost-white{
height:48px; padding:0 24px; border-radius:var(--r-full);
background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.15);
color:rgba(255,255,255,.85); cursor:pointer; font-size:15px; font-weight:500;
display:inline-flex; align-items:center;
transition:background .15s;
}
.storefront-desktop-home .btn-ghost-white:hover{background:rgba(255,255,255,.14);}
/* Hero right — floating cards visual */
.storefront-desktop-home .hero-right{
position:relative; z-index:1;
display:flex; flex-direction:column; align-items:center;
justify-content:center; gap:14px; padding:40px 48px 40px 20px;
height:100%;
}
.storefront-desktop-home .hero-float-card{
width:100%; max-width:280px;
border-radius:16px; padding:18px 20px;
background:linear-gradient(145deg,var(--card-from),var(--card-to));
border:1px solid rgba(255,255,255,.1);
box-shadow:0 8px 32px rgba(0,0,0,.25);
display:flex; align-items:center; justify-content:space-between;
position:relative; overflow:hidden;
transition:transform .3s; cursor:default;
}
.storefront-desktop-home .hero-float-card:hover{transform:translateY(-3px) scale(1.01);}
.storefront-desktop-home .hero-float-card::after{
content:''; position:absolute; right:-20px; bottom:-20px;
width:80px; height:80px; border-radius:50%;
background:rgba(255,255,255,.1);
}
.storefront-desktop-home .hfc-brand{
font-family:'Syne',sans-serif; font-size:18px; font-weight:800;
color:#fff; letter-spacing:-.3px; position:relative; z-index:1;
}
.storefront-desktop-home .hfc-amount{
font-family:'Syne',sans-serif; font-size:14px; font-weight:700;
color:rgba(255,255,255,.75); position:relative; z-index:1;
}
.storefront-desktop-home .hfc-1{--card-from:#FF9900; --card-to:#cc7700; transform:rotate(-2deg);}
.storefront-desktop-home .hfc-2{--card-from:#1DB954; --card-to:#157a3d; transform:rotate(1.5deg);}
.storefront-desktop-home .hfc-3{--card-from:#E50914; --card-to:#8b0000; transform:rotate(-1deg);}
.storefront-desktop-home .hero-float-card:nth-child(1):hover{transform:rotate(-2deg) translateY(-4px);}
.storefront-desktop-home .hero-float-card:nth-child(2):hover{transform:rotate(1.5deg) translateY(-4px);}
.storefront-desktop-home .hero-float-card:nth-child(3):hover{transform:rotate(-1deg) translateY(-4px);}
/* Hero stats strip */
.storefront-desktop-home .hero-stats{
margin:20px 0 0;
display:grid; grid-template-columns:repeat(4,1fr); gap:14px;
}
.storefront-desktop-home .stat-card{
background:var(--white); border:1px solid var(--border);
border-radius:var(--r-lg); padding:20px 24px;
box-shadow:var(--sh-sm);
display:flex; align-items:center; gap:16px;
}
.storefront-desktop-home .stat-icon{
width:44px; height:44px; border-radius:12px;
display:flex; align-items:center; justify-content:center;
font-size:20px; flex-shrink:0;
}
.storefront-desktop-home .stat-num{
font-family:'Syne',sans-serif; font-size:22px; font-weight:800;
letter-spacing:-.5px; color:var(--ink);
}
.storefront-desktop-home .stat-label{font-size:12px; color:var(--ink3); margin-top:1px;}
/* ================================================================
   SECTION HEADER
================================================================ */
.storefront-desktop-home .sec-head{
display:flex; align-items:flex-end; justify-content:space-between;
margin-bottom:20px; gap:16px;
}
.storefront-desktop-home .sec-head-left .eyebrow{
font-size:11px; font-weight:600; color:var(--ink3);
text-transform:uppercase; letter-spacing:1px; display:block; margin-bottom:5px;
}
.storefront-desktop-home .sec-head-left h2{
font-size:clamp(22px,2.8vw,30px); font-weight:800;
letter-spacing:-1px; color:var(--ink); line-height:1.05;
}
.storefront-desktop-home .sec-link{
font-size:13px; color:var(--blue); font-weight:600;
display:inline-flex; align-items:center; gap:4px;
white-space:nowrap; transition:opacity .15s;
}
.storefront-desktop-home .sec-link:hover{opacity:.75;}
/* ================================================================
   BRANDS ROW
================================================================ */
.storefront-desktop-home .brands-section{margin:40px 0 0;}
.storefront-desktop-home .brands-row{
display:flex; gap:10px; overflow-x:auto; scrollbar-width:none;
padding:2px 0 6px;
}
.storefront-desktop-home .brands-row::-webkit-scrollbar{display:none;}
.storefront-desktop-home .brand-chip{
display:flex; align-items:center; gap:8px;
padding:9px 18px; background:var(--white); border:1px solid var(--border);
border-radius:var(--r-full); font-size:13px; font-weight:500; color:var(--ink2);
cursor:pointer; white-space:nowrap; flex-shrink:0;
box-shadow:var(--sh-xs); transition:all .15s;
}
.storefront-desktop-home .brand-chip:hover{border-color:var(--border2); color:var(--ink);}
.storefront-desktop-home .brand-pip{width:8px; height:8px; border-radius:50%; flex-shrink:0;}
/* ================================================================
   HORIZONTAL CARD RAIL
================================================================ */
.storefront-desktop-home .card-rail{
display:flex; gap:16px; overflow-x:auto; scrollbar-width:none;
padding:4px 0 8px;
}
.storefront-desktop-home .card-rail::-webkit-scrollbar{display:none;}
/* ================================================================
   PRODUCT CARD (rail)
================================================================ */
.storefront-desktop-home .p-card{
background:var(--white); border:1px solid var(--border);
border-radius:var(--r-lg); overflow:hidden; cursor:pointer;
transition:transform .2s, box-shadow .2s; box-shadow:var(--sh-sm);
flex-shrink:0; width:200px; position:relative;
}
.storefront-desktop-home .p-card:hover{transform:translateY(-4px); box-shadow:var(--sh-lg); border-color:var(--border2);}
.storefront-desktop-home .p-card-img{
width:100%; height:110px;
display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden;
}
.storefront-desktop-home .p-card-brand{
font-family:'Syne',sans-serif; font-weight:800; font-size:18px;
color:#fff; letter-spacing:-.3px; text-shadow:0 1px 8px rgba(0,0,0,.2);
z-index:1; position:relative;
}
.storefront-desktop-home .p-card-badge{
position:absolute; top:8px; left:8px;
font-size:9px; font-weight:600; padding:3px 8px;
border-radius:var(--r-full); background:rgba(255,255,255,.18);
backdrop-filter:blur(6px); color:#fff; letter-spacing:.3px;
border:1px solid rgba(255,255,255,.2); text-transform:uppercase;
}
.storefront-desktop-home .p-card-badge.sale{background:var(--accent); border-color:var(--accent);}
.storefront-desktop-home .p-card-badge.new{background:var(--blue); border-color:var(--blue);}
.storefront-desktop-home .p-card-body{padding:14px 16px 16px;}
.storefront-desktop-home .p-card-name{
font-family:'Syne',sans-serif; font-size:13px; font-weight:700;
color:var(--ink); margin-bottom:3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.storefront-desktop-home .p-card-sub{font-size:11px; color:var(--ink3); margin-bottom:10px;}
.storefront-desktop-home .p-card-foot{display:flex; align-items:center; justify-content:space-between;}
.storefront-desktop-home .p-card-price{font-family:'Syne',sans-serif; font-size:15px; font-weight:700; color:var(--ink);}
.storefront-desktop-home .old-p{font-size:11px; color:var(--ink3); text-decoration:line-through; font-weight:400; margin-right:4px;}
.storefront-desktop-home .add-btn{
width:30px; height:30px; border-radius:50%;
background:var(--ink); color:#fff; border:none; cursor:pointer;
font-size:18px; font-weight:300; line-height:1;
display:flex; align-items:center; justify-content:center;
transition:background .15s, transform .15s;
}
.storefront-desktop-home .add-btn:hover{background:var(--accent); transform:scale(1.1);}
/* ================================================================
   PRODUCT GRID (2, 3, 4, 5 col)
================================================================ */
.storefront-desktop-home .p-grid-5{display:grid; grid-template-columns:repeat(5,1fr); gap:16px; margin-bottom:0;}
.storefront-desktop-home .p-grid-4{display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:0;}
.storefront-desktop-home .p-grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-bottom:0;}
.storefront-desktop-home .p-grid-5 .p-card,.storefront-desktop-home .p-grid-4 .p-card,.storefront-desktop-home .p-grid-3 .p-card{width:100%;}
.storefront-desktop-home .p-grid-5 .p-card-img,.storefront-desktop-home .p-grid-4 .p-card-img{height:120px;}
.storefront-desktop-home .p-grid-3 .p-card-img{height:130px;}
/* ================================================================
   PROMO BANNER — desktop 2-col
================================================================ */
.storefront-desktop-home .promo-banner{
border-radius:var(--r-xl); padding:40px 48px;
display:grid; grid-template-columns:1fr auto;
align-items:center; gap:40px; position:relative; overflow:hidden;
}
.storefront-desktop-home .promo-blue{background:var(--blue);}
.storefront-desktop-home .promo-ink{background:var(--ink);}
.storefront-desktop-home .promo-orange{background:var(--accent);}
.storefront-desktop-home .promo-banner::before,.storefront-desktop-home .promo-banner::after{
content:''; position:absolute; border-radius:50%;
border:1px solid rgba(255,255,255,.07); pointer-events:none;
}
.storefront-desktop-home .promo-banner::before{width:200px; height:200px; top:-60px; right:-40px;}
.storefront-desktop-home .promo-banner::after{width:140px; height:140px; bottom:-50px; right:120px;}
.storefront-desktop-home .promo-text{position:relative; z-index:1;}
.storefront-desktop-home .promo-eye{font-size:11px; font-weight:600; color:rgba(255,255,255,.55); text-transform:uppercase; letter-spacing:1px; margin-bottom:8px;}
.storefront-desktop-home .promo-h{font-size:clamp(26px,3.2vw,38px); font-weight:800; color:#fff; line-height:1.06; letter-spacing:-1px; margin-bottom:8px;}
.storefront-desktop-home .promo-p{font-size:14px; color:rgba(255,255,255,.7); line-height:1.6; max-width:480px;}
.storefront-desktop-home .promo-actions{display:flex; gap:10px; flex-wrap:wrap; position:relative; z-index:1; flex-shrink:0;}
.storefront-desktop-home .btn-white{
height:46px; padding:0 24px; border-radius:var(--r-full);
background:#fff; color:var(--ink); border:none; cursor:pointer;
font-size:14px; font-weight:700; white-space:nowrap;
display:inline-flex; align-items:center; gap:6px;
transition:opacity .15s;
}
.storefront-desktop-home .btn-white:hover{opacity:.9;}
.storefront-desktop-home .btn-white-outline{
height:46px; padding:0 22px; border-radius:var(--r-full);
background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.2);
color:#fff; cursor:pointer; font-size:14px; font-weight:600;
display:inline-flex; align-items:center; gap:6px;
transition:background .15s;
}
.storefront-desktop-home .btn-white-outline:hover{background:rgba(255,255,255,.18);}
/* ================================================================
   DIGITAL PRODUCTS — 3-col list cards
================================================================ */
.storefront-desktop-home .digital-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:14px;}
.storefront-desktop-home .d-card{
background:var(--white); border:1px solid var(--border);
border-radius:var(--r-lg); padding:22px; cursor:pointer;
box-shadow:var(--sh-sm); transition:transform .18s, box-shadow .18s;
}
.storefront-desktop-home .d-card:hover{transform:translateY(-3px); box-shadow:var(--sh-md); border-color:var(--border2);}
.storefront-desktop-home .d-card-top{display:flex; align-items:flex-start; gap:14px; margin-bottom:14px;}
.storefront-desktop-home .d-icon{
width:48px; height:48px; border-radius:14px;
display:flex; align-items:center; justify-content:center;
font-size:22px; flex-shrink:0;
}
.storefront-desktop-home .d-name{font-family:'Syne',sans-serif; font-size:14px; font-weight:700; color:var(--ink); margin-bottom:4px;}
.storefront-desktop-home .d-desc{font-size:12px; color:var(--ink2); line-height:1.5;}
.storefront-desktop-home .d-foot{display:flex; align-items:center; justify-content:space-between;}
.storefront-desktop-home .d-price{font-family:'Syne',sans-serif; font-size:16px; font-weight:700; color:var(--ink);}
.storefront-desktop-home .tag{
display:inline-flex; align-items:center; gap:3px;
padding:3px 9px; border-radius:6px;
font-size:11px; font-weight:600;
}
.storefront-desktop-home .tag-g{background:var(--green-pale); color:var(--green);}
.storefront-desktop-home .tag-b{background:var(--blue-pale); color:var(--blue);}
.storefront-desktop-home .tag-o{background:var(--accent-pale); color:var(--accent);}
/* ================================================================
   MOBILE TOP-UP — 2-col
================================================================ */
.storefront-desktop-home .topup-wrap{
display:grid; grid-template-columns:1fr 1fr; gap:0;
border-radius:var(--r-xl); overflow:hidden;
box-shadow:var(--sh-md);
}
.storefront-desktop-home .topup-left{
background:var(--ink); padding:40px; color:#fff;
position:relative; overflow:hidden;
display:flex; flex-direction:column; justify-content:center; gap:14px;
}
.storefront-desktop-home .topup-left::after{
content:''; position:absolute; width:200px; height:200px;
border-radius:50%; border:1px solid rgba(255,255,255,.05);
right:-50px; top:-50px;
}
.storefront-desktop-home .topup-left::before{
content:''; position:absolute; width:140px; height:140px;
border-radius:50%; border:1px solid rgba(255,255,255,.04);
right:40px; bottom:-60px;
}
.storefront-desktop-home .topup-eye{font-size:10px; font-weight:600; color:rgba(255,255,255,.45); text-transform:uppercase; letter-spacing:1px;}
.storefront-desktop-home .topup-h{font-family:'Syne',sans-serif; font-size:clamp(28px,3vw,38px); font-weight:800; color:#fff; letter-spacing:-1px; line-height:1.1;}
.storefront-desktop-home .topup-sub{font-size:14px; color:rgba(255,255,255,.55); line-height:1.6; max-width:280px;}
.storefront-desktop-home .topup-right{background:var(--white); padding:36px;}
.storefront-desktop-home .net-row{display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-bottom:18px;}
.storefront-desktop-home .net-btn{
border:1.5px solid var(--border); border-radius:var(--r-md);
padding:12px 6px; display:flex; flex-direction:column; align-items:center;
gap:6px; cursor:pointer; background:var(--white);
font-family:'Syne',sans-serif; font-size:11px; font-weight:700; color:var(--ink2);
transition:all .13s;
}
.storefront-desktop-home .net-btn.active{border-color:var(--ink); background:var(--ink); color:#fff;}
.storefront-desktop-home .net-dot{
width:20px; height:20px; border-radius:50%;
display:flex; align-items:center; justify-content:center;
font-size:10px; font-weight:800; color:#fff;
}
.storefront-desktop-home .topup-fields{display:grid; grid-template-columns:1.5fr 1fr; gap:10px; margin-bottom:14px;}
.storefront-desktop-home .t-input{
width:100%; height:46px; border:1.5px solid var(--border); border-radius:var(--r-md);
padding:0 14px; background:var(--bg); font-size:14px; color:var(--ink); outline:none;
transition:border-color .15s;
}
.storefront-desktop-home .t-input:focus{border-color:var(--blue); background:var(--white);}
.storefront-desktop-home .t-input::placeholder{color:var(--ink3);}
.storefront-desktop-home .amt-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-bottom:16px;}
.storefront-desktop-home .amt-btn{
padding:10px; border:1.5px solid var(--border); border-radius:var(--r-sm);
background:var(--white); font-family:'Syne',sans-serif; font-size:13px; font-weight:700;
color:var(--ink2); cursor:pointer; transition:all .13s; text-align:center;
}
.storefront-desktop-home .amt-btn.active{border-color:var(--accent); background:var(--accent); color:#fff;}
.storefront-desktop-home .btn-topup{
width:100%; height:50px; border-radius:var(--r-md); background:var(--ink); color:#fff;
font-family:'Syne',sans-serif; font-size:15px; font-weight:700; border:none;
cursor:pointer; transition:opacity .15s;
}
.storefront-desktop-home .btn-topup:hover{opacity:.85;}
/* ================================================================
   SHOPPING GRID — 4-col
================================================================ */
.storefront-desktop-home .shop-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:14px;}
.storefront-desktop-home .shop-tile{
background:var(--white); border:1px solid var(--border); border-radius:var(--r-lg);
padding:24px 20px; display:flex; flex-direction:column; align-items:center;
gap:12px; cursor:pointer; box-shadow:var(--sh-xs);
transition:transform .18s, box-shadow .18s; text-align:center;
}
.storefront-desktop-home .shop-tile:hover{transform:translateY(-4px); box-shadow:var(--sh-md); border-color:var(--border2);}
.storefront-desktop-home .shop-logo{
width:56px; height:56px; border-radius:16px;
display:flex; align-items:center; justify-content:center;
font-family:'Syne',sans-serif; font-size:12px; font-weight:800; color:#fff;
}
.storefront-desktop-home .shop-name{font-family:'Syne',sans-serif; font-size:14px; font-weight:700; color:var(--ink);}
.storefront-desktop-home .shop-range{font-size:11px; color:var(--ink3);}
.storefront-desktop-home .shop-from{font-family:'Syne',sans-serif; font-size:14px; font-weight:700; color:var(--ink);}
/* ================================================================
   HOW IT WORKS — horizontal 4-col
================================================================ */
.storefront-desktop-home .how-wrap{
background:var(--white); border:1px solid var(--border);
border-radius:var(--r-xl); padding:40px; box-shadow:var(--sh-sm);
}
.storefront-desktop-home .how-head{
display:flex; align-items:flex-end; justify-content:space-between;
gap:20px; margin-bottom:36px; flex-wrap:wrap;
}
.storefront-desktop-home .how-head h2{font-size:clamp(22px,2.6vw,30px); font-weight:800; letter-spacing:-1px; max-width:400px;}
.storefront-desktop-home .how-steps{display:grid; grid-template-columns:repeat(4,1fr); gap:0; position:relative;}
.storefront-desktop-home .how-steps::before{
content:''; position:absolute; top:17px; left:calc(12.5% + 1rem); right:calc(12.5% + 1rem);
height:1px; background:var(--border);
}
.storefront-desktop-home .how-step{display:flex; flex-direction:column; align-items:flex-start; gap:12px; padding-right:24px;}
.storefront-desktop-home .step-n{
width:34px; height:34px; border-radius:50%; background:var(--ink);
color:#fff; font-family:'Syne',sans-serif; font-size:13px; font-weight:800;
display:flex; align-items:center; justify-content:center; position:relative; z-index:1;
flex-shrink:0;
}
.storefront-desktop-home .step-title{font-family:'Syne',sans-serif; font-size:14px; font-weight:700; color:var(--ink); margin-bottom:4px;}
.storefront-desktop-home .step-desc{font-size:13px; color:var(--ink2); line-height:1.55;}
/* ================================================================
   TRUST BAR — 4-col grid
================================================================ */
.storefront-desktop-home .trust-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:14px;}
.storefront-desktop-home .trust-card{
background:var(--white); border:1px solid var(--border); border-radius:var(--r-lg);
padding:24px; box-shadow:var(--sh-xs);
}
.storefront-desktop-home .trust-icon{font-size:28px; margin-bottom:12px;}
.storefront-desktop-home .trust-title{font-family:'Syne',sans-serif; font-size:14px; font-weight:700; color:var(--ink); margin-bottom:4px;}
.storefront-desktop-home .trust-desc{font-size:12px; color:var(--ink3); line-height:1.5;}
/* ================================================================
   REVIEWS — 3-col grid
================================================================ */
.storefront-desktop-home .review-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:14px;}
.storefront-desktop-home .r-card{
background:var(--white); border:1px solid var(--border); border-radius:var(--r-lg);
padding:22px; box-shadow:var(--sh-xs);
}
.storefront-desktop-home .r-verified{
display:inline-block; background:var(--green-pale); color:var(--green);
font-size:10px; font-weight:600; padding:3px 9px; border-radius:var(--r-full);
margin-bottom:10px;
}
.storefront-desktop-home .r-stars{color:#FBBF24; font-size:13px; letter-spacing:1px; margin-bottom:10px;}
.storefront-desktop-home .r-text{font-size:13px; color:var(--ink2); line-height:1.6; margin-bottom:14px;}
.storefront-desktop-home .r-author{display:flex; align-items:center; gap:10px;}
.storefront-desktop-home .r-avatar{
width:36px; height:36px; border-radius:50%;
display:flex; align-items:center; justify-content:center;
font-family:'Syne',sans-serif; font-size:12px; font-weight:700; color:#fff; flex-shrink:0;
}
.storefront-desktop-home .r-name{font-family:'Syne',sans-serif; font-size:12px; font-weight:700; color:var(--ink);}
.storefront-desktop-home .r-loc{font-size:11px; color:var(--ink3);}
/* ================================================================
   APP PROMO + NEWSLETTER — side by side
================================================================ */
.storefront-desktop-home .two-col-section{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
.storefront-desktop-home .app-promo{
background:var(--ink); border-radius:var(--r-xl); padding:40px;
display:flex; flex-direction:column; justify-content:space-between;
gap:24px; position:relative; overflow:hidden; min-height:220px;
}
.storefront-desktop-home .app-promo::after{
content:''; position:absolute; width:200px; height:200px; border-radius:50%;
border:1px solid rgba(255,255,255,.05); right:-50px; bottom:-50px;
}
.storefront-desktop-home .ap-eye{font-size:10px; color:rgba(255,255,255,.4); text-transform:uppercase; letter-spacing:1px; margin-bottom:6px;}
.storefront-desktop-home .ap-title{font-family:'Syne',sans-serif; font-size:clamp(22px,2.5vw,30px); font-weight:800; color:#fff; letter-spacing:-1px; line-height:1.1; margin-bottom:6px;}
.storefront-desktop-home .ap-sub{font-size:13px; color:rgba(255,255,255,.5);}
.storefront-desktop-home .ap-btns{display:flex; gap:10px; position:relative; z-index:1;}
.storefront-desktop-home .ap-btn{
display:flex; align-items:center; gap:9px; padding:10px 16px;
background:rgba(255,255,255,.09); border:1px solid rgba(255,255,255,.13);
border-radius:var(--r-md); cursor:pointer; color:#fff; transition:background .15s;
}
.storefront-desktop-home .ap-btn:hover{background:rgba(255,255,255,.16);}
.storefront-desktop-home .ap-ico{font-size:20px; line-height:1;}
.storefront-desktop-home .ap-btn-sm{font-size:10px; color:rgba(255,255,255,.5); line-height:1;}
.storefront-desktop-home .ap-btn-lg{font-size:13px; font-weight:600; line-height:1.4;}
.storefront-desktop-home .newsletter-card{
background:var(--white); border:1px solid var(--border); border-radius:var(--r-xl);
padding:40px; display:flex; flex-direction:column; justify-content:center; gap:0;
box-shadow:var(--sh-sm);
}
.storefront-desktop-home .nl-icon{
width:52px; height:52px; background:var(--ink); border-radius:16px;
display:flex; align-items:center; justify-content:center; margin-bottom:16px;
}
.storefront-desktop-home .nl-icon svg{width:22px; height:22px; stroke:#fff; stroke-width:2; fill:none;}
.storefront-desktop-home .nl-title{font-family:'Syne',sans-serif; font-size:clamp(20px,2.2vw,26px); font-weight:800; letter-spacing:-.7px; color:var(--ink); margin-bottom:6px;}
.storefront-desktop-home .nl-sub{font-size:13px; color:var(--ink2); line-height:1.6; margin-bottom:24px;}
.storefront-desktop-home .nl-form{display:flex; gap:8px;}
.storefront-desktop-home .nl-input{
flex:1; height:48px; border:1.5px solid var(--border); border-radius:var(--r-full);
padding:0 18px; font-size:14px; background:var(--bg); color:var(--ink); outline:none;
transition:border-color .15s;
}
.storefront-desktop-home .nl-input:focus{border-color:var(--blue); background:var(--white);}
.storefront-desktop-home .nl-input::placeholder{color:var(--ink3);}
.storefront-desktop-home .nl-btn{
height:48px; padding:0 24px; border-radius:var(--r-full);
background:var(--accent); color:#fff; border:none; cursor:pointer;
font-family:'Syne',sans-serif; font-size:14px; font-weight:700;
white-space:nowrap; transition:opacity .15s;
}
.storefront-desktop-home .nl-btn:hover{opacity:.9;}
.storefront-desktop-home .nl-note{font-size:11px; color:var(--ink3); margin-top:10px;}
/* ================================================================
   FOOTER
================================================================ */
.storefront-desktop-home .site-footer{
background:var(--ink); margin:32px 0 0; padding:56px 0 40px;
}
.storefront-desktop-home .footer-inner{
max-width:var(--shell); margin:0 auto; padding:0 40px;
}
.storefront-desktop-home .footer-top{
display:grid; grid-template-columns:1.8fr repeat(3,1fr); gap:48px;
padding-bottom:40px; border-bottom:1px solid rgba(255,255,255,.07);
margin-bottom:32px;
}
.storefront-desktop-home .f-logo{
font-family:'Syne',sans-serif; font-weight:800; font-size:20px;
color:#fff; letter-spacing:-.5px; display:flex; align-items:center; gap:6px;
margin-bottom:12px;
}
.storefront-desktop-home .f-pip{width:7px; height:7px; background:var(--accent); border-radius:50%;}
.storefront-desktop-home .f-tagline{font-size:13px; color:rgba(255,255,255,.4); line-height:1.65; max-width:240px; margin-bottom:20px;}
.storefront-desktop-home .f-socials{display:flex; gap:8px;}
.storefront-desktop-home .soc-btn{
width:34px; height:34px; border-radius:10px;
background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.1);
display:flex; align-items:center; justify-content:center;
cursor:pointer; color:rgba(255,255,255,.5); font-size:13px; transition:background .13s;
}
.storefront-desktop-home .soc-btn:hover{background:rgba(255,255,255,.14); color:#fff;}
.storefront-desktop-home .f-col-title{
font-family:'Syne',sans-serif; font-size:11px; font-weight:700;
color:rgba(255,255,255,.35); text-transform:uppercase; letter-spacing:1px; margin-bottom:16px;
}
.storefront-desktop-home .f-links{list-style:none; display:flex; flex-direction:column; gap:11px;}
.storefront-desktop-home .f-links a{font-size:13px; color:rgba(255,255,255,.55); transition:color .13s;}
.storefront-desktop-home .f-links a:hover{color:#fff;}
.storefront-desktop-home .footer-bottom{
display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:14px;
}
.storefront-desktop-home .f-copy{font-size:12px; color:rgba(255,255,255,.28);}
.storefront-desktop-home .f-payments{display:flex; gap:6px; flex-wrap:wrap;}
.storefront-desktop-home .pay-chip{
padding:4px 10px; border-radius:7px;
background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.09);
font-size:11px; font-weight:600; color:rgba(255,255,255,.4); font-family:'Syne',sans-serif;
}
/* ================================================================
   SECTION SPACING
================================================================ */
.storefront-desktop-home .mt-sec{margin-top:48px;}
.storefront-desktop-home .mt-sm{margin-top:24px;}
/* ================================================================
   ANIMATIONS
================================================================ */
@keyframes fadeUp{
from{opacity:0; transform:translateY(16px);}
to{opacity:1; transform:translateY(0);}
}
.storefront-desktop-home .anim{animation:fadeUp .4s ease both;}
.storefront-desktop-home .d1{animation-delay:.04s;} .d2{animation-delay:.09s;} .d3{animation-delay:.14s;}
.storefront-desktop-home .d4{animation-delay:.19s;} .d5{animation-delay:.24s;} .d6{animation-delay:.3s;}
/* ================================================================
   GC PALETTE
================================================================ */
.storefront-desktop-home .gc-amazon{background:linear-gradient(135deg,#FF9900,#cc7700);}
.storefront-desktop-home .gc-spotify{background:linear-gradient(135deg,#1DB954,#157a3d);}
.storefront-desktop-home .gc-netflix{background:linear-gradient(135deg,#E50914,#8b0000);}
.storefront-desktop-home .gc-xbox{background:linear-gradient(135deg,#107C10,#0a5108);}
.storefront-desktop-home .gc-psn{background:linear-gradient(135deg,#0070CC,#004c8a);}
.storefront-desktop-home .gc-steam{background:linear-gradient(135deg,#0088CC,#005a8a);}
.storefront-desktop-home .gc-roblox{background:linear-gradient(135deg,#8B5CF6,#5B21B6);}
.storefront-desktop-home .gc-apple{background:linear-gradient(135deg,#1c1c1e,#3a3a3c);}
.storefront-desktop-home .gc-google{background:linear-gradient(135deg,#4285F4,#1a56c4);}
.storefront-desktop-home .gc-nint{background:linear-gradient(135deg,#F97316,#c2410c);}
.storefront-desktop-home .gc-disney{background:linear-gradient(135deg,#00A8E0,#0066a1);}
.storefront-desktop-home .gc-walmart{background:linear-gradient(135deg,#0071CE,#004c8a);}
.storefront-desktop-home .gc-dark{background:linear-gradient(135deg,#374151,#111827);}
.storefront-desktop-home .gc-purple{background:linear-gradient(135deg,#7C3AED,#4C1D95);}
.storefront-desktop-home [data-homepage-section].is-highlighted {
  outline: 2px solid var(--blue);
  outline-offset: 4px;
  border-radius: 8px;
}

body.admin-bar .storefront-desktop-home .site-nav { top: 32px; }

@media (max-width: 782px) {
  body.admin-bar .storefront-desktop-home .site-nav { top: 46px; }
}

.storefront-desktop-home a.nav-signin { text-decoration: none; color: inherit; }
.storefront-desktop-home button.nav-signin { cursor: pointer; }
.storefront-desktop-home button.btn-accent,
.storefront-desktop-home button.btn-ghost-white { cursor: pointer; font-family: inherit; }