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

   Показва се само на широк екран. Под 1400 точки трите колони не се
   побират: филтърът и артикулите са по-важни, затова колоната изчезва, а
   вместо нея под списъка остава връзка към пълния калкулатор.
   =========================================================================== */

.lcs {
    --ink: #f4efe4;
    --ink-2: #cfc8b8;
    --mute: #8f897c;
    --line: #3a352c;
    --paper: #1f1c17;
    --surface: #26221b;
    --deep: #131210;
    --gold: #c89633;
    --gold-lt: #e6ce84;

    width: 246px;
    color: var(--ink);
    font-size: 14px;
    line-height: 1.5;
    font-variant-numeric: tabular-nums;
    text-align: left;
}

.lcs *, .lcs *::before, .lcs *::after { box-sizing: border-box; }

/* Държи се за горния ръб, докато списъкът се движи. 96 точки отгоре са
   колкото е шапката на сайта заедно с менюто.

   Залепването стои на САМАТА обвивка, а не на вътрешна кутия. Обвивката
   живее в клетката на таблицата, която е висока колкото целия списък —
   значи има къде да пътува. Ако залепим вътрешна кутия, нейният съд е
   обвивката, висока колкото самата кутия, и елементът стои неподвижно. */
.lcs {
    position: sticky;
    top: 88px;

    /* Кутията трябва да се събира между менюто и долния ръб на екрана.
       На нисък лаптоп дори стегната не стига, затова остава и вътрешно
       превъртане — по-добре малка лента отстрани, отколкото отрязан бутон. */
    max-height: calc(100vh - 100px);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: #4a443a transparent;
}

.lcs::-webkit-scrollbar { width: 6px; }
.lcs::-webkit-scrollbar-thumb { background: #4a443a; border-radius: 3px; }
.lcs::-webkit-scrollbar-track { background: transparent; }

.lcs__stick { display: block; }

.lcs__box {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 14px 36px rgba(0, 0, 0, .28);
}

/* ------------------------------------------------------------- заглавие */

.lcs__head {
    padding: 12px 16px 10px;
    background:
        radial-gradient(120% 140% at 12% 0%, rgba(230, 206, 132, .16) 0%, transparent 58%),
        var(--deep);
    border-bottom: 1px solid var(--line);
}

.lcs__kick {
    display: block;
    font-size: 10.5px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--gold-lt);
    margin-bottom: 5px;
}

.lcs__title {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.25;
    color: var(--ink);
}

.lcs__sub { display: none; }

/* --------------------------------------------------------------- полета */

.lcs__body { padding: 12px 16px 14px; }

.lcs__field + .lcs__field { margin-top: 9px; }

.lcs__label {
    display: block;
    margin-bottom: 4px;
    font-size: 10.5px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--mute);
}

.lcs__select,
.lcs__input {
    width: 100%;
    padding: 7px 11px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 8px;
    color: var(--ink);
    font: inherit;
    font-size: 13.5px;
}

