* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: 'Roboto', sans-serif; background: #fff; color: #000; }
h1, h2, h3, .logo, .btn-urban { font-family: 'Anton', sans-serif; text-transform: uppercase; }
a { text-decoration: none; color: inherit; }

/* Switcher */
.demo-switcher { position: fixed; bottom: 20px; right: 20px; background: #000; color: white; padding: 10px 20px; border-radius: 0; z-index: 999; display: flex; gap: 10px; font-size: 0.9rem; border: 2px solid #000; }
.demo-switcher a.active { color: #f1c40f; text-decoration: underline; }
.agent-back-btn { position: fixed; top: 20px; left: 20px; background: #000; color: #f1c40f; padding: 8px 15px; font-weight: bold; z-index: 999; }

/* Header */
.urban-header { padding: 20px 40px; display: flex; justify-content: space-between; align-items: center; border-bottom: 4px solid #000; }
.logo { font-size: 2.5rem; letter-spacing: 2px; }
.logo span { color: #f1c40f; }
.cart { font-weight: bold; font-size: 1.2rem; }

/* Hero */
.hero-urban { display: flex; border-bottom: 4px solid #000; min-height: 600px; }
.hero-text { flex: 1; padding: 50px; display: flex; flex-direction: column; justify-content: center; background: #f1c40f; }
.hero-text h2 { font-size: 3rem; margin: 0; }
.hero-text h1 { font-size: 6rem; line-height: 0.9; margin: 0 0 30px 0; }
.btn-urban { background: #000; color: white; padding: 15px 40px; font-size: 1.5rem; display: inline-block; width: fit-content; transition: 0.2s; }
.btn-urban:hover { background: white; color: #000; border: 4px solid #000; }
.hero-img { flex: 1; overflow: hidden; position: relative; }
.hero-img img { width: 100%; height: 100%; object-fit: cover; }

/* Products */
.products-urban { display: grid; grid-template-columns: repeat(3, 1fr); }
.product-card { border-right: 4px solid #000; border-bottom: 4px solid #000; position: relative; }
.product-card:last-child { border-right: none; }
.p-img { height: 400px; overflow: hidden; background: #f5f5f5; }
.p-img img { width: 100%; height: 100%; object-fit: cover; transition: 0.3s; mix-blend-mode: multiply; }
.product-card:hover .p-img img { transform: scale(1.1); }
.p-info { padding: 20px; display: flex; justify-content: space-between; align-items: center; background: white; position: absolute; bottom: 0; width: 100%; border-top: 4px solid #000; }
.p-info h3 { font-size: 1.5rem; margin: 0; }
.p-info span { font-weight: bold; font-size: 1.2rem; }

@media (max-width: 768px) {
    .hero-urban { flex-direction: column; }
    .hero-text h1 { font-size: 4rem; }
    .products-urban { grid-template-columns: 1fr; }
    .product-card { border-right: none; }
}