/* ===========================================================================
   Калкулатор за осветление — AVA Lighting, второ издание
   ---------------------------------------------------------------------------
   Целта е да изглежда като приложение, а не като страница с форма: тъмна
   лента отгоре, ясни стъпки, едри числа и жив чертеж, който се променя
   докато човек мести плъзгачите.

   Държи се на два размера — телефон и настолен. На телефона прегледът
   отива над избора, за да се вижда какво прави изборът; на голям екран
   стои отдясно и не мърда.

   Мерките са с табличен шрифт, за да не подскачат числата.
   =========================================================================== */

.lcx {
    /* Тъмна палитра със златото на сайта (#c89633 и #e6ce84).
       `--ink` е цветът на ТЕКСТА; тъмните фонове минават през `--deep` и
       `--surface`. По-рано и двете неща се вземаха от `--ink` и
       обръщането на едното чупеше другото. */
    --ink: #f4efe4;
    --ink-2: #cfc8b8;
    --mute: #8f897c;
    --line: #3a352c;
    --line-2: #2a261f;
    --paper: #1f1c17;
    --surface: #26221b;
    --deep: #131210;
    --gold: #c89633;
    --gold-lt: #e6ce84;
    --gold-soft: rgba(230, 206, 132, .12);
    --shadow: 0 1px 2px rgba(0, 0, 0, .35), 0 14px 40px rgba(0, 0, 0, .45);
    --r: 14px;

    max-width: 1220px;
    margin: 0 auto;
    padding: 0 16px 64px;
    color: var(--ink);
    font-size: 16px;
    line-height: 1.6;
    font-variant-numeric: tabular-nums;
}

.lcx *, .lcx *::before, .lcx *::after { box-sizing: border-box; }
.lcx button { font: inherit; color: inherit; }

/* ======================================================= обвивка на приложението */

.lcx__app {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--r);
    box-shadow: var(--shadow);
    overflow: hidden;
}

/* ------------------------------------------------------------------ лента */

.lcx__bar {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
    padding: 14px 20px;
    background: var(--deep);
    color: var(--ink);
}

.lcx__brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .2px;
    white-space: nowrap;
}

.lcx__dot {
    width: 9px; height: 9px;
    border-radius: 50%;
    background: var(--gold-lt);
    box-shadow: 0 0 0 4px rgba(230, 206, 132, .18);
}

/* стъпките */
.lcx__prog {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-left: auto;
    flex-wrap: wrap;
}

.lcx__prognode {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px 6px 7px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: rgba(255, 255, 255, .55);
    cursor: pointer;
    transition: background .18s ease, color .18s ease;
}

