/* ── Age Gate ── */
.age-gate{position:fixed;inset:0;z-index:var(--z-max);background:var(--color-bg-primary);display:flex;align-items:center;justify-content:center;padding:var(--space-lg)}
.age-gate.hidden{display:none}
.age-gate__card{width:100%;max-width:360px;text-align:center;animation:fadeUp var(--t-slower) var(--ease-out)}
.age-gate__icon{width:80px;height:80px;margin:0 auto var(--space-lg);border-radius:var(--radius-full);background:var(--color-accent-soft);display:flex;align-items:center;justify-content:center;font-size:36px}
.age-gate__title{font-family:var(--font-display);font-size:var(--fs-2xl);margin-bottom:var(--space-sm);background:linear-gradient(135deg,var(--color-accent),var(--color-gold));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.age-gate__text{color:var(--color-text-secondary);font-size:var(--fs-sm);margin-bottom:var(--space-xl);line-height:var(--lh-relaxed)}
.age-gate__actions{display:flex;flex-direction:column;gap:var(--space-sm)}

/* ── Role Selection ── */
.role-select{position:fixed;inset:0;z-index:var(--z-max);background:var(--color-bg-primary);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--space-lg)}
.role-select.hidden{display:none}
.role-select__title{font-family:var(--font-display);font-size:var(--fs-xl);margin-bottom:var(--space-xs);text-align:center}
.role-select__subtitle{color:var(--color-text-secondary);font-size:var(--fs-sm);margin-bottom:var(--space-xl);text-align:center}
.role-select__grid{display:flex;flex-direction:column;gap:var(--space-md);width:100%;max-width:360px}
.role-card{padding:var(--space-lg);border-radius:var(--radius-xl);border:2px solid var(--color-border);background:var(--color-bg-card);text-align:center;cursor:pointer;transition:all var(--t-base) var(--ease-out)}
.role-card:hover{border-color:var(--color-accent);background:var(--color-accent-soft);transform:translateY(-2px);box-shadow:var(--shadow-lg)}
.role-card.selected{border-color:var(--color-accent);background:var(--color-accent-soft)}
.role-card__icon{font-size:40px;margin-bottom:var(--space-sm)}
.role-card__title{font-size:var(--fs-lg);font-weight:var(--fw-bold);margin-bottom:var(--space-xs)}
.role-card__desc{font-size:var(--fs-sm);color:var(--color-text-secondary)}

/* ── Storefront ── */
.storefront{flex:1}
.storefront__hero{padding:var(--space-lg) var(--space-md);background:linear-gradient(180deg,rgba(196,30,58,0.08) 0%,transparent 100%)}
.storefront__hero h2{font-size:var(--fs-xl);margin-bottom:var(--space-xs)}
.storefront__hero p{font-size:var(--fs-sm);color:var(--color-text-secondary)}
.storefront__sort{display:flex;align-items:center;gap:var(--space-sm);padding:var(--space-sm) var(--space-md);overflow-x:auto;-ms-overflow-style:none;scrollbar-width:none}
.storefront__sort::-webkit-scrollbar{display:none}
.sort-chip{padding:6px 14px;border-radius:var(--radius-full);font-size:var(--fs-xs);font-weight:var(--fw-medium);background:var(--color-bg-elevated);color:var(--color-text-secondary);border:1px solid var(--color-border);cursor:pointer;white-space:nowrap;transition:all var(--t-fast)}
.sort-chip.active{background:var(--color-accent);color:#fff;border-color:var(--color-accent)}

.product-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-sm);padding:var(--space-sm) var(--space-md) var(--space-lg)}
@media(min-width:400px){.product-grid{gap:var(--space-md)}}

