/* catalog/assortment.css */

/* =========================================================
   ASSORTMENT LIST PAGE
   ========================================================= */

.assortment-list-page {
    padding-bottom: 5rem !important;
}


/* =========================================================
   PAGE HEADER
   ========================================================= */

.assortment-page-header {
    max-width: 58rem;
    margin-bottom: 2rem;
}

.assortment-page-title {
    margin-bottom: 0.75rem;

    color: #2f3133;

    font-weight: 700;
    line-height: 1.2;
    text-wrap: balance;
}

.assortment-page-description {
    margin-bottom: 0;

    color: #6c757d;

    font-size: 1.05rem;
    line-height: 1.6;
}

.assortment-search-summary {
    margin: 0;

    color: #6c757d;

    font-size: 1rem;
    line-height: 1.5;
}

.assortment-search-summary strong {
    color: #404448;
    font-weight: 600;
}


/* =========================================================
   CATEGORY NAVIGATION
   ========================================================= */

.assortment-categories {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;

    margin-bottom: 2rem;
}

.assortment-categories .btn {
    min-height: 2.5rem;
    padding: 0.5rem 0.9rem;

    border-radius: 0.35rem;

    font-size: 0.9rem;
    font-weight: 500;

    white-space: normal;
}

.assortment-categories .btn-primary {
    --bs-btn-bg: var(--color-brand);
    --bs-btn-border-color: var(--color-brand);
    --bs-btn-hover-bg: #005580;
    --bs-btn-hover-border-color: #005580;
    --bs-btn-active-bg: #005580;
    --bs-btn-active-border-color: #005580;
}

.assortment-categories .btn-outline-primary {
    --bs-btn-color: var(--color-brand);
    --bs-btn-border-color: var(--color-brand);
    --bs-btn-hover-bg: var(--color-brand);
    --bs-btn-hover-border-color: var(--color-brand);
    --bs-btn-active-bg: var(--color-brand);
    --bs-btn-active-border-color: var(--color-brand);
}


/* =========================================================
   ASSORTMENT FILTERS
   ========================================================= */

.assortment-filters {
    margin-bottom: 1.5rem;
}


/* =========================================================
   FILTER HEADER
   ========================================================= */

.assortment-filters__head,
.assortment-filters__mobile-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;

    margin-bottom: 0.75rem;
}

.assortment-filters__title {
    color: var(--color-accent);

    font-size: 1.05rem;
    font-weight: 600;
}

.assortment-filters__reset {
    color: #6c757d;

    font-size: 0.82rem;
    font-weight: 500;

    text-decoration: underline;
    text-underline-offset: 0.18rem;

    transition: color 0.2s ease;
}

.assortment-filters__reset:hover {
    color: var(--color-brand);
}


/* =========================================================
   MOBILE FILTER BUTTON
   ========================================================= */

.assortment-filters__toggle {
    padding: 0.55rem 0.9rem;

    border: 0;
    border-radius: 0.3125rem;

    background: var(--color-accent);
    color: #fff;

    font-family: var(--font-sans);
    font-size: 0.95rem;
    font-weight: 600;

    transition: background-color 0.2s ease;
}

.assortment-filters__toggle:hover {
    background: #719425;
}


/* =========================================================
   DESKTOP FILTER CONTAINER
   ========================================================= */

.assortment-filters__desktop {
    padding: 1rem 1.1rem;

    border: 1px solid #e1e4e6;
    border-radius: 0.5rem;

    background: #fff;

    box-shadow: 0 0.2rem 0.7rem rgba(0, 0, 0, 0.04);
}


/* =========================================================
   FILTER GRID
   ========================================================= */

.assortment-filter-accordion--desktop {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
}

.assortment-filter-group {
    min-width: 0;

    border: 1px solid #e1e4e6;
    border-radius: 0.35rem;

    background: #fff;

    overflow: hidden;
}

.assortment-filter-group--wide {
    grid-column: span 2;
}


/* =========================================================
   FILTER GROUP TOGGLE
   ========================================================= */

.assortment-filter-group__toggle {
    position: relative;

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

    width: 100%;

    padding: 0.75rem 2.3rem 0.75rem 0.85rem;

    border: 0;

    background: #7b7d80;
    color: #fff;

    font-family: var(--font-sans);
    font-size: 0.82rem;
    font-weight: 600;
    line-height: 1.3;

    text-align: left;
    text-transform: uppercase;

    cursor: pointer;

    transition:
        background-color 0.2s ease,
        color 0.2s ease;
}

