/* ======================================= */
/* CATALOG — shared editorial tokens */
/* ======================================= */
:root{
    --ed-ink: #211c17;
    --ed-gray: #857c72;
    --ed-line: #e7e0d4;
    --ed-bg-soft: #f8f4ec;
    --ed-paper: #faf7f1;
    --ed-dark: #18140f;
    --ed-serif: "Cormorant Garamond", Georgia, serif;

    /* slow, near-imperceptible motion only — Apple/Poliform register, not
       the snappier 0.15s used for hover states on catalog listing chrome */
    --ed-dur: 0.9s;
    --ed-ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ======================================= */
/* Scroll reveal — near-imperceptible fade + up to 20px rise, once, on first
   entry. See js-reveal binding in js/catalog.js (IntersectionObserver). No
   spring/bounce/scale — just opacity and position settling into place. */
/* ======================================= */
.js-reveal{
    opacity: 0;
    transform: translateY(20px);
    transition: opacity var(--ed-dur) var(--ed-ease), transform var(--ed-dur) var(--ed-ease);
}

.js-reveal.is-visible{
    opacity: 1;
    transform: translateY(0);
}

@media (prefers-reduced-motion: reduce){
    .js-reveal{
        opacity: 1;
        transform: none;
        transition: none;
    }
}

.eyebrow-label{
    font: 400 12px/1.4 var(--font);
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--ed-gray);
}

/* warm paper background for the product page — replaces the cold pure-white
   canvas everywhere this editorial system is used */
.single-product{
    background-color: var(--ed-paper);
}

/* ======================================= */
/* CATALOG — breadcrumbs */
/* ======================================= */
.simple-breadcrumbs{
    display: block;

    padding: 22px 0;

    font: 400 11px/1.4 var(--font);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--ed-gray);
}

.simple-breadcrumbs a{
    color: var(--ed-gray);
    text-decoration: none;
}

.simple-breadcrumbs a:hover{
    color: var(--ed-ink);
}

.simple-breadcrumbs span{
    color: var(--ed-ink);
}

/* ======================================= */
/* CATALOG — page intro */
/* ======================================= */
.catalog-intro{
    padding: 8px 0 40px;
}

.catalog-intro__title{
    font: 300 44px/1.15 var(--font);
    letter-spacing: 0.01em;
    color: var(--ed-ink);
    text-transform: none;
}

.catalog-intro__text{
    max-width: 640px;
    margin-top: 14px;

    font: 400 15px/1.6 var(--font);
    color: var(--ed-gray);
}

/* ======================================= */
/* CATALOG — layout */
/* ======================================= */
.catalog-layout{
    display: flex;
    align-items: flex-start;
    gap: 56px;
}

.catalog-filters{
    flex: 0 0 240px;

    padding-top: 4px;
}

.catalog-filters__group{
    padding-bottom: 24px;
    margin-bottom: 24px;

    border-bottom: 1px solid var(--ed-line);
}

.catalog-filters__group:last-of-type{
    border-bottom: none;
}

.catalog-filters__title{
    font: 400 12px/1.3 var(--font);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--ed-ink);
    margin-bottom: 14px;
}

.catalog-filters__option{
    display: flex;
    align-items: center;
    gap: 10px;

    font: 400 14px/1.4 var(--font);
    color: var(--ed-ink);
    cursor: pointer;
    margin-bottom: 10px;
}

.catalog-filters__option input{
    width: 15px;
    height: 15px;
    min-width: 15px;

    accent-color: var(--ed-ink);
}

.catalog-filters__option i{
    font-style: normal;
    color: var(--ed-gray);
}

.catalog-filters__option--dead{
    opacity: 0.38;
}

.catalog-filters__option--dead input{
    cursor: not-allowed;
}

/* active-filter chips */
.catalog-chips{
    display: flex;
    flex-wrap: wrap;
    gap: 10px;

    padding-bottom: 24px;
    margin-bottom: 24px;

    border-bottom: 1px solid var(--ed-line);
}

