/* ============================================================
   House Projects — Frontend Styles
   ============================================================ */

/* ── Переменные ─────────────────────────────────────────── */
:root {
    --hp-primary:       #57360d;
    --hp-primary-hover: #3a1b02;
    --hp-accent:        #f59e0b;
    --hp-text:          #1e293b;
    --hp-text-muted:    #8b7564;
    --hp-border:        #eeddc9;
    --hp-bg:            #f8fafc;
    --hp-bg-card:       #ffffff;
    --hp-radius:        12px;
    --hp-radius-sm:     8px;
    --hp-shadow:        0 2px 16px rgba(0,0,0,.08);
    --hp-shadow-hover:  0 8px 32px rgba(0,0,0,.14);
    --hp-transition:    .22s ease;
    --hp-container:     1200px;
}

/* ── Сброс ─────────────────────────────────────────────── */
.hp-catalog-page *,
.hp-project-page * {
    box-sizing: border-box;
}

/* ══════════════════════════════════════════════════════════
   ОБЩИЕ КОМПОНЕНТЫ
══════════════════════════════════════════════════════════ */

/* Контейнер */
.hp-catalog-container,
.hp-project-container {
    max-width: var(--hp-container);
    margin:    100px auto;
    padding:   32px 20px 60px;
}

/* Кнопки */
.hp-btn {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    gap:             6px;
    padding:         11px 24px;
    border-radius:   var(--hp-radius-sm);
    font-size:       .95rem;
    font-weight:     600;
    cursor:          pointer;
    text-decoration: none;
    border:          2px solid transparent;
    transition:      all var(--hp-transition);
    white-space:     nowrap;
}
.hp-btn--primary {
    background: var(--hp-primary);
    color:      #fff;
    border-color: var(--hp-primary);
}
.hp-btn--primary:hover {
    background:   var(--hp-primary-hover);
    border-color: var(--hp-primary-hover);
    color:        #fff;
}
.hp-btn--ghost {
    background:   transparent;
    color:        var(--hp-primary);
    border-color: var(--hp-primary);
}
.hp-btn--ghost:hover {
    background: var(--hp-primary);
    color:      #fff;
}
.hp-btn--sm {
    padding:   7px 16px;
    font-size: .85rem;
}
.hp-btn--full {
    width:   100%;
    display: flex;
}

/* ══════════════════════════════════════════════════════════
   КАТАЛОГ
══════════════════════════════════════════════════════════ */

.hp-catalog-header {
    margin-bottom: 28px;
}
.hp-catalog-title {
    font-size:   2rem;
    font-weight: 700;
    color:       var(--hp-text);
    margin:      0 0 8px;
}
.hp-catalog-desc {
    color:     var(--hp-text-muted);
    font-size: .95rem;
}

/* Навигация по категориям */
.hp-category-nav {
    display:     flex;
    flex-wrap:   wrap;
    gap:         8px;
    margin-bottom: 20px;
}
.hp-cat-link {
    padding:       6px 18px;
    border-radius: 100px;
    border:        2px solid var(--hp-border);
    color:         var(--hp-text-muted);
    font-size:     .9rem;
    font-weight:   600;
    text-decoration: none;
    transition:    all var(--hp-transition);
}
.hp-cat-link:hover,
.hp-cat-link.is-active {
    border-color: var(--hp-primary);
    color:        var(--hp-primary);
    background:   rgba(37, 99, 235, .06);
}

/* Фильтры */
.hp-filters {
    background:    var(--hp-bg);
    border:        1px solid var(--hp-border);
    border-radius: var(--hp-radius);
    padding:       16px 20px;
    margin-bottom: 28px;
}
.hp-filters-inner {
    display:     flex;
    flex-wrap:   wrap;
    gap:         12px;
    align-items: flex-end;
}
.hp-filter-group {
    display:        flex;
    flex-direction: column;
    gap:            4px;
}
.hp-filter-group label {
    font-size:   .8rem;
    font-weight: 600;
    color:       var(--hp-text-muted);
    text-transform: uppercase;
    letter-spacing: .04em;
}
.hp-filter-group select {
    padding:       8px 12px;
    border:        1.5px solid var(--hp-border);
    border-radius: var(--hp-radius-sm);
    font-size:     .9rem;
    color:         var(--hp-text);
    background:    #fff;
    cursor:        pointer;
    transition:    border-color var(--hp-transition);
    min-width:     150px;
}
.hp-filter-group select:focus,
.hp-filter-group select.is-active {
    border-color: var(--hp-primary);
    outline:      none;
}
.hp-filter-actions {
    display: flex;
    gap:     8px;
}
.hp-catalog-meta {
    color:         var(--hp-text-muted);
    font-size:     .88rem;
    margin-bottom: 20px;
}
.hp-catalog-meta strong { color: var(--hp-text); }