.assortment-filter-group__toggle.collapsed {
    background: #fff;
    color: #707579;
}

.assortment-filter-group__toggle:hover {
    color: var(--color-brand);
}

.assortment-filter-group__toggle:not(.collapsed):hover {
    color: #fff;
}


/* Chevron */

.assortment-filter-group__toggle::after {
    content: "";

    position: absolute;
    top: 50%;
    right: 0.9rem;

    width: 0.48rem;
    height: 0.48rem;

    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;

    transform:
        translateY(-65%) rotate(45deg);

    transition: transform 0.2s ease;
}

.assortment-filter-group__toggle:not(.collapsed)::after {
    transform:
        translateY(-35%) rotate(225deg);
}


/* =========================================================
   FILTER GROUP BODY
   ========================================================= */

.assortment-filter-group__body {
    border-top: 1px solid #e8eaec;
}

.assortment-filter-options {
    padding: 0.85rem;
}


/* =========================================================
   CHECKBOXES
   ========================================================= */

.assortment-filter-options .form-check {
    display: flex;
    align-items: flex-start;

    margin-bottom: 0.55rem;
    padding-left: 0;
}

.assortment-filter-options .form-check:last-child {
    margin-bottom: 0;
}

.assortment-filter-options .form-check-input {
    position: static;
    float: none;

    flex: 0 0 auto;

    margin: 0.2rem 0.5rem 0 0;
}

.assortment-filter-options .form-check-input:checked {
    border-color: var(--color-brand);
    background-color: var(--color-brand);
}

.assortment-filter-options .form-check-label {
    display: inline-flex;
    align-items: flex-start;
    gap: 0.3rem;

    min-width: 0;
    padding: 0.1rem 0.2rem;

    border-radius: 0.25rem;

    color: #7b7d80;

    font-size: 0.82rem;
    line-height: 1.4;
    text-transform: uppercase;

    cursor: pointer;

    transition:
        background-color 0.2s ease,
        color 0.2s ease;
}

.assortment-filter-options .form-check-label:hover {
    background-color: var(--color-brand);
    color: #fff;
}

