/* ================================================================
   КОМПАКТ-режим конструктора — ТОЛЬКО страница /sozdat-holst
   (все правила под .hl-constructor-page; главная не затронута).
   Тест по задаче «конструктор слишком длинный». Откат: убрать
   подключение этого файла в holst_constructor.php.
   ================================================================ */

/* Зона загрузки фото — ниже */
.hl-constructor-page .hc-layout { min-height: 480px; }
.hl-constructor-page .hc-dropzone { min-height: 300px; }
.hl-constructor-page .hc-idle { padding: 24px 28px; gap: 10px; }
.hl-constructor-page .hc-upload-icon-wrap { height: 62px; width: 62px; }
.hl-constructor-page .hc-idle-title { font-size: 17px; }
.hl-constructor-page .hc-idle-sub { font-size: 13px; }
.hl-constructor-page .hc-select-btn { padding: 11px 26px; }
.hl-constructor-page .hc-idle-hint { font-size: 12px; line-height: 1.45; }

/* Панель опций — плотнее */
.hl-constructor-page .hc-opts-inner { padding: 16px 22px 18px; gap: 9px; }
.hl-constructor-page .hc-opts-title { font-size: 17px; margin-bottom: 2px; }
.hl-constructor-page .hc-field { gap: 3px; }
.hl-constructor-page .hc-label { font-size: 11px; }

/* Карточки вариантов (тип холста / подрамник / рама):
   картинка меньше и СЛЕВА от названия */
.hl-constructor-page .hc-rcard {
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 7px;
    padding: 6px 9px;
    min-height: 48px;
    box-sizing: border-box;
}
.hl-constructor-page .hc-rcard-swatch,
.hl-constructor-page .hc-rcard-ico {
    width: 24px;
    height: 22px;
    flex-shrink: 0;
    align-self: center;
    display: flex;
    align-items: center;
    justify-content: center;
}
.hl-constructor-page .hc-rcard-ico svg { max-height: 20px; max-width: 24px; }
.hl-constructor-page .hc-rcard-name {
    font-size: 13px;
    line-height: 1.15;
    text-align: left;
    display: flex;
    align-items: center;
    margin: 0;
    min-width: 0;
    /* перенос ТОЛЬКО по границе слова: слово влезает целиком либо уходит на новую строку,
       разрыв слова по слогам отключён */
    overflow-wrap: normal;
    word-break: normal;
    hyphens: none;
}

/* Слайдер размеров */
.hl-constructor-page .hc-slider-ticks { margin-top: 2px; font-size: 10px; }

/* Количество */
.hl-constructor-page .hc-qty-btn { width: 36px; height: 36px; }
.hl-constructor-page .hc-qty-num { width: 44px; font-size: 15px; }

/* Цена и кнопка */
.hl-constructor-page .hc-price-box { padding: 10px 16px; }
.hl-constructor-page .hc-price-val { font-size: 24px; }
.hl-constructor-page .hc-price-per { font-size: 12px; }
.hl-constructor-page .hc-add-btn { height: 46px; font-size: 15px; }

/* Инпуты размеров */
.hl-constructor-page .hc-size-row input { padding-top: 8px; padding-bottom: 8px; }

/* Допы (лак/гель) — в две колонки на широких экранах, компактные */
@media (min-width: 769px) {
    .hl-constructor-page .hc-field:has(.hc-check) {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }
    .hl-constructor-page .hc-field:has(.hc-check) .hc-label-row { grid-column: 1 / -1; }
}
.hl-constructor-page .hc-check { padding: 8px 12px; }
.hl-constructor-page .hc-check-text small { display: none; }
.hl-constructor-page .hc-qty-row { margin-top: 2px; }

@media (max-width: 768px) {
    .hl-constructor-page .hc-dropzone { min-height: 220px; }
    .hl-constructor-page .hc-idle { padding: 18px 16px; }
    .hl-constructor-page .hc-opts-inner { padding: 14px 16px 16px; }
    /* карточки могут расти по высоте при переносе текста в 2 колонках */
    .hl-constructor-page .hc-rcard { height: auto; min-height: 48px; }
}

/* Тултип «?» — справа от знака (не перекрывается фото-зоной) */
body .hc-tip::after {
    bottom: auto;
    top: 50%;
    left: calc(100% + 10px);
    right: auto;
    transform: translateY(-50%);
    z-index: 400;
}
body .hc-tip::before {
    bottom: auto;
    top: 50%;
    left: calc(100% + 4px);
    right: auto;
    transform: translateY(-50%);
    border: 6px solid transparent;
    border-right-color: #2a201b;
}
@media (max-width: 560px) {
    body .hc-tip::after {
        top: auto;
        bottom: calc(100% + 10px);
        left: auto;
        right: -8px;
        transform: none;
    }
    body .hc-tip::before {
        top: auto;
        bottom: calc(100% + 3px);
        left: auto;
        right: 0;
        transform: none;
        border: 6px solid transparent;
        border-top-color: #2a201b;
    }
}