.product-card{border-radius:var(--radius-lg);overflow:hidden;background:var(--color-bg-card);border:1px solid var(--color-border);transition:all var(--t-base) var(--ease-out);cursor:pointer;position:relative}
.product-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);border-color:var(--color-border-hover)}
.product-card.boosted{border-color:var(--color-gold-soft);box-shadow:0 0 12px rgba(212,168,83,0.15)}
.product-card.boosted::before{content:'🔥';position:absolute;top:var(--space-sm);left:var(--space-sm);z-index:2;background:rgba(0,0,0,0.6);padding:2px 8px;border-radius:var(--radius-full);font-size:var(--fs-xs)}
.product-card__img{aspect-ratio:1;position:relative;overflow:hidden;background:linear-gradient(135deg,var(--color-bg-secondary),var(--color-bg-elevated))}
.product-card__img img{width:100%;height:100%;object-fit:cover;transition:transform var(--t-slow) var(--ease-out)}
.product-card:hover .product-card__img img{transform:scale(1.05)}
.product-card__placeholder{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:36px;opacity:.3}
.product-card__fav{position:absolute;top:var(--space-sm);right:var(--space-sm);width:32px;height:32px;border-radius:var(--radius-full);background:rgba(0,0,0,0.5);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:2;transition:all var(--t-fast)}
.product-card__fav:hover{background:rgba(0,0,0,0.7);transform:scale(1.1)}
.product-card__fav.active svg{fill:var(--color-accent);color:var(--color-accent)}
.product-card__fav svg{width:16px;height:16px;color:rgba(255,255,255,0.7);fill:none;stroke:currentColor;stroke-width:2}
.product-card__info{padding:var(--space-sm)}
.product-card__title{font-size:var(--fs-sm);font-weight:var(--fw-medium);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:var(--space-2xs)}
.product-card__seller{font-size:var(--fs-xs);color:var(--color-text-muted);display:flex;align-items:center;gap:var(--space-2xs);margin-bottom:var(--space-xs)}
.product-card__seller .verified{color:var(--color-gold);font-size:10px}
.product-card__price{font-size:var(--fs-base);font-weight:var(--fw-bold);color:var(--color-accent)}
.product-card__price span{font-size:var(--fs-xs);font-weight:var(--fw-regular);color:var(--color-text-muted)}
.product-card__meta{display:flex;align-items:center;justify-content:space-between;margin-top:var(--space-xs)}
.product-card__sales{font-size:var(--fs-xs);color:var(--color-text-muted)}

/* ── Seller Section ── */
.sellers-section{padding:var(--space-md)}
.sellers-section h3{font-size:var(--fs-md);margin-bottom:var(--space-sm)}
.sellers-scroll{display:flex;gap:var(--space-sm);overflow-x:auto;padding-bottom:var(--space-sm);-ms-overflow-style:none;scrollbar-width:none}
.sellers-scroll::-webkit-scrollbar{display:none}
.seller-chip{display:flex;align-items:center;gap:var(--space-sm);padding:var(--space-sm) var(--space-md);background:var(--color-bg-card);border:1px solid var(--color-border);border-radius:var(--radius-full);cursor:pointer;white-space:nowrap;transition:all var(--t-base);flex-shrink:0}
.seller-chip:hover{border-color:var(--color-accent);background:var(--color-accent-soft)}
.seller-chip__avatar{width:28px;height:28px;border-radius:var(--radius-full);overflow:hidden;flex-shrink:0}
.seller-chip__avatar img{width:100%;height:100%;object-fit:cover}
.seller-chip__name{font-size:var(--fs-sm);font-weight:var(--fw-medium)}
.seller-chip__sales{font-size:var(--fs-xs);color:var(--color-text-muted)}
.seller-chip.premium{border-color:var(--color-gold-soft)}
.seller-chip.premium .seller-chip__avatar{border:2px solid var(--color-gold)}

/* ── Seller Banner ── */
.seller-banner {
    position: relative;
    padding: var(--space-xl) var(--space-lg);
    background: linear-gradient(135deg, var(--color-accent) 0%, #68101E 100%);
    color: #fff !important;
    overflow: hidden;
    margin: var(--space-md);
    border-radius: var(--radius-xl);
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}

.seller-banner__content {
    position: relative;
    z-index: 2;
    max-width: 80%;
}

.seller-banner__title {
    font-size: var(--fs-xl);
    font-weight: var(--fw-bold);
    margin-bottom: var(--space-xs);
    color: #fff !important;
}

.seller-banner__text {
    font-size: var(--fs-sm);
    opacity: 0.9;
    margin-bottom: var(--space-lg);
    color: rgba(255,255,255,0.9);
}

.seller-banner__actions {
    display: flex;
    gap: var(--space-sm);
}

.seller-banner span, .seller-banner p, .seller-banner h1, .seller-banner h2 { color: #fff; }

.seller-banner__bg {
    position: absolute;
    top: -20%;
    right: -10%;
    width: 60%;
    height: 140%;
    background: radial-gradient(circle, rgba(255,255,255,0.15) 0%, transparent 70%);
    transform: rotate(-15deg);
    z-index: 1;
}

.seller-banner::after {
    content: '👑';
    position: absolute;
    bottom: -10px;
    right: 10px;
    font-size: 80px;
    opacity: 0.1;
    z-index: 1;
}