.site-header { background: #fff; border-bottom: 1px solid var(--sj-border); position: sticky; top: 0; z-index: 50; }
.topbar__inner { display: flex; align-items: center; justify-content: space-between; min-height: 70px; gap: 1rem; }
.brand { display: inline-flex; align-items: center; gap: .5rem; color: var(--sj-primary-dark); font-weight: 900; font-size: 1.25rem; text-decoration: none; }
.brand__mark { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 12px; background: #efe7f9; color: var(--sj-primary); }
.main-nav, .header-actions { display: flex; align-items: center; gap: 1rem; }
.searchbar { background: #fbfaf8; border-top: 1px solid var(--sj-border); padding: .75rem 0; }
.searchbar__form { display: grid; grid-template-columns: 1fr 220px auto; gap: .75rem; }
.hero { padding: 4rem 0; background: radial-gradient(circle at 20% 10%, #efe5f8, transparent 35%), linear-gradient(135deg, #fff, #f8f0e4); }
.hero__grid { display: grid; grid-template-columns: 1fr 380px; gap: 2rem; align-items: center; }
.hero h1 { font-size: clamp(2.2rem, 5vw, 4.6rem); line-height: 1; margin: .4rem 0 1rem; color: #271536; }
.hero__text { color: var(--sj-muted); font-size: 1.15rem; max-width: 62ch; }
.hero-search { display: grid; grid-template-columns: 1fr 260px auto; gap: .75rem; margin-top: 1.5rem; padding: .75rem; background: rgba(255,255,255,.78); border: 1px solid var(--sj-border); border-radius: 18px; box-shadow: var(--shadow); }
.hero-card { background: #fff; border: 1px solid var(--sj-border); border-radius: 24px; padding: 1.5rem; box-shadow: var(--shadow); }
.category-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.category-card { display: flex; flex-direction: column; gap: .35rem; border: 1px solid var(--sj-border); border-radius: 18px; padding: 1rem; background: #fff; box-shadow: 0 10px 22px rgba(37,26,50,.05); text-decoration: none; }
.category-card span { color: var(--sj-text); font-weight: 800; }
.category-card small { color: var(--sj-muted); }
.listing-layout { display: grid; grid-template-columns: 280px 1fr; gap: 1.25rem; align-items: start; }
.filters-card { position: sticky; top: 150px; }
.filters-card form { display: grid; gap: .85rem; }
.detail-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 1.25rem; align-items: start; }
.detail-layout--lower { grid-template-columns: 1fr 1fr; }
.media-gallery { display: grid; gap: .75rem; }
.media-main { background: #111; border-radius: 20px; overflow: hidden; display: grid; place-items: center; min-height: 420px; }
.media-main img, .media-main video { width: 100%; max-height: 640px; object-fit: contain; }
.media-thumbs { display: flex; gap: .5rem; flex-wrap: wrap; }
.thumb { border: 1px solid var(--sj-border); background: #fff; border-radius: 12px; padding: .25rem; width: 88px; height: 70px; overflow: hidden; cursor: pointer; }
.thumb img { width: 100%; height: 100%; object-fit: cover; border-radius: 8px; }
.thumb-processing { display: grid; place-items: center; font-size: .75rem; color: var(--sj-muted); }
.feature-list { display: grid; grid-template-columns: 160px 1fr; gap: .6rem 1rem; }
.feature-list dt { color: var(--sj-muted); }
.feature-list dd { margin: 0; font-weight: 650; }
.description-text { white-space: normal; }
.seller-panel .price { font-size: 1.8rem; font-weight: 900; color: var(--sj-primary-dark); margin: .5rem 0 1rem; }
.seller-mini { display: grid; gap: .25rem; color: var(--sj-muted); margin: 1rem 0; }
.sticky-card { position: sticky; top: 150px; display: grid; gap: .75rem; }
.category-tree { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.category-block { background: #fff; border: 1px solid var(--sj-border); border-radius: 18px; padding: 1rem; }
.category-block h2 { margin: 0 0 .4rem; }
.tag-list { display: flex; gap: .45rem; flex-wrap: wrap; }
.tag-list a { border: 1px solid var(--sj-border); border-radius: 999px; padding: .35rem .65rem; background: #fbfaf8; font-size: .92rem; }
.auth-page { min-height: 70vh; display: grid; place-items: center; padding: 2rem; }
.auth-card { width: min(460px, 100%); }
.auth-card--wide { width: min(760px, 100%); }
.site-footer { margin-top: 3rem; background: #21182b; color: #e9e3f0; padding: 2rem 0; }
.site-footer a { color: #fff; }
.footer-grid { display: grid; grid-template-columns: 1fr auto auto; gap: 2rem; }
@media (max-width: 940px) { .main-nav { display: none; } .hero__grid, .detail-layout, .detail-layout--lower, .listing-layout, .category-tree { grid-template-columns: 1fr; } .hero-search, .searchbar__form { grid-template-columns: 1fr; } .filters-card, .sticky-card { position: static; } .category-grid { grid-template-columns: repeat(2, 1fr); } .footer-grid { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .header-actions { gap: .5rem; font-size: .9rem; } .header-actions .btn { display: none; } .category-grid { grid-template-columns: 1fr; } .media-main { min-height: 260px; } }