/* Сетка каталога */
.hp-catalog-grid {
    display:               grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap:                   24px;
    margin-bottom:         40px;
}

/* Карточка проекта */
.hp-project-card {
    background:    var(--hp-bg-card);
    border-radius: var(--hp-radius);
    box-shadow:    var(--hp-shadow);
    overflow:      hidden;
    display:       flex;
    flex-direction: column;
    transition:    box-shadow var(--hp-transition), transform var(--hp-transition);
}
.hp-project-card:hover {
    box-shadow: var(--hp-shadow-hover);
    transform:  translateY(-4px);
}
.hp-card-link {
    text-decoration: none;
    color:           inherit;
    flex:            1;
}
.hp-card-image {
    position:    relative;
    aspect-ratio: 4/3;
    overflow:    hidden;
    background:  var(--hp-bg);
}
.hp-card-image img {
    width:      100%;
    height:     100%;
    object-fit: cover;
    transition: transform .4s ease;
}
.hp-project-card:hover .hp-card-image img {
    transform: scale(1.05);
}
.hp-card-no-image {
    display:         flex;
    align-items:     center;
    justify-content: center;
    width:           100%;
    height:          100%;
    color:           var(--hp-border);
}
.hp-card-no-image svg {
    width:  64px;
    height: 64px;
}
.hp-card-badges {
    position: absolute;
    top:      12px;
    left:     12px;
    display:  flex;
    gap:      6px;
    flex-wrap: wrap;
}
.hp-badge {
    background:    rgba(129, 63, 19, 0.85);
    color:         #fff;
    font-size:     .75rem;
    font-weight:   600;
    padding:       3px 10px;
    border-radius: 100px;
    backdrop-filter: blur(4px);
}
.hp-card-body {
    padding: 16px 20px 12px;
}
.hp-card-title {
    font-size:     1.1rem;
    font-weight:   700;
    color:         var(--hp-text);
    margin:        0 0 12px;
    line-height:   1.3;
}
.hp-card-specs {
    list-style:    none;
    padding:       0;
    margin:        0 0 14px;
    display:       grid;
    grid-template-columns: 1fr 1fr;
    gap:           6px 12px;
}
.hp-card-specs li {
    font-size:  .85rem;
    color:      var(--hp-text-muted);
    display:    flex;
    align-items: center;
    gap:        5px;
}
.hp-spec-icon {
    font-size: 1rem;
}
.hp-card-price {
    font-size:   1.15rem;
    color:       var(--hp-text);
}
.hp-card-price strong {
    font-size:  1.3rem;
    color:      var(--hp-primary);
    font-weight: 800;
}
.hp-card-footer {
    padding:         12px 20px 16px;
    display:         flex;
    gap:             10px;
    border-top:      1px solid var(--hp-border);
}

/* Пагинация */
.hp-pagination {
    display:         flex;
    justify-content: center;
    gap:             6px;
    margin-top:      32px;
}
.hp-pagination .page-numbers {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    width:           40px;
    height:          40px;
    border-radius:   var(--hp-radius-sm);
    border:          2px solid var(--hp-border);
    color:           var(--hp-text-muted);
    text-decoration: none;
    font-weight:     600;
    font-size:       .9rem;
    transition:      all var(--hp-transition);
}
.hp-pagination .page-numbers:hover,
.hp-pagination .page-numbers.current {
    background:   var(--hp-primary);
    border-color: var(--hp-primary);
    color:        #fff;
}
.hp-pagination .prev,
.hp-pagination .next {
    width: auto;
    padding: 0 14px;
}