/* Иконки защитных свойств */
.assortment-filter-options .app-protective-icon {
    flex: 0 0 auto;

    margin-top: 0.2rem;
    margin-right: 0;

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

.assortment-filter-options .protective-text {
    min-width: 0;
}



/* =========================================================
   OFFCANVAS
   ========================================================= */

.assortment-filters__offcanvas {
    width: min(22rem, 90vw);
}

.assortment-filters__offcanvas .offcanvas-title {
    color: var(--color-brand);

    font-weight: 600;
}

.assortment-filters__offcanvas .offcanvas-body {
    padding: 0;
}

.assortment-filter-accordion--mobile {
    border-top: 1px solid #e1e4e6;
}

.assortment-filter-accordion--mobile .assortment-filter-group {
    border: 0;
    border-bottom: 1px solid #e1e4e6;
    border-radius: 0;
}

.assortment-filter-accordion--mobile .assortment-filter-group__toggle {
    padding-top: 0.9rem;
    padding-bottom: 0.9rem;
}

.assortment-filter-accordion--mobile .assortment-filter-options {
    padding: 0.9rem 1rem 1.1rem;
}


/* =========================================================
   FILTER RESPONSIVE
   ========================================================= */

@media (min-width: 992px) and (max-width: 1199.98px) {
    .assortment-filter-accordion--desktop {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .assortment-filter-group--wide {
        grid-column: span 2;
    }
}


@media (max-width: 991.98px) {
    .assortment-filters {
        margin-bottom: 1.25rem;
    }

    .assortment-filters__mobile-head {
        justify-content: flex-start;
        flex-wrap: wrap;
    }

    .assortment-filters__reset {
        margin-left: auto;
    }
}


@media (max-width: 575.98px) {
    .assortment-filters__toggle {
        width: auto;

        font-size: 0.9rem;
    }

    .assortment-filters__offcanvas {
        width: min(21rem, 92vw);
    }

    .assortment-filter-options .form-check-label {
        font-size: 0.8rem;
    }
}


/* =========================================================
   RESULT TOOLBAR
   ========================================================= */

.assortment-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem;

    margin-bottom: 1.75rem;
}

.assortment-results-count {
    margin: 0;

    color: #6c757d;

    font-size: 0.9rem;
}

.assortment-results-count strong {
    color: #404448;
    font-weight: 600;
}

.assortment-sort-form {
    display: flex;
    align-items: center;
    gap: 0.6rem;

    margin-left: auto;
}

.assortment-sort-label {
    margin: 0;

    color: #6c757d;

    font-size: 0.9rem;

    white-space: nowrap;
}

.assortment-sort-form .form-select {
    width: auto;
    min-width: 10rem;

    font-size: 0.875rem;
}


/* =========================================================
   CATEGORY BADGES
   ========================================================= */

.assortment-category-badge {
    display: inline-block;

    max-width: 100%;
    padding: 0.24rem 0.42rem;

    border-radius: 0.22rem;

    font-size: 0.68rem;
    font-weight: 600;
    line-height: 1.2;

    white-space: normal;
}


/* Green */
.assortment-category-badge--green {
    background-color: #edf4e3;
    color: #62851f;
}


/* Blue */
.assortment-category-badge--blue {
    background-color: #e7f2f8;
    color: #086f9e;
}


/* Sand */
.assortment-category-badge--sand {
    background-color: #f3ece3;
    color: #805f3d;
}


/* Teal */
.assortment-category-badge--teal {
    background-color: #e5f2ef;
    color: #39786f;
}


/* Violet */
.assortment-category-badge--violet {
    background-color: #f0eaf5;
    color: #705889;
}


/* Amber */
.assortment-category-badge--amber {
    background-color: #f8f0dc;
    color: #8c6a22;
}


/* Rose */
.assortment-category-badge--rose {
    background-color: #f6e9ec;
    color: #8a5662;
}


/* Slate */
.assortment-category-badge--slate {
    background-color: #eef0f1;
    color: #596167;
}


/* =========================================================
   PRODUCT GRID
   ========================================================= */

.assortment-products-grid {
    --bs-gutter-x: 1.25rem;
    --bs-gutter-y: 1.5rem;
}


/* =========================================================
   PRODUCT CARD
   ========================================================= */

.assortment-card {
    overflow: hidden;

    border: 1px solid #e1e4e6 !important;
    border-radius: 0.45rem;

    background: #fff;

    box-shadow: none !important;

    transition:
        box-shadow 0.3s ease,
        border-color 0.3s ease;
}

@media (hover: hover) and (pointer: fine) {
    .assortment-card:hover {
        border-color: #d5d9dc !important;
        box-shadow: 0 0.4rem 1rem rgba(0, 0, 0, 0.075) !important;
    }
}


/* =========================================================
   CARD MEDIA
   ========================================================= */

.assortment-card__media {
    position: relative;

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

    width: 100%;
    aspect-ratio: 16 / 10;

    overflow: hidden;

    background: #f7f8f8;
}

.assortment-card__media img {
    width: 100%;
    height: 100%;

    padding: 0.75rem;

    object-fit: contain;
}

.assortment-card__placeholder {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    height: 100%;

    color: #777d82;

    font-size: 0.9rem;
}


/* =========================================================
   CARD BODY
   ========================================================= */

.assortment-card .card-body {
    padding: 0.9rem 1rem 1rem;
}


/* Badges */

.assortment-card__badges {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;

    margin-bottom: 0.6rem;
}

.assortment-card__novelty {
    padding: 0.28rem 0.45rem;

    border-radius: 0.25rem;

    background: var(--color-accent);
    color: #fff;

    font-size: 0.68rem;
    font-weight: 600;
}


/* Product name */

.assortment-card__title {
    margin-bottom: 0.55rem;

    color: #343638;

    font-size: 1rem;
    font-weight: 700;
    line-height: 1.32;

    text-wrap: balance;
}

.assortment-card__title a {
    color: inherit;

    transition: color 0.2s ease;
}

.assortment-card__title a:hover {
    color: var(--color-brand);
}


/* Metadata */

.assortment-card__meta {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;

    margin-bottom: 0.75rem;

    color: #777d82;

    font-size: 0.78rem;
    line-height: 1.4;
}

.assortment-card__meta-label {
    color: #62686c;
    font-weight: 500;
}


/* Short description */

.assortment-card__description {
    margin-bottom: 0.85rem;

    color: #6c757d;

    font-size: 0.85rem;
    line-height: 1.5;

    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;

    overflow: hidden;
}


/* Specs */

.assortment-card__specs {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 0.3rem 0.75rem;

    margin: 0 0 1rem;
    padding-top: 0.15rem;

    font-size: 0.78rem;
    line-height: 1.4;
}

.assortment-card__specs dt,
.assortment-card__specs dd {
    margin: 0;
}

.assortment-card__specs dt {
    color: #42474b;

    font-weight: 600;
}

.assortment-card__specs dd {
    color: #555b60;

    text-align: left;
}


/* =========================================================
   CARD ACTIONS
   ========================================================= */

.assortment-card__actions {
    display: flex;
    gap: 0.5rem;

    margin-top: auto;
}

.assortment-card__actions .btn {
    min-height: 2.5rem;
    padding: 0.45rem 0.75rem;

    border-radius: 0.3rem;

    font-size: 0.86rem;
    font-weight: 500;

    white-space: nowrap;
}

.assortment-card__details {
    flex: 1 1 auto;
}

.assortment-card__actions .btn-outline-primary {
    --bs-btn-color: var(--color-brand);
    --bs-btn-border-color: var(--color-brand);
    --bs-btn-hover-bg: var(--color-brand);
    --bs-btn-hover-border-color: var(--color-brand);
    --bs-btn-active-bg: var(--color-brand);
    --bs-btn-active-border-color: var(--color-brand);
}

.assortment-card__actions .btn-primary {
    --bs-btn-bg: var(--color-brand);
    --bs-btn-border-color: var(--color-brand);
    --bs-btn-hover-bg: #005580;
    --bs-btn-hover-border-color: #005580;
    --bs-btn-active-bg: #005580;
    --bs-btn-active-border-color: #005580;
}


/* =========================================================
   PAGINATION
   ========================================================= */

.assortment-pagination {
    margin-top: 2.25rem;
    margin-bottom: 0;
}

.assortment-pagination .pagination {
    gap: 0.4rem;
}

.assortment-pagination .page-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 2.5rem;
    padding: 0.55rem 0.8rem;

    border-color: #d9dde0;
    border-radius: 0.3rem !important;

    color: #5d6368;

    font-size: 0.875rem;
}

