.shops-header { padding-bottom: 12px; }
.shops-intro { display: flex; align-items: center; gap: 9px; margin: 14px 0 0; }
.shops-intro > span { flex: none; font-size: 32px; }
.shops-intro h1 { margin: 0; font-size: clamp(20px, 5.2vw, 36px); letter-spacing: -.5px; line-height: 1.1; }
.shops-intro p { margin: 4px 0 0; font-size: clamp(11px, 2.8vw, 17px); }
.shops-header .search { margin: 12px 0 10px; }
.shops-header .camera { border: 0; border-radius: 30px; }
.shops-hero { position: relative; display: flex; align-items: center; overflow: hidden; min-height: 150px; border: 1px solid #ffffff99; border-radius: 17px; background: radial-gradient(ellipse at 70% 70%, #ea00c4, #75009f 48%, #450073); box-shadow: 0 0 15px #f4a1f98a; }
.shops-hero img { position: absolute; right: 0; bottom: 0; width: 43%; height: 100%; object-fit: cover; object-position: center; mask-image: linear-gradient(to right, transparent, #000 20%); }
.hero-copy { position: relative; z-index: 1; width: 66%; padding: 12px 0 12px 14px; }
.hero-copy h2 { margin: 0; font-size: clamp(17px, 4.3vw, 32px); font-style: italic; line-height: 1.05; letter-spacing: -.5px; }
.hero-copy p { margin: 7px 0; font-size: clamp(11px, 2.8vw, 18px); line-height: 1.15; }
.hero-copy a { display: inline-flex; align-items: center; gap: 8px; padding: 7px 11px; border-radius: 30px; color: #281222; background: #ffcb20; font-size: clamp(10px, 2.5vw, 15px); font-weight: 800; white-space: nowrap; }
.hero-copy a span { font-size: 18px; line-height: .6; }
.shops-main { padding: 10px 12px 22px; }
.shop-filters { display: grid; grid-template-columns: 1fr 1fr 1.25fr 1.22fr; gap: 5px; }
.shop-filters label, .shop-filters button { display: flex; align-items: center; justify-content: center; min-width: 0; min-height: 33px; padding: 0 4px; border: 1px solid #e8e5e9; border-radius: 25px; background: #fff; box-shadow: 0 2px 4px #00000014; font-size: clamp(9px, 2.5vw, 14px); font-weight: 700; white-space: nowrap; }
.shop-filters label > span:first-child { font-size: 15px; }
.shop-filters select { min-width: 0; max-width: 100%; padding: 4px 1px; border: 0; background: transparent; color: #17131b; font-size: inherit; font-weight: inherit; }
.shop-filters button[aria-pressed="true"] { color: #720092; border-color: #9c3aa9; background: #f9effa; }
.shops-heading { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-top: 11px; }
.shops-heading h2 { margin: 0; font-size: clamp(18px, 4.7vw, 27px); letter-spacing: -.6px; }
.shops-heading button { padding: 0; border: 0; color: #ef7100; background: transparent; font-size: clamp(11px, 2.8vw, 15px); font-weight: 700; white-space: nowrap; }
.shops-heading button span { font-size: 20px; }
.shops-main .demo-note { margin: 4px 0 7px; font-size: 10px; }
.shop-status { margin: 4px 0; color: #65566a; font-size: 11px; }
.shop-status:empty { display: none; }
.shop-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.shop-card { min-width: 0; overflow: hidden; border: 1px solid #e5e0e5; border-radius: 11px; background: white; box-shadow: 0 2px 4px #0000001a; }
.shop-cover { position: relative; height: clamp(86px, 22vw, 170px); background: #f3def2; }
.shop-cover > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.shop-verified { position: absolute; top: 5px; right: 34px; padding: 4px 6px; border-radius: 20px; color: white; background: #08ad39; font-size: clamp(9px, 2.2vw, 12px); font-weight: 800; box-shadow: 0 2px 5px #0004; white-space: nowrap; }
.shop-favorite { position: absolute; top: 4px; right: 4px; display: grid; place-items: center; width: 27px; height: 27px; padding: 4px; border: 0; border-radius: 50%; color: #17131b; background: #fff; }
.shop-favorite svg { width: 20px; height: 20px; }
.shop-favorite[aria-pressed="true"] { color: #ef3442; }
.shop-favorite[aria-pressed="true"] svg { fill: currentColor; }
.shop-info { position: relative; padding: 6px 7px 7px; }
.shop-name { display: flex; align-items: center; gap: 5px; min-height: 31px; margin: -17px 0 2px; position: relative; font-size: clamp(12px, 3.2vw, 18px); font-weight: 800; line-height: 1.05; }
.shop-logo { display: flex; align-items: center; justify-content: center; flex: none; width: 43px; height: 43px; padding: 3px; border: 2px solid #eee; border-radius: 50%; color: #4a188c; background: white; font-size: 10px; font-weight: 900; text-align: center; line-height: 1; }
.shop-meta { display: flex; gap: 5px; align-items: flex-start; margin: 3px 0; font-size: clamp(10px, 2.7vw, 14px); line-height: 1.15; }
.shop-meta span:first-child { flex: none; font-size: 12px; }
.shop-visit { display: block; width: 100%; margin-top: 6px; padding: 6px 3px; border: 0; border-radius: 22px; color: white; background: linear-gradient(#ff9900, #ff6900); font-size: clamp(10px, 2.65vw, 14px); font-weight: 700; }
.shop-contact { display: block; margin-top: 6px; padding: 7px 4px; border: 1px solid #8a00a7; border-radius: 22px; color: #710093; font-size: clamp(10px, 2.65vw, 14px); font-weight: 700; text-align: center; }
.shop-dialog { width: min(90vw, 380px); padding: 24px; border: 0; border-radius: 16px; color: #24152b; box-shadow: 0 10px 40px #0004; }
.shop-dialog::backdrop { background: #16031b99; }
.shop-dialog h2 { margin: 0 30px 12px 0; }
.shop-dialog p { line-height: 1.4; }
.dialog-close { float: right; width: 32px; height: 32px; border: 0; border-radius: 50%; font-size: 24px; background: #f4edf5; }
@media (min-width: 650px) { .shops-main { padding: 16px 24px 30px; } .shop-grid { gap: 16px; } .shops-hero { min-height: 220px; } .shop-info { padding: 8px 12px 12px; } }
@media (max-width: 340px) { .shops-intro > span { font-size: 26px; } .hero-copy { width: 70%; padding-left: 9px; } .shop-filters { gap: 3px; } .shop-filters label, .shop-filters button { padding: 0 2px; font-size: 9px; } .shop-name { font-size: 11px; } .shop-logo { width: 36px; height: 36px; font-size: 8px; } }