.lcx__prognode:disabled { cursor: default; opacity: .45; }
.lcx__prognode:not(:disabled):hover { background: rgba(255, 255, 255, .08); color: #fff; }

.lcx__prognode i {
    display: grid;
    place-items: center;
    width: 22px; height: 22px;
    border-radius: 50%;
    border: 1px solid currentColor;
    font-size: 11px;
    font-style: normal;
    font-weight: 700;
}

.lcx__prognode b { font-size: 12.5px; font-weight: 600; }

.lcx__prognode.is-done { color: rgba(255, 255, 255, .8); }
.lcx__prognode.is-done i { background: rgba(230, 206, 132, .2); border-color: transparent; }

.lcx__prognode.is-on { background: var(--gold); color: var(--ink); }
.lcx__prognode.is-on i { background: var(--gold); color: var(--deep); border-color: transparent; }

/* ------------------------------------------------------------------ тяло */

.lcx__body {
    display: grid;
    grid-template-columns: 1fr;
}

.lcx__panel { padding: 26px 20px 8px; }

.lcx__q {
    margin: 0;
    font-size: clamp(21px, 3.4vw, 27px);
    font-weight: 700;
    letter-spacing: -.3px;
    line-height: 1.2;
}

.lcx__qnote {
    margin: 9px 0 22px;
    max-width: 60ch;
    color: var(--ink-2);
    font-size: 14.5px;
}

.lcx__subh {
    margin: 26px 0 0;
    font-size: 17px;
    font-weight: 700;
}

/* --------------------------------------------------------- избор с картончета */

.lcx__opts {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
}

.lcx__opts--rooms { grid-template-columns: repeat(2, 1fr); }
.lcx__opts--tight { margin-top: 10px; }
.lcx__opts + .lcx__opts { margin-top: 10px; }

.lcx__opt {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 13px 40px 13px 14px;
    text-align: left;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 11px;
    cursor: pointer;
    transition: border-color .16s ease, background .16s ease, transform .16s ease;
}

.lcx__opt:hover { border-color: var(--gold); background: var(--paper); }
.lcx__opt:active { transform: scale(.995); }

.lcx__opt.is-on {
    border-color: var(--gold);
    background: var(--gold-soft);
    box-shadow: inset 0 0 0 1px var(--gold);
}

.lcx__opticon {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 40px; height: 40px;
    border-radius: 10px;
    background: var(--line-2);
    color: var(--ink);
    transition: background .16s ease, color .16s ease;
}

.lcx__opt.is-on .lcx__opticon { background: var(--gold); color: var(--deep); }
.lcx__opticon svg { width: 21px; height: 21px; }

.lcx__optbody { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.lcx__optname { font-size: 14.5px; font-weight: 600; line-height: 1.3; }
.lcx__optnote { font-size: 12.5px; color: var(--mute); line-height: 1.4; }

/* отметката */
.lcx__optmark {
    position: absolute;
    top: 50%; right: 14px;
    transform: translateY(-50%);
    width: 19px; height: 19px;
    border: 1px solid var(--line);
    border-radius: 50%;
    transition: border-color .16s ease, background .16s ease;
}

.lcx__opt.is-on .lcx__optmark {
    border-color: var(--gold);
    background: var(--gold) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2316150f' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 12px no-repeat;
}

/* ------------------------------------------------------------- размери */

.lcx__dims { display: grid; gap: 18px; }

.lcx__dim { display: grid; gap: 8px; }

.lcx__dimtop {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
}

.lcx__dimtop label { font-size: 14px; font-weight: 600; }
.lcx__dimtop output { font-size: 18px; font-weight: 700; color: var(--gold); }

.lcx__slider {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 26px;
    background: transparent;
    cursor: pointer;
}

.lcx__slider::-webkit-slider-runnable-track {
    height: 5px;
    border-radius: 3px;
    background: var(--line);
}

.lcx__slider::-moz-range-track {
    height: 5px;
    border-radius: 3px;
    background: var(--line);
}

.lcx__slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 24px; height: 24px;
    margin-top: -9.5px;
    border-radius: 50%;
    background: var(--gold-lt);
    border: 4px solid var(--gold);
    box-shadow: 0 2px 8px rgba(22, 21, 15, .22);
}

.lcx__slider::-moz-range-thumb {
    width: 24px; height: 24px;
    border-radius: 50%;
    background: var(--gold-lt);
    border: 4px solid var(--gold);
    box-shadow: 0 2px 8px rgba(22, 21, 15, .22);
}

.lcx__slider:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }

.lcx__areabox {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 14px 16px;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 11px;
}

.lcx__areabox span { font-size: 13px; color: var(--mute); margin-right: auto; }
.lcx__areabox b { font-size: 27px; font-weight: 700; letter-spacing: -.5px; }
.lcx__areabox i { font-style: normal; font-size: 14px; color: var(--mute); }

/* ------------------------------------------------------- продуктов режим */

.lcx__prod {
    padding: 14px;
    border: 1px solid var(--gold);
    border-radius: 12px;
    background: var(--gold-soft);
}

.lcx__prodtag {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 10px;
}

.lcx__prodrow { display: flex; gap: 13px; align-items: center; }

.lcx__prodimg {
    flex: 0 0 auto;
    width: 66px; height: 66px;
    display: grid; place-items: center;
    background: #fff;
    border-radius: 9px;
    overflow: hidden;
}

.lcx__prodimg img { max-width: 100%; max-height: 100%; object-fit: contain; }