.assortment-pagination .page-link:hover {
    border-color: var(--color-brand);

    background: var(--color-brand);
    color: #fff;
}

.assortment-pagination .page-item.active .page-link {
    border-color: var(--color-brand);

    background: var(--color-brand);
    color: #fff;
}


/* =========================================================
   EMPTY STATE
   ========================================================= */

.assortment-empty {
    padding: 2rem;

    border: 1px solid #e3e6e8;
    border-radius: 0.5rem;

    background: #f8f9fa;
    color: #666c70;

    text-align: center;
}


/* =========================================================
   RESPONSIVE — TABLET
   ========================================================= */

@media (max-width: 991.98px) {
    .assortment-list-page {
        padding-top: 2rem !important;
    }
}


/* =========================================================
   RESPONSIVE — MOBILE
   ========================================================= */

@media (max-width: 575.98px) {
    .assortment-list-page {
        padding-top: 1.5rem !important;
        padding-bottom: 3rem !important;
    }

    .assortment-list-page>nav[aria-label="breadcrumb"] {
        margin-bottom: 1.25rem !important;
    }

    .assortment-page-header {
        margin-bottom: 1.5rem;
    }

    .assortment-page-title {
        margin-bottom: 0.65rem;

        font-size: 1.7rem;
        line-height: 1.18;
    }

    .assortment-page-description {
        font-size: 0.92rem;
        line-height: 1.55;
    }

    .assortment-search-summary {
        font-size: 0.9rem;
        line-height: 1.45;
    }


    /* Categories */

    .assortment-categories {
        gap: 0.4rem;

        margin-bottom: 1.5rem;
    }

    .assortment-categories .btn {
        min-height: 2.25rem;
        padding: 0.4rem 0.65rem;

        font-size: 0.78rem;
    }


    /* Toolbar */

    .assortment-toolbar {
        flex-direction: column;
        align-items: stretch;
        gap: 0.75rem;

        margin-bottom: 1.25rem;
    }

    .assortment-sort-form {
        width: 100%;
        margin-left: 0;
    }

    .assortment-sort-form .form-select {
        flex: 1 1 auto;

        width: 100%;
        min-width: 0;
    }


    /* Cards */

    .assortment-products-grid {
        --bs-gutter-y: 1rem;
    }

    .assortment-card__media {
        aspect-ratio: 16 / 9;
    }

    .assortment-card .card-body {
        padding: 0.9rem;
    }

    .assortment-card__title {
        font-size: 0.95rem;
    }

    .assortment-card__actions {
        gap: 0.4rem;
    }

    .assortment-card__actions .btn {
        padding-inline: 0.6rem;

        font-size: 0.8rem;
    }
}


/* Очень узкие экраны */

@media (max-width: 430px) {
    .assortment-card__actions {
        flex-direction: column;
    }

    .assortment-card__actions .btn {
        width: 100%;
    }
}



