/* ==========================================================================
   styzhka.by — оформление блоков конструктора в стиле утверждённой главной
   (жёлтый #ffcc00, графит #24272a, Manrope, мягкие карточки 15–18 px, заголовок секции с жёлтой чертой).
   Подключается после base.css и blocks/*.css (Constructor::showContent); в модуль не входит.
   Палитра — токены --es-* в media/css/esimple/style.css.
   ========================================================================== */
.cb-page {
    --cb-primary: #ffcc00;
    --cb-primary-dark: #f2bb00;
    --cb-on-primary: #1f1f1f;
    --cb-btn-radius: 10px;
}
.cb-tone--light, .cb-on-light {
    --cb-link: #b88a00;
    --cb-link-hover: #24272a;
    --cb-ghost-fg: #222426;
    --cb-ghost-border: rgba(35, 38, 40, .18);
    --cb-card-border: rgba(35, 38, 40, .09);
    --cb-card-shadow: 0 16px 38px rgba(28, 31, 34, .055);
    --cb-btn-fg: #1f1f1f;
    --cb-input-border: rgba(35, 38, 40, .14);
}

/* ---- Заголовок секции — как .title-box на главной ---- */
.cb .cb-title__h {color: #24272a; font-size: clamp(28px, 3vw, 42px); font-weight: 800; line-height: 1.12; letter-spacing: -.035em}
.cb .cb-title__h::after {content: ""; display: block; width: 56px; height: 4px; margin-top: 18px; border-radius: 999px; background: #ffcc00; box-shadow: 0 8px 18px rgba(255, 204, 0, .28)}
.cb .cb-title--center .cb-title__h::after {margin-inline: auto}
.cb .cb-title__sub {margin-top: 22px; color: #666c72; font-size: 17px; font-weight: 500; line-height: 1.55}
.cb-tone--dark .cb-title__h {color: #fff}
.cb-tone--dark .cb-title__sub {color: rgba(255, 255, 255, .72)}
/* надзаголовок — плашка «Бесплатно», как на главной */
.cb .cb-title__eyebrow {min-height: 28px; padding: 0 15px; border: 1px solid rgba(255, 204, 0, .62); border-radius: 999px; background: rgba(255, 204, 0, .055); color: #d9a900; font-size: 13px; font-weight: 800; line-height: 1}
.cb .cb-title__eyebrow::before {display: none}

/* ---- Кнопки — как на главной: жёлтая с тёмным текстом и мягкой тенью, вторая — белая с рамкой ---- */
.cb .cb-btn {min-height: 56px; padding: 0 32px; border-radius: 10px; font-weight: 800}
.cb .cb-btn--primary {background: #ffcc00; border-color: #ffcc00; color: #1f1f1f; box-shadow: 0 14px 26px rgba(255, 204, 0, .30)}
.cb .cb-btn--primary:hover {background: #ffd21f; border-color: #ffd21f; color: #1f1f1f; transform: translateY(-2px); box-shadow: 0 18px 34px rgba(255, 204, 0, .42)}
.cb-tone--light .cb-btn--ghost, .cb-on-light .cb-btn--ghost {background: rgba(255, 255, 255, .7); border-color: rgba(35, 38, 40, .18); color: #222426; box-shadow: 0 10px 24px rgba(20, 22, 24, .05)}
.cb-tone--light .cb-btn--ghost:hover, .cb-on-light .cb-btn--ghost:hover {background: #fff; border-color: rgba(35, 38, 40, .32); color: #222426; transform: translateY(-2px)}
.cb .cb-btn--ghost::after {content: "\2192"; font-weight: 600}
.cb .cb-btn--sm {min-height: 44px; padding: 0 22px}

/* ---- Первый экран — как hero на главной: фото справа, белый градиент слева, факты плашками ---- */
.cb--banner.cb-space--normal:first-child {padding-top: 0}
.cb-banner--overlay.cb-banner--light .cb-banner__media {background: #f7f6f1}
.cb-banner--overlay.cb-banner--light .cb-banner__media::after {background: linear-gradient(90deg, rgba(255, 255, 255, .98) 0%, rgba(255, 255, 255, .95) 34%, rgba(255, 255, 255, .82) 48%, rgba(255, 255, 255, .25) 70%, rgba(255, 255, 255, 0) 88%)}
.cb-banner--overlay.cb-banner--light::after {content: ""; position: absolute; inset: auto 0 0; height: 170px; z-index: 0; pointer-events: none; background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #fff 100%)}
.cb-banner--overlay.cb-banner--light .cb-banner__wrap {z-index: 1}
.cb-banner--overlay.cb-banner--hero .cb-banner__wrap {min-height: 620px; padding-block: 72px 82px}
.cb-banner--overlay .cb-banner__content {max-width: 720px}
.cb .cb-banner__crumbs {margin-bottom: 26px}
.cb .cb-banner__title {color: #222426; font-size: clamp(36px, 4.6vw, 54px); font-weight: 800; line-height: 1.02; letter-spacing: -.045em; hyphens: manual}
.cb-banner--hero .cb-banner__title {font-size: clamp(36px, 4.6vw, 54px)}
.cb .cb-banner__accent {display: block; margin-top: 8px; color: #ffcc00}
.cb .cb-banner__text {margin-top: 22px; color: #555b61; font-size: clamp(17px, 1.5vw, 21px); font-weight: 500; line-height: 1.48}
.cb .cb-banner__points {grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; max-width: 650px; margin-top: 32px}
.cb .cb-banner__points li {display: flex; align-items: center; min-height: 76px; padding: 15px 18px 15px 64px; border: 1px solid rgba(35, 38, 40, .10); border-radius: 13px; background: rgba(255, 255, 255, .78); box-shadow: 0 12px 34px rgba(20, 22, 24, .06); color: #222426; font-size: 14px; font-weight: 700; line-height: 1.25; backdrop-filter: blur(8px)}
.cb .cb-banner__points li::before {left: 18px; top: 50%; width: 34px; height: 34px; margin-top: -17px; border-radius: 0; background: no-repeat center / 34px 34px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffcc00' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l7 4v6c0 4.2-2.9 7.1-7 8-4.1-.9-7-3.8-7-8V7l7-4z'/%3E%3Cpath d='M9 12l2 2 4-5'/%3E%3C/svg%3E")}
.cb .cb-banner__price {margin-top: 26px; color: #222426}
.cb .cb-banner__price b {color: #222426}
.cb-banner__price-from, .cb-banner__price span {color: #555b61; font-weight: 600}
.cb-banner .cb-actions {gap: 22px; margin-top: 34px}
.cb-banner .cb-btn {min-height: 58px; padding: 0 34px}

/* ---- Карточки (услуги со значками) — как карточки услуг на главной ---- */
.cb .cb-card {border: 1px solid rgba(35, 38, 40, .09); border-radius: 15px; background: rgba(255, 255, 255, .94); box-shadow: 0 16px 38px rgba(28, 31, 34, .055)}
.cb .cb-card--hover:hover {box-shadow: 0 22px 50px rgba(28, 31, 34, .09)}
#uslugi .cb-card-item {text-align: center}
#uslugi .cb-card-item__media {display: flex; align-items: center; justify-content: center; padding: 30px 20px 0; background: transparent; aspect-ratio: auto}
#uslugi .cb-card-item__media img, #uslugi .cb-card-item__media picture {width: 96px; height: 96px; object-fit: contain; aspect-ratio: 1}
#uslugi .cb-card-item__body {padding: 18px 22px 24px; align-items: center}
#uslugi .cb-card-item__name {color: #25282b; font-size: 17px; font-weight: 800; line-height: 1.3; letter-spacing: -.01em}
#uslugi .cb-card-item__text {color: #6b7177; font-size: 13px; font-weight: 500; line-height: 1.5}
#uslugi .cb-actions {justify-content: center; width: 100%}
#uslugi .cb-btn--ghost {min-height: 40px; padding: 0 12px; border-color: transparent; background: transparent; box-shadow: none; color: #555b61; font-size: 13px}
#uslugi .cb-btn--ghost:hover {color: #d9a900; transform: none}

/* ---- Списки с галочками — как список в блоке замера на главной ---- */
.cb .cb-infoblock__icon .cb-icon-box, .cb--infoblock .cb-icon-box {border: 2px solid #ffcc00; border-radius: 50%; background: #fff; color: #ffcc00; box-shadow: 0 8px 18px rgba(255, 204, 0, .16)}
.cb--infoblock .cb-infoblock__name {color: #303437; font-weight: 800}

/* ---- Этапы ---- */
.cb .cb-worksteps__marker, .cb .cb-worksteps__badge {border-color: #ffcc00; color: #b88a00}
.cb .cb-worksteps__name {color: #25282b; font-weight: 800}

/* ---- Тексты ---- */
.cb .cb-rich h3 {color: #24272a; font-weight: 800; letter-spacing: -.01em}
.cb .cb-rich ul li::marker {color: #ffcc00}
.cb--textContent .cb-text__media img {border-radius: 18px}

/* ---- Цены ---- */
.cb .cb-tablePrice__group-name {color: #24272a; font-weight: 800}
.cb .cb-tablePrice__line-price {color: #24272a; font-weight: 800; white-space: nowrap}
.cb .cb-tablePrice__table thead th {background: #fff6d1; color: #24272a}

/* ---- Форма — как блок «Бесплатный выезд замерщика» на главной ---- */
.cb--formfeedback .cb-form-featured:not(.cb-form-featured--image) .cb-form-featured__wrap {position: relative; padding: clamp(32px, 4.4vw, 58px) clamp(22px, 3.6vw, 46px); border: 1px solid rgba(35, 38, 40, .09); border-radius: 18px; background: radial-gradient(120% 90% at 0% 0%, #fffaf0 0%, #fff 55%); box-shadow: 0 18px 48px rgba(28, 31, 34, .065)}
.cb--formfeedback .cb-form-featured__info .cb-title__h {font-size: clamp(26px, 3.1vw, 40px); line-height: 1.08}
.cb--formfeedback .cb-form-featured__features li {align-items: center; color: #303437; font-size: 15px; font-weight: 800}
.cb--formfeedback .cb-form-featured__features .cb-icon-box {width: 34px; height: 34px; flex: 0 0 34px; border: 2px solid #ffcc00; border-radius: 50%; background: #fff; color: #ffcc00; box-shadow: 0 8px 18px rgba(255, 204, 0, .16)}
.cb--formfeedback .cb-form-featured__card {padding: 42px 40px 36px; border: 1px solid rgba(35, 38, 40, .08); border-radius: 18px; background: rgba(255, 255, 255, .92); box-shadow: 0 22px 50px rgba(28, 31, 34, .105)}
.cb .cb-form__title {color: #24272a; font-size: 28px; font-weight: 800; line-height: 1.1; letter-spacing: -.02em}
.cb .cb-form__lead {color: #6b7177; font-size: 14px; font-weight: 700}
.cb .cb-form__input {min-height: 58px; padding: 0 20px; border: 1px solid rgba(35, 38, 40, .14); border-radius: 9px; background: #fff; color: #24272a; font-size: 15px; font-weight: 600}
.cb .cb-form__input:focus {border-color: #ffcc00; outline: 2px solid rgba(255, 204, 0, .35); outline-offset: 0}
.cb .cb-form__submit {min-height: 58px}

/* ---- Вопрос-ответ — как на главной: строки с рамкой и жёлтой стрелкой ---- */
.cb .cb-faq__item {border: 1px solid #dfdfdf; border-radius: 5px; box-shadow: 0 0 10px rgba(0, 0, 0, .05)}
.cb .cb-faq__q {color: #524f52; font-weight: 600}
.cb .cb-faq__icon {border: 0; background: transparent; color: #ffcc00}

/* ---- Отзывы ---- */
.cb .cb-reviews__avatar--letter {background: #ffcc00; color: #1f1f1f}
.cb .cb-reviews__star {color: #ffcc00}

@media (max-width: 991px) {
    .cb-banner--overlay.cb-banner--light .cb-banner__media::after {background: linear-gradient(90deg, rgba(255, 255, 255, .98) 0%, rgba(255, 255, 255, .92) 45%, rgba(255, 255, 255, .45) 100%)}
    .cb-banner--overlay.cb-banner--hero .cb-banner__wrap {min-height: 560px}
    .cb .cb-banner__points {grid-template-columns: 1fr; max-width: 410px}
}
@media (max-width: 640px) {
    .cb-banner--overlay.cb-banner--light .cb-banner__media img {object-position: 64% center !important}
    .cb-banner--overlay.cb-banner--light .cb-banner__media::after {background: linear-gradient(180deg, rgba(255, 255, 255, .98) 0%, rgba(255, 255, 255, .90) 52%, rgba(255, 255, 255, .62) 100%)}
    .cb-banner--overlay.cb-banner--hero .cb-banner__wrap {min-height: 0; padding-block: 40px 54px}
    .cb .cb-banner__points li {min-height: 60px}
    .cb-banner .cb-actions {gap: 12px}
    .cb-banner .cb-btn {width: 100%; min-height: 54px}
    .cb--formfeedback .cb-form-featured__card {padding: 28px 20px 24px}
}

/* форма: рамка — в пределах контейнера, без черты под заголовком (как на главной) */
.cb--formfeedback .cb-form-featured:not(.cb-form-featured--image) .cb-form-featured__wrap {width: calc(100% - 30px); max-width: 1280px; margin-inline: auto}
.cb--formfeedback .cb-form-featured__info .cb-title__h::after {display: none}
.cb--formfeedback .cb-form-featured__info .cb-title__sub {margin-top: 18px; color: #555b61; font-size: 16px}