/* ── TOKENS ─────────────────────────────────────────────────── */
:root {
–ink: #0c1425;
–ink-mid: #1e2d45;
–ink-soft: #3d5068;
–muted: #7a90a8;
–pale: #b8ccd8;
–surface: #f2f5fb;
–surface-2: #e8edf8;
–card: #ffffff;
–border: rgba(58,102,166,0.12);
–accent: #2859e8;
–accent-2: #1a47cc;
–accent-glow:rgba(40,89,232,0.22);
–teal: #0aada0;
–gold: #e8a22e;
–rose: #e04070;
–emerald: #0fb981;
–radius-sm: 10px;
–radius-md: 16px;
–radius-lg: 22px;
–radius-xl: 30px;
–shadow-xs: 0 2px 8px rgba(12,20,37,0.06);
–shadow-sm: 0 4px 20px rgba(12,20,37,0.09);
–shadow-md: 0 10px 40px rgba(12,20,37,0.12);
–shadow-lg: 0 20px 60px rgba(12,20,37,0.15);
–shadow-acc: 0 8px 32px rgba(40,89,232,0.28);
–font-head: ‘Sora’, sans-serif;
–font-body: ‘DM Sans’, sans-serif;
–ease-spring:cubic-bezier(.34,1.3,.64,1);
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { font-family: var(–font-body); background: var(–surface); color: var(–ink); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
/* ── SHOP BANNER ─────────────────────────────────────────────── */
.gs-banner {
position: relative;
background: linear-gradient(132deg,#0c1e3e 0%,#0f2752 40%,#0a1f45 70%,#112240 100%);
padding: 72px 6% 80px;
overflow: hidden;
}
.gs-banner::before {
content:”;
position:absolute;inset:0;
background:
radial-gradient(ellipse 60% 80% at 80% 50%,rgba(40,89,232,0.18) 0%,transparent 65%),
radial-gradient(ellipse 40% 60% at 10% 30%,rgba(10,173,160,0.10) 0%,transparent 60%);
}
.gs-banner::after {
content:”;
position:absolute;inset:0;
background-image:radial-gradient(rgba(255,255,255,0.055) 1px,transparent 1px);
background-size:32px 32px;
}
.gs-banner-inner {
position:relative;z-index:2;
max-width:1200px;margin:0 auto;
display:flex;align-items:center;justify-content:space-between;gap:40px;flex-wrap:wrap;
}
.gs-banner-text { flex:1;min-width:280px; }
.gs-banner-pill {
display:inline-flex;align-items:center;gap:8px;
background:rgba(40,89,232,0.20);border:1px solid rgba(40,89,232,0.35);
border-radius:100px;padding:6px 16px;margin-bottom:20px;
font-family:var(–font-head);font-size:0.7rem;font-weight:600;
letter-spacing:0.08em;text-transform:uppercase;color:#93b4ff;
}
.gs-banner-pill .live-dot {
width:6px;height:6px;border-radius:50%;background:#4d84ff;
box-shadow:0 0 8px rgba(77,132,255,0.6);
animation:gs-pulse 2s ease-in-out infinite;
}
@keyframes gs-pulse {
0%,100%{box-shadow:0 0 0 0 rgba(77,132,255,0.5);}
50%{box-shadow:0 0 0 6px rgba(77,132,255,0);}
}
.gs-banner-h1 {
font-family:var(–font-head);
font-size:clamp(2rem,4.5vw,3.2rem);font-weight:800;
letter-spacing:-0.03em;color:#fff;line-height:1.12;margin-bottom:16px;
}
.gs-banner-h1 em {
font-style:normal;
background:linear-gradient(110deg,#5b9bff 0%,#4dddcc 100%);
-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.gs-banner-sub { font-size:1rem;color:rgba(255,255,255,0.58);line-height:1.7;max-width:480px; }
.gs-stats { display:flex;gap:16px;flex-wrap:wrap; }
.gs-stat {
display:flex;flex-direction:column;gap:3px;padding:16px 22px;
background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.10);
border-radius:var(–radius-lg);backdrop-filter:blur(12px);text-align:center;
}
.gs-stat-val {
font-family:var(–font-head);font-size:1.45rem;font-weight:800;
color:#fff;letter-spacing:-0.04em;line-height:1;
}
.gs-stat-lbl { font-size:0.65rem;color:rgba(255,255,255,0.40);font-weight:500;letter-spacing:0.04em;text-transform:uppercase; }
/* ── BREADCRUMB ──────────────────────────────────────────────── */
.gs-breadcrumb {
background:var(–card);border-bottom:1px solid var(–border);
padding:11px 6%;
}
.gs-breadcrumb-inner {
max-width:1200px;margin:0 auto;
display:flex;align-items:center;gap:8px;font-size:0.78rem;color:var(–muted);
}
.gs-breadcrumb a { color:var(–accent);text-decoration:none;font-weight:500; }
.gs-breadcrumb a:hover { text-decoration:underline; }
/* ── MAIN LAYOUT ─────────────────────────────────────────────── */
.gs-main { max-width:1200px;margin:0 auto;padding:40px 5% 80px; }
/* ── CATEGORY FILTERS ────────────────────────────────────────── */
.gs-cats {
display:flex;flex-wrap:wrap;gap:9px;margin-bottom:28px;
min-height:42px;
}
.gs-cat-btn {
display:inline-flex;align-items:center;gap:6px;
padding:8px 16px;border-radius:100px;border:1.5px solid var(–border);
background:var(–card);font-family:var(–font-head);font-size:0.77rem;
font-weight:600;color:var(–ink-soft);cursor:pointer;
transition:all 0.28s var(–ease-spring);box-shadow:var(–shadow-xs);
white-space:nowrap;user-select:none;
}
.gs-cat-btn:hover { background:var(–surface-2);border-color:rgba(40,89,232,0.25);color:var(–accent); transform:translateY(-1px); }
.gs-cat-btn.active { background:var(–accent);border-color:var(–accent);color:#fff;box-shadow:var(–shadow-acc);transform:translateY(-2px); }
.gs-cat-count {
display:inline-flex;align-items:center;justify-content:center;
width:18px;height:18px;border-radius:50%;
background:rgba(0,0,0,0.10);font-size:0.60rem;font-weight:700;
}
.gs-cat-btn.active .gs-cat-count { background:rgba(255,255,255,0.22); }
/* category skeleton pills */
.gs-cat-skel {
height:36px;border-radius:100px;background:linear-gradient(90deg,#e8edf8 25%,#dde5f4 50%,#e8edf8 75%);
background-size:400% 100%;animation:gs-shimmer 1.5s ease-in-out infinite;
}
@keyframes gs-shimmer {
0%{background-position:100% 0;}
100%{background-position:-100% 0;}
}
/* ── TOOLBAR ─────────────────────────────────────────────────── */
.gs-toolbar {
display:flex;align-items:center;justify-content:space-between;
flex-wrap:wrap;gap:12px;padding:14px 18px;
background:var(–card);border:1px solid var(–border);
border-radius:var(–radius-md);margin-bottom:28px;box-shadow:var(–shadow-xs);
}
.gs-result-count { font-size:0.84rem;color:var(–muted); }
.gs-result-count strong { color:var(–ink-mid);font-weight:600; }
.gs-controls { display:flex;align-items:center;gap:10px;flex-wrap:wrap; }
.gs-sort-wrap { display:flex;align-items:center;gap:8px; }
.gs-sort-lbl { font-size:0.76rem;color:var(–muted);font-weight:500;white-space:nowrap; }
.gs-sort-select {
-webkit-appearance:none;appearance:none;
background:var(–surface) url(“data:image/svg+xml,%3Csvg width=’12’ height=’8′ viewBox=’0 0 12 8′ fill=’none’ xmlns=’http://www.w3.org/2000/svg’%3E%3Cpath d=’M1 1l5 5 5-5′ stroke=’%237a90a8′ stroke-width=’1.6′ stroke-linecap=’round’ stroke-linejoin=’round’/%3E%3C/svg%3E”) no-repeat right 12px center;
border:1.5px solid var(–border);border-radius:var(–radius-sm);
padding:8px 34px 8px 12px;font-family:var(–font-head);font-size:0.78rem;
font-weight:600;color:var(–ink-soft);cursor:pointer;outline:none;
transition:border-color 0.22s,box-shadow 0.22s;min-width:170px;
}
.gs-sort-select:focus { border-color:var(–accent);box-shadow:0 0 0 3px rgba(40,89,232,0.12); }
.gs-view-toggle { display:flex;gap:4px; }
.gs-view-btn {
width:34px;height:34px;border-radius:var(–radius-sm);
border:1.5px solid var(–border);background:var(–card);
display:flex;align-items:center;justify-content:center;
cursor:pointer;transition:all 0.22s;color:var(–muted);
}
.gs-view-btn:hover,.gs-view-btn.active { background:var(–accent);border-color:var(–accent);color:#fff; }
/* ── PRODUCT GRID ────────────────────────────────────────────── */
.gs-grid {
display:grid;grid-template-columns:repeat(3,1fr);gap:22px;
min-height:200px;
}
.gs-grid.list-view { grid-template-columns:1fr; }
.gs-grid.list-view .gs-card { flex-direction:row;height:180px; }
.gs-grid.list-view .gs-card-img-wrap { width:220px;height:180px;flex-shrink:0; }
.gs-grid.list-view .gs-card-body { flex-direction:row;align-items:center;gap:16px;flex-wrap:wrap; }
.gs-grid.list-view .gs-card-desc { display:block; }
/* ── SKELETON CARDS ──────────────────────────────────────────── */
.gs-skel-card {
background:var(–card);border-radius:var(–radius-lg);
overflow:hidden;border:1.5px solid var(–border);
}
.gs-skel-img { height:200px;background:linear-gradient(90deg,#e8edf8 25%,#dde5f4 50%,#e8edf8 75%);background-size:400% 100%;animation:gs-shimmer 1.5s ease-in-out infinite; }
.gs-skel-body { padding:18px 20px;display:flex;flex-direction:column;gap:10px; }
.gs-skel-line { height:10px;border-radius:6px;background:linear-gradient(90deg,#e8edf8 25%,#dde5f4 50%,#e8edf8 75%);background-size:400% 100%;animation:gs-shimmer 1.5s ease-in-out infinite; }
/* ── PRODUCT CARD ────────────────────────────────────────────── */
.gs-card {
position:relative;background:var(–card);border-radius:var(–radius-lg);
overflow:hidden;border:1.5px solid var(–border);box-shadow:var(–shadow-sm);
display:flex;flex-direction:column;
transition:transform 0.30s var(–ease-spring),box-shadow 0.30s ease,border-color 0.30s ease;
animation:gs-fadein 0.42s both;
}
.gs-card:hover {
transform:translateY(-8px);
box-shadow:var(–shadow-lg);
border-color:rgba(40,89,232,0.20);
}
@keyframes gs-fadein {
from{opacity:0;transform:translateY(18px);}
to{opacity:1;transform:translateY(0);}
}
/* IMG ZONE */
.gs-card-img-wrap {
position:relative;overflow:hidden;
height:200px;background:var(–surface-2);flex-shrink:0;
display:flex;align-items:center;justify-content:center;
}
.gs-card-img {
width:100%;height:100%;object-fit:cover;display:block;
transition:transform 0.46s cubic-bezier(.25,.46,.45,.94);
}
.gs-card:hover .gs-card-img { transform:scale(1.07); }
.gs-card-img-wrap::after {
content:”;position:absolute;inset:0;
background:linear-gradient(180deg,transparent 50%,rgba(12,20,37,0.26) 100%);
opacity:0;transition:opacity 0.28s ease;
}
.gs-card:hover .gs-card-img-wrap::after { opacity:1; }
/* placeholder icon shown when no image */
.gs-img-placeholder {
display:flex;flex-direction:column;align-items:center;gap:8px;
width:100%;height:100%;justify-content:center;
background:linear-gradient(135deg,var(–surface-2),#dde5f4);
}
.gs-img-placeholder svg { opacity:0.35; }
.gs-img-placeholder span { font-size:0.65rem;font-weight:600;color:var(–pale);letter-spacing:0.05em;text-transform:uppercase; }
/* BADGE */
.gs-badge {
position:absolute;top:13px;left:13px;z-index:5;
padding:5px 11px;border-radius:100px;
font-family:var(–font-head);font-size:0.60rem;font-weight:700;
letter-spacing:0.06em;text-transform:uppercase;color:#fff;
background:linear-gradient(120deg,var(–accent),#4d7fff);
box-shadow:0 4px 14px rgba(40,89,232,0.40);pointer-events:none;
}
.gs-badge-sale { background:linear-gradient(120deg,var(–rose),#ff6690)!important;box-shadow:0 4px 14px rgba(224,64,112,0.40)!important; }
.gs-badge-new { background:linear-gradient(120deg,var(–emerald),#1cd6a0)!important;box-shadow:0 4px 14px rgba(15,185,129,0.40)!important; }
.gs-badge-feat { background:linear-gradient(120deg,#0c1425,#1e2d45)!important;box-shadow:0 4px 14px rgba(12,20,37,0.40)!important; }
/* QUICK VIEW */
.gs-quickview {
position:absolute;bottom:12px;left:50%;z-index:6;
transform:translateX(-50%) translateY(8px);opacity:0;
display:inline-flex;align-items:center;gap:6px;
background:rgba(255,255,255,0.92);border:none;border-radius:100px;
padding:7px 15px;font-family:var(–font-head);font-size:0.68rem;font-weight:600;
color:var(–ink);cursor:pointer;backdrop-filter:blur(10px);
box-shadow:0 4px 20px rgba(12,20,37,0.18);
transition:opacity 0.22s ease,transform 0.22s ease;
pointer-events:none;white-space:nowrap;
text-decoration:none;
}
.gs-card:hover .gs-quickview { opacity:1;transform:translateX(-50%) translateY(0);pointer-events:auto; }
/* CARD BODY */
.gs-card-body { padding:18px 20px 20px;display:flex;flex-direction:column;flex:1; }
/* STARS */
.gs-stars { display:flex;align-items:center;gap:2px;margin-bottom:7px; }
.gs-stars svg { flex-shrink:0; }
/* CATEGORY */
.gs-card-cat {
font-size:0.66rem;font-weight:600;letter-spacing:0.08em;
text-transform:uppercase;color:var(–accent);margin-bottom:6px;
}
/* TITLE */
.gs-card-title {
font-family:var(–font-head);font-size:0.96rem;font-weight:700;
color:var(–ink);letter-spacing:-0.02em;margin:0 0 8px;line-height:1.38;
text-decoration:none;display:-webkit-box;
-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.gs-card-title:hover { color:var(–accent); }
/* DESC */
.gs-card-desc {
font-size:0.77rem;color:var(–muted);line-height:1.65;
margin:0 0 14px;display:none;flex:1;
}
/* FOOTER */
.gs-card-footer {
display:flex;align-items:center;justify-content:space-between;
margin-top:auto;padding-top:13px;border-top:1px solid var(–border);gap:8px;
}
/* PRICE */
.gs-price { display:flex;flex-direction:column;gap:1px;line-height:1; }
.gs-price-val {
font-family:var(–font-head);font-size:1.1rem;font-weight:800;
color:var(–ink);letter-spacing:-0.03em;
}
.gs-price-val.sale { color:var(–accent); }
.gs-price-old {
font-size:0.70rem;font-weight:500;color:var(–pale);
text-decoration:line-through;margin-top:1px;
}
.gs-price-lbl { font-size:0.58rem;color:var(–pale);text-transform:uppercase;letter-spacing:0.04em;margin-top:2px; }
/* CART BUTTON */
.gs-btn-cart {
display:inline-flex;align-items:center;gap:6px;
background:var(–ink);color:#fff;border:none;border-radius:100px;
padding:10px 16px;font-family:var(–font-head);font-size:0.72rem;font-weight:600;
cursor:pointer;text-decoration:none;white-space:nowrap;flex-shrink:0;
transition:background 0.28s var(–ease-spring),transform 0.28s var(–ease-spring),box-shadow 0.28s ease;
box-shadow:0 4px 16px rgba(12,20,37,0.22);
}
.gs-btn-cart:hover { background:var(–accent);transform:scale(1.05);box-shadow:var(–shadow-acc); }
.gs-btn-cart.added { background:var(–emerald);box-shadow:0 4px 16px rgba(15,185,129,0.35); }
/* STOCK */
.gs-stock {
display:flex;align-items:center;gap:5px;
font-size:0.63rem;font-weight:600;color:var(–emerald);margin-top:9px;
}
.gs-stock .dot {
width:6px;height:6px;border-radius:50%;background:var(–emerald);
box-shadow:0 0 5px rgba(15,185,129,0.5);flex-shrink:0;
}
.gs-stock.out { color:#f87171; }
.gs-stock.out .dot { background:#f87171;box-shadow:0 0 5px rgba(248,113,113,0.5); }
/* ── EMPTY / ERROR STATES ────────────────────────────────────── */
.gs-empty,.gs-error {
grid-column:1/-1;text-align:center;padding:72px 24px;
background:var(–card);border-radius:var(–radius-xl);
border:1.5px dashed var(–border);
}
.gs-empty-icon,.gs-error-icon { font-size:3rem;margin-bottom:16px; }
.gs-empty h3,.gs-error h3 { font-family:var(–font-head);font-size:1.1rem;font-weight:700;color:var(–ink-mid);margin-bottom:8px; }
.gs-empty p,.gs-error p { font-size:0.85rem;color:var(–muted);margin-bottom:20px;line-height:1.6; }
/* ── PAGINATION ──────────────────────────────────────────────── */
.gs-pagination {
display:flex;justify-content:center;align-items:center;
gap:6px;margin-top:48px;flex-wrap:wrap;
}
.gs-page-btn {
display:inline-flex;align-items:center;justify-content:center;
min-width:42px;height:42px;padding:0 10px;
border-radius:var(–radius-sm);border:1.5px solid var(–border);
background:var(–card);font-family:var(–font-head);font-size:0.82rem;
font-weight:600;color:var(–ink-soft);cursor:pointer;
transition:all 0.25s var(–ease-spring);box-shadow:var(–shadow-xs);
text-decoration:none;user-select:none;
}
.gs-page-btn:hover { background:var(–accent);border-color:var(–accent);color:#fff;box-shadow:var(–shadow-acc);transform:translateY(-2px); }
.gs-page-btn.active { background:var(–accent);border-color:var(–accent);color:#fff;box-shadow:var(–shadow-acc); }
.gs-page-btn:disabled,.gs-page-btn[disabled] { opacity:0.38;cursor:not-allowed;pointer-events:none; }
.gs-page-ellipsis { width:42px;height:42px;display:flex;align-items:center;justify-content:center;color:var(–pale);font-size:0.9rem; }
/* ── TRUST BAR ───────────────────────────────────────────────── */
.gs-trust {
margin-top:56px;padding:26px 30px;
background:linear-gradient(130deg,#0f2752,#0c1e3e);
border-radius:var(–radius-xl);
display:flex;flex-wrap:wrap;align-items:center;
justify-content:space-between;gap:18px;
}
.gs-trust-items { display:flex;flex-wrap:wrap;gap:24px;align-items:center; }
.gs-trust-item { display:flex;align-items:center;gap:10px; }
.gs-trust-icon {
width:36px;height:36px;border-radius:10px;
display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.gs-trust-title { font-family:var(–font-head);font-size:0.79rem;font-weight:700;color:#fff;line-height:1.2; }
.gs-trust-sub { font-size:0.63rem;color:rgba(255,255,255,0.42);margin-top:2px; }
.gs-trust-cta {
display:inline-flex;align-items:center;gap:8px;
background:rgba(255,255,255,0.10);border:1.5px solid rgba(255,255,255,0.18);
color:#fff;font-family:var(–font-head);font-size:0.80rem;font-weight:600;
padding:11px 20px;border-radius:100px;text-decoration:none;
backdrop-filter:blur(10px);
transition:background 0.25s,transform 0.25s var(–ease-spring);white-space:nowrap;
}
.gs-trust-cta:hover { background:rgba(255,255,255,0.17);transform:translateY(-2px); }
/* ── RESPONSIVE ──────────────────────────────────────────────── */
@media(max-width:960px){
.gs-grid:not(.list-view){grid-template-columns:repeat(2,1fr);}
.gs-banner-inner{flex-direction:column;text-align:center;}
.gs-banner-sub{margin:0 auto;}
.gs-stats{justify-content:center;}
}
@media(max-width:600px){
.gs-grid:not(.list-view){grid-template-columns:1fr;gap:15px;}
.gs-toolbar{flex-direction:column;align-items:stretch;}
.gs-sort-select{width:100%;min-width:0;}
.gs-controls{justify-content:space-between;}
.gs-banner{padding:50px 5% 58px;}
.gs-trust{flex-direction:column;}
}