/* =========================================================
   ASSORTMENT DETAIL PAGE
   ========================================================= */

.assortment-detail-page {
    padding-top: 2.5rem;
    padding-bottom: 5rem;
}


/* =========================================================
   BREADCRUMBS / BACK
   ========================================================= */

.assortment-detail-breadcrumbs {
    margin-bottom: 1rem;
}

.assortment-detail-breadcrumbs .breadcrumb {
    margin-bottom: 0;
}

.assortment-detail-back {
    margin-bottom: 1.5rem;
}


/* =========================================================
   HERO
   ========================================================= */

.assortment-detail-hero {
    align-items: flex-start;
}


/* =========================================================
   MEDIA
   ========================================================= */

.assortment-detail-media {
    display: flex;
    align-items: center;
    justify-content: center;

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

    overflow: hidden;

    border: 1px solid #e1e4e6;
    border-radius: 0.45rem;

    background: #f7f8f8;
}

.assortment-detail-media__image {
    width: 100%;
    height: 100%;

    padding: 1.5rem;

    object-fit: contain;
}

.assortment-detail-media__placeholder {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    height: 100%;

    color: #777d82;

    font-size: 0.95rem;
}


/* =========================================================
   PRODUCT INFO
   ========================================================= */

.assortment-detail-info {
    min-width: 0;
}

.assortment-detail-badges {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;

    margin-bottom: 0.9rem;
}

.assortment-detail-status {
    padding: 0.28rem 0.45rem;

    border-radius: 0.25rem;

    background: #6c757d;
    color: #fff;

    font-size: 0.72rem;
    font-weight: 600;
}

.assortment-detail-title {
    margin-bottom: 0.8rem;

    color: #2f3133;

    font-size: clamp(1.8rem, 3vw, 2.5rem);
    font-weight: 700;
    line-height: 1.18;

    text-wrap: balance;
}

.assortment-detail-meta {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;

    margin-bottom: 1rem;

    color: #73797e;

    font-size: 0.9rem;
}

.assortment-detail-meta__label {
    color: #555b60;
    font-weight: 600;
}

.assortment-detail-meta__country {
    color: #8a8f93;
}

.assortment-detail-lead {
    max-width: 46rem;

    margin-bottom: 0;

    color: #62686d;

    font-size: 1rem;
    line-height: 1.6;
}


/* =========================================================
   ORDER
   ========================================================= */

.assortment-detail-order-form {
    margin-top: 1.5rem;
}

.assortment-detail-order {
    padding: 1.15rem;

    border: 1px solid #e1e4e6;
    border-radius: 0.45rem;

    background: #fff;
}

.assortment-detail-order__title {
    margin-bottom: 1rem;

    color: #343638;

    font-size: 1rem;
    font-weight: 700;
}

.assortment-detail-order .form-label {
    margin-bottom: 0.35rem;

    color: #565c61;

    font-size: 0.82rem;
    font-weight: 600;
}

.assortment-detail-order select,
.assortment-detail-order input {
    width: 100%;
}

.assortment-detail-order__minimum {
    margin: 0.9rem 0 0;

    color: #6c757d;

    font-size: 0.82rem;
}

.assortment-detail-order__minimum strong {
    color: #474c50;
}

.assortment-detail-order__submit {
    min-height: 2.65rem;
    margin-top: 1rem;
    padding: 0.5rem 1rem;

    --bs-btn-bg: var(--color-brand);
    --bs-btn-border-color: var(--color-brand);
    --bs-btn-hover-bg: #005580;
    --bs-btn-hover-border-color: #005580;
    --bs-btn-active-bg: #005580;
    --bs-btn-active-border-color: #005580;

    font-size: 0.9rem;
    font-weight: 600;
}

.assortment-detail-unavailable {
    margin-top: 1.5rem;
    padding: 1rem;

    border: 1px solid #dee2e6;
    border-radius: 0.45rem;

    background: #f8f9fa;
    color: #62686d;
}


/* =========================================================
   DATA AREA
   ========================================================= */

.assortment-detail-data {
    margin-top: 4rem;
}

.assortment-detail-spec-card {
    height: 100%;
}

.assortment-detail-section-title {
    margin-bottom: 1.15rem;

    color: #303336;

    font-size: 1.3rem;
    font-weight: 700;
}


/* =========================================================
   SPEC LIST
   ========================================================= */

.assortment-detail-spec-list {
    margin: 0;

    border-top: 1px solid #dfe2e4;
    border-bottom: 1px solid #dfe2e4;
}