.catalog-chip{
    display: inline-flex;
    align-items: center;
    gap: 6px;

    padding: 7px 12px;

    border: 1px solid var(--ed-ink);

    font: 400 12px/1.2 var(--font);
    letter-spacing: 0.02em;
    color: var(--ed-ink);
    text-decoration: none;
}

.catalog-chip span{
    font-size: 14px;
    line-height: 1;
}

.catalog-chip--reset{
    border-color: transparent;
    color: var(--ed-gray);
    text-decoration: underline;
}

.catalog-filters__reset{
    display: inline-block;
    margin-top: 6px;

    font-size: 12px;
    letter-spacing: 0.04em;
    color: var(--ed-gray);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.catalog-body{
    flex: 1 1 auto;
    min-width: 0;
}

.catalog-count{
    display: flex;
    align-items: center;
    justify-content: space-between;

    padding-bottom: 20px;
    margin-bottom: 28px;

    border-bottom: 1px solid var(--ed-line);

    font: 400 13px/1.3 var(--font);
    color: var(--ed-gray);
}

.catalog-count select{
    border: none;
    background: transparent;

    font: 400 13px/1.3 var(--font);
    color: var(--ed-ink);
    text-transform: uppercase;
    letter-spacing: 0.06em;

    cursor: pointer;
}

.catalog-grid{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 48px 32px;
}

@media screen and (max-width: 1024px){
    .catalog-layout{
        flex-direction: column;
        gap: 32px;
    }

    .catalog-filters{
        flex: none;
        width: 100%;
    }
}

@media screen and (max-width: 600px){
    .catalog-grid{
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .catalog-intro__title{
        font-size: 32px;
    }
}

.catalog-empty{
    padding: 60px 0;
    color: var(--ed-gray);
}

/* ======================================= */
/* CATALOG — product card (editorial, borderless) */
/* ======================================= */
.product-card{
    display: block;
}

.product-card__picture{
    position: relative;

    padding-top: 118%;

    background-color: var(--ed-bg-soft);
    overflow: hidden;
}

.product-card__picture img{
    position: absolute;
    left: 0;
    top: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition: transform 0.5s ease-in-out;
}

@media screen and (min-width: 1025px){
    .product-card:hover .product-card__picture img{
        transform: scale(1.035);
    }
}

.product-card__badge{
    position: absolute;
    left: 16px;
    top: 16px;

    padding: 5px 12px;

    background: rgba(255,255,255,0.92);
    color: var(--ed-ink);
    font: 400 10px/1.2 var(--font);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.product-card__body{
    padding: 18px 2px 0;
}

.product-card__title{
    font: 400 18px/1.3 var(--font);
    letter-spacing: 0.02em;
    color: var(--ed-ink);
    margin-bottom: 6px;
}

.product-card__tags{
    font-size: 12px;
    letter-spacing: 0.04em;
    color: var(--ed-gray);
    text-transform: uppercase;
    margin-bottom: 8px;
}

.product-card__price{
    font: 400 14px/1.3 var(--font);
    color: var(--ed-ink);
}

.product-card__price span{
    color: var(--ed-gray);
    font-size: 12px;
}

/* ======================================= */
/* CATALOG — inline capture form (middle of grid) */
/* ======================================= */
.catalog-inline-form{
    grid-column: 1 / -1;

    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 20px;

    padding: 36px 40px;

    background: var(--ed-bg-soft);
}

.catalog-inline-form__text{
    max-width: 420px;
}

.catalog-inline-form__title{
    font: 400 19px/1.3 var(--font);
    color: var(--ed-ink);
    margin-bottom: 6px;
}

.catalog-inline-form__subtitle{
    font-size: 13px;
    color: var(--ed-gray);
}

.catalog-inline-form .wpcf7-form{
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.catalog-inline-form .wpcf7-form-control-wrap{
    display: inline-block;
}

.catalog-inline-form input[type="text"],
.catalog-inline-form input[type="tel"]{
    width: 180px;
    padding: 12px 0;

    border: none;
    border-bottom: 1px solid var(--ed-gray);
    background: transparent;
    font: 400 14px/1.3 var(--font);
}

.catalog-inline-form .agree-row{
    flex-basis: 100%;
}

/* ======================================= */
/* SINGLE PRODUCT — Экран 1: hero. Асимметричный кадрированный баннер, НЕ
   fullscreen — высота фиксированная и умеренная, чтобы контрастировать с
   настоящим fullscreen-моментом (Экран 3). Текстовая колонка — узкая
   фиксированная полоса, не процент от ширины: "текст занимает минимальную
   площадь", а не почти половину экрана. */
/* ======================================= */
.product-hero{
    display: flex;
    height: 640px;

    background-color: var(--ed-dark);

    animation: heroFadeIn 1.4s var(--ed-ease) both;
}

@keyframes heroFadeIn{
    from{ opacity: 0; }
    to{ opacity: 1; }
}

.product-hero__text{
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex: 0 0 clamp(280px, 27vw, 400px);

    padding: 56px 48px;
    box-sizing: border-box;
}

.product-hero__eyebrow{
    font: 400 11px/1.4 var(--font);
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: rgba(255,255,255,0.55);
    margin-bottom: 24px;
}

.product-hero__title{
    margin: 0 0 24px;

    color: var(--light);
    font: 400 clamp(2.6rem, 4vw, 4rem) / 1.02 var(--ed-serif);
    letter-spacing: 0.01em;
}

.product-hero__lead{
    max-width: 28ch;
    margin: 0 0 36px;

    color: rgba(255,255,255,0.7);
    font: 300 14.5px/1.7 var(--font);
}

.product-hero__picture{
    position: relative;
    flex: 1 1 auto;

    overflow: hidden;
}

.product-hero__picture img{
    position: absolute;
    left: 0;
    top: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;

    animation: heroImgIn 2.4s var(--ed-ease) both;
}

@keyframes heroImgIn{
    from{ opacity: 0; transform: scale(1.04); }
    to{ opacity: 1; transform: scale(1); }
}

@media (prefers-reduced-motion: reduce){
    .product-hero,
    .product-hero__picture img{
        animation: none;
    }
}

@media screen and (max-width: 900px){
    .product-hero{
        flex-direction: column;
        height: auto;
    }

    .product-hero__text{
        flex: none;
        padding: 48px 24px;
    }

    .product-hero__picture{
        height: 50vh;
    }
}

/* ======================================= */
/* Экран 2 / 4 — редакционный разворот: узкая текстовая колонка, крупное
   фото. Высота держится на пропорции фото (aspect-ratio), НЕ на vh — так
   этот экран естественно короче hero, а не одинаковой высоты с ним. */
/* ======================================= */
.product-split{
    display: flex;
    align-items: stretch;
}

.product-split__text{
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex: 0 0 clamp(280px, 28vw, 400px);

    padding: 48px;
    box-sizing: border-box;

    background-color: var(--ed-paper);
}

.product-split__title{
    margin: 0 0 24px;

    color: var(--ed-ink);
    font: 400 clamp(1.9rem, 2.4vw, 2.5rem) / 1.2 var(--ed-serif);
    letter-spacing: 0.005em;
}

.product-split__body{
    max-width: 34ch;
    margin-bottom: 28px;

    color: var(--ed-gray);
    font: 300 15px/1.75 var(--font);
}

.product-split__body p{
    margin-bottom: 18px;
}

.product-split__body p:last-child{
    margin-bottom: 0;
}

.product-split__picture{
    position: relative;
    flex: 1 1 auto;

    aspect-ratio: 16 / 10;
    max-height: 520px;

    overflow: hidden;
    background-color: var(--ed-bg-soft);
}

.product-split__picture img{
    position: absolute;
    left: 0;
    top: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;
}

@media screen and (max-width: 900px){
    .product-split{
        flex-direction: column;
    }

    .product-split__text{
        flex: none;
        padding: 48px 24px;
    }

    .product-split__picture{
        aspect-ratio: auto;
        max-height: none;
        height: 50vh;
    }
}

/* ======================================= */
/* Экран 3 — чистое фото. Это единственный настоящий fullscreen-момент
   страницы (contrast с умеренной высотой hero/split выше) — панорамная
   полоса, а не банальный высокий блок. */
/* ======================================= */
.product-fullbleed{
    position: relative;

    height: 420px;

    overflow: hidden;
}

.product-fullbleed--tall{
    height: 92vh;
    max-height: 1000px;
}

.product-fullbleed img{
    position: absolute;
    left: 0;
    top: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;
}

@media screen and (max-width: 767px){
    .product-fullbleed{
        height: 42vh;
    }

    .product-fullbleed--tall{
        height: 60vh;
    }
}

/* ======================================= */
/* Экран 6 — галерея: постоянная смена масштаба через паттерн из 6 ячеек
   (nth-child), а не фиксированную раскладку — работает для любого числа
   фотографий (у товаров сейчас от 4 до 7 в галерее). Ряд в px, не vw —
   иначе на широких мониторах ячейки становятся непропорционально огромными. */
/* ======================================= */
.product-masonry{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 180px;
    gap: 32px;
}

.product-masonry__item{
    position: relative;

    overflow: hidden;
    background-color: var(--ed-bg-soft);
}

.product-masonry__item img{
    position: absolute;
    left: 0;
    top: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;
}

.product-masonry__item:nth-child(6n+1){ grid-column: span 4; grid-row: span 2; }
.product-masonry__item:nth-child(6n+2){ grid-column: span 2; grid-row: span 2; }
.product-masonry__item:nth-child(6n+3){ grid-column: span 2; grid-row: span 1; }
.product-masonry__item:nth-child(6n+4){ grid-column: span 2; grid-row: span 1; }
.product-masonry__item:nth-child(6n+5){ grid-column: span 1; grid-row: span 2; }
.product-masonry__item:nth-child(6n+0){ grid-column: span 3; grid-row: span 1; }

@media screen and (max-width: 767px){
    .product-masonry{
        grid-template-columns: 1fr;
        grid-auto-rows: 62vw;
        gap: 24px;
    }

    .product-masonry__item{
        grid-column: span 1 !important;
        grid-row: span 1 !important;
    }
}

/* полноширинная фотография-заставка перед галереей — четвёртый настоящий
   full-window момент страницы, за пределами .container */
.product-gallery-lead{
    position: relative;

    width: 100%;
    height: 460px;

    margin-bottom: 64px;
    overflow: hidden;
}

.product-gallery-lead img{
    position: absolute;
    left: 0;
    top: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;
}

@media screen and (max-width: 767px){
    .product-gallery-lead{
        height: 46vh;
        margin-bottom: 32px;
    }
}

/* ======================================= */
/* Экран 5 — особенности: номер, короткий заголовок, одна фраза, фото.
   Три колонки, не сетка из одинаковых карточек. */
/* ======================================= */
.product-features{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 64px 48px;

    padding: 120px 0;
}

.product-feature__number{
    font: 300 15px/1 var(--ed-serif);
    color: var(--ed-gray);
    margin-bottom: 20px;
}

.product-feature__title{
    font: 400 20px/1.3 var(--ed-serif);
    color: var(--ed-ink);
    margin-bottom: 10px;
}

.product-feature__text{
    max-width: 32ch;
    margin-bottom: 28px;

    font: 300 14.5px/1.7 var(--font);
    color: var(--ed-gray);
}

.product-feature__picture{
    position: relative;
    overflow: hidden;
    background-color: var(--ed-bg-soft);
}

.product-feature__picture:before{
    content: "";
    display: block;
    padding-top: 125%;
}

.product-feature__picture img{
    position: absolute;
    left: 0;
    top: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;
}

/* ======================================= */
/* SINGLE PRODUCT — editorial content blocks (specs, sizes, calculator) */
/* ======================================= */
.product-editorial{
    /* longhand on purpose — this element also carries .container, whose own
       left/right padding must survive (a shorthand `padding` here would zero it) */
    padding-top: 120px;
    padding-bottom: 120px;

    border-top: 1px solid var(--ed-line);
}

.product-editorial:first-of-type{
    border-top: none;
}

/* quiet, quick-reference moments (specs, sizes) get a noticeably smaller
   pause than the grand ones (materials, features, form) — uniform padding
   everywhere was exactly the "same weight everywhere" flatness complaint */
.product-editorial--tight{
    padding-top: 64px;
    padding-bottom: 64px;
}

.product-section__title{
    font: 400 12px/1.3 var(--font);
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--ed-gray);
    margin-bottom: 44px;
}

/* refined text-style buttons — replace the theme's boxy black primary-btn.
   Also targets CF7's rendered [submit] <input>, so reset native control chrome.
   Taller tap target + a slow, calm hover (no snap-fade) reads as considered
   rather than "just a link". */
.btn-line{
    display: inline-block;

    padding: 14px 0 12px;
    width: auto;

    -webkit-appearance: none;
    appearance: none;
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--ed-ink);
    border-radius: 0;

    font: 400 13px/1.3 var(--font);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--ed-ink);
    text-decoration: none;

    cursor: pointer;
    transition: color var(--ed-dur) var(--ed-ease), border-color var(--ed-dur) var(--ed-ease);
}

.btn-line:hover{
    color: var(--ed-gray);
    border-bottom-color: var(--ed-gray);
}

.btn-line--ghost{
    color: var(--ed-gray);
    border-bottom-color: var(--ed-line);
}

.btn-line--ghost:hover{
    color: var(--ed-ink);
    border-bottom-color: var(--ed-ink);
}

.btn-line--light{
    color: var(--light);
    border-bottom-color: rgba(255,255,255,0.6);
}

.btn-line--light:hover{
    color: rgba(255,255,255,0.65);
    border-bottom-color: rgba(255,255,255,0.35);
}

/* ======================================= */
/* Материалы как арт-объект — крупные квадратные тайлы (честный цветовой
   сэмпл, реальной макро-фотографии материалов пока нет), подпись только
   именем финиша. Клик — мгновенно меняет активный тайл (js-material-swatch
   в js/catalog.js), без перехода со страницы. */
/* ======================================= */
.product-material-tiles{
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    gap: 28px;

    padding: 48px;
    flex: 1 1 auto;
}

.product-material-tile{
    position: relative;

    flex: 0 0 auto;
    width: 148px;

    padding: 0;

    border: none;
    background: none;
    cursor: pointer;
}

.product-material-tile__swatch{
    display: block;

    width: 100%;
    aspect-ratio: 1 / 1;

    box-shadow: inset 0 0 0 1px rgba(0,0,0,0.08);
    transition: box-shadow var(--ed-dur) var(--ed-ease);
}

.product-material-tile:hover .product-material-tile__swatch,
.product-material-tile.active .product-material-tile__swatch{
    box-shadow: inset 0 0 0 1px rgba(0,0,0,0.08), 0 0 0 1px var(--ed-ink);
}

.product-material-tile__name{
    display: block;
    margin-top: 12px;

    font: 400 10.5px/1.3 var(--font);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ed-gray);
    text-align: left;
}