.lcx__prodbody { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.lcx__prodbody b { font-size: 14.5px; font-weight: 600; line-height: 1.35; }
.lcx__prodlm { font-size: 13px; color: var(--ink-2); }
.lcx__prodprice { font-size: 15px; font-weight: 700; }

.lcx__link {
    display: inline-block;
    margin-top: 12px;
    padding: 0;
    background: none;
    border: 0;
    border-bottom: 1px solid currentColor;
    color: var(--gold);
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
}

.lcx__link:hover { color: var(--ink); }

/* крушките */
.lcx__bulbs { margin-top: 4px; }

.lcx__bulbgrid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
}

.lcx__bulb {
    display: flex;
    gap: 12px;
    align-items: center;
    width: 100%;
    padding: 11px 13px;
    text-align: left;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 11px;
    cursor: pointer;
    transition: border-color .16s ease, background .16s ease;
}

.lcx__bulb:hover { border-color: var(--gold); background: var(--paper); }
.lcx__bulb.is-on { border-color: var(--gold); background: var(--gold-soft); box-shadow: inset 0 0 0 1px var(--gold); }

.lcx__bulbimg {
    flex: 0 0 auto;
    width: 54px; height: 54px;
    display: grid; place-items: center;
    background: #fff;
    border: 1px solid var(--line-2);
    border-radius: 9px;
    overflow: hidden;
}

.lcx__bulbimg img { max-width: 100%; max-height: 100%; object-fit: contain; }

.lcx__bulbbody { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.lcx__bulbname { font-size: 13.5px; font-weight: 600; line-height: 1.3; }
.lcx__bulbspec { font-size: 12px; color: var(--mute); }
.lcx__bulbneed { font-size: 13px; font-weight: 700; color: var(--gold); }
.lcx__bulbprice { font-size: 12.5px; color: var(--ink-2); }

/* --------------------------------------------------------------- преглед */

.lcx__preview {
    padding: 0 20px 22px;
    display: grid;
    gap: 12px;
    align-content: start;
}

.lcx__planbox {
    border: 1px solid var(--line);
    border-radius: 12px;
    overflow: hidden;
    background: var(--paper);
}

.lcx__planbox svg { display: block; width: 100%; height: auto; }

.lcx__planbox--big { margin-top: 12px; }

.lcx__stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}

.lcx__stat {
    display: grid;
    gap: 1px;
    padding: 11px 8px;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 10px;
    text-align: center;
}

.lcx__statv b { font-size: 19px; font-weight: 700; letter-spacing: -.4px; }
.lcx__statv i { font-style: normal; font-size: 11px; color: var(--mute); margin-left: 2px; }
.lcx__statl { font-size: 10.5px; color: var(--mute); text-transform: uppercase; letter-spacing: .6px; }

/* ----------------------------------------------------------------- крака */

.lcx__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 20px;
    border-top: 1px solid var(--line);
    background: var(--paper);
}

.lcx__foot--end { justify-content: flex-end; border-top: 1px solid var(--line); background: var(--surface); }

.lcx__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 46px;
    padding: 0 22px;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: 14.5px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: background .16s ease, color .16s ease, border-color .16s ease, transform .16s ease;
}

.lcx__btn:active { transform: scale(.98); }
.lcx__btn:disabled { opacity: .35; cursor: default; transform: none; }

/* Двойният клас не е излишен: правилото „.lcx button" по-горе е с по-висока
   специфичност от единичния клас и връщаше наследения цвят. Заради това
   „Копирай линка" стоеше тъмно на тъмно и не се четеше. */
/* Върху злато текстът е тъмен. Досега вземаше цвета на мастилото, а то
   вече е светло — светло върху злато не се чете. */
.lcx .lcx__btn--gold { background: var(--gold); color: var(--deep); }
.lcx .lcx__btn--gold:hover:not(:disabled) { background: var(--gold-lt); color: var(--deep); }