.assortment-detail-spec-row {
    display: grid;
    grid-template-columns: minmax(0, 42%) minmax(0, 58%);

    margin: 0;
    padding: 0.7rem 0.8rem;

    border-bottom: 1px solid #e5e7e9;

    font-size: 0.9rem;
    line-height: 1.45;
}

.assortment-detail-spec-row:nth-child(odd) {
    background: #f5f5f4;
}

.assortment-detail-spec-row:last-child {
    border-bottom: 0;
}

.assortment-detail-spec-row dt,
.assortment-detail-spec-row dd {
    margin: 0;
}

.assortment-detail-spec-row dt {
    padding-right: 1rem;

    color: #54595d;

    font-weight: 600;
}

.assortment-detail-spec-row dd {
    min-width: 0;

    color: #555b60;

    text-align: right;
}


/* =========================================================
   PROTECTIVE PROPERTY
   ========================================================= */

.assortment-detail-property {
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    gap: 0.35rem;
}

.assortment-detail-property .app-protective-icon {
    flex: 0 0 auto;

    margin-top: 0.15rem;
    margin-right: 0;

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


/* =========================================================
   APPLICATION AREAS
   ========================================================= */

.assortment-detail-applications-section {
    max-width: 62rem;

    margin-top: 3rem;
}

.assortment-detail-applications-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}

.assortment-detail-application-item {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;

    padding: 0.45rem 0.65rem;

    border: 1px solid #e1e4e6;
    border-radius: 0.35rem;

    background: #f7f8f8;
    color: #555b60;

    font-size: 0.85rem;
    line-height: 1.35;
}

.assortment-detail-application-item__icon {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
}

.assortment-detail-application-item__icon .app-area-icon {
    margin-right: 0;
}

.assortment-detail-application-item__icon .app-area-icon--svg {
    width: 1.35rem;
    height: auto;
}

.assortment-detail-application-item__icon .app-area-icon--fa {
    color: var(--color-accent);
    font-size: 1.1rem;
}


/* =========================================================
   DOCUMENTS
   ========================================================= */

.assortment-detail-documents {
    max-width: 62rem;

    margin: 2rem auto 0;
    padding-top: 1.5rem;

    border-top: 1px solid #ddd9cf;
}

.assortment-detail-document-card {
    display: inline-flex;
    align-items: center;
    gap: 0.8rem;

    padding: 0.75rem 1rem;

    border: 1px solid #dfe2e4;
    border-radius: 0.4rem;

    background: #fff;
    color: #454a4e;

    text-decoration: none;

    transition:
        border-color 0.2s ease,
        background-color 0.2s ease;
}

.assortment-detail-document-card:hover {
    border-color: var(--color-brand);
    background: #f8fafb;
}

.assortment-detail-document-card__icon {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;

    width: 2rem;
    height: 2rem;

    color: var(--color-brand);

    font-size: 1.5rem;
}

.assortment-detail-document-card__content {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.assortment-detail-document-card__title {
    color: #3d4246;

    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1.3;
}

.assortment-detail-document-card__action {
    color: var(--color-brand);

    font-size: 0.8rem;
    line-height: 1.3;
}


/* =========================================================
   TEXT CONTENT
   ========================================================= */

.assortment-detail-content {
    max-width: 62rem;

    margin: 4rem auto 0;
}

.assortment-detail-description {
    color: #555b60;

    font-size: 0.95rem;
    line-height: 1.75;
}

.assortment-detail-description p:last-child {
    margin-bottom: 0;
}


/* =========================================================
   EXTRA ATTRIBUTES
   ========================================================= */

.assortment-detail-spec-list--extra {
    max-width: 50rem;
}


/* =========================================================
   SIMILAR PRODUCTS
   ========================================================= */

.assortment-detail-similar {
    max-width: 72rem;

    margin: 3.5rem auto 0;
}

.assortment-detail-similar__title {
    margin: 0 0 1.25rem;

    color: #303336;

    font-size: 1.55rem;
    font-weight: 700;
}

.assortment-detail-similar__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
}


/* =========================================================
   SIMILAR PRODUCT CARD
   ========================================================= */

.assortment-similar-card {
    display: flex;
    flex-direction: column;

    min-width: 0;
    overflow: hidden;

    border: 1px solid #e1e4e6;
    border-radius: 0.45rem;

    background: #fff;

    transition:
        border-color 0.25s ease,
        box-shadow 0.25s ease;
}

@media (hover: hover) and (pointer: fine) {
    .assortment-similar-card:hover {
        border-color: #d5d8da;

        box-shadow: 0 0.3rem 0.75rem rgba(0, 0, 0, 0.06);
    }
}