@media screen and (max-width: 900px){
    .product-material-tiles{
        padding: 32px 24px;
    }

    .product-material-tile{
        width: 110px;
    }
}

.product-price-note{
    margin-top: 32px;

    font: 400 14px/1.6 var(--font);
    color: var(--ed-gray);
}

/* ======================================= */
/* Specs table */
/* ======================================= */
.product-specs{
    max-width: 640px;
}

.product-specs__row{
    display: flex;
    justify-content: space-between;
    gap: 20px;

    padding: 20px 0;

    border-bottom: 1px solid var(--ed-line);
    font-size: 14.5px;
    line-height: 1.6;
}

.product-specs__label{
    color: var(--ed-gray);
}

/* short, magazine-style paragraphs — generous leading and space between
   blocks instead of one dense wall of text */
.product-prose{
    max-width: 68ch;
}

.product-prose p{
    margin-bottom: 28px;
    font-size: 15.5px;
    line-height: 1.85;
    color: var(--ed-ink);
}

.product-prose p:last-child{
    margin-bottom: 0;
}

.product-related-grid{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 56px 40px;
}

/* ======================================= */
/* Экран 8 — форма: премиальный сервис, не CRM. Три колонки — заголовок,
   поля, доверие — открытые, без рамок и фона, широкая кнопка. */