/* Не найдено */
.hp-not-found {
    text-align:  center;
    padding:     60px 20px;
    color:       var(--hp-text-muted);
}
.hp-not-found p { margin-bottom: 20px; font-size: 1.05rem; }

/* ══════════════════════════════════════════════════════════
   СТРАНИЦА ПРОЕКТА
══════════════════════════════════════════════════════════ */

/* Хлебные крошки */
.hp-breadcrumbs {
    display:     flex;
    align-items: center;
    flex-wrap:   wrap;
    gap:         6px;
    font-size:   .85rem;
    color:       var(--hp-text-muted);
    margin-bottom: 20px;
}
.hp-breadcrumbs a {
    color:           var(--hp-primary);
    text-decoration: none;
}
.hp-breadcrumbs a:hover { text-decoration: underline; }
.hp-breadcrumbs span:not(:last-child) { color: var(--hp-text-muted); }

.hp-project-title {
    font-size:     2.2rem;
    font-weight:   800;
    color:         var(--hp-text);
    margin:        0 0 28px;
    line-height:   1.2;
}

/* Двухколоночный layout */
.hp-project-layout {
    display:     grid;
    grid-template-columns: 1fr 380px;
    gap:         32px;
    align-items: start;
}

/* Галерея */
.hp-gallery {
    margin-bottom: 32px;
    border-radius: var(--hp-radius);
    overflow:      hidden;
    box-shadow:    var(--hp-shadow);
}
.hp-gallery-main {
    aspect-ratio: 16/10;
    overflow:     hidden;
    background:   var(--hp-bg);
}
.hp-gallery-main-img {
    width:      100%;
    height:     100%;
    object-fit: cover;
    transition: opacity .2s ease;
    display:    block;
}
.hp-gallery-thumbs {
    display:    flex;
    gap:        4px;
    padding:    4px;
    background: #1e293b;
    overflow-x: auto;
}
.hp-gallery-thumb {
    flex:       0 0 80px;
    height:     60px;
    cursor:     pointer;
    opacity:    .6;
    transition: opacity var(--hp-transition);
    border-radius: 4px;
    overflow:   hidden;
    border:     2px solid transparent;
}
.hp-gallery-thumb:hover,
.hp-gallery-thumb.is-active {
    opacity:      1;
    border-color: var(--hp-accent);
}
.hp-gallery-thumb img {
    width:      100%;
    height:     100%;
    object-fit: cover;
    display:    block;
}

/* Секции */
.hp-project-section {
    margin-bottom: 36px;
}
.hp-section-title {
    font-size:     1.3rem;
    font-weight:   700;
    color:         var(--hp-text);
    margin:        0 0 16px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--hp-border);
}
.hp-project-description {
    color:       var(--hp-text);
    line-height: 1.75;
    font-size:   .97rem;
}

/* Планировки */
.hp-plans-grid {
    display:               grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap:                   12px;
}
.hp-plan-link {
    display:       block;
    border-radius: var(--hp-radius-sm);
    overflow:      hidden;
    border:        2px solid var(--hp-border);
    transition:    border-color var(--hp-transition);
}
.hp-plan-link:hover { border-color: var(--hp-primary); }
.hp-plan-link img {
    width:      100%;
    height:     180px;
    object-fit: cover;
    display:    block;
}

/* ── Сайдбар ──────────────────────────────────────────── */
.hp-project-sidebar {
    position:   sticky;
    top:        20px;
    display:    flex;
    flex-direction: column;
    gap:        20px;
}
.hp-sidebar-card {
    background:    var(--hp-bg-card);
    border-radius: var(--hp-radius);
    box-shadow:    var(--hp-shadow);
    padding:       20px;
    border:        1px solid var(--hp-border);
}
.hp-sidebar-title {
    font-size:     1.1rem;
    font-weight:   700;
    color:         var(--hp-text);
    margin:        0 0 16px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--hp-border);
}