/* Media */

.assortment-similar-card__media {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    aspect-ratio: 4 / 3;

    overflow: hidden;

    background: #f7f8f8;

    text-decoration: none;
}

.assortment-similar-card__media img {
    display: block;

    width: 100%;
    height: 100%;

    padding: 0.75rem;

    object-fit: contain;
}

.assortment-similar-card__placeholder {
    color: #777d82;

    font-size: 0.8rem;
}


/* Body */

.assortment-similar-card__body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;

    padding: 0.9rem;
}

.assortment-similar-card__category {
    align-self: flex-start;

    margin-bottom: 0.5rem;
}

.assortment-similar-card__name {
    margin: 0 0 0.4rem;

    font-size: 1rem;
    font-weight: 700;
    line-height: 1.3;

    text-wrap: balance;
}

.assortment-similar-card__name a {
    color: #35383a;

    text-decoration: none;

    transition: color 0.2s ease;
}

.assortment-similar-card__name a:hover {
    color: var(--color-brand);
}

.assortment-similar-card__article {
    margin-bottom: 0.8rem;

    color: #777d82;

    font-size: 0.8rem;
}


/* Button */

.assortment-similar-card__link {
    width: 100%;
    min-height: 2.5rem;

    margin-top: auto;

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

    --bs-btn-color: var(--color-brand);
    --bs-btn-border-color: var(--color-brand);
    --bs-btn-hover-bg: var(--color-brand);
    --bs-btn-hover-border-color: var(--color-brand);
    --bs-btn-active-bg: var(--color-brand);
    --bs-btn-active-border-color: var(--color-brand);

    font-size: 0.85rem;
    font-weight: 500;
}


/* =========================================================
   RELATED PRODUCTS — "ВАС МОЖЕТ ЗАИНТЕРЕСОВАТЬ"
   ========================================================= */

.assortment-related {
    width: 100%;

    margin-top: 4.5rem;
    margin-bottom: 0rem;
    padding-top: 3rem;

    border-top: 2px solid var(--color-accent);

    text-wrap: balance;
}

.assortment-related__title {
    margin: 0 0 3rem;

    color: #303336;

    font-size: 1.65rem;
    font-weight: 700;
    text-align: center;
}


/* =========================================================
   RELATED SWIPER
   ========================================================= */

.assortment-related__swiper {
    position: relative;

    width: 100%;

    padding: 0 2.75rem 2rem;
}

.assortment-related__swiper .swiper-slide {
    height: auto;
}


/* =========================================================
   RELATED CARD
   ========================================================= */

.assortment-related-card {
    height: 100%;

    border: 0;
    border-radius: 0;

    background: transparent;
}

.assortment-related-card__link {
    display: flex;
    flex-direction: column;

    height: 100%;

    color: inherit;

    text-decoration: none;
}


/* Media */

.assortment-related-card__media {
    display: flex;
    align-items: center;
    justify-content: center;

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

    overflow: hidden;

    background: #f7f8f8;
}

.assortment-related-card__media img {
    display: block;

    width: 100%;
    height: 100%;

    padding: 0.75rem;

    object-fit: contain;

}

.assortment-related-card__placeholder {
    color: #777d82;

    font-size: 0.8rem;
}


/* Body */

.assortment-related-card__body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;

    padding: 0.8rem 0.35rem 0;

    text-align: center;
}

.assortment-related-card__category {
    display: inline-block;
    align-self: center;

    max-width: 100%;
    margin-bottom: 0.45rem;
}

.assortment-related-card__title {
    margin: 0;

    color: #303336;

    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.3;

    text-wrap: balance;
}

.assortment-related-card__text {
    display: -webkit-box;

    max-width: 16rem;
    margin: 0.45rem auto 0;

    overflow: hidden;

    color: #6c7277;

    font-size: 0.8rem;
    line-height: 1.45;

    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
}


/* =========================================================
   SWIPER NAVIGATION
   ========================================================= */

.assortment-related__swiper .swiper-button-prev,
.assortment-related__swiper .swiper-button-next {
    color: var(--color-brand);
}

.assortment-related__swiper .swiper-button-prev {
    left: 0.35rem;
}

.assortment-related__swiper .swiper-button-next {
    right: 0.35rem;
}


/* progress bar — нужен только на мобильных */