/* ======================================= */
.product-form{
    display: grid;
    grid-template-columns: 1fr 1.2fr 0.9fr;
    gap: 64px;

    padding: 140px 64px;

    border-top: 1px solid var(--ed-line);
}

@media screen and (max-width: 1100px){
    .product-form{
        grid-template-columns: 1fr;
        gap: 56px;
        padding: 80px 28px;
    }
}

.product-form__text{
    align-self: start;
}

.product-inline-form-title{
    font: 300 18px/1.5 var(--font);
    color: var(--ed-ink);
    margin-bottom: 32px;
}

.product-form__fields .wpcf7-form-control-wrap + .wpcf7-form-control-wrap{
    margin-top: 28px;
}

.product-form__fields input[type="text"],
.product-form__fields input[type="tel"]{
    width: 100%;
    padding: 16px 0;

    border: none;
    border-bottom: 1px solid var(--ed-line);
    background: transparent;
    font: 400 16px/1.3 var(--font);
    color: var(--ed-ink);

    transition: border-color 0.5s var(--ed-ease);
}

.product-form__fields input[type="text"]:focus,
.product-form__fields input[type="tel"]:focus{
    outline: none;
    border-bottom-color: var(--ed-ink);
}

.product-form__fields .wpcf7-submit{
    margin-top: 40px;

    background: transparent;
    border: none;
    border-bottom: 1px solid var(--ed-ink);
    border-radius: 0;

    padding: 16px 0 14px;
    width: 100%;

    font: 400 13px/1.3 var(--font);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--ed-ink);

    transition: color var(--ed-dur) var(--ed-ease), border-color var(--ed-dur) var(--ed-ease);
}

