.vss-store-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px,1fr));
  gap: 15px;
  padding: 20px;
}

.vss-store-card {
  background: #fff;
  padding: 15px;
  border-radius: 14px;
  text-align: center;
  box-shadow: 0 5px 20px rgba(0,0,0,0.05);
  transition: 0.3s;
}

.vss-store-card:hover {
  transform: translateY(-5px);
}

.vss-store-logo {
  width: 70px;
  height: 70px;
  border-radius: 12px;
  margin-bottom: 10px;
}
.vss-store {
  max-width: 1200px;
  margin: auto;
  padding: 20px;
}

.vss-store-header {
  display: flex;
  gap: 15px;
  align-items: center;
  margin-bottom: 20px;
}

.vss-store-logo {
  width: 80px;
  height: 80px;
  border-radius: 16px;
}

.vss-store-info h2 {
  margin: 0;
}

.vss-meta {
  font-size: 13px;
  color: #777;
  margin-bottom: 10px;
}

.vss-empty {
  text-align: center;
  padding: 40px;
}
.vss-tab {
  display: none;
}
.vss-tab.active {
  display: block;
}

#vss-modal {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.7);
  z-index: 9999;
}

.vss-loading {
  color: #fff;
  text-align: center;
  margin-top: 20%;
}

.vss-follow-btn.active {
  background: #111;
  color: #fff;
}
.vss-vendor-cta {
  background: linear-gradient(135deg,#6a11cb,#2575fc);
  color:#fff;
  padding:20px;
  border-radius:16px;
  margin-top:20px;
  text-align:center;
}

.vss-vendor-cta h3 {
  margin-bottom:10px;
}
.vss-cards {
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
    gap:20px;
    margin-bottom:20px;
}

.vss-card {
    background:#fff;
    padding:20px;
    border-radius:12px;
    box-shadow:0 5px 20px rgba(0,0,0,.05);
}

.vss-card h3 {
    margin:0;
    font-size:14px;
    color:#777;
}

.vss-card p {
    font-size:22px;
    font-weight:bold;
}

.vss-header {
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:20px;
}

.vss-grid {
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
    gap:15px;
}
.vss-product-box {
    background:#fff;
    padding:20px;
    border-radius:12px;
    box-shadow:0 5px 20px rgba(0,0,0,.05);
}

.vss-field {
    margin-bottom:15px;
}

.vss-field label {
    display:block;
    margin-bottom:5px;
    font-weight:600;
}

.vss-field input,
.vss-field textarea {
    width:100%;
    padding:10px;
    border:1px solid #ddd;
    border-radius:8px;
}
.vss-alert {
    padding:15px;
    border-radius:10px;
    margin-bottom:20px;
}

.vss-alert.success {
    background:#e6f9ed;
    color:#0a7d32;
}

.vss-onboarding {
    background:#fff;
    padding:20px;
    border-radius:12px;
    box-shadow:0 5px 20px rgba(0,0,0,.05);
    margin-bottom:20px;
}

.vss-onboarding h3 {
    margin-bottom:10px;
}

.vss-onboarding ul {
    padding-left:20px;
}
.vss-table table {
    width:100%;
    border-collapse: collapse;
}

.vss-table th {
    background:#111;
    color:#fff;
    padding:12px;
    text-align:left;
}

.vss-table td {
    padding:12px;
    border-bottom:1px solid #eee;
}

.vss-btn {
    background:#6c2bd9;
    color:#fff;
    padding:6px 12px;
    border-radius:6px;
    text-decoration:none;
}

.vss-card {
    background:#fff;
    padding:20px;
    border-radius:10px;
    box-shadow:0 5px 15px rgba(0,0,0,.05);
}

/* FULL PAGE */
.vss-store-page-container{
    width:100%;
    min-height:100vh;
}

/* STORE WRAPPER */
.vss-store-wrapper{
    width:100%;
    max-width:1400px;
    margin:auto;
    padding:20px;
}

/* HERO */
.vss-store-hero{
    position:relative;
    background:linear-gradient(135deg,#0d6efd,#111827);
    border-radius:20px;
    padding:50px 20px;
    color:white;
    text-align:center;
    margin-bottom:30px;
    overflow:hidden;
}

/* overlay */
.vss-store-overlay{
    position:absolute;
    inset:0;
    background:rgba(0,0,0,0.2);
}

/* content */
.vss-store-content{
    position:relative;
    z-index:2;
}

/* logo */
.vss-store-logo{
    width:100px;
    height:100px;
    border-radius:50%;
    object-fit:cover;
    margin-bottom:15px;
    border:4px solid white;
}

/* title */
.vss-store-content h1{
    font-size:32px;
    margin-bottom:10px;
}

/* location */
.vss-store-location{
    opacity:0.9;
    margin-bottom:20px;
}

/* buttons */
.vss-store-buttons{
    display:flex;
    justify-content:center;
    gap:15px;
    flex-wrap:wrap;
}

.vss-follow-btn{
    background:white;
    color:black;
    padding:12px 25px;
    border:none;
    border-radius:10px;
    font-weight:bold;
}

.vss-chat-btn{
    background:#25D366;
    color:white;
    padding:12px 25px;
    border-radius:10px;
    text-decoration:none;
    font-weight:bold;
}

/* PRODUCT SECTION */
.vss-store-products{
    margin-top:20px;
}

/* heading */
.vss-section-header{
    margin-bottom:20px;
}

.vss-section-header h2{
    font-size:28px;
}

/* product grid */
.vss-product-grid ul.products{
    display:grid !important;
    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
    gap:20px;
}

/* empty state */
.vss-empty-state{
    text-align:center;
    background:white;
    padding:60px 20px;
    border-radius:20px;
    box-shadow:0 5px 20px rgba(0,0,0,0.08);
}

.vss-empty-icon{
    font-size:60px;
    margin-bottom:20px;
}

/* MOBILE */
@media(max-width:768px){

    .vss-store-content h1{
        font-size:24px;
    }

    .vss-store-logo{
        width:80px;
        height:80px;
    }

    .vss-product-grid ul.products{
        grid-template-columns:repeat(2,1fr);
    }
}
/* Vendor CTA Box */
.vss-vendor-cta{
    background: #f3e8ff;   /* light premium purple */
    border: 1px solid #e9d5ff;
    padding: 25px;
    border-radius: 16px;
    margin-top: 20px;
    text-align: center;
}

/* CTA Heading */
.vss-vendor-cta h3{
    font-size: 24px;
    font-weight: 700;
    color: #5b21b6;
    margin-bottom: 10px;
}

/* CTA Description */
.vss-vendor-cta p{
    color: #6b7280;
    margin-bottom: 20px;
    font-size: 15px;
}

/* Become Vendor Button */
.vss-vendor-cta .vss-btn{
    background: #ffffff;
    color: #5b21b6;
    border: none;
    padding: 14px 28px;
    border-radius: 12px;
    font-weight: 700;
    text-decoration: none;
    display: inline-block;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    transition: 0.3s ease;
}

/* Hover effect */
.vss-vendor-cta .vss-btn:hover{
    transform: translateY(-2px);
    background: #fafafa;
}


.vss-upload-box{
    background:#fafafa;
    border:2px dashed #ddd;
    border-radius:16px;
    padding:20px;
    min-height:280px;
}

.vss-upload-box input[type="file"]{
    width:100%;
    margin-bottom:20px;
}

.vss-preview-area{
    min-height:200px;
    display:flex;
    align-items:center;
    justify-content:center;
}

.vss-preview-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:15px;
    min-height:200px;
}

.vss-preview-img{
    width:100%;
    height:200px;
    object-fit:cover;
    border-radius:12px;
}

.vss-remove-image{
    margin-top:15px;
    width:100%;
    background:#ef4444;
    color:white;
    border:none;
    padding:12px;
    border-radius:10px;
    cursor:pointer;
}

@media(max-width:768px){

    .vss-preview-grid{
        grid-template-columns:1fr;
    }

    .vss-preview-img{
        height:220px;
    }
}
/* Upload section container */
.vss-upload-container{
    background:#eef9f0;
    border:2px dashed #b8e6bf;
    border-radius:14px;
    padding:20px;
    margin-top:15px;
}

/* Choose upload buttons */
.vss-upload-trigger{
    display:inline-block;
    background:#dff5e4;
    color:#0b5d1e;
    padding:14px 22px;
    border-radius:10px;
    font-weight:600;
    cursor:pointer;
    margin-bottom:15px;
    border:1px solid #b6ddb9;
}

/* Hover effect */
.vss-upload-trigger:hover{
    background:#c9efcf;
}

/* Section headings */
.vss-section-title{
    font-size:24px;
    font-weight:700;
    display:block;
    margin-bottom:10px;
}

/* helper text */
.vss-upload-note{
    color:#666;
    margin-bottom:10px;
}

/* preview area */
.vss-preview-area,
.vss-preview-grid{
    min-height:120px;
    margin-top:15px;
}

/* preview images */
.vss-preview-img{
    width:100px;
    height:100px;
    object-fit:cover;
    border-radius:10px;
    margin:5px;
}

/* remove buttons */
.vss-remove-image{
    margin-top:15px;
    background:#f5c400;
    color:#000;
    border:none;
    padding:12px 20px;
    border-radius:10px;
    font-weight:600;
    cursor:pointer;
}

/* mobile responsiveness */
@media(max-width:768px){
    .vss-upload-trigger{
        width:100%;
        text-align:center;
    }

    .vss-remove-image{
        width:100%;
    }
}

.ssg-location-box form{
    display:none;
}

.ssg-location-box form.ssg-show{
    display:block;
}