.lcx .lcx__btn--dark { background: var(--surface); color: var(--ink); border-color: var(--line); }
.lcx .lcx__btn--dark:hover:not(:disabled) { background: #322d24; color: var(--gold-lt); border-color: var(--gold); }

.lcx .lcx__btn--ghost { background: transparent; border-color: var(--line); color: var(--ink-2); }
.lcx .lcx__btn--ghost:hover:not(:disabled) { border-color: var(--gold); color: var(--gold-lt); }

/* ================================================================ резултат */

.lcx__result { padding: 0; }

.lcx__hero {
    padding: 34px 20px 30px;
    background:
        radial-gradient(120% 140% at 12% 0%, rgba(230, 206, 132, .16) 0%, transparent 58%),
        var(--deep);
    color: #fff;
    text-align: center;
}

.lcx__herokick {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 2.4px;
    text-transform: uppercase;
    color: var(--gold-lt);
}

.lcx__herotitle {
    margin: 12px 0 0;
    font-size: clamp(17px, 2.6vw, 21px);
    font-weight: 500;
    color: rgba(255, 255, 255, .78);
    line-height: 1.35;
}

.lcx__heronum { margin-top: 14px; }
.lcx__heronum b {
    display: block;
    font-size: clamp(58px, 13vw, 92px);
    font-weight: 700;
    line-height: .95;
    letter-spacing: -3px;
    color: var(--gold-lt);
}
.lcx__heronum span {
    display: block;
    margin-top: 8px;
    font-size: 15px;
    color: rgba(255, 255, 255, .85);
}

/* четирите числа */
.lcx__figs {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    border-bottom: 1px solid var(--line);
}

.lcx__fig {
    display: grid;
    gap: 2px;
    padding: 18px 16px;
    border-right: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}

.lcx__figv { font-size: 23px; font-weight: 700; letter-spacing: -.6px; }
.lcx__fign { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--gold); }
.lcx__figh { font-size: 12px; color: var(--mute); line-height: 1.4; }

/* раздели */
.lcx__sec { padding: 30px 20px 0; }
.lcx__sec h3 { margin: 0; font-size: 20px; font-weight: 700; letter-spacing: -.2px; }
.lcx__sec p { margin: 8px 0 0; max-width: 68ch; color: var(--ink-2); font-size: 14.5px; }

.lcx__note {
    margin: 14px 20px 0;
    color: var(--mute);
    font-size: 13px;
    line-height: 1.6;
}

.lcx__tabs { display: flex; gap: 6px; padding: 16px 20px 0; }

.lcx__tab {
    padding: 7px 16px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--surface);
    font-size: 13px;
    font-weight: 600;
    color: var(--ink-2);
    cursor: pointer;
    transition: all .16s ease;
}

.lcx__tab:hover { border-color: var(--gold); }
.lcx__tab.is-on { background: var(--gold); border-color: var(--gold); color: var(--deep); }

.lcx__planbox--big { margin: 12px 20px 0; }

.lcx__legend {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 22px;
    padding: 14px 20px 0;
}

.lcx__leg {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--ink-2);
}

.lcx__leg svg { width: 22px; height: 22px; flex: 0 0 auto; }

/* таблица със слоевете */
.lcx__tablewrap {
    margin: 16px 20px 0;
    overflow-x: auto;
    border: 1px solid var(--line);
    border-radius: 12px;
}

.lcx__table { width: 100%; border-collapse: collapse; font-size: 13.5px; min-width: 720px; }

.lcx__table th {
    padding: 11px 13px;
    text-align: left;
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .8px;
    color: var(--mute);
    white-space: nowrap;
}

.lcx__table td { padding: 12px 13px; border-bottom: 1px solid var(--line-2); vertical-align: top; }
.lcx__table tr:last-child td { border-bottom: 0; }
.lcx__table td:first-child { font-weight: 700; white-space: nowrap; }
.lcx__why { color: var(--ink-2); line-height: 1.55; min-width: 260px; }

.lcx__pill {
    display: inline-block;
    padding: 3px 9px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--surface);
    font-size: 11.5px;
    white-space: nowrap;
}

.lcx__pill--gold { border-color: var(--gold); background: var(--gold-soft); color: #8a6420; font-weight: 600; }
.lcx__pill--off { color: var(--mute); }

/* продуктови картончета */
.lcx__group { margin: 20px 20px 0; }

.lcx__grouphead {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--line);
    margin-bottom: 14px;
}

.lcx__grouphead h4 { margin: 0; font-size: 15.5px; font-weight: 700; }
.lcx__grouphead span { font-size: 12.5px; color: var(--mute); }