.product-form__fields .wpcf7-submit:hover{
    color: var(--ed-gray);
    border-bottom-color: var(--ed-gray);
}

.product-form__trust{
    display: flex;
    flex-direction: column;
    gap: 28px;
    align-self: start;
}

.product-trust-row{
    display: flex;
    align-items: flex-start;
    gap: 16px;

    font: 400 12.5px/1.6 var(--font);
    letter-spacing: 0.02em;
    color: var(--ed-gray);
}

.product-trust-row__icon{
    flex: none;

    width: 20px;
    height: 20px;
    margin-top: 1px;

    color: var(--ed-ink);
}

/* ======================================= */
/* CALCULATOR v1 */
/* ======================================= */
.calculator{
    max-width: 560px;
    padding-top: 4px;
}

.calculator__row{
    margin-bottom: 22px;
}

.calculator__row label{
    display: block;

    font: 400 12px/1.3 var(--font);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ed-gray);
    margin-bottom: 10px;
}

.calculator__row select{
    width: 100%;
    padding: 10px 0;

    border: none;
    border-bottom: 1px solid var(--ed-line);
    background: transparent;
    font: 400 15px/1.3 var(--font);
    color: var(--ed-ink);
}

.calculator__row input[type="range"]{
    width: 100%;
    accent-color: var(--ed-ink);
}

