/* Тема «Грани» (kmfacet) — витрина магазина: слайдер, листинги, карточка товара,
   корзина, чекаут, сравнение, кабинет. Базовые токены и компоненты fc-* — в
   родительской site-теме (css/theme.css). Слои те же. */

@layer components {
    /* ============ ГЛАВНАЯ ============ */
    .fc-slider { position: relative; margin-block: var(--fc-gap) 0; }
    .fc-slider__track {
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
        border-radius: var(--fc-radius-lg);
        position: relative;
    }
    .fc-slider__track::-webkit-scrollbar { display: none; }
    .fc-slide {
        flex: 0 0 100%;
        scroll-snap-align: start;
        min-height: 300px;
        display: flex;
        align-items: center;
        background: var(--fc-ink) center / cover no-repeat;
        color: #fff;
    }
    .fc-slide__panel {
        margin: 32px;
        padding: 24px 28px;
        max-width: 420px;
        background: rgb(20 15 12 / 55%);
        backdrop-filter: blur(2px);
        border-left: 3px solid var(--fc-highlight);
    }
    .fc-slide__title { color: #fff; margin-bottom: .3em; }
    .fc-slide__text { color: rgb(255 255 255 / 85%); }
    .fc-slider__arrow {
        position: absolute;
        top: 50%;
        translate: 0 -50%;
        width: 40px;
        height: 40px;
        border: 0;
        border-radius: var(--fc-radius);
        background: rgb(255 255 255 / 88%);
        color: var(--fc-ink);
        font-size: 22px;
        line-height: 1;
        cursor: pointer;
        z-index: 1;
    }
    .fc-slider__arrow--prev { left: 10px; }
    .fc-slider__arrow--next { right: 10px; }
    .fc-slider__arrow:hover { background: #fff; }

    .fc-advantages {
        display: grid;
        gap: var(--fc-gap);
        margin-block: var(--fc-gap);
        padding: var(--fc-gap);
        border-block: 1px solid var(--fc-line);
        background: var(--fc-bg-soft);
    }
    @media (min-width: 768px) { .fc-advantages { grid-template-columns: repeat(3, 1fr); } }
    .fc-advantages__item { display: flex; align-items: center; gap: 12px; justify-content: center; }
    .fc-advantages__icon { flex: none; width: 40px; height: 40px; color: var(--fc-accent); }
    .fc-advantages__icon svg { width: 100%; height: 100%; }
    .fc-advantages__text { font-weight: 700; font-size: 14px; }

    .fc-catbar {
        display: flex;
        gap: var(--fc-gap);
        overflow-x: auto;
        padding-bottom: 6px;
        position: relative; /* absolute-потомки не растягивают документ */
    }
    .fc-catbar__item {
        flex: 0 0 auto;
        width: 108px;
        display: grid;
        justify-items: center;
        gap: 8px;
        text-decoration: none;
        color: var(--fc-ink);
        font-size: 13px;
        text-align: center;
    }
    .fc-catbar__item img, .fc-catbar__letter {
        width: 84px;
        height: 84px;
        border-radius: 50%;
        border: 1px solid var(--fc-line);
        object-fit: cover;
        background: var(--fc-bg-soft);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-family: var(--fc-font-display);
        font-size: 30px;
        color: var(--fc-accent);
        transition: border-color .15s;
    }
    .fc-catbar__item:hover img, .fc-catbar__item:hover .fc-catbar__letter { border-color: var(--fc-accent); }

    .fc-home-duo { display: grid; gap: calc(var(--fc-gap) * 2); }
    @media (min-width: 900px) { .fc-home-duo { grid-template-columns: 1fr 1fr; } }
    .fc-homeblog { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; }
    .fc-homeblog li { display: grid; gap: 2px; padding-bottom: 12px; border-bottom: 1px solid var(--fc-line); }

    /* ============ ЛИСТИНГ ============ */
    .fc-cathead { display: flex; align-items: center; gap: var(--fc-gap); flex-wrap: wrap; margin-bottom: var(--fc-gap); }
    .fc-catdesc { margin-bottom: var(--fc-gap); }
    .fc-subcats { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: var(--fc-gap); }
    .fc-subcats--cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
    .fc-subcard { display: grid; justify-items: center; gap: 6px; padding: 12px; text-align: center; text-decoration: none; color: var(--fc-ink); font-size: 13px; }
    .fc-subcard__img, .fc-subcard__letter {
        width: 72px; height: 72px; border-radius: 50%; object-fit: cover;
        background: var(--fc-bg-soft);
        display: inline-flex; align-items: center; justify-content: center;
        font-family: var(--fc-font-display); font-size: 26px; color: var(--fc-accent);
    }

    .fc-sortbar {
        display: flex;
        align-items: center;
        gap: 4px;
        flex-wrap: wrap;
        padding: 8px 12px;
        margin-bottom: var(--fc-gap);
        border: 1px solid var(--fc-line);
        border-radius: var(--fc-radius);
        background: var(--fc-bg-soft);
        font-size: 13px;
    }
    .fc-sortbar__label { color: var(--fc-ink-soft); margin-right: 4px; }
    .fc-sortbar__item {
        padding: 5px 9px;
        border-radius: var(--fc-radius);
        color: var(--fc-ink);
        text-decoration: none;
        white-space: nowrap;
    }
    .fc-sortbar__item:hover { background: var(--fc-line); }
    .fc-sortbar__item.is-active { background: var(--fc-accent); color: var(--fc-accent-ink); }
    .fc-viewtoggle { display: inline-flex; gap: 4px; }
    .fc-viewtoggle__btn {
        display: inline-flex;
        padding: 7px;
        border: 1px solid var(--fc-line);
        border-radius: var(--fc-radius);
        color: var(--fc-ink-soft);
    }
    .fc-viewtoggle__btn.is-active { color: var(--fc-accent); border-color: var(--fc-accent); }

    .fc-plist {
        display: grid;
        gap: var(--fc-gap);
        grid-template-columns: repeat(2, minmax(0, 1fr));
        margin: 0;
        padding: 0;
        list-style: none;
    }
    @media (min-width: 768px)  { .fc-plist--grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
    @media (min-width: 1100px) { .fc-plist--grid { grid-template-columns: repeat(var(--fc-cols, 4), minmax(0, 1fr)); } }
    .fc-plist--list { grid-template-columns: 1fr; }

    .fc-pcard { display: flex; flex-direction: column; }
    .fc-pcard__image { display: block; aspect-ratio: 1; overflow: hidden; background: #fff; }
    .fc-pcard__image img { width: 100%; height: 100%; object-fit: contain; transition: scale .25s; }
    .fc-pcard:hover .fc-pcard__image img { scale: 1.04; }
    .fc-pcard__noimage {
        display: flex;
        width: 100%;
        height: 100%;
        min-height: 120px;
        align-items: center;
        justify-content: center;
        background:
            linear-gradient(135deg, var(--fc-bg-soft) 49.6%, var(--fc-line) 49.6%, var(--fc-line) 50.4%, var(--fc-bg-soft) 50.4%);
    }
    .fc-pcard__body { display: flex; flex-direction: column; gap: 6px; padding: 12px; flex: 1; }
    .fc-pcard__name { font-size: 14px; line-height: 1.35; }
    .fc-pcard__name a { color: var(--fc-ink); text-decoration: none; }
    .fc-pcard__name a:hover { color: var(--fc-link); }
    .fc-pcard__rating { min-height: 18px; display: flex; align-items: center; gap: 6px; font-size: 12px; }
    .fc-pcard__prices { display: flex; align-items: baseline; gap: 8px; }
    .fc-pcard__actions { margin-top: auto; display: flex; align-items: center; gap: 8px; }
    .fc-pcard__actions .fc-btn { flex: 1; }
    .fc-pcard__compare {
        flex: none;
        display: inline-flex;
        padding: 9px;
        border: 1px solid var(--fc-line);
        border-radius: var(--fc-radius);
        background: none;
        color: var(--fc-ink-soft);
        cursor: pointer;
    }
    .fc-pcard__compare.is-active { color: var(--fc-accent); border-color: var(--fc-accent); }

    /* список: карточка в строку */
    .fc-pcard--row { flex-direction: row; align-items: stretch; }
    .fc-pcard--row .fc-pcard__image { flex: 0 0 180px; aspect-ratio: auto; }
    .fc-pcard--row .fc-pcard__body { padding: 16px; }
    .fc-pcard--row .fc-pcard__name { font-size: 16px; }
    .fc-pcard--row .fc-pcard__actions { justify-content: flex-start; }
    .fc-pcard--row .fc-pcard__actions .fc-btn { flex: 0 0 auto; }
    @media (max-width: 540px) { .fc-pcard--row .fc-pcard__image { flex-basis: 120px; } }

    /* цены и звёзды */
    .fc-price { font-weight: 700; font-size: 16px; color: var(--fc-ink); }
    .fc-price--big { font-size: 26px; font-family: var(--fc-font-display); }
    .fc-price-old { color: var(--fc-ink-soft); text-decoration: line-through; font-size: 13px; }
    .fc-stars {
        position: relative;
        display: inline-block;
        font-size: 13px;
        line-height: 1;
        letter-spacing: 2px;
        color: var(--fc-line);
        white-space: nowrap;
    }
    .fc-stars::before { content: '★★★★★'; }
    .fc-stars i {
        position: absolute;
        inset: 0;
        width: var(--fc-rate, 0%);
        overflow: hidden;
        color: var(--fc-highlight);
        font-style: normal;
    }
    .fc-stars i::before { content: '★★★★★'; }
    .fc-stars--lg { font-size: 18px; }

    /* фильтры */
    .fc-catalog__aside .fc-filters-dialog {
        display: block;
        position: static;
        width: auto;
        max-height: none;
        padding: 0;
        border: 0;
        background: none;
        box-shadow: none;
        overflow: visible;
    }
    .fc-catalog__aside .fc-dialog__close { display: none; }
    .fc-cathead__filters { display: none; }
    .fc-filter { border: 0; padding: 0 0 var(--fc-gap); margin: 0 0 var(--fc-gap); border-bottom: 1px solid var(--fc-line); }
    .fc-filter__name {
        padding: 0 0 8px;
        font-size: 12px;
        font-weight: 700;
        letter-spacing: .1em;
        text-transform: uppercase;
    }
    .fc-filter__range { display: flex; align-items: center; gap: 8px; }
    .fc-filter__values { display: grid; gap: 6px; max-height: 230px; overflow: auto; position: relative; }
    .fc-check { display: flex; align-items: center; gap: 8px; font-size: 14px; cursor: pointer; }
    .fc-check input { accent-color: var(--fc-accent); }
    .fc-filters__actions { display: grid; gap: 8px; }
    @media (max-width: 999px) {
        /* на мобильных сайдбара нет: та же форма открывается диалогом */
        .fc-catalog__aside { display: contents; }
        .fc-catalog__aside .fc-filters-dialog { display: none; }
        .fc-catalog__aside .fc-filters-dialog[open] {
            display: flex;
            position: fixed;
            padding: calc(var(--fc-gap) * 1.5);
            border: 1px solid var(--fc-line);
            background: var(--fc-bg);
            box-shadow: var(--fc-shadow-pop);
            overflow: auto;
            width: min(420px, calc(100vw - 2 * var(--fc-gap)));
            max-height: calc(100vh - 48px);
        }
        .fc-catalog__aside .fc-filters-dialog[open] .fc-dialog__close { display: block; }
        .fc-cathead__filters { display: inline-flex; }
    }

    .fc-empty { padding-block: var(--fc-section); }
    .fc-empty__mark { display: inline-block; width: 14px; height: 14px; margin-bottom: var(--fc-gap); }

    /* ============ ТОВАР ============ */
    .fc-product__top { display: grid; gap: calc(var(--fc-gap) * 2); margin-bottom: var(--fc-section); }
    @media (min-width: 900px) { .fc-product__top { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: start; } }

    .fc-gallery__stage {
        position: relative;
        border: 1px solid var(--fc-line);
        border-radius: var(--fc-radius-lg);
        background: #fff;
        overflow: hidden;
    }
    .fc-gallery__photo { display: block; width: 100%; height: auto; }
    .fc-gallery__stage--zoom { cursor: crosshair; }
    .fc-gallery__lens {
        position: absolute;
        inset: 0;
        background-repeat: no-repeat;
        pointer-events: none;
    }
    .fc-thumbs {
        display: flex;
        gap: 8px;
        margin: 8px 0 0;
        padding: 0 0 4px;
        list-style: none;
        overflow-x: auto;
        position: relative;
    }
    .fc-thumbs__item {
        display: block;
        padding: 2px;
        border: 1px solid var(--fc-line);
        border-radius: var(--fc-radius);
        background: #fff;
        cursor: pointer;
    }
    .fc-thumbs__item.is-active { border-color: var(--fc-accent); }
    .fc-thumbs__item img { display: block; width: 64px; height: 64px; object-fit: contain; }

    .fc-buy__title { margin-bottom: 8px; }
    .fc-buy__meta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 13px; margin-bottom: 12px; }
    .fc-buy__prices { display: flex; align-items: baseline; gap: 10px; margin-bottom: 6px; }
    .fc-buy__stock { font-size: 13px; margin-bottom: var(--fc-gap); }
    .fc-instock { color: var(--fc-highlight); font-weight: 700; }
    .fc-instock::before { content: '◆ '; font-size: 9px; vertical-align: 2px; }
    .fc-variants { border: 0; padding: 0; margin: 0 0 var(--fc-gap); display: flex; flex-wrap: wrap; gap: 8px; }
    .fc-variants legend { margin-bottom: 8px; }
    .fc-variant {
        display: inline-flex;
        padding: 8px 14px;
        border: 1px solid var(--fc-line);
        border-radius: var(--fc-radius);
        font-size: 13px;
        cursor: pointer;
    }
    .fc-variant input { position: absolute; opacity: 0; pointer-events: none; }
    .fc-variant:has(input:checked) { border-color: var(--fc-accent); color: var(--fc-accent); font-weight: 700; }
    .fc-variant--out { opacity: .5; }
    .fc-services { border: 0; padding: 0; margin: 0 0 var(--fc-gap); display: grid; gap: 8px; }
    .fc-services legend { margin-bottom: 8px; }
    .fc-services__variant { width: auto; padding-block: 4px; margin-left: 6px; }
    .fc-buy__submit { display: flex; align-items: center; gap: 10px; margin-block: var(--fc-gap); }
    .fc-buy__qty { width: 88px; text-align: center; }
    .fc-buy__btn { flex: 1; padding-block: 14px; }
    .fc-compare-toggle {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 8px 0;
        border: 0;
        background: none;
        color: var(--fc-ink-soft);
        font-size: 13px;
        cursor: pointer;
    }
    .fc-compare-toggle:hover { color: var(--fc-ink); }
    .fc-compare-toggle.is-active { color: var(--fc-accent); }
    .fc-pcard__fav.is-active, .fc-fav-toggle.is-active { color: var(--fc-accent); border-color: var(--fc-accent); }
    .fc-pcard__fav.is-active svg path, .fc-fav-toggle.is-active svg path { fill: currentColor; }
    .fc-fav-toggle .fc-fav-toggle__added { display: none; }
    .fc-fav-toggle.is-active .fc-fav-toggle__add { display: none; }
    .fc-fav-toggle.is-active .fc-fav-toggle__added { display: inline; }
    .fc-compare-toggle .fc-compare-toggle__added { display: none; }
    .fc-compare-toggle.is-active .fc-compare-toggle__add { display: none; }
    .fc-compare-toggle.is-active .fc-compare-toggle__added { display: inline; }

    .fc-product__tabs { margin-bottom: var(--fc-section); }
    .fc-specs th { width: 40%; font-weight: 400; color: var(--fc-ink-soft); text-transform: none; letter-spacing: 0; font-size: 14px; }

    /* отзывы */
    .fc-reviews__summary { display: flex; align-items: center; gap: 10px; }
    .fc-reviews__value { font-family: var(--fc-font-display); font-size: 30px; font-weight: 700; }
    .fc-reviews__list { display: grid; gap: var(--fc-gap); margin-block: var(--fc-gap); }
    .fc-review { border: 1px solid var(--fc-line); border-radius: var(--fc-radius-lg); padding: var(--fc-gap); }
    .fc-review__head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
    .fc-review__head time { display: block; font-size: 12px; }
    .fc-review__avatar {
        flex: none;
        width: 36px;
        height: 36px;
        border-radius: 50%;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: var(--fc-accent-tint);
        color: var(--fc-ink);
        font-weight: 700;
    }
    .fc-review__head .fc-stars { margin-left: auto; }
    .fc-review__title { font-weight: 700; margin-bottom: 4px; }
    .fc-review__images { display: flex; gap: 8px; margin: 8px 0 0; padding: 0; list-style: none; flex-wrap: wrap; }
    .fc-review__images img { width: 72px; height: 72px; object-fit: cover; border-radius: var(--fc-radius); }
    .fc-review__replies { margin-top: var(--fc-gap); padding-left: var(--fc-gap); border-left: 2px solid var(--fc-line); display: grid; gap: 12px; }
    .fc-review-form { max-width: 560px; margin-top: var(--fc-gap); }
    .fc-ratefield { display: inline-flex; flex-direction: row-reverse; gap: 2px; font-size: 24px; }
    .fc-ratefield__star input { position: absolute; opacity: 0; pointer-events: none; }
    .fc-ratefield__star span { color: var(--fc-line); cursor: pointer; }
    .fc-ratefield__star:has(input:checked) span,
    .fc-ratefield__star:has(input:checked) ~ .fc-ratefield__star span,
    .fc-ratefield__star:hover span,
    .fc-ratefield__star:hover ~ .fc-ratefield__star span { color: var(--fc-highlight); }

    /* ============ КОРЗИНА ============ */
    .fc-cart__list { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--fc-gap); }
    .fc-cart__item {
        display: grid;
        grid-template-columns: 72px minmax(0, 1fr) auto auto auto;
        gap: var(--fc-gap);
        align-items: center;
        padding: var(--fc-gap);
    }
    @media (max-width: 700px) {
        .fc-cart__item { grid-template-columns: 72px minmax(0, 1fr) auto; }
        .fc-cart__qty { grid-column: 2; }
        .fc-cart__price { grid-column: 3; }
    }
    .fc-cart__image img { display: block; width: 72px; height: 72px; object-fit: contain; }
    .fc-cart__name { font-weight: 700; text-decoration: none; color: var(--fc-ink); }
    .fc-cart__services { margin: 4px 0 0; padding-left: 16px; font-size: 12px; }
    .fc-stepper { display: inline-flex; align-items: center; border: 1px solid var(--fc-line); border-radius: var(--fc-radius); }
    .fc-stepper__btn { width: 32px; height: 36px; border: 0; background: none; font-size: 16px; cursor: pointer; color: var(--fc-ink-soft); }
    .fc-stepper__value { width: 56px; border: 0; text-align: center; padding: 8px 2px; }
    .fc-stepper__value:focus { outline: none; }
    .fc-cart__price { font-weight: 700; white-space: nowrap; }
    .fc-cart__delete {
        border: 0;
        background: none;
        font-size: 20px;
        line-height: 1;
        color: var(--fc-ink-soft);
        cursor: pointer;
    }
    .fc-cart__delete:hover { color: var(--fc-accent-press); }
    .fc-cart__summary { padding: var(--fc-gap); display: grid; gap: 12px; }
    .fc-cart__coupon { display: flex; gap: 8px; }
    .fc-cart__row { display: flex; justify-content: space-between; font-size: 14px; }
    .fc-cart__row--total { font-size: 18px; border-top: 1px solid var(--fc-line); padding-top: 12px; }
    .fc-cart__checkout { width: 100%; padding-block: 14px; }

    /* ============ ЧЕКАУТ 2.0: аккуратные поправки поверх штатных блоков ============ */
    .fc-order { display: grid; gap: calc(var(--fc-gap) * 2); }
    @media (min-width: 1000px) { .fc-order { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: start; } }
    .fc-order__section { margin-bottom: calc(var(--fc-gap) * 2); }
    .fc-checkout-result { padding-block: var(--fc-section); }

    /* Кнопка/форма платёжного плагина на шаге «спасибо»: плагины приносят свою
       разметку (input[type=submit]/button со стилями по умолчанию) — приводим
       к главной кнопке темы, не трогая скрытые поля формы. */
    .fc-checkout-payment { margin-block: var(--fc-gap); }
    .fc-checkout-payment form { display: inline-block; }
    .fc-checkout-payment input[type="submit"],
    .fc-checkout-payment button {
        appearance: none;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 14px 28px;
        border: 1px solid transparent;
        border-radius: var(--fc-radius);
        background: var(--fc-accent);
        color: var(--fc-accent-ink);
        font-family: var(--fc-font);
        font-size: 13px;
        font-weight: 700;
        letter-spacing: .1em;
        text-transform: uppercase;
        line-height: 1.2;
        cursor: pointer;
        box-shadow: none;
    }
    .fc-checkout-payment input[type="submit"]:hover,
    .fc-checkout-payment button:hover { background: var(--fc-accent-hover); }

    /* ============ СРАВНЕНИЕ ============ */
    .fc-compare__product { min-width: 170px; position: relative; padding-top: 28px; }
    .fc-compare__product .fc-cart__delete { position: absolute; top: 6px; right: 6px; }
    .fc-compare__image { display: block; margin-bottom: 6px; }

    /* ============ КАБИНЕТ ============ */
    .fc-orderstate { padding: 2px 8px; border-radius: var(--fc-radius); background: var(--fc-bg-soft); font-size: 13px; }
    .fc-orderinfo { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin-bottom: var(--fc-gap); }
    .fc-orderinfo dt { color: var(--fc-ink-soft); }
    .fc-orderinfo dd { margin: 0; }

    /* ============ САМОВЫВОЗ ============ */
    .fc-pickup__list { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--fc-gap); }
    .fc-pickup__point { border: 1px solid var(--fc-line); border-radius: var(--fc-radius-lg); padding: 12px; display: grid; gap: 6px; justify-items: start; }
    .fc-pickup__form { display: grid; gap: 10px; }
    .fc-pickup__form input, .fc-pickup__form select, .fc-pickup__form textarea {
        width: 100%;
        padding: 10px 12px;
        border: 1px solid var(--fc-line);
        border-radius: var(--fc-radius);
        font: 400 15px/1.4 var(--fc-font);
    }

    /* ============ ПРЕСЕТ «ЮВЕЛИРКА» ============ */
    /* Подача штучного товара: 3 карточки в ряд, фото 4:5 без рамки, серифные названия. */
    .fc-preset-jewelry .fc-plist--grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    @media (min-width: 768px) { .fc-preset-jewelry .fc-plist--grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
    .fc-preset-jewelry .fc-pcard { border-color: transparent; }
    .fc-preset-jewelry .fc-pcard:hover { border-color: var(--fc-line); }
    .fc-preset-jewelry .fc-pcard__image { aspect-ratio: 4 / 5; }
    .fc-preset-jewelry .fc-pcard__name { font-family: var(--fc-font-display); font-size: 15px; text-align: center; }
    .fc-preset-jewelry .fc-pcard__rating, .fc-preset-jewelry .fc-pcard__prices { justify-content: center; }
    .fc-preset-jewelry .fc-buy__title { font-size: 30px; }
}