.lcx__cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.lcx__card {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--line);
    border-radius: 11px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    background: var(--surface);
    transition: border-color .16s ease, transform .16s ease, box-shadow .16s ease;
}

.lcx__card:hover { border-color: var(--gold); transform: translateY(-2px); box-shadow: var(--shadow); }

.lcx__cardimg {
    display: grid;
    place-items: center;
    aspect-ratio: 1 / 1;
    background: var(--paper);
    padding: 10px;
}

.lcx__cardimg img { max-width: 100%; max-height: 100%; object-fit: contain; }

.lcx__cardbody { display: flex; flex-direction: column; gap: 3px; padding: 11px 12px 13px; }
.lcx__cardrole { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .8px; color: var(--gold); }
.lcx__cardbrand { font-size: 11.5px; color: var(--mute); }
.lcx__cardname {
    font-size: 13px;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.lcx__cardprice { margin-top: 3px; font-size: 15px; font-weight: 700; }

/* покана */
.lcx__cta {
    margin: 34px 20px 0;
    padding: 26px 22px;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 12px;
    text-align: center;
}

.lcx__cta h3 { margin: 0; font-size: 19px; font-weight: 700; }
.lcx__cta p { margin: 8px auto 16px; max-width: 54ch; color: var(--ink-2); font-size: 14px; }

/* =========================================================== голям екран */

@media (min-width: 720px) {
    .lcx { padding: 0 20px 72px; }
    .lcx__opts--rooms { grid-template-columns: repeat(3, 1fr); }
    .lcx__opts { grid-template-columns: repeat(3, 1fr); }
    .lcx__opts--tight { grid-template-columns: repeat(3, 1fr); }
    .lcx__bulbgrid { grid-template-columns: repeat(2, 1fr); }
    .lcx__figs { grid-template-columns: repeat(4, 1fr); }
    .lcx__cards { grid-template-columns: repeat(3, 1fr); }
    .lcx__panel { padding: 30px 26px 10px; }
    .lcx__preview { padding: 0 26px 26px; }
    .lcx__foot { padding: 18px 26px; }
    .lcx__sec, .lcx__tabs { padding-left: 26px; padding-right: 26px; }
    .lcx__planbox--big, .lcx__tablewrap, .lcx__group, .lcx__cta { margin-left: 26px; margin-right: 26px; }
    .lcx__legend, .lcx__note { padding-left: 26px; padding-right: 26px; }
    .lcx__note { margin-left: 0; margin-right: 0; }
    .lcx__hero { padding: 46px 26px 40px; }
}

@media (min-width: 1000px) {
    /* Прегледът отива вдясно и остава на екрана, докато се избира. */
    .lcx__body { grid-template-columns: minmax(0, 1fr) 400px; }

    .lcx__panel { padding: 32px 30px 26px; border-right: 1px solid var(--line); }

    .lcx__preview {
        padding: 32px 26px;
        background: var(--paper);
        position: sticky;
        top: 12px;
        align-self: start;
    }

    .lcx__opts--rooms { grid-template-columns: repeat(2, 1fr); }
    .lcx__opts { grid-template-columns: repeat(2, 1fr); }
    .lcx__opts--tight { grid-template-columns: repeat(3, 1fr); }
    .lcx__bulbgrid { grid-template-columns: repeat(2, 1fr); }
    .lcx__cards { grid-template-columns: repeat(4, 1fr); }
    .lcx__stats { grid-template-columns: repeat(2, 1fr); }
    .lcx__statv b { font-size: 24px; }
}

/* ================================================================ телефон */

@media (max-width: 719px) {
    .lcx { padding: 0 12px 48px; }
    .lcx__bar { padding: 12px 14px; gap: 12px; }
    .lcx__brand { font-size: 13px; }

    /* На тесен екран стъпките остават само като номера — иначе лентата
       се пренася на три реда и изяжда екрана. */
    .lcx__prog { gap: 5px; }
    .lcx__prognode { padding: 5px; }
    .lcx__prognode b { display: none; }
    .lcx__prognode.is-on { border-radius: 999px; padding: 5px; }

    .lcx__panel { padding: 20px 14px 6px; }
    .lcx__preview { padding: 0 14px 18px; }
    .lcx__opt { padding: 11px 36px 11px 11px; gap: 10px; }
    .lcx__opticon { width: 36px; height: 36px; }
    .lcx__optname { font-size: 14px; }
    .lcx__optnote { font-size: 12px; }

    .lcx__foot { padding: 12px 14px; }
    .lcx__btn { flex: 1 1 auto; padding: 0 16px; min-height: 48px; }

    .lcx__hero { padding: 28px 16px 26px; }
    .lcx__sec, .lcx__tabs { padding-left: 14px; padding-right: 14px; }
    .lcx__planbox--big, .lcx__tablewrap, .lcx__group, .lcx__cta { margin-left: 14px; margin-right: 14px; }
    .lcx__legend { padding-left: 14px; padding-right: 14px; }
    .lcx__note { margin-left: 14px; margin-right: 14px; }
    .lcx__fig { padding: 14px 12px; }
    .lcx__figv { font-size: 20px; }
    .lcx__cta { padding: 20px 16px; }
}

@media (max-width: 400px) {
    .lcx__opts--rooms { grid-template-columns: 1fr; }
    .lcx__stats { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================================== разпечатка */

@media print {
    .lcx__bar, .lcx__foot, .lcx__tabs, .lcx__cta { display: none; }
    .lcx__app { border: 0; box-shadow: none; }
    .lcx__hero { background: #fff; color: #16150f; }
    .lcx__herotitle { color: var(--ink-2); }
    .lcx__heronum b { color: var(--ink); }
    .lcx__card { break-inside: avoid; }
}

/* ------------------------------------------- по-малко движение при желание */

@media (prefers-reduced-motion: reduce) {
    .lcx * { transition: none !important; }
}

/* ---------------------------------------------------- вложено в стария увод
   Уводът на страницата седи в .lc, който сам слага отстъпи и ширина.
   Когато приложението е вътре в него, своите ги маха, за да не се събират
   два пъти. */
.lc > .lcx {
    max-width: none;
    padding: 0;
    margin-top: 26px;
}

/* Само страницата на калкулатора: обвивката на съдържанието е 80% от
   екрана и на телефон оставя приложението 260 точки широко. Класът се
   слага от скрипта, за да не се променя общото правило за сайта. */
@media (max-width: 767.98px) {
    .content-without-builder.lcx-host { width: 100%; }
}

/* =============================================== слоевете: разгъващи се редове
   Таблицата с шест колони не се побира на телефон — краят ѝ оставаше извън
   екрана и резултатът се четеше наполовина. Затова там същите редове са
   списък, в който всеки слой се отваря надолу.

   Двете представяния стоят едновременно в страницата; показва се само
   едното. Така завъртането на телефона не изисква преначертаване. */

.lcx__layers { display: none; }

.lcx__lay {
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--surface);
    overflow: hidden;
}

.lcx__lay + .lcx__lay { margin-top: 8px; }
.lcx__lay.is-open { border-color: var(--gold); }

.lcx__layhead {
    position: relative;
    display: grid;
    gap: 5px;
    width: 100%;
    padding: 13px 44px 13px 14px;
    text-align: left;
    background: none;
    border: 0;
    cursor: pointer;
}

.lcx__lay.is-open .lcx__layhead { background: var(--gold-soft); }

.lcx__laytop {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.lcx__laytag {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.1px;
    text-transform: uppercase;
    color: var(--gold);
}

.lcx__laylevel { font-size: 11.5px; }

.lcx__laywhat {
    font-size: 14.5px;
    font-weight: 600;
    line-height: 1.35;
}

.lcx__laychev {
    position: absolute;
    top: 50%;
    right: 13px;
    transform: translateY(-50%);
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    color: var(--mute);
    transition: transform .18s ease, color .18s ease;
}

.lcx__laychev svg { width: 17px; height: 17px; }

.lcx__lay.is-open .lcx__laychev {
    transform: translateY(-50%) rotate(180deg);
    color: var(--gold);
}

/* Тялото се показва само при отворен ред. Без анимация по височина:
   съдържанието е с различна дължина и премерена височина би подскачала. */
.lcx__laybody {
    display: none;
    padding: 4px 14px 14px;
    border-top: 1px solid var(--line-2);
}

.lcx__lay.is-open .lcx__laybody { display: block; }

.lcx__layrow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 9px 0;
    border-bottom: 1px solid var(--line-2);
}

.lcx__layrow > span:first-child {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .8px;
    text-transform: uppercase;
    color: var(--mute);
}

.lcx__laywhy {
    margin: 11px 0 0;
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--ink-2);
}

@media (max-width: 719px) {
    .lcx__tablewrap { display: none; }
    .lcx__layers { display: block; margin: 16px 14px 0; }
}

/* =========================================== снимките трябва да се обявят
   В общия шаблон на десктоп версията стои `img { display: none; }` — още
   в <head>, преди всички листове. Сайтът го компенсира с десетки по-точни
   правила (`#banners ul li > img`, `#topcontrol img` и така нататък), но
   всяка НОВА снимка без собствено правило просто не се вижда.

   Точно това стана тук: картончетата се изписваха с име и цена, но без
   снимка, и то само на десктоп — мобилният шаблон няма скриващото правило.

   Затова всяка снимка в калкулатора си обявява display изрично. */

/* Размерът трябва да е определен, а не само ограничен: снимка, която още
   не е изтеглена, няма собствени размери, а само max-width/max-height я
   оставят 0x0. Тогава кутията ѝ никога не влиза в екрана и отложеното
   зареждане не се задейства — снимката не се появява изобщо.
   Затова тук е width/height 100% от кутията, а object-fit пази пропорцията. */
.lcx img,
.lcx__cardimg img,
.lcx__bulbimg img,
.lcx__prodimg img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* ------------------------------------------------- полетата със снимки

   Изделията са снимани на бяло. На тъмен фон тъмните им части изчезват,
   затова кадърът си остава върху бяло — както е и в лентата с марките на
   началната страница. */

.lcx__prodimg,
.lcx__bulbimg,
.lcx__cardimg {
    background: #fff;
    border-radius: 8px;
}

/* ------------------------------------------------------------ ключалката

   Какво вижда гостът вместо уреда. Същият тъмен вид, за да не изглежда
   като чужд екран, залепен отгоре. */

.lcx--gate .lcx__hero { padding: 26px 24px; }

.lcx__gatebody { padding: 24px; }

.lcx__gatetext {
    margin: 0 0 14px;
    font-size: 15px;
    color: var(--ink-2);
    max-width: 60ch;
}

.lcx__gatelist {
    margin: 0 0 22px;
    padding: 0;
    list-style: none;
    max-width: 60ch;
}

.lcx__gatelist li {
    position: relative;
    padding-left: 26px;
    margin-bottom: 9px;
    font-size: 14.5px;
    color: var(--ink);
}

/* Отметката е нарисувана със знак, за да не се тегли снимка за нея. */
.lcx__gatelist li::before {
    content: "";
    position: absolute;
    left: 4px;
    top: 7px;
    width: 9px;
    height: 5px;
    border-left: 2px solid var(--gold-lt);
    border-bottom: 2px solid var(--gold-lt);
    transform: rotate(-45deg);
}

.lcx__gatebtns {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.lcx__gatenote {
    margin: 14px 0 0;
    font-size: 13px;
    color: var(--mute);
}

@media (max-width: 560px) {
    .lcx__gatebody { padding: 18px 16px; }
    .lcx__gatebtns .lcx__btn { width: 100%; }
}

/* ------------------------------------------------------- клавиатурен фокус

   По контролния списък на дизайн скиловете: фокусът трябва да е видим и
   да е от палитрата. Дотук бутоните разчитаха на подразбиращото се синьо
   очертание на браузъра, което на тъмното поле стои като чуждо тяло.
   :focus-visible пали само при клавиатура — мишката не рисува рамки. */
.lcx button:focus-visible,
.lcx a:focus-visible,
.lcx select:focus-visible,
.lcx input:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 3px;
    border-radius: 6px;
}

/* Намалено движение: преходите остават, но мигновени. Цветовите преходи
   не са движение и не пречат. */
@media (prefers-reduced-motion: reduce) {
    .lcx *, .lcx *::before, .lcx *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}