.calculator__result{
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 20px;

    padding-top: 24px;
    margin-top: 8px;

    border-top: 1px solid var(--ed-line);
}

.calculator__result-value{
    font: 300 32px/1.2 var(--font);
    color: var(--ed-ink);
}

.calculator__result-note{
    font-size: 12px;
    color: var(--ed-gray);
    margin-top: 8px;
    max-width: 260px;
}

/* ======================================= */
/* Sticky bottom bar */
/* ======================================= */
.product-sticky-bar{
    position: sticky;
    bottom: 0;
    z-index: 40;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;

    padding: 20px 32px;

    background: var(--ed-ink);

    /* hidden until the visitor scrolls past the hero — see js-sticky-bar-visible
       toggle in catalog.js; showing it from first paint was flagged as an
       unearned, over-eager conversion device */
    opacity: 0;
    transform: translateY(100%);
    transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out;
    pointer-events: none;
}

.product-sticky-bar.js-sticky-bar-visible{
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.product-sticky-bar__title{
    color: var(--light);
    font: 400 14px/1.4 var(--font);
    letter-spacing: 0.02em;
}

/* ======================================= */
/* 20s WELCOME POPUP + retention */
/* ======================================= */
.welcome-popup{
    display: none;

    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 550;

    width: 360px;
    max-width: calc(100vw - 32px);

    background: var(--light);
    box-shadow: 0 24px 60px rgba(0,0,0,0.18);

    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.25s ease-in-out, transform 0.25s ease-in-out;
}

.welcome-popup.active{
    display: block;
}

.welcome-popup.visible{
    opacity: 1;
    transform: translateY(0);
}

@media (prefers-reduced-motion: reduce){
    .welcome-popup{
        transition: none;
    }
}

.welcome-popup__inside{
    position: relative;
    padding: 30px 28px 26px;
}

.welcome-popup__close{
    position: absolute;
    right: 14px;
    top: 14px;

    width: 28px;
    height: 28px;

    display: flex;
    align-items: center;
    justify-content: center;

    cursor: pointer;
}

.welcome-popup__close-icon{
    width: 13px;
    height: 13px;
    fill: var(--ed-gray);
}

.welcome-popup__title{
    font: 400 18px/1.3 var(--font);
    color: var(--ed-ink);
    padding-right: 20px;
    margin-bottom: 10px;
}

.welcome-popup__text{
    font-size: 13.5px;
    color: var(--ed-gray);
    line-height: 1.55;
    margin-bottom: 20px;
}

.welcome-popup input[type="tel"]{
    width: 100%;
    padding: 12px 0;

    border: none;
    border-bottom: 1px solid var(--ed-gray);
    background: transparent;
    font: 400 14px/1.3 var(--font);
}

.welcome-popup .wpcf7-submit{
    margin-top: 16px;

    -webkit-appearance: none;
    appearance: none;
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--ed-ink);
    border-radius: 0;

    padding: 0 0 6px;
    width: auto;

    font: 400 12px/1.3 var(--font);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--ed-ink);
    cursor: pointer;
}

.form-trust-note{
    margin-top: 14px;

    font-size: 11.5px;
    line-height: 1.5;
    color: var(--ed-gray);
}

.form-trust-note--light{
    color: rgba(0,0,0,0.4);
}

@media screen and (max-width: 767px){
    .welcome-popup{
        left: 16px;
        right: 16px;
        bottom: 16px;

        width: auto;
    }
}

/* consent checkboxes inside the new editorial sections — override the
   theme's bright-green checked state to match the monochrome palette here */
.product-form__fields .checkbox-label input:checked + .wpcf7-list-item-label:before,
.catalog-inline-form .checkbox-label input:checked + .wpcf7-list-item-label:before,
.welcome-popup .checkbox-label input:checked + .wpcf7-list-item-label:before{
    background-color: var(--ed-ink);
}

.product-form__fields .agree-row a,
.catalog-inline-form .agree-row a,
.welcome-popup .agree-row a{
    color: var(--ed-ink);
}