/* TZ-79 — подбор по меркам (PR 2 и PR 3). Шторка с мерками (.pd-fit__*) — одна
   на карточку товара и на категорию, поэтому живёт не в product.css, а здесь;
   карточка и категория подключают fit.css вторым файлом страницы. Ниже —
   ряд размеров категории («Мой размер» + чипы), страница /podbor и пометки
   в сетке. Поведение — assets/js/fit-finder.js и initProductFit() в main.js. */

/* ── TZ-79, variant В2 (owner 15.10.2026): «Подобрать мой размер» ───────────
   The button sits right under the size row; the sheet comes up from the
   bottom (a centred window ≤ 420 px on a computer). Behaviour —
   initProductFit() in main.js; markup — templates/product_fit.php. */
.pd-fit__open {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    min-height: 3.25rem;
    margin: 12px 0 0;
    padding: 6px 12px;
    border: 2px solid var(--plum);
    border-radius: 12px;
    background: transparent;
    color: var(--plum);
    font: inherit;
    font-size: 1.0625rem;
    font-weight: 700;
    line-height: 1.25;
    text-align: center;
    cursor: pointer;
}
.pd-fit__open svg { flex: none; }
.pd-fit__open:focus-visible, .pd-fit__btn:focus-visible, .pd-fit__x:focus-visible, .pd-fit__textbtn:focus-visible { outline: 3px solid var(--plum); outline-offset: 2px; }
.pd-fit__open[hidden], .pd-fit__saved[hidden], .pd-fit__veil[hidden], .pd-fit__sheet[hidden], .pd-fit__step[hidden], .pd-fit__fields[hidden], .pd-fit__error[hidden], .pd-fit__btn[hidden] { display: none; }
.pd-fit__saved { margin: 10px 0 0; font-size: 0.9375rem; line-height: 1.45; color: var(--ink); }
.pd-fit__textbtn {
    padding: 0;
    border: 0;
    background: none;
    color: var(--coral-deep);
    font: inherit;
    font-weight: 700;
    text-align: left;
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
}
.pd .pd-buy .prd-size-btn.is-mine { position: relative; }
.pd .pd-buy .prd-size-btn.is-mine::after {
    content: attr(data-mine);
    position: absolute;
    top: -9px;
    right: -6px;
    padding: 1px 7px;
    border-radius: 999px;
    background: var(--plum);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1.4;
    white-space: nowrap;
}
.pd-fit__mint { font-weight: 700; }