.assortment-related__swiper .related-pagination {
    display: none;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1199.98px) {
    .assortment-detail-similar__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 991.98px) {

    .assortment-detail-page {
        padding-top: 2rem;
        padding-bottom: 4rem;
    }

    .assortment-detail-media {
        max-width: 38rem;
        margin-right: auto;
        margin-left: auto;
    }

    .assortment-detail-info {
        max-width: 46rem;
        margin-right: auto;
        margin-left: auto;
    }

    .assortment-detail-data {
        margin-top: 3rem;
    }

    .assortment-detail-similar__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .assortment-related {
        margin-top: 4rem;
        padding-top: 2.75rem;
    }

    .assortment-related__title {
        margin-bottom: 2.5rem;
    }

    .assortment-related__swiper {
        padding-right: 2.25rem;
        padding-left: 2.25rem;
    }

    .assortment-related-card__text {
        display: none;
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 575.98px) {

    .assortment-detail-page {
        padding-top: 1.5rem;
        padding-bottom: 3rem;
    }

    .assortment-detail-breadcrumbs {
        margin-bottom: 1rem;

        font-size: 0.8rem;
    }

    .assortment-detail-back {
        margin-bottom: 1rem;
    }


    /* Media */

    .assortment-detail-media {
        aspect-ratio: 1 / 1;
    }

    .assortment-detail-media__image {
        padding: 1rem;
    }


    /* Document */

    .assortment-detail-documents {
        margin-top: 1.5rem;
        padding-top: 1.25rem;
    }

    .assortment-detail-document-card {
        width: 100%;
    }


    /* Product info */

    .assortment-detail-badges {
        margin-top: 0.25rem;
        margin-bottom: 0.7rem;
    }

    .assortment-detail-title {
        font-size: 1.65rem;
    }

    .assortment-detail-lead {
        font-size: 0.92rem;
        line-height: 1.55;
    }


    /* Order */

    .assortment-detail-order {
        padding: 1rem;
    }

    .assortment-detail-order__submit {
        width: 100%;
    }


    /* Data */

    .assortment-detail-data {
        margin-top: 2.5rem;
    }

    .assortment-detail-section-title {
        font-size: 1.15rem;
    }

    .assortment-detail-spec-row {
        grid-template-columns: minmax(0, 44%) minmax(0, 56%);

        padding: 0.65rem 0.55rem;

        font-size: 0.82rem;
    }

    .assortment-detail-spec-row dt {
        padding-right: 0.6rem;
    }


    /* Application areas */

    .assortment-detail-applications-section {
        margin-top: 2.5rem;
    }

    .assortment-detail-applications-list {
        flex-direction: column;
        align-items: stretch;
        gap: 0.45rem;
    }

    .assortment-detail-application-item {
        width: 100%;
    }


    /* Text */

    .assortment-detail-content {
        margin-top: 2.75rem;
    }

    .assortment-detail-description {
        font-size: 0.9rem;
        line-height: 1.65;
    }


    /* Similar */

    .assortment-detail-similar {
        margin-top: 3rem;
    }

    .assortment-detail-similar__title {
        font-size: 1.35rem;
    }

    .assortment-detail-similar__grid {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }

    .assortment-similar-card {
        display: grid;
        grid-template-columns: 7.5rem minmax(0, 1fr);
    }

    .assortment-similar-card__media {
        height: 100%;
        min-height: 9rem;

        aspect-ratio: auto;
    }

    .assortment-similar-card__media img {
        padding: 0.5rem;
    }

    .assortment-similar-card__body {
        padding: 0.7rem;
    }

    .assortment-similar-card__name {
        font-size: 0.9rem;
    }

    .assortment-similar-card__link {
        min-height: 2.2rem;

        font-size: 0.78rem;
    }

    /* Related products */

    .assortment-related {
        margin-top: 3.5rem;
        padding-top: 2.5rem;
    }

    .assortment-related__title {
        margin-bottom: 2rem;
        padding-inline: 1rem;

        font-size: 1.4rem;
    }

    .assortment-related__swiper {
        padding: 1rem 0 1.75rem;
    }


    /* На мобильных — как у СВС:
   стрелки скрываем, оставляем progressbar */

    .assortment-related__swiper .swiper-button-prev,
    .assortment-related__swiper .swiper-button-next {
        display: none;
    }

    .assortment-related__swiper .related-pagination {
        display: block;

        bottom: 0;
    }


    /* Карточка */

    .assortment-related-card__body {
        padding-top: 0.65rem;
    }

    .assortment-related-card__category {
        font-size: 0.62rem;
    }

    .assortment-related-card__title {
        font-size: 0.9rem;
    }

    .assortment-related-card__text {
        display: none;
    }

}


/* =========================================================
   VERY NARROW
   ========================================================= */