@layer components {
    .catalog-toolbar {
        @apply border-y border-slate-200 bg-white;
    }

    .catalog-toolbar__inner {
        @apply mx-auto flex w-full max-w-[1170px] flex-col gap-4 px-4 py-3 md:flex-row md:items-center md:justify-between md:px-8;
    }

    .catalog-toolbar__meta {
        @apply text-sm font-medium text-slate-600;
    }

    .catalog-toolbar__links {
        @apply flex items-center gap-4 text-sm font-medium;
    }

    .catalog-toolbar__links a {
        @apply inline-flex items-center gap-2 text-slate-600 hover:text-primary-strong;
    }

    .catalog-page {
        @apply pb-8;
    }

    .catalog-page .content-rich h1,
    .catalog-page .content-rich h2 {
        @apply text-slate-900;
    }

    .catalog-home-grid {
        @apply flex flex-wrap gap-y-10;
    }

    .catalog-card {
        @apply mb-0 h-full overflow-hidden rounded-sm border border-slate-200 bg-white shadow-sm transition hover:shadow-md;
    }

    .catalog-card__image {
       @apply block p-1 w-full object-contain;
    }

    .catalog-card__body {
        @apply p-5 text-center;
    }

    .catalog-card__title {
        @apply mt-0 mb-2 text-2xl font-semibold text-slate-900;
    }

    .catalog-card__copy {
        @apply m-0 text-sm leading-6 text-slate-600;
    }

    .catalog-sidebar {
        @apply sticky top-8 rounded-sm border border-slate-200 bg-white p-0 shadow-sm;
    }

    .catalog-sidebar .panel {
        @apply mb-0 rounded-none;
    }

    .catalog-sidebar .panel:last-child {
        @apply mb-0;
    }

    .catalog-filter-heading {
        @apply block font-bold text-slate-800;
    }

    .catalog-categories-body {
        @apply px-4 py-3;
    }

    .catalog-categories-body #menu {
        @apply mb-0;
    }

    .catalog-sidebar__actions {
        @apply my-4 flex flex-wrap justify-center gap-2;
    }

    .catalog-filters-close {
        @apply mb-3 inline-flex items-center gap-2 text-sm text-slate-500;
    }

    .catalog-filters-close:hover {
        @apply text-slate-800;
    }

    @media (min-width: 992px) {
        .catalog-filters-close {
            display: none !important;
        }
    }

    .catalog-filters.is-open {
        @apply fixed inset-0 z-50 overflow-auto bg-slate-950/40 p-4 md:static md:bg-transparent md:p-0;
    }

    .catalog-filters.is-open .catalog-sidebar {
        @apply max-w-md;
    }

    .catalog-list-container {
        @apply shadow-none;
    }

    .catalog-page .pagination,
    .catalog-list .pagination {
        @apply my-4;
    }

    .catalog-page nav[role="navigation"],
    .catalog-list nav[role="navigation"] {
        @apply my-4 flex justify-center;
    }

    .catalog-page nav[role="navigation"] .pagination,
    .catalog-list nav[role="navigation"] .pagination {
        @apply mt-0 flex justify-center;
        float: none;
    }

    @media (min-width: 992px) {
        .catalog-layout__sidebar {
            @apply float-left;
        }

        .catalog-layout__content {
            @apply float-right;
        }
    }

    .catalog-breadcrumbs {
        @apply mb-4 flex flex-col gap-2 md:flex-row md:items-center md:justify-between;
    }

    .catalog-breadcrumbs ol {
        @apply m-0 flex flex-wrap items-center gap-2 text-sm text-slate-500;
    }

    .catalog-breadcrumbs .current {
        @apply text-slate-900;
    }

    .catalog-breadcrumbs__results {
        @apply m-0 text-sm text-slate-500;
    }

    .catalog-item-card__image-link {
       @apply relative block w-full;
    }

    .catalog-item-card__type-tag {
        @apply absolute left-3 top-3 z-10 rounded-sm bg-slate-900/85 px-2.5 py-1 text-xs font-bold uppercase tracking-wide text-white;
    }

    .catalog_item {
        @apply mb-6;
    }

    .catalog-item-card__name {
        @apply block text-lg font-semibold text-slate-900 hover:text-primary-strong;
    }

    .catalog-item-card__manufacturer {
        @apply mt-1 mb-0 text-sm text-slate-500;
    }

    .catalog-item-card__points {
        @apply mt-3 mb-0 text-sm font-semibold text-primary-strong;
    }

    .catalog-item-card__actions {
        @apply mt-4 flex items-center gap-2;
    }

    .catalog-item-card__actions .btn-primary {
        @apply flex-1;
    }

    .catalog-item-card__favorite {
        @apply min-w-[42px] px-3 text-rose-500;
    }

    .catalog-item-card__favorite .fa-heart,
    .catalog-item-detail-actions .fa-heart {
        @apply text-rose-500;
    }

    .catalog-item-card__favorite.is-active {
        @apply border-rose-200 bg-rose-50;
    }

    .catalog-item-detail-layout {
        @apply items-start;
    }

    .catalog-item-detail-card .panel-body {
        @apply p-5 md:p-6;
    }

    .catalog-item-detail-main .lead {
        @apply mt-3 text-base leading-7 text-slate-700;
    }

    .catalog-item-detail-purchase {
        @apply mt-4 sm:mt-0;
    }

    .catalog-item-detail-purchase form {
        @apply rounded-sm border border-slate-200 bg-slate-50 p-4;
    }

    .catalog-item-detail-actions {
        @apply mt-5;
    }

    .catalog-item-detail-actions .btn + .btn {
        @apply mt-3;
    }

    .item__image-container {
        @apply relative;
    }

    .item__image-ribbon {
        @apply absolute left-3 top-3 z-10 rounded-sm bg-slate-900/85 px-2.5 py-1 text-xs font-bold uppercase tracking-wide text-white;
    }

    .catalog-item-terms {
        @apply mt-5 border-t border-slate-200 pt-4;
    }

    .catalog-item-terms .panel-heading {
        @apply px-0 py-0;
    }

    .catalog-item-terms .panel-title {
        @apply font-semibold;
    }

    .catalog-item-terms .panel-body {
        @apply px-0 pb-0 pt-3;
    }

    .catalog-account-shell {
        @apply border border-slate-200 bg-white;
    }

    .catalog-account-panel {
        @apply mb-0 border-0 shadow-none;
    }

    .catalog-account-panel .panel-heading {
        @apply border-b border-slate-200 bg-slate-50 px-4 py-3;
    }

    .catalog-account-panel .panel-body {
        @apply p-4;
    }

    .catalog-order-item-image {
        @apply h-16 w-16 rounded border border-slate-200 object-cover;
    }

    .catalog-detail-table {
        @apply mb-0;
    }

    .catalog-detail-table th {
        @apply w-[34%] text-slate-500;
    }

    .reloadable-form__field {
        @apply mt-2;
    }

    .reloadable-form__points {
        @apply mt-2 block text-sm font-semibold text-slate-500;
    }

    .reloadable-form__actions {
        @apply text-right;
    }
}