/* Таблица характеристик */
.hp-chars-table {
    width:           100%;
    border-collapse: collapse;
    font-size:       .9rem;
}
.hp-chars-table th,
.hp-chars-table td {
    padding:    8px 4px;
    border-bottom: 1px solid var(--hp-border);
    vertical-align: top;
}
.hp-chars-table th {
    color:       var(--hp-text-muted);
    font-weight: 500;
    text-align:  left;
    width:       50%;
}
.hp-chars-table td {
    font-weight: 600;
    color:       var(--hp-text);
    text-align:  right;
}
.hp-chars-table tr:last-child th,
.hp-chars-table tr:last-child td {
    border-bottom: none;
}

/* Цена */
.hp-price-display {
    background:    linear-gradient(135deg, var(--hp-primary) 0%, #1d4ed8 100%);
    border-radius: var(--hp-radius-sm);
    padding:       16px;
    margin-bottom: 20px;
    text-align:    center;
}
.hp-price-label {
    display:    block;
    color:      rgba(255,255,255,.8);
    font-size:  .8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    margin-bottom: 4px;
}
.hp-price-value {
    display:     block;
    color:       #fff;
    font-size:   1.8rem;
    font-weight: 800;
    line-height: 1.1;
    transition:  transform .2s ease;
}
.hp-price-changed {
    animation: hp-price-pulse .4s ease;
}
@keyframes hp-price-pulse {
    0%   { transform: scale(1); }
    50%  { transform: scale(1.08); }
    100% { transform: scale(1); }
}

/* Секции опций */
.hp-options-section {
    margin-bottom: 20px;
}
.hp-options-title {
    font-size:     .9rem;
    font-weight:   700;
    color:         var(--hp-text-muted);
    text-transform: uppercase;
    letter-spacing: .05em;
    margin:        0 0 10px;
}

/* Комплектация — радио */
.hp-complectation-list {
    display:        flex;
    flex-direction: column;
    gap:            8px;
}
.hp-complect-item {
    display:       flex;
    align-items:   flex-start;
    gap:           10px;
    border:        2px solid var(--hp-border);
    border-radius: var(--hp-radius-sm);
    padding:       12px;
    cursor:        pointer;
    transition:    all var(--hp-transition);
    position:      relative;
}
.hp-complect-item input[type="radio"] {
    position:   absolute;
    opacity:    0;
    width:      0;
    height:     0;
}
.hp-complect-item:hover {
    border-color: var(--hp-primary);
    background:   rgba(37,99,235,.03);
}
.hp-complect-item.is-selected {
    border-color: var(--hp-primary);
    background:   rgba(37,99,235,.06);
}
.hp-complect-content { flex: 1; }
.hp-complect-header {
    display:         flex;
    justify-content: space-between;
    align-items:     center;
    gap:             8px;
    margin-bottom:   4px;
}
.hp-complect-name {
    font-weight: 700;
    color:       var(--hp-text);
    font-size:   .95rem;
}
.hp-complect-price {
    font-weight:  700;
    color:        var(--hp-primary);
    font-size:    .9rem;
    white-space:  nowrap;
}
.hp-complect-desc {
    font-size:   .82rem;
    color:       var(--hp-text-muted);
    line-height: 1.5;
}
/* Маркер выбора */
.hp-complect-item.is-selected::before {
    content:     '✓';
    position:    absolute;
    top:         10px;
    right:       10px;
    width:       20px;
    height:      20px;
    background:  var(--hp-primary);
    color:       #fff;
    font-size:   .7rem;
    font-weight: 900;
    border-radius: 50%;
    display:     flex;
    align-items: center;
    justify-content: center;
    line-height: 20px;
    text-align: center;
}

/* Доп. опции — чекбоксы */
.hp-extra-options-list {
    display:        flex;
    flex-direction: column;
    gap:            6px;
}
.hp-extra-item {
    display:         flex;
    align-items:     center;
    gap:             10px;
    padding:         10px 12px;
    border:          2px solid var(--hp-border);
    border-radius:   var(--hp-radius-sm);
    cursor:          pointer;
    transition:      all var(--hp-transition);
}
.hp-extra-item:hover {
    border-color: var(--hp-primary);
    background:   rgba(37,99,235,.03);
}
.hp-extra-item.is-checked {
    border-color: var(--hp-primary);
    background:   rgba(37,99,235,.06);
}
.hp-extra-item input[type="checkbox"] {
    display: none;
}
.hp-extra-check {
    flex:          0 0 20px;
    width:         20px;
    height:        20px;
    border:        2px solid var(--hp-border);
    border-radius: 5px;
    background:    #fff;
    transition:    all var(--hp-transition);
    position:      relative;
}
.hp-extra-item.is-checked .hp-extra-check {
    background:   var(--hp-primary);
    border-color: var(--hp-primary);
}
.hp-extra-item.is-checked .hp-extra-check::after {
    content:     '';
    position:    absolute;
    top:         3px;
    left:        5px;
    width:       6px;
    height:      10px;
    border:      2px solid #fff;
    border-top:  none;
    border-left: none;
    transform:   rotate(45deg);
}
.hp-extra-name {
    flex:        1;
    font-size:   .9rem;
    color:       var(--hp-text);
    font-weight: 500;
}
.hp-extra-price {
    font-weight:  700;
    color:        var(--hp-primary);
    font-size:    .9rem;
    white-space:  nowrap;
}

/* Сводка */
.hp-summary-list {
    list-style:    none;
    padding:       10px 12px;
    margin:        0 0 12px;
    background:    var(--hp-bg);
    border-radius: var(--hp-radius-sm);
    font-size:     .82rem;
    color:         var(--hp-text-muted);
}
.hp-summary-list li {
    padding: 2px 0;
}

/* Форма заявки */
.hp-order-form {
    border-top:  2px solid var(--hp-border);
    padding-top: 16px;
    margin-top:  8px;
}
.hp-form-group { margin-bottom: 10px; }
.hp-input {
    width:         100%;
    padding:       10px 14px;
    border:        2px solid var(--hp-border);
    border-radius: var(--hp-radius-sm);
    font-size:     .95rem;
    color:         var(--hp-text);
    background:    #fff;
    transition:    border-color var(--hp-transition);
}
.hp-input:focus {
    outline:      none;
    border-color: var(--hp-primary);
}
.hp-form-result {
    margin-top:    10px;
    padding:       10px 14px;
    border-radius: var(--hp-radius-sm);
    font-size:     .88rem;
    font-weight:   600;
    display:       none;
}
.hp-result-success {
    background: #dcfce7;
    color:      #166534;
}
.hp-result-error {
    background: #fee2e2;
    color:      #991b1b;
}

/* ══════════════════════════════════════════════════════════
   КОМПЛЕКТАЦИЯ В ОСНОВНОЙ КОЛОНКЕ
══════════════════════════════════════════════════════════ */
.hp-config-section {
    background:    var(--hp-bg-card);
    border-radius: var(--hp-radius);
    padding:       32px;
    box-shadow:    var(--hp-shadow);
    border:        1px solid var(--hp-border);
}

/* Цена в основной колонке */
.hp-price-display-main {
    background:    linear-gradient(135deg, var(--hp-primary) 0%, #d8811d 100%);
    border-radius: var(--hp-radius);
    padding:       24px;
    margin-bottom: 32px;
    text-align:    center;
}
.hp-price-display-main .hp-price-label {
    display:       block;
    color:         rgba(255,255,255,.85);
    font-size:     .9rem;
    font-weight:   600;
    text-transform: uppercase;
    letter-spacing: .06em;
    margin-bottom: 8px;
}
.hp-price-display-main .hp-price-value {
    display:     block;
    color:       #fff;
    font-size:   2.4rem;
    font-weight: 800;
    line-height: 1;
}

/* Информация о комплектации */
.hp-complect-info {
    background:    var(--hp-bg);
    border-radius: var(--hp-radius-sm);
    padding:       20px;
    margin-bottom: 32px;
    border:        1px solid var(--hp-border);
}
.hp-info-row {
    display:         flex;
    justify-content: space-between;
    align-items:     center;
    padding:         10px 0;
    border-bottom:   1px solid var(--hp-border);
}
.hp-info-row:last-child {
    border-bottom: none;
}
.hp-info-label {
    color:       var(--hp-text-muted);
    font-size:   .9rem;
    font-weight: 500;
}
.hp-info-value {
    color:       var(--hp-text);
    font-size:   1rem;
    font-weight: 700;
}

/* Секции опций */
.hp-options-section-main {
    margin-bottom: 32px;
}
.hp-options-title-main {
    font-size:     1.2rem;
    font-weight:   700;
    color:         var(--hp-text);
    margin:        0 0 16px;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--hp-border);
}
.hp-options-note {
    color:         var(--hp-text-muted);
    font-size:     .9rem;
    margin:        -8px 0 16px;
    font-style:    italic;
}

/* Комплектация - вертикальный список */
.hp-complectation-list-main {
    display:        flex;
    flex-direction: column;
    gap:            12px;
    margin-bottom:  8px;
}
.hp-complect-item-main {
    display:       flex;
    align-items:   flex-start;
    gap:           12px;
    border:        2px solid var(--hp-border);
    border-radius: var(--hp-radius);
    padding:       20px;
    cursor:        pointer;
    transition:    all var(--hp-transition);
    position:      relative;
    background:    #fff;
}
.hp-complect-item-main input[type="radio"] {
    position: absolute;
    opacity:  0;
}
.hp-complect-item-main:hover {
    border-color: var(--hp-primary);
    background:   rgba(37,99,235,.02);
    transform:    translateY(-2px);
    box-shadow:   var(--hp-shadow);
}
.hp-complect-item-main.is-selected {
    border-color: var(--hp-primary);
    background:   rgba(235, 126, 37, 0.06);
    box-shadow:   0 0 0 3px rgba(235, 133, 37, 0.1);
}
.hp-complect-content-main {
    flex: 1;
}
.hp-complect-header-main {
    display:         flex;
    justify-content: space-between;
    align-items:     flex-start;
    gap:             12px;
    margin-bottom:   10px;
}
.hp-complect-name-main {
    font-weight: 700;
    color:       var(--hp-text);
    font-size:   1.1rem;
}
.hp-complect-price-main {
    font-weight:  800;
    color:        var(--hp-primary);
    font-size:    1.05rem;
    white-space:  nowrap;
}
.hp-complect-desc-main {
    font-size:      .9rem;
    color:          var(--hp-text-muted);
    line-height:    1.6;
    margin-top:     12px;
    padding-top:    12px;
    border-top:     1px solid var(--hp-border);
    max-height:     0;
    overflow:       hidden;
    opacity:        0;
    transition:     all .3s ease;
}
.hp-complect-item-main.is-expanded .hp-complect-desc-main {
    max-height:     960px;
    opacity:        1;
}
.hp-complect-desc-main ul,
.hp-complect-desc-main ol {
    list-style: disc;
    margin:         8px 0;
    padding-left:   20px;
}
.hp-complect-desc-main li {
    margin-bottom: 4px;
}
.hp-complect-toggle {
    display:        inline-flex;
    align-items:    center;
    gap:            6px;
    color:          var(--hp-primary);
    font-size:      .85rem;
    font-weight:    600;
    cursor:         pointer;
    margin-top:     8px;
    transition:     color .2s ease;
    user-select:    none;
}
.hp-complect-toggle:hover {
    color: var(--hp-primary-hover);
}
.hp-complect-toggle-icon {
    font-size:   1.2rem;
    transition:  transform .3s ease;
    line-height: 1;
}
.hp-complect-item-main.is-expanded .hp-complect-toggle-icon {
    transform: rotate(180deg);
}
.hp-complect-item-main.is-selected::before {
    content:     '✓';
    position:    absolute;
    top:         16px;
    right:       16px;
    width:       28px;
    height:      28px;
    background:  var(--hp-primary);
    color:       #fff;
    font-size:   .9rem;
    font-weight: 900;
    border-radius: 50%;
    display:     flex;
    align-items: center;
    justify-content: center;
}

/* Доп. опции - сетка */
.hp-extra-options-list-main {
    display:               grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap:                   12px;
}
.hp-extra-item-main {
    display:       flex;
    align-items:   center;
    gap:           12px;
    padding:       16px 18px;
    border:        2px solid var(--hp-border);
    border-radius: var(--hp-radius);
    cursor:        pointer;
    transition:    all var(--hp-transition);
    background:    #fff;
}
.hp-extra-item-main:hover {
    border-color: var(--hp-primary);
    background:   rgba(37,99,235,.02);
    transform:    translateY(-2px);
    box-shadow:   var(--hp-shadow);
}
.hp-extra-item-main.is-checked {
    border-color: var(--hp-primary);
    background:   rgba(37,99,235,.06);
}
.hp-extra-item-main input[type="checkbox"] {
    display: none;
}
.hp-extra-name-main {
    flex:        1;
    font-size:   .95rem;
    color:       var(--hp-text);
    font-weight: 600;
}

/* Форма заявки в основной колонке */
.hp-order-form-main {
    border-top:  2px solid var(--hp-border);
    padding-top: 28px;
    margin-top:  32px;
}
.hp-form-row {
    display:               grid;
    grid-template-columns: 1fr 1fr;
    gap:                   16px;
    margin-bottom:         16px;
}
.hp-btn--large {
    padding:   16px 32px;
    font-size: 1.05rem;
}

/* ══════════════════════════════════════════════════════════
   LIGHTBOX
══════════════════════════════════════════════════════════ */
.hp-lightbox {
    display:         none;
    position:        fixed;
    top:             0;
    left:            0;
    width:           100%;
    height:          100%;
    background:      rgba(0, 0, 0, 0.92);
    z-index:         9999;
    align-items:     center;
    justify-content: center;
    padding:         20px;
}
.hp-lightbox.is-open {
    display: flex;
}
.hp-lightbox-img {
    max-width:  95%;
    max-height: 95vh;
    object-fit: contain;
    box-shadow: 0 8px 40px rgba(0,0,0,.5);
    border-radius: 8px;
    display:    none;
}
.hp-lightbox-close {
    position:      fixed;
    top:           20px;
    right:         20px;
    width:         48px;
    height:        48px;
    background:    rgba(255,255,255,.15);
    backdrop-filter: blur(8px);
    border-radius: 50%;
    color:         #fff;
    font-size:     28px;
    line-height:   48px;
    text-align:    center;
    cursor:        pointer;
    transition:    all .2s ease;
    z-index:       10000;
    font-weight:   300;
    user-select:   none;
}
.hp-lightbox-close:hover {
    background:    rgba(255,255,255,.25);
    transform:     scale(1.1);
}
.hp-lightbox-loading {
    color:      #fff;
    font-size:  1.2rem;
    text-align: center;
}

/* ══════════════════════════════════════════════════════════
   АДАПТИВНОСТЬ
══════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
    .hp-project-layout {
        grid-template-columns: 1fr;
    }
    .hp-project-sidebar {
        position: static;
    }
}

@media (max-width: 1024px) {
    .hp-project-layout {
        grid-template-columns: 1fr;
    }
    .hp-project-sidebar {
        position: static;
    }
}

@media (max-width: 768px) {
    /* Каталог */
    .hp-catalog-title   { font-size: 1.5rem; }
    .hp-project-title   { font-size: 1.4rem; margin-bottom: 20px; }
    .hp-catalog-grid    { grid-template-columns: 1fr; gap: 16px; }
    .hp-catalog-meta    { font-size: .85rem; }
    
    /* Фильтры */
    .hp-filters         { padding: 12px 16px; }
    .hp-filters-inner   { flex-direction: column; gap: 10px; }
    .hp-filter-group    { width: 100%; }
    .hp-filter-group select { width: 100%; min-width: auto; }
    .hp-filter-actions  { width: 100%; flex-direction: column; }
    .hp-filter-actions .hp-btn { width: 100%; }
    
    /* Карточки */
    .hp-card-specs      { grid-template-columns: 1fr; gap: 4px; }
    .hp-card-footer     { flex-direction: column; }
    .hp-card-footer .hp-btn { width: 100%; }
    
    /* Пагинация */
    .hp-pagination .page-numbers { width: 36px; height: 36px; font-size: .85rem; }
    .hp-pagination .prev,
    .hp-pagination .next { padding: 0 10px; font-size: .85rem; }
    
    /* Навигация категорий */
    .hp-category-nav    { gap: 6px; }
    .hp-cat-link        { font-size: .85rem; padding: 5px 14px; }
    
    /* Хлебные крошки */
    .hp-breadcrumbs     { font-size: .8rem; gap: 4px; margin-bottom: 16px; }
    
    /* Страница проекта */
    .hp-gallery-thumbs  { gap: 3px; padding: 3px; }
    .hp-gallery-thumb   { flex: 0 0 60px; height: 45px; }
    
    /* Планировки */
    .hp-plans-grid      { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
    .hp-plan-link img   { height: 150px; }
    
    /* Характеристики */
    .hp-chars-table     { font-size: .85rem; }
    .hp-chars-table th,
    .hp-chars-table td  { padding: 6px 2px; }
    
    /* Цена и опции */
    .hp-price-value     { font-size: 1.5rem; }
    .hp-price-display-main { padding: 20px 16px; }
    .hp-price-display-main .hp-price-value { font-size: 1.8rem; }
    
    .hp-complect-info   { padding: 16px; }
    .hp-info-row        { padding: 8px 0; flex-direction: column; align-items: flex-start; gap: 4px; }
    .hp-info-label      { font-size: .85rem; }
    .hp-info-value      { font-size: .95rem; }
    
    .hp-complectation-list-main { gap: 10px; }
    .hp-complect-item-main { padding: 16px; }
    .hp-complect-header-main { flex-direction: column; align-items: flex-start; gap: 8px; }
    .hp-complect-name-main { font-size: 1rem; }
    .hp-complect-price-main { font-size: .95rem; }
    .hp-complect-toggle { font-size: .8rem; }
    
    .hp-extra-options-list-main { grid-template-columns: 1fr; gap: 10px; }
    .hp-extra-item-main { padding: 14px 16px; }
    .hp-extra-name-main { font-size: .9rem; }
    
    .hp-form-row { grid-template-columns: 1fr; gap: 12px; }
    .hp-config-section { padding: 24px 16px; }
    .hp-section-title { font-size: 1.1rem; }
    .hp-options-title-main { font-size: 1.05rem; }
    
    /* Lightbox */
    .hp-lightbox-close { width: 40px; height: 40px; font-size: 24px; line-height: 40px; top: 10px; right: 10px; }
}

@media (max-width: 480px) {
    .hp-catalog-container,
    .hp-project-container { padding: 12px 12px 32px; }
    
    .hp-catalog-title   { font-size: 1.3rem; }
    .hp-project-title   { font-size: 1.2rem; }
    
    .hp-catalog-header  { margin-bottom: 20px; }
    .hp-filters         { padding: 10px 12px; }
    .hp-filter-group label { font-size: .75rem; }
    
    .hp-card-title      { font-size: 1rem; }
    .hp-card-specs li   { font-size: .8rem; }
    .hp-card-price      { font-size: 1rem; }
    .hp-card-price strong { font-size: 1.15rem; }
    
    .hp-gallery-main    { aspect-ratio: 4/3; }
    .hp-gallery-thumbs  { padding: 2px; }
    .hp-gallery-thumb   { flex: 0 0 50px; height: 38px; }
    
    .hp-plans-grid      { grid-template-columns: 1fr; }
    
    .hp-config-section  { padding: 20px 12px; }
    .hp-price-display-main { padding: 16px 12px; }
    .hp-price-display-main .hp-price-label { font-size: .8rem; }
    .hp-price-display-main .hp-price-value { font-size: 1.6rem; }
    
    .hp-complect-info   { padding: 12px; }
    .hp-complect-item-main { padding: 12px; }
    .hp-complect-name-main { font-size: .95rem; }
    
    .hp-btn--large      { padding: 14px 24px; font-size: 1rem; }
    
    .hp-section-title   { font-size: 1rem; padding-bottom: 8px; }
    .hp-options-title-main { font-size: .95rem; }
    
    .hp-summary-list    { font-size: .8rem; padding: 8px 10px; }
    
    .hp-lightbox        { padding: 10px; }
    .hp-lightbox-img    { max-width: 100%; }
}