body.catalog-site {
  --hok-primary: #2563eb;
  --hok-primary-dark: #1d4ed8;
  --hok-primary-soft: #eff6ff;
  --hok-bg: #f4f6f8;
  --hok-card: #ffffff;
  --hok-border: #dbe4f3;
  --hok-text: #0f172a;
  --hok-muted: #64748b;
  --hok-price: #dc2626;
  --hok-shadow: 0 8px 24px rgba(15, 23, 42, .06);
  --hok-shadow-hover: 0 16px 34px rgba(37, 99, 235, .13);
}
body.catalog-site { background: var(--hok-bg); color: var(--hok-text); }
body.catalog-site .ui-icon { width: 1em; height: 1em; display: inline-block; vertical-align: -.14em; flex: 0 0 auto; }
body.catalog-site .catalog-header { position: sticky; top: 0; z-index: 60; background: rgba(255,255,255,.96); border-bottom: 1px solid var(--hok-border); backdrop-filter: blur(14px); }
body.catalog-site .catalog-header-inner, body.catalog-site .catalog-subnav-inner { max-width: 1240px; width: calc(100% - 40px); margin: 0 auto; }
body.catalog-site .catalog-header-inner { min-height: 70px; display: flex; align-items: center; gap: 26px; }
body.catalog-site .catalog-brand { display: inline-flex; align-items: center; gap: 10px; color: var(--hok-text); font-size: 18px; font-weight: 800; white-space: nowrap; text-decoration: none; }
body.catalog-site .catalog-brand:hover { text-decoration: none; color: var(--hok-primary-dark); }
body.catalog-site .catalog-brand-mark { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; color: white; background: linear-gradient(135deg, #2563eb, #60a5fa); box-shadow: 0 6px 14px rgba(37,99,235,.23); font-size: 19px; }
body.catalog-site .catalog-search { min-width: 190px; max-width: 520px; flex: 1; height: 42px; display: flex; align-items: center; gap: 10px; padding: 0 13px; border: 1px solid var(--hok-border); border-radius: 9px; color: var(--hok-muted); background: #f8fafc; }
body.catalog-site .catalog-search:focus-within { border-color: var(--hok-primary); box-shadow: 0 0 0 3px rgba(37,99,235,.10); background: white; }
body.catalog-site .catalog-search input { min-width: 0; flex: 1; border: 0; outline: 0; color: var(--hok-text); background: transparent; }
body.catalog-site .catalog-search input::placeholder { color: #94a3b8; }
body.catalog-site .catalog-search-link { text-decoration: none; font-size: 14px; }
body.catalog-site .catalog-search-link:hover { color: var(--hok-primary); text-decoration: none; }
body.catalog-site .catalog-search .search-clear { margin-left: auto; border: 0; background: transparent; color: var(--hok-muted); font-size: 20px; line-height: 1; }
body.catalog-site .catalog-header-actions { display: flex; align-items: center; gap: 18px; white-space: nowrap; }
body.catalog-site .catalog-language { display: inline-flex; align-items: center; gap: 6px; color: var(--hok-muted); font-size: 13px; }
body.catalog-site .catalog-account { border: 0; background: transparent; color: var(--hok-text); font-weight: 600; font-size: 14px; }
body.catalog-site .catalog-account:hover { color: var(--hok-primary); }
body.catalog-site .catalog-subnav { background: white; border-bottom: 1px solid var(--hok-border); }
body.catalog-site .catalog-subnav-inner { min-height: 48px; display: flex; align-items: center; gap: 8px; overflow-x: auto; }
body.catalog-site .catalog-subnav .navbar-link { display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border: 0; border-radius: 7px; background: transparent; color: #475569; font-size: 14px; white-space: nowrap; text-decoration: none; }
body.catalog-site .catalog-subnav .navbar-link:hover, body.catalog-site .catalog-subnav .navbar-link.active { color: var(--hok-primary); background: var(--hok-primary-soft); text-decoration: none; }
body.catalog-site .catalog-nav-note { margin-left: auto; display: inline-flex; align-items: center; gap: 7px; color: var(--hok-muted); font-size: 13px; white-space: nowrap; }
body.catalog-site .catalog-status-dot { width: 7px; height: 7px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 4px #dcfce7; }
body.catalog-site .catalog-main { max-width: 1240px !important; width: calc(100% - 40px) !important; padding: 26px 0 56px !important; }
body.catalog-site .catalog-promos { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 30px; }
body.catalog-site .catalog-promo { position: relative; min-height: 190px; overflow: hidden; display: flex; align-items: center; justify-content: space-between; padding: 28px 32px; border: 0; border-radius: 14px; text-align: left; color: white; cursor: pointer; text-decoration: none; }
body.catalog-site .catalog-promo:hover { text-decoration: none; transform: translateY(-2px); }
body.catalog-site .catalog-promo-tools { background: linear-gradient(118deg, #111827, #1e3a8a); }
body.catalog-site .catalog-promo-service { background: linear-gradient(118deg, #1d4ed8, #38bdf8); }
body.catalog-site .catalog-promo-label { display: block; margin-bottom: 11px; color: rgba(255,255,255,.72); font-size: 11px; letter-spacing: 1.2px; font-weight: 800; }
body.catalog-site .catalog-promo h2 { margin: 0 0 7px; color: white; font-size: 24px; line-height: 1.25; }
body.catalog-site .catalog-promo p { margin: 0 0 18px; color: rgba(255,255,255,.78); font-size: 14px; }
body.catalog-site .catalog-promo-link { display: inline-flex; align-items: center; gap: 7px; color: white; font-size: 13px; font-weight: 700; }
body.catalog-site .catalog-promo-art { position: relative; z-index: 0; display: grid; place-items: center; width: 100px; height: 100px; color: rgba(255,255,255,.88); font-size: 78px; opacity: .25; transform: rotate(-9deg); }
body.catalog-site .catalog-breadcrumb { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; color: var(--hok-muted); font-size: 13px; }
body.catalog-site .catalog-breadcrumb a { color: var(--hok-primary); }
body.catalog-site .catalog-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 22px; }
body.catalog-site .catalog-heading h1 { margin: 0 0 5px; color: var(--hok-text); font-size: 30px; line-height: 1.2; }
body.catalog-site .catalog-heading p { margin: 0; color: var(--hok-muted); font-size: 14px; }
body.catalog-site .catalog-heading-note { display: inline-flex; align-items: center; gap: 7px; color: var(--hok-primary); font-size: 13px; font-weight: 700; white-space: nowrap; }
body.catalog-site .catalog-heading-note .ui-icon { font-size: 17px; }
body.catalog-site .catalog-categories { padding: 0 !important; margin-bottom: 14px !important; background: transparent !important; border: 0 !important; }
body.catalog-site .catalog-categories .filter-header { display: none; }
body.catalog-site .catalog-categories .tag-row { gap: 8px; }
body.catalog-site .catalog-categories .tag-btn { display: inline-flex; align-items: center; gap: 7px; padding: 9px 15px; border-color: var(--hok-border); border-radius: 8px; background: white; color: #475569; box-shadow: 0 1px 2px rgba(15,23,42,.03); }
body.catalog-site .catalog-categories .tag-btn.active, body.catalog-site .catalog-categories .tag-btn:hover { border-color: var(--hok-primary); background: var(--hok-primary); color: white; }
body.catalog-site .catalog-filters { margin: 0 0 17px; border: 1px solid var(--hok-border); border-radius: 10px; background: rgba(255,255,255,.7); }
body.catalog-site .catalog-filters summary { display: flex; align-items: center; gap: 8px; padding: 12px 15px; color: var(--hok-text); cursor: pointer; font-size: 14px; font-weight: 700; list-style: none; }
body.catalog-site .catalog-filters summary::-webkit-details-marker { display: none; }
body.catalog-site .catalog-filters summary::after { content: '＋'; margin-left: auto; color: var(--hok-muted); font-size: 17px; }
body.catalog-site .catalog-filters[open] summary::after { content: '－'; }
body.catalog-site .catalog-filter-summary { margin-left: 4px; color: var(--hok-muted); font-size: 12px; font-weight: 400; }
body.catalog-site .catalog-filter-content { padding: 0 14px 14px; border-top: 1px solid var(--hok-border); }
body.catalog-site .catalog-filter-content .filter-block { margin: 13px 0 0; padding: 12px 13px; border-color: #e7edf6; border-radius: 8px; }
body.catalog-site .catalog-filter-content .filter-block:first-child { margin-top: 14px; }
body.catalog-site .catalog-filter-content .filter-block--primary { background: #f8fbff; }
body.catalog-site .catalog-filter-content .filter-block--secondary { background: #fff; }
body.catalog-site .catalog-filter-content .tag-btn { padding: 5px 12px; }
body.catalog-site .toolbar { min-height: 40px; display: flex; align-items: center; gap: 12px; margin: 17px 0 14px; }
body.catalog-site .catalog-toolbar-label { margin-right: auto; color: var(--hok-text); font-size: 17px; font-weight: 800; }
body.catalog-site .catalog-toolbar-label + .sort-select { margin-left: auto; }
body.catalog-site .toolbar .sort-select { height: 36px; padding: 0 29px 0 11px; border: 1px solid var(--hok-border); border-radius: 7px; background: white; color: #475569; }
body.catalog-site .toolbar .result-count { color: var(--hok-muted); font-size: 13px; }
body.catalog-site .catalog-tools-note { display: flex; align-items: center; gap: 8px; margin-bottom: 20px; padding: 11px 14px; border: 1px solid #bfdbfe; border-radius: 9px; background: #eff6ff; color: #1e40af; font-size: 13px; }
body.catalog-site .account-grid, body.catalog-site .software-grid { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
body.catalog-site .account-card.catalog-product-card, body.catalog-site .software-card.catalog-product-card { min-width: 0; display: flex; gap: 0; flex-direction: column; padding: 18px; border: 1px solid var(--hok-border); border-radius: 12px; background: var(--hok-card); box-shadow: var(--hok-shadow); transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
body.catalog-site .account-card.catalog-product-card:hover, body.catalog-site .software-card.catalog-product-card:hover { transform: translateY(-3px); border-color: #b9cff5; box-shadow: var(--hok-shadow-hover); }
body.catalog-site .catalog-card-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 20px; color: var(--hok-muted); font-size: 11px; }
body.catalog-site .catalog-card-owner { display: inline-flex; align-items: center; gap: 4px; color: #94a3b8; }
body.catalog-site .catalog-card-code { color: #94a3b8; font-family: var(--font-mono); }
body.catalog-site .catalog-card-icon { position: relative; width: 62px; height: 62px; display: grid; place-items: center; margin: 18px 0 13px; overflow: hidden; border-radius: 14px; color: var(--hok-primary); background: var(--hok-primary-soft); font-size: 31px; }
body.catalog-site .catalog-card-icon .catalog-card-cover { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: white; }
body.catalog-site .catalog-icon--tiktok { color: #111827; background: #f1f5f9; }
body.catalog-site .catalog-icon--capcut { color: #111827; background: #fef3c7; }
body.catalog-site .catalog-icon--apple { color: #111827; background: #f1f5f9; }
body.catalog-site .catalog-icon--google { background: #ecfdf5; }
body.catalog-site .catalog-icon--telegram { color: #0284c7; background: #e0f2fe; }
body.catalog-site .catalog-icon--store { color: #7c3aed; background: #f5f3ff; }
body.catalog-site .catalog-icon--globe { color: #0891b2; background: #ecfeff; }
body.catalog-site .catalog-card-kind { margin-bottom: 6px; color: var(--hok-primary); font-size: 12px; font-weight: 700; }
body.catalog-site .card-title { overflow-wrap: anywhere; min-height: 48px; margin: 0 !important; color: var(--hok-text); font-size: 17px; line-height: 1.45; }
body.catalog-site .card-title .card-title-main { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
body.catalog-site .card-description { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; overflow-wrap: anywhere; min-height: 46px; margin: 9px 0 12px !important; padding: 0 !important; color: var(--hok-muted) !important; font-size: 13px !important; line-height: 1.7 !important; }
body.catalog-site .catalog-card-meta { display: flex; flex-wrap: wrap; gap: 6px; min-height: 25px; margin-bottom: 14px; }
body.catalog-site .catalog-card-meta span { padding: 4px 8px; border-radius: 5px; background: #f8fafc; color: #64748b; font-size: 11px; }
body.catalog-site .catalog-card-bottom { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 36px; flex-wrap: wrap; margin-top: auto; padding-top: 14px; border-top: 1px solid #edf2f7; }
body.catalog-site .catalog-card-bottom .card-price { color: var(--hok-price); font-size: 19px; font-weight: 800; background: transparent; padding: 0; border-radius: 0; }
body.catalog-site .catalog-card-bottom .card-consultations { color: #94a3b8; font-size: 11px; }
body.catalog-site .catalog-card-actions { display: grid; grid-template-columns: 1fr 1.1fr; gap: 8px; margin-top: 13px; }
body.catalog-site .catalog-card-actions button { min-height: 37px; display: inline-flex; align-items: center; justify-content: center; gap: 5px; border-radius: 7px; font-size: 13px; font-weight: 700; }
body.catalog-site .catalog-details-btn { border: 1px solid var(--hok-border); background: white; color: #475569; }
body.catalog-site .catalog-details-btn:hover { border-color: var(--hok-primary); color: var(--hok-primary); }
body.catalog-site .catalog-card-actions .btn-contact { border: 1px solid var(--hok-primary); background: var(--hok-primary); color: white; }
body.catalog-site .catalog-card-actions .btn-contact:hover { background: var(--hok-primary-dark); }
body.catalog-site .catalog-card-actions .ui-icon { font-size: 15px; }
body.catalog-site .product-detail-dialog { max-width: 550px; text-align: left; max-height: 90vh; overflow-y: auto; padding: 27px; border-radius: 16px; }
body.catalog-site .product-detail-icon { width: 56px; height: 56px; display: grid; place-items: center; margin-bottom: 15px; border-radius: 14px; color: var(--hok-primary); background: var(--hok-primary-soft); font-size: 29px; }
body.catalog-site .product-detail-eyebrow { margin: 0 0 5px; color: var(--hok-primary); font-size: 11px; font-weight: 800; letter-spacing: 1px; }
body.catalog-site .product-detail-dialog h2 { margin: 0 0 10px; color: var(--hok-text); font-size: 25px; line-height: 1.3; }
body.catalog-site .product-detail-description { margin: 0 0 18px; color: var(--hok-muted); line-height: 1.7; white-space: pre-wrap; overflow-wrap: anywhere; }
body.catalog-site .product-detail-specs { display: grid; gap: 1px; margin: 0; border: 1px solid var(--hok-border); border-radius: 9px; overflow: hidden; }
body.catalog-site .product-detail-specs > div { display: grid; grid-template-columns: 100px 1fr; gap: 12px; padding: 10px 12px; background: #f8fafc; }
body.catalog-site .product-detail-specs > div:nth-child(even) { background: white; }
body.catalog-site .product-detail-specs dt { color: var(--hok-muted); font-size: 12px; }
body.catalog-site .product-detail-specs dd { margin: 0; color: var(--hok-text); font-size: 13px; overflow-wrap: anywhere; }
body.catalog-site .product-detail-actions { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--hok-border); }
body.catalog-site .product-detail-actions p { margin: 0 0 12px; color: var(--hok-muted); font-size: 13px; }
body.catalog-site .product-detail-actions .btn-contact { min-height: 41px; width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 7px; border: 0; border-radius: 8px; background: var(--hok-primary); color: white; font-weight: 700; }
body.catalog-site .contact-heading-icon { display: inline-grid; place-items: center; width: 38px; height: 38px; margin-bottom: 9px; border-radius: 10px; color: var(--hok-primary); background: var(--hok-primary-soft); font-size: 20px; }
body.catalog-site #contact-product-name { margin: 8px 0 3px; color: var(--hok-text); font-weight: 700; }
body.catalog-site .contact-product-code { color: var(--hok-muted); font-family: var(--font-mono); font-size: 12px; }
body.catalog-site .contact-channel-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 18px; }
body.catalog-site .contact-channel-actions button { min-height: 42px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; border: 1px solid var(--hok-border); border-radius: 8px; background: white; color: var(--hok-text); font-weight: 700; }
body.catalog-site .contact-channel-actions button:hover { border-color: var(--hok-primary); color: var(--hok-primary); background: var(--hok-primary-soft); }
body.catalog-site .modal-dialog { border: 1px solid var(--hok-border); box-shadow: 0 24px 70px rgba(15,23,42,.18); }
body.catalog-site .modal-close { color: var(--hok-muted); }
body.catalog-site .modal-close:hover { color: var(--hok-primary); }
body.catalog-site .footer { margin-top: auto; background: white; border-top-color: var(--hok-border); }
body.catalog-site .footer-inner { max-width: 1240px; }
body.catalog-site .empty-icon { color: var(--hok-primary); }
body.catalog-site .skeleton-grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
body.catalog-site .active-filters { border-color: var(--hok-border); background: white; }
@media (max-width: 900px) {
  body.catalog-site .catalog-main { width: calc(100% - 32px) !important; }
  body.catalog-site .catalog-header-inner, body.catalog-site .catalog-subnav-inner { width: calc(100% - 32px); }
  body.catalog-site .catalog-promos { grid-template-columns: 1fr; }
  body.catalog-site .account-grid, body.catalog-site .software-grid, body.catalog-site .skeleton-grid { grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
  body.catalog-site .catalog-nav-note { display: none; }
}
@media (max-width: 640px) {
  body.catalog-site .catalog-header-inner { min-height: 62px; gap: 12px; flex-wrap: wrap; padding: 10px 0; }
  body.catalog-site .catalog-brand { font-size: 16px; }
  body.catalog-site .catalog-brand-mark { width: 30px; height: 30px; }
  body.catalog-site .catalog-header-actions { margin-left: auto; gap: 9px; }
  body.catalog-site .catalog-language { display: none; }
  body.catalog-site .catalog-account { max-width: 95px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
  body.catalog-site .catalog-search { order: 3; flex-basis: 100%; max-width: none; height: 38px; }
  body.catalog-site .catalog-subnav-inner { min-height: 45px; width: calc(100% - 22px); }
  body.catalog-site .catalog-subnav .navbar-link { padding: 7px 10px; font-size: 12px; }
  body.catalog-site .catalog-main { width: calc(100% - 24px) !important; padding-top: 18px !important; }
  body.catalog-site .catalog-promo { min-height: 158px; padding: 22px; }
  body.catalog-site .catalog-promo h2 { font-size: 20px; }
  body.catalog-site .catalog-promo-art { width: 70px; height: 70px; font-size: 55px; }
  body.catalog-site .catalog-heading { align-items: flex-start; flex-direction: column; gap: 10px; }
  body.catalog-site .catalog-heading h1 { font-size: 25px; }
  body.catalog-site .catalog-heading-note { font-size: 12px; }
  body.catalog-site .catalog-filter-summary { display: none; }
  body.catalog-site .toolbar { flex-wrap: wrap; }
  body.catalog-site .catalog-toolbar-label { flex: 1 0 100%; }
  body.catalog-site .catalog-toolbar-label + .sort-select { margin-left: 0; }
  body.catalog-site .account-grid, body.catalog-site .software-grid, body.catalog-site .skeleton-grid { grid-template-columns: 1fr !important; gap: 13px; }
  body.catalog-site .account-card.catalog-product-card, body.catalog-site .software-card.catalog-product-card { padding: 15px; }
  body.catalog-site .product-detail-dialog { width: calc(100% - 24px); padding: 22px; }
  body.catalog-site .contact-channel-actions { grid-template-columns: 1fr; }
}

.preview-banner{padding:12px 18px;background:#fff4d6;color:#654800;text-align:center;font-size:13px;line-height:1.7;border-bottom:1px solid #ecd697}.preview-banner strong{font-weight:700}.catalog-product-card .catalog-card-actions{grid-template-columns:1fr}.catalog-product-card .catalog-details-btn{width:100%}