.shop-page { --shop: #ff8417; --shop-deep: #e96e08; --shop-soft: #fff1e4; background: #f3faff; padding-bottom: 16px; }
.shop-page .shell { width: min(1280px, calc(100% - 32px)); }
.shop-page .page-grid { grid-template-columns: minmax(0, 2.16fr) minmax(0, 1fr); gap: 24px; margin-top: 0; }
.shop-page .page-breadcrumb { min-height: 35px; }
.shop-top-ad, .shop-bottom-ad { height: 96px; margin-top: 12px; }
.shop-bottom-ad { margin-top: 16px; }
.shop-button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 42px; padding: 0 22px; border: 1px solid transparent; border-radius: 8px; font-weight: 700; text-decoration: none; }
.shop-button--orange { background: var(--shop); color: #fff; }
.shop-button--orange:hover, .shop-button--orange:focus-visible { background: var(--shop-deep); color: #fff; }
.shop-hero { display: flex; align-items: center; justify-content: space-between; gap: 18px; min-height: 128px; padding: 21px 27px; border: 1px solid #d7e9fa; border-radius: 12px; background: linear-gradient(100deg, rgb(255 255 255 / 92%), rgb(234 247 255 / 64%)), url('/static/images/responsive-second/second-campus-hero-v1.png') center 55%/cover; }
.shop-hero__copy { min-width: 0; }.shop-hero small { color: #536d8f; font-size: 13px; }.shop-hero h1 { margin: 2px 0; color: #0964c8; font-size: 29px; line-height: 1.3; }.shop-hero p { margin: 3px 0 0; color: #365778; font-size: 14px; }
.shop-hero .shop-button { flex: none; }
.shop-filter { padding: 14px 15px 12px; }.shop-heading { margin: 0 0 12px; font-size: 17px; }.shop-heading::before, .shop-detail__section h2::before { display: inline-block; width: 4px; height: 18px; margin-right: 8px; border-radius: 3px; background: var(--shop); vertical-align: -3px; content: ''; }
.shop-filter__line { display: flex; align-items: flex-start; gap: 10px; margin: 10px 0 0; }.shop-filter__line > strong { flex: none; min-width: 64px; padding-top: 7px; color: #667995; font-size: 13px; }.shop-segment { display: inline-flex; flex-wrap: nowrap; gap: 2px; min-width: 0; max-width: 100%; padding: 3px; border-radius: 12px; background: #f2f4f8; overflow-x: auto; }.shop-segment a, .shop-filter__sort { display: inline-flex; align-items: center; min-height: 34px; padding: 0 15px; border-radius: 10px; color: #63748d; font-size: 13px; white-space: nowrap; text-decoration: none; }.shop-segment a.is-active, .shop-segment a:hover, .shop-segment a:focus-visible, .shop-filter__sort { background: var(--shop); color: #fff; font-weight: 700; }.shop-filter__message { color: #5d718d; font-size: 14px; }
.shop-filter__ad { margin-top: 14px; padding-top: 12px; border-top: 1px solid #edf1f6; }.shop-main-ad { min-height: 96px; }
.shop-results { display: flex; flex-direction: column; gap: 10px; }.shop-item { display: grid; grid-template-columns: 145px minmax(0, 1fr) 120px; gap: 16px; min-height: 148px; padding: 11px; border: 1px solid #e1eaf6; border-radius: 12px; background: #fff; color: inherit; text-decoration: none; box-shadow: var(--shadow); }.shop-item:hover, .shop-item:focus-visible { border-color: #ffc48f; }.shop-item__symbol { display: grid; place-items: center; min-height: 125px; border-radius: 8px; background: linear-gradient(135deg, #ffe7cd, #eaf3ff); color: #e87515; font-size: 44px; }.shop-item__body { display: flex; flex-direction: column; min-width: 0; }.shop-item__title strong { color: #152d53; font-size: 17px; line-height: 1.35; }.shop-item__tags { display: flex; flex-wrap: wrap; gap: 5px; margin: 7px 0; }.shop-item__tags b { padding: 2px 7px; border-radius: 4px; background: #eaf3ff; color: #1874d9; font-size: 11px; font-weight: 500; }.shop-item__tags b:nth-child(n+2) { background: #fff0e3; color: #e87515; }.shop-item__meta, .shop-item__description { overflow: hidden; color: #5d718d; font-size: 12px; line-height: 1.6; white-space: nowrap; text-overflow: ellipsis; }.shop-item__description { margin-top: 5px; color: #8190a5; }.shop-item__stats { display: flex; align-items: flex-end; flex-direction: column; justify-content: center; gap: 7px; color: #e87515; }.shop-item__stats small { color: #71839d; font-size: 12px; }.shop-empty { margin: 0; padding: 24px; border-radius: 12px; background: #fff; color: #738198; text-align: center; }.shop-more { align-self: center; background: #fff; color: #df741b; }
.shop-sidebar .public-channel-nav__item--shop.is-active { border-color: #ff8b31; background: #ff8316; color: #fff; }.shop-rules { padding: 12px 14px; }.shop-rules h2 { margin: 0; font-size: 16px; }.shop-rules ol { margin: 8px 0 0; padding-left: 20px; color: #546984; font-size: 13px; line-height: 1.7; }.shop-rules li { padding: 3px 0; }.shop-side-ad { padding: 8px; }.shop-side-ad .ad-slot { min-height: 304px; }
.shop-detail { padding: 7px; }.shop-detail__hero { display: grid; place-items: center; height: 255px; border-radius: 8px; background: linear-gradient(110deg, #e9f4ff, #fff1e4); color: #ef8a31; font-size: 80px; }.shop-detail__identity { display: flex; align-items: center; gap: 14px; padding: 13px 12px 8px; }.shop-detail__avatar { display: grid; place-items: center; flex: none; width: 65px; height: 65px; border-radius: 50%; background: #ffdfc5; color: #ca5d09; font-size: 28px; }.shop-detail__title { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; }.shop-detail__title h1 { margin: 0; color: #183153; font-size: 23px; }.shop-detail__tag { padding: 3px 7px; border-radius: 4px; background: #eaf3ff; color: #2571c7; font-size: 12px; }.shop-detail__identity p { margin: 2px 0; color: #6f8099; font-size: 13px; }.shop-detail__info { display: flex; flex-wrap: wrap; gap: 8px 22px; padding: 0 14px 13px; border-bottom: 1px solid #eaf0f8; color: #5e7190; font-size: 13px; }.shop-detail__info i { margin-right: 4px; color: #3068a9; }.shop-detail__contact, .shop-detail__section { padding: 13px 8px 16px; border-bottom: 1px solid #eaf0f8; }.shop-detail__contact h2, .shop-detail__section h2 { margin: 0 0 12px; font-size: 17px; }.shop-detail__contact p, .shop-detail__section p { margin: 0 5px; color: #4f6382; font-size: 14px; line-height: 1.8; white-space: pre-wrap; overflow-wrap: anywhere; }.shop-detail__missing p { color: #8290a4; }.shop-detail__notice { margin: 14px 12px; color: #687b94; font-size: 13px; }.shop-detail .shop-back { margin-left: 12px; background: var(--shop-soft); color: #c86513; }.shop-detail__read-ad { padding: 0; }.shop-empty-state { padding: 24px; }
.shop-detail__children{display:grid;gap:8px;margin:0;padding:0;list-style:none}.shop-detail__children li{display:flex;justify-content:space-between;gap:12px;min-width:0;padding:10px 12px;border:1px solid #eaf0f8;border-radius:8px;background:#fbfdff;color:#314969;font-size:14px}.shop-detail__children span{min-width:0;overflow-wrap:anywhere}.shop-detail__children b{flex:none;color:#d66c12}.shop-detail__children small{flex:none;color:#71839c}
.shop-detail__product-image{flex:none;width:54px;height:54px;border-radius:7px;object-fit:cover}.shop-detail__children li:has(.shop-detail__product-image){align-items:center}
@media (max-width: 800px) { .shop-page .page-grid { display: flex; flex-direction: column; }.shop-page .page-grid > .main-rail, .shop-page .page-grid > .side-rail { display: contents; }.shop-hero { order: 1; }.shop-sidebar .public-side-search, .shop-sidebar .rail-search, .shop-sidebar .search-card { order: 2; }.shop-filter, .shop-detail, .shop-empty-state, .shop-detail__read-ad { order: 3; }.shop-results { order: 4; }.shop-sidebar .public-channel-nav { order: 5; }.shop-sidebar .shop-rules { order: 6; }.shop-sidebar .shop-side-ad { order: 7; }.shop-top-ad, .shop-bottom-ad { height: 88px; }.shop-item { grid-template-columns: 120px minmax(0, 1fr) 100px; gap: 9px; } }
@media (max-width: 600px) { .shop-top-ad, .shop-bottom-ad { height: 72px; }.shop-hero { align-items: flex-start; flex-direction: column; padding: 16px; }.shop-hero h1 { font-size: 23px; }.shop-hero p { font-size: 13px; }.shop-hero .shop-button { width: 100%; min-height: 44px; }.shop-filter { padding: 12px; }.shop-filter__line { flex-direction: column; gap: 4px; }.shop-filter__line > strong { padding: 0; }.shop-segment a { min-height: 38px; }.shop-item { grid-template-columns: 88px minmax(0, 1fr); min-height: 130px; padding: 8px; }.shop-item__symbol { min-height: 103px; font-size: 32px; }.shop-item__title strong { font-size: 15px; }.shop-item__stats { grid-column: 2; align-items: flex-start; flex-direction: row; justify-content: flex-start; flex-wrap: wrap; gap: 7px; }.shop-item__description { display: none; }.shop-detail__hero { height: 200px; font-size: 64px; }.shop-detail__identity { align-items: flex-start; gap: 9px; }.shop-detail__avatar { width: 48px; height: 48px; font-size: 20px; }.shop-detail__title h1 { font-size: 19px; }.shop-detail__info { flex-direction: column; gap: 5px; } }

.shop-detail__claim { margin: 0; padding: 0 14px 14px; } .shop-detail__claim .shop-button { display: inline-flex; min-height: 40px; align-items: center; }