.pd-fit__veil { position: fixed; inset: 0; z-index: 1000; background: rgba(43, 30, 39, .45); }
.pd-fit__sheet {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1001;
    max-height: calc(100% - 48px);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 8px 16px calc(16px + env(safe-area-inset-bottom, 0px));
    border-radius: 20px 20px 0 0;
    background: #fff;
    box-shadow: 0 -8px 30px rgba(0, 0, 0, .18);
    color: var(--ink);
}
.pd-fit__sheet:focus { outline: none; }
.pd-fit__step { display: grid; gap: 12px; }
.pd-fit__grip { width: 44px; height: 5px; margin: 0 auto 8px; border-radius: 3px; background: var(--stone-line); touch-action: none; }
.pd-fit__head { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.pd-fit__title { margin: 0; font-family: var(--font-display); font-size: 1.125rem; line-height: 1.25; color: var(--ink); }
.pd-fit__x { flex: none; width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--stone); color: var(--ink); font-size: 1.25rem; line-height: 1; cursor: pointer; }
.pd-fit__fig { display: flex; gap: 12px; align-items: center; padding: 8px 10px; border-radius: 12px; background: var(--stone); color: var(--ink-soft); }
.pd-fit__fig svg { flex: none; }
.pd-fit__fig p { margin: 0; font-size: 0.9375rem; line-height: 1.4; color: var(--ink); }
.pd-fit__fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 10px; }
.pd-fit__field { display: grid; gap: 4px; min-width: 0; align-content: end; }
.pd-fit__field label { font-size: 0.9375rem; font-weight: 700; line-height: 1.3; color: var(--ink); }
.pd-fit__box {
    display: flex;
    align-items: center;
    min-height: 3.25rem;
    padding: 0 12px;
    border: 2px solid var(--stone-field);
    border-radius: 12px;
    background: #fff;
}
.pd-fit__box:focus-within { border-color: var(--plum); box-shadow: 0 0 0 3px rgba(91, 42, 69, .18); }
.pd-fit__box input {
    flex: 1;
    min-width: 0;
    width: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--ink);
    /* 18 px: iOS zooms the page into any field under 16 px */
    font: inherit;
    font-size: 1.125rem;
    font-weight: 600;
}
.pd-fit__box input:focus { outline: none; }
.pd-fit__box input[aria-invalid="true"] { color: var(--brick); }
.pd-fit__cm { color: var(--ink-soft); font-size: 1rem; }
.pd-fit__error { margin: 0; font-size: 0.9375rem; color: var(--brick); font-weight: 600; }
.pd-fit__btn {
    display: block;
    width: 100%;
    min-height: 3.5rem;
    padding: 8px 12px;
    border: 0;
    border-radius: 12px;
    background: var(--plum);
    color: #fff;
    font: inherit;
    font-size: 1.0625rem;
    font-weight: 700;
    cursor: pointer;
}
.pd-fit__alt { margin: 0; font-size: 0.9375rem; line-height: 1.4; }
.pd-fit__privacy { margin: 0; font-size: 0.8125rem; line-height: 1.4; color: var(--ink-soft); }
.pd-fit__again { min-height: 44px; text-align: center; font-size: 1rem; }
.pd-fit__res { margin: 0; font-size: 1.125rem; line-height: 1.35; color: var(--ink); }
.pd-fit__res b { display: inline-block; padding: 0 6px; border-radius: 8px; background: var(--coral-tint); color: var(--coral-deep); font-family: var(--font-display); font-size: 1.75rem; line-height: 1.3; }
.pd-fit__facts { margin: 0; padding: 10px 12px; border-radius: 10px; background: #EEF3EC; font-size: 0.9375rem; line-height: 1.45; color: var(--ink); }
.pd-fit__note { margin: 0; font-size: 0.9375rem; line-height: 1.4; color: var(--ink); }
.pd-fit__note b { color: var(--brick); }
#pdFitAnswer { display: grid; gap: 12px; }
/* The keyboard up on a short screen (320×640: about 380 px left; main.js
   measures window.visualViewport — Chrome on Android shrinks only that):
   the figure goes, the title with ✕, the fields and the button stay. */
.pd-fit__sheet.is-typing .pd-fit__fig { display: none; }
@media (min-width: 769px) {
    .pd-fit__sheet {
        left: 50%;
        right: auto;
        top: 50%;
        bottom: auto;
        width: min(420px, calc(100% - 32px));
        max-height: calc(100% - 64px);
        padding: 16px 20px 20px;
        border-radius: 20px;
        transform: translate(-50%, -50%);
        box-shadow: 0 20px 50px rgba(0, 0, 0, .25);
    }
    .pd-fit__grip { display: none; }
}
@media (prefers-reduced-motion: no-preference) {
    .pd-fit__sheet.is-open { animation: pd-fit-up .2s ease-out; }
}
@keyframes pd-fit-up { from { transform: translateY(24px); opacity: .6; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: no-preference) and (min-width: 769px) {
    .pd-fit__sheet.is-open { animation: none; }
}

/* ── TZ-79, PR 3: ответ шторки в категории, страница /podbor, пометки ───── */
.pd-fit__answer { display: grid; gap: 12px; }
.pd-fit__all { display: block; text-align: center; }

/* Marks under the card name on a size page with the finder on: only the
   exceptions — «Вам — 58» (the engine advises another size of this model) and
   «Не по меркам» (no fitting size). The card itself is not faded. */
.fx-mark {
    display: inline-block;
    align-self: flex-start;
    margin-top: 4px;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 0.8125rem;
    font-weight: 700;
    line-height: 1.4;
    white-space: nowrap;
}
.fx-mark--you { background: #FBE4D6; color: #9A3F1E; }
.fx-mark--not { background: #ECE7E3; color: #6A5B62; }

/* The page /podbor. */
.fx-page { padding-top: 16px; padding-bottom: 40px; }
.fx-page__title { margin: 8px 0 8px; font-family: var(--font-display); font-size: 1.5rem; line-height: 1.25; color: var(--ink, #2B1E27); text-wrap: balance; }
.fx-page__lead { margin: 0 0 16px; max-width: 62ch; font-size: 1rem; line-height: 1.5; color: var(--ink, #2B1E27); }
.fx-app { display: grid; gap: 16px; }
.fx-form { display: grid; gap: 12px; max-width: 460px; padding: 14px; border: 1px solid var(--stone-line, #DFD0BC); border-radius: 14px; background: #fff; }
.fx-form[hidden] { display: none; }
.fx-saved { margin: 0; padding: 10px 12px; border-radius: 12px; background: var(--stone, #F6EFE6); }
.fx-result { display: grid; gap: 14px; }
.fx-note { margin: 0; font-size: 1rem; color: #6A5B62; }
.fx-ans { display: grid; gap: 6px; padding: 14px; border-radius: 14px; background: #FBE4D6; }
.fx-ans p { margin: 0; font-size: 1.0625rem; line-height: 1.35; }
.fx-ans__size { display: inline-block; padding: 0 8px; border-radius: 8px; background: #fff; color: #9A3F1E; font-family: var(--font-display); font-size: 1.625rem; line-height: 1.3; }
.fx-link { color: #9A3F1E; font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.fx-chips { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; }
.fx-chips::-webkit-scrollbar { display: none; }
.fx-chip {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 44px;
    padding: 0 14px;
    border: 1.5px solid var(--stone-line, #DFD0BC);
    border-radius: 999px;
    background: #fff;
    color: var(--ink, #2B1E27);
    font: inherit;
    font-size: 0.9375rem;
    font-weight: 600;
    cursor: pointer;
}
.fx-chip small { font-size: 0.8125rem; font-weight: 400; opacity: .75; }
.fx-chip.is-on { border-color: #5B2A45; background: #5B2A45; color: #fff; }
.fx-chip:focus-visible, .fx-more:focus-visible, .fx-card:focus-visible, .fx-link:focus-visible, .fx-call:focus-visible { outline: 3px solid #5B2A45; outline-offset: 2px; }
.fx-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.fx-sep { grid-column: 1 / -1; display: grid; gap: 2px; padding: 10px 12px; border-left: 4px solid #8C7A66; background: var(--stone, #F6EFE6); font-size: 0.875rem; line-height: 1.4; }
.fx-sep b { font-size: 0.9375rem; }
.fx-card { display: grid; align-content: start; min-width: 0; border: 1px solid var(--stone-line, #DFD0BC); border-radius: 12px; overflow: hidden; background: #fff; color: var(--ink, #2B1E27); text-decoration: none; }
.fx-card__img { display: block; aspect-ratio: 4 / 5; background: #EBD3DE; }
.fx-card__img img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 15%; }
.fx-card__b { display: grid; gap: 3px; padding: 8px 9px 10px; }
.fx-card__pr { font-size: 1rem; }
.fx-card__nm { font-size: 0.875rem; line-height: 1.3; min-height: 2.6em; overflow-wrap: anywhere; }
.fx-cap { display: grid; gap: 1px; margin-top: 4px; padding: 6px 8px; border-radius: 8px; background: #EDE3EA; color: #3D1B2F; }
.fx-cap b { font-size: 1rem; line-height: 1.25; }
.fx-cap span { font-size: 0.875rem; line-height: 1.3; color: var(--ink, #2B1E27); }
.fx-more { display: block; width: 100%; min-height: 52px; border: 2px solid #5B2A45; border-radius: 12px; background: #fff; color: #5B2A45; font: inherit; font-size: 1rem; font-weight: 700; cursor: pointer; }
.fx-more[hidden] { display: none; }
.fx-few { display: grid; gap: 8px; padding: 14px; border-radius: 14px; background: var(--stone, #F6EFE6); }
.fx-few p { margin: 0; font-size: 1rem; line-height: 1.4; }
.fx-app a.fx-call, .fx-app a.fx-call:visited, .fx-app a.fx-call:hover { color: #fff; }
.fx-call { display: block; min-height: 52px; line-height: 52px; border-radius: 12px; background: #5B2A45; color: #fff; font-size: 1.0625rem; font-weight: 700; text-align: center; text-decoration: none; }
.fx-about { max-width: 70ch; margin-top: 28px; }
.fx-about h2 { margin: 0 0 8px; font-family: var(--font-display); font-size: 1.125rem; line-height: 1.3; }
.fx-about p { margin: 0; line-height: 1.6; }
@media (min-width: 640px) {
    .fx-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
    .fx-call { display: inline-block; padding: 0 28px; }
}
@media (min-width: 1000px) {
    .fx-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}