:root { color-scheme: light; font-family: "DM Sans", sans-serif; background: #f4efe8; color: #111111; }
* { box-sizing: border-box; }
html, body { min-height: 100%; margin: 0; }
body { padding: clamp(16px, 4vw, 48px); background: #f4efe8; }
main { width: min(1180px, 100%); }
.site-header { width: min(1180px, 100%); margin: 0 auto 28px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand { display: flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; font-size: 1.1rem; }
.brand img { width: 42px; height: 42px; border-radius: 12px; object-fit: contain; }
.site-header nav { display: flex; gap: 6px; padding: 5px; border-radius: 999px; background: rgba(255,255,255,.62); }
.site-header nav a { padding: 9px 14px; border-radius: 999px; color: #42504a; text-decoration: none; font-size: .84rem; font-weight: 700; }
.site-header nav a.active { background: #111b17; color: white; }
body > main { margin: 0 auto; }
.advertisement a { position: relative; display: block; overflow: hidden; border: 1px solid rgba(255,255,255,.12); border-radius: 18px; background: #09100d; box-shadow: 0 30px 80px rgba(0,0,0,.38); }
.advertisement img, .advertisement video { display: block; width: 100%; max-height: calc(100vh - 96px); object-fit: contain; }
.advertisement span { position: absolute; right: 16px; bottom: 16px; padding: 12px 16px; border-radius: 999px; background: #f28a2e; color: #111111; font-size: .78rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.empty-state { padding: 64px 24px; border: 1px solid rgba(255,255,255,.12); border-radius: 18px; text-align: center; background: rgba(9,16,13,.72); }
.empty-state p { margin: 0; color: #b9c9c1; }
.catalog-heading { margin: 18px 0 28px; }
.catalog-heading span, .product-category { color: #cf6d19; font-size: .76rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.catalog-heading h1 { margin: 4px 0; font-size: clamp(2rem, 5vw, 4rem); }
.catalog-heading p { margin: 0; color: #5d6863; }
.catalog-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 22px; }
.product-card { overflow: hidden; border: 1px solid #ded8cf; border-radius: 18px; background: white; box-shadow: 0 16px 40px rgba(17,27,23,.09); }
.product-gallery { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; background: #e8e4dc; }
.product-gallery img { flex: 0 0 100%; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; scroll-snap-align: start; }
.product-photo-empty { display: grid; place-items: center; width: 100%; aspect-ratio: 4 / 3; background: #e8e4dc; color: #7b827f; }
.product-content { padding: 20px; }
.product-content h2 { margin: 5px 0 2px; font-size: 1.25rem; }
.product-content small { color: #707a75; }
.product-content p { line-height: 1.55; color: #48534e; }
.product-meta { font-size: .9rem; }
.product-colors { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; color: #48534e; font-size: .86rem; }
.product-colors span { padding: 5px 9px; border-radius: 999px; background: #edf0ed; }
.product-price { display: block; margin-top: 18px; font-size: 1.28rem; color: #111b17; }
@media (max-width: 560px) { body { padding: 14px; } .site-header { align-items: flex-start; flex-direction: column; } .site-header nav { width: 100%; } .site-header nav a { flex: 1; text-align: center; } .advertisement a { border-radius: 12px; } .advertisement img, .advertisement video { max-height: calc(100vh - 150px); } .advertisement span { position: static; display: block; border-radius: 0; text-align: center; } }