.lcs__select { appearance: none; cursor: pointer; padding-right: 26px;
    background-image: url("data:image/svg+xml,%3Csvg width='10' height='7' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L6 6L11 1' stroke='%23e6ce84' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 9px center; }

.lcs__select:focus,
.lcs__input:focus {
    outline: none;
    border-color: var(--gold);
    box-shadow: 0 0 0 3px rgba(230, 206, 132, .12);
}

/* Двете страни на помещението стоят една до друга — заемат по-малко място
   и веднага се вижда, че са двойка. */
.lcs__pair { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.lcs__pair .lcs__label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lcs__pair .lcs__select { font-size: 12.5px; padding-left: 9px; }

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

.lcs__out {
    margin-top: 11px;
    padding: 10px 13px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 10px;
}

/* Двете числа стоят едно до друго. Един под друг заемат петдесет точки
   повече, а точно те не достигат на лаптоп. */
.lcs__out {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 6px 12px;
    align-items: end;
}

.lcs__outrow + .lcs__outrow {
    padding-left: 12px;
    border-left: 1px solid var(--line);
    text-align: right;
}

.lcs__outval--sm { font-size: 16px; }

.lcs__outlabel {
    font-size: 10.5px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--mute);
}

.lcs__outval {
    display: block;
    margin-top: 1px;
    font-size: 21px;
    font-weight: 300;
    letter-spacing: .3px;
    color: var(--gold-lt);
}

.lcs__outval small { font-size: 13px; color: var(--ink-2); margin-left: 3px; }

.lcs__hint {
    margin: 8px 0 0;
    font-size: 11.5px;
    line-height: 1.45;
    color: var(--ink-2);
}

/* На нисък екран обяснението за лукс и лумен отпада — то е дълго, а
   мястото трябва да стигне за бутоните. Същото го пише на страницата на
   калкулатора. */
@media (max-height: 900px) {
    .lcs__hint { display: none; }
}

/* --------------------------------------------------------------- бутони */

.lcs__cta {
    display: block;
    width: 100%;
    margin-top: 11px;
    padding: 10px 14px;
    background: var(--gold);
    color: var(--deep);
    border: 1px solid var(--gold);
    border-radius: 8px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background .18s ease, color .18s ease;
}

.lcs__cta:hover,
.lcs__cta:focus {
    background: var(--gold-lt);
    color: var(--deep);
    text-decoration: none;
}

/* Вторият бутон е предложение, не преграда — затова е с рамка, а не
   запълнен. Не бива да спори със златния над него. */
.lcs__cta--ghost {
    margin-top: 7px;
    background: transparent;
    color: var(--gold-lt);
    border-color: var(--line);
}

.lcs__cta--ghost:hover,
.lcs__cta--ghost:focus {
    background: transparent;
    border-color: var(--gold);
    color: var(--gold-lt);
}

.lcs__foot {
    margin: 8px 0 0;
    font-size: 11px;
    color: var(--mute);
    text-align: center;
}

/* ------------------------------------------------------- къде се показва */

/* Колоната е в клетка на таблицата на списъка. */
/* Плочките са по 184 точки. Колоната е премерена така, че на 1400
   точки екран в средата да остават поне 736 — колкото са четири
   плочки. При по-широка колона редът пада на три. */
.ava-side-cell { width: 258px; vertical-align: top; padding-left: 12px; }

/* Три колони искат място. Под 1400 точки филтърът и артикулите не остават
   достатъчно широки, затова колоната отпада — на тесен екран е по-важно
   да се виждат изделията. */
@media (max-width: 1399px) {
    .ava-side-cell { display: none; }
}

/* Контейнерът на сайта е стегнат на 78% (design.css, с !important). При
   три колони това оставя на артикулите под петстотин точки и редът пада на
   два. Затова само на тези страници и само на широк екран се отпуска. */
@media (min-width: 1400px) {
    .ava-has-side .container { max-width: 95% !important; }
}

@media (min-width: 1700px) {
    .ava-has-side .container { max-width: 1620px !important; }
}

/* ------------------------------------------------ защо не се залепваше

   `style.css` слага `overflow-x: hidden` на body. Това прави от body
   превъртаща се кутия и залепеният елемент се хваща за НЕЯ — а тя никога
   не се движи, защото превърта самата страница. Отвън изглежда все едно
   залепването не работи.

   `clip` реже по същия начин отстрани, но не прави превъртаща кутия и
   залепването се връща. Пипа се само на страниците с колоната, защото
   само там се зарежда този файл. Двете думи в селектора са, за да е
   по-точен от правилото в style.css. */
@supports (overflow: clip) {
    html body { overflow-x: clip; }
}

/* Клавиатурен фокус от палитрата — не подразбиращото се синьо. */
.lcs a:focus-visible,
.lcs select:focus-visible,
.lcs input:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
    .lcs * { transition-duration: 0.01ms !important; }
}

/* Височината и цветът на стените — един под друг, с пълните им имена.
   Двете полета не се събираха на един ред с новите етикети. */
.lcs__stack { display: grid; grid-template-columns: 1fr; gap: 10px; }