.page-catalog h1 {
    font-family: "TTNormsPro";
    font-weight: 700;

    font-size: 48px;
    color: rgba(0, 98, 147, 1);

}
/* Design tokens (из Figma) */
:root{
    --color-primary:#006293; /* var 1 */
    --color-primary-dark:#004E78; /* var 2 */
    --color-primary-deep:#023953; /* var 4 */
    --color-text:#0D0D0D;
    --color-text-muted:#3F3F3F;
    --color-muted:#616161;
    --color-border:#DFDFDF;
    --color-border-strong:#B9B9B9;
    --color-surface:#FFFFFF;
    --color-surface-alt:#F7F7F7;
    --color-tile:#F4F4F4;

    --radius-xs:5px;
    --radius-sm:10px;
    --radius-md:20px;
    --radius-pill:57px;

    --container-max:1738px; /* по макету */
    --gap-lg:50px;
    --gap-md:30px;
    --gap-sm:20px;
}

/* Base reset */

/* Layout */
.catalog{}
.catalog__container{
    max-width:var(--container-max);
    margin:0 auto;
    padding:0px 0px 80px; /* небольшие поля */
}

/* Controls row */
.catalog__controls{display:flex;gap:45px;align-items:center; border-left: 1px solid rgba(0, 98, 147, 1);
    justify-content:space-between;flex-wrap:wrap;margin:21px 0px 26px 50px;    padding-left: 31px;}

/* Filters bar */
.filters-bar{display:flex;align-items:center;gap:45px;flex-wrap:wrap}
.filters-bar__button{display:inline-flex;align-items:center;gap:22px;padding:9px 26px;
    border-radius:30px;border:none;cursor:pointer}
.filters-bar__button_primary{background:var(--color-primary);color:#fff}
.filters-bar__chip{display:inline-flex;
    align-items:center;gap:var(--gap-sm);
    padding:7px 30px;border:1px solid #616161;
    border-radius:var(--radius-pill);background:transparent;
    color:var(--color-text-muted);cursor:pointer;
    font-family: "TTNormsPro";
    font-weight: 400;
    font-size: 20px;


}
.filters-bar__chip-caret{width:16px;height:25px;display:inline-block;}
.filters-bar__button-icon{width:18px;height:15px;border-radius:3px}

/* Search */
.search{margin-left:auto;display:flex;align-items:center;gap:12px;border:1px solid #D9D9D9;border-radius:30px;padding:7px 18px}
.search__input{border:0;outline:0;min-width:260px;font-size:16px;color:var(--color-text);
    font-family: "TTNormsPro";
    font-weight: 400;
    font-size: 20px;
}
.search__submit{border:0;background:transparent;cursor:pointer}
.search__icon{width:17px;height:16px;display:inline-block;border:2px solid var(--color-text-muted);border-radius:50%;position:relative}

/*.search__icon::after{content:"";position:absolute;width:8px;height:2px;background:var(--color-text-muted);right:-6px;bottom:-3px;transform:rotate(45deg);border-radius:1px}
*/
/* Sort dropdown */
.sort{position:relative;display:inline-block}
.sort__menu{position:absolute;top:calc(100% + 6px);right:0;min-width:230px;background:#fff;
    border:1px solid #616161;border-radius:10px;box-shadow:0 10px 30px rgba(0,0,0,.08);
    padding:6px 0;margin:0;list-style:none;z-index:1001;display:none
}
.sort_open .sort__menu{display:block}
.sort__option{padding:10px 14px;font-size:14px;color:var(--color-text);cursor:pointer;

    font-family: "TTNormsPro";
    font-weight: 400;
    font-size: 15px;}
.sort__option:hover{background:#f6f6f6}

/* Content layout */
.catalog__content{display:grid;grid-template-columns:1fr;gap:var(--gap-lg)}

/* Filter panel */
.filter-panel{position:fixed;top:0;right:0;height:100vh;width:min(500px,92vw);background:rgba(244, 244, 244, 1);border-left:1px solid var(--color-border);box-shadow:0 0 50px rgba(0,0,0,.15);transform:translateX(100%);transition:transform .3s ease;z-index:1000;padding:32px 40px}
.filter-panel_open{transform:translateX(0)}
.filter-panel__header{display:flex;align-items:center;justify-content:space-between;margin-bottom:33px}
.filter-panel__title{
    font-size:32px;
    font-family: "TTNormsPro";
    font-weight: 500;
}
.filter-panel__close{width:24px;height:24px;border:0;border-radius:6px;
  background-size:2px 14px,2px 14px;background-repeat:no-repeat;background-position:50% 7px,50% 7px;transform:rotate(90deg);cursor:pointer}
.filter-panel__section{padding:18px 0;border-top:1px solid var(--color-border)}
.filter-panel__section {
    border-top: 0;
}
.product-card__content {

    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}
.product-item-image-slide {
    max-width: 321px;
    max-height: 350px;

}
.product-item-image-slider-slide-container {
    background: rgba(244, 244, 244, 1);
    border-radius: 10px;
}

.filter-panel__section:first-of-type{border-top:0;padding-top:0}
.filter-panel__section-header{display:flex;align-items:center;justify-content:space-between;
    margin-bottom: 15px;
    border-bottom: 1px solid rgba(223, 223, 223, 1);
    padding-bottom: 6px;
}
.filter-panel__section-title {
    font-size: 20px;
    line-height: 1.18;
    margin: 0;
    font-family: "TTNormsPro";
    font-weight: 500;

}
.smart-filter-parameters-box-title {

    width: 100%;
}
.filter-panel__toggle{width:16px;height:9px;border:0;border-radius:3px;cursor:pointer;    margin-top: -8px;}
.filter-panel__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px}
.filter-panel__option{display:flex;align-items:center;gap:12px;cursor:pointer}
.filter-panel__checkbox{width:20px;height:20px;border-radius:var(--radius-sm);border:1px solid #D9D9D9;appearance:none;display:grid;place-items:center}
.filter-panel__checkbox:checked{background: rgba(217, 217, 217, 1);
border-color: rgba(217, 217, 217, 1);}
.filter-panel__checkbox:checked::after{
    content:"";width:12px;height:12px;
    background:url('/local/templates/auqa/images/catalog/check.svg') 50% no-repeat;
    border-radius:2px
}
.filter-panel__label{
    font-family: "TTNormsPro";
    font-weight: 500;

    font-size: 16px;

}
.filter-panel__range{display:flex;gap:78px}
.filter-panel__range-field{display:flex;align-items:center;gap:20px}
.filter-panel__range-label{
    color:var(--color-text);font-weight:500;font-size: 16px;font-family: "TTNormsPro";
}
.filter-panel__range-input{width:130px;height:40px;border:1px solid #616161;border-radius:var(--radius-pill);text-align:center;font-size:16px}
.filter-panel__tags{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:12px}
.filter-panel__tag{border:1px solid #D9D9D9;border-radius:var(--radius-sm);padding:6px 10px;background:#F4F4F4}

/* Overlay */
.overlay{position:fixed;inset:0;background:rgba(0,0,0,.25);opacity:0;pointer-events:none;transition:opacity .2s ease;z-index:999}
.overlay_visible{opacity:1;pointer-events:auto}
.scroll-lock{overflow:hidden}

/* Product grid */
.product-grid{display:grid;grid-template-columns:repeat(4, 397px);    gap: 27px;align-content:start}
.product-grid {
    display: flex;
    flex-wrap: wrap;
}
.product-item-container {
    position: relative;
    width: 23.6%;
}
.product-card{width:100%;border:1px solid var(--color-border-strong);border-radius:var(--radius-sm);overflow:hidden;background:#fff}
.product-card__media{position:relative;}
.product-card__favorite{position:absolute;top:12px;right:12px;width:36px;
    height:36px;border-radius:50%;border:0;
  cursor:pointer}
.product-card__favorite_active{background:#fff0f0}
.product-card__favorite_active::before{filter:saturate(1.3)}
.product-card__favorite svg.active {
    display: flex;
}
.product-card__favorite svg {
    display: none;
}
.product-card__title{margin:0 0 12px;font-size:16px;line-height:1.18;font-weight:500;color:var(--color-text-muted)}
.product-card__meta{
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
    margin-top: 10px;
    display: flex;
    margin-left: 29px;
}
.product-card__sku{font-size:14px;color:var(--color-primary)}
.product-card__badge{font-size:16px;font-weight:400;color:var(--color-primary); font-family: "TTNormsPro";
    background:#fff;border:1px solid var(--color-primary);border-radius:100px;padding:5px 30px}
.product-card__price{font-size:24px;line-height:1.18;font-weight:700;color:var(--color-primary-deep)}
div .product-item-title {
clear: both;
    font-weight: normal;
    font-size: 16px;
    text-align: left;
    width: 100%;
    padding-left: 29px;
    padding-right: 29px;
}
.product-card__sku {
    font-size: 14px;
    color: var(--color-primary);
    font-family: "TTNormsPro";
    font-weight: 400;
}
div .product-item-image-slider-slide-container {
    height: 414px;
    display: block!important;
}
.product-item-container.hover .product-card__badge{
    display: none;
}
.product-card__sku:before{
    content: '';
    background: rgba(0, 98, 147, 1);
    height: 1px;
    width: 132px;
    position: relative;
    display: inline-flex;
    margin-right: 8px;
    margin-top: -14px;
    top: -5px;
}
.product-item-title__collection {
    font-family: "TTNormsPro";
    font-weight: 400;

    font-size: 24px;
    padding-top: 32px;
    padding-left: 29px;
    padding-right: 29px;
}
.product-card__badge
{
    display: inline-flex;
    position: relative;
    margin-top: -5px;
    z-index: 9;
    right: 0;
    float: right;
    left: auto;
    margin-right: 18px;
}
/* Hover details */
.product-card{position:relative}
.product-card__hover{position:absolute;left:0;right:0;bottom:0;transform:translateY(100%);opacity:0;pointer-events:none;background:#fff;border-top:1px solid var(--color-border);padding:12px 20px 16px;transition:transform .2s ease,opacity .2s ease}
.product-card:hover .product-card__hover, .product-card:focus-within .product-card__hover{transform:translateY(0);opacity:1;pointer-events:auto}
.product-card__colors{list-style:none;margin:0 0 10px;padding:0;display:flex;gap:14px}
.product-card__color{width:19px;height:19px;border-radius:50%;border:2px solid transparent}
.product-card__color[data-color="sr"]{background:#d9d9d9}
.product-card__color[data-color="gm"]{background:#8b8b8b}
.product-card__color[data-color="mb"]{background:#1e1e1e}
.product-card__color[data-color="bg"]{background:#b6935a}
.product-card__more:hover{
    color:  var(--color-primary);
    background: #fff;
}
.product-card__more{
    font-family: "TTNormsPro";
    display: inline-block;
    border: 1px solid var(--color-primary);
    color: #ffffff;
    background: #fff;
    border-radius: 100px;
    padding: 4px 29px;
    font-size: 16px;
    font-weight: 500;
    background: var(--color-primary);
    margin-top: 37px;
    margin-bottom: 34px;
}

.load-more{grid-column:1/-1;justify-self:center;border:1px solid var(--color-primary);color:var(--color-primary);background:#fff;border-radius:100px;padding:10px 30px;cursor:pointer}

.pagination{grid-column:1/-1;display:flex;align-items:center;gap:34px;justify-content:center}
.pagination__page{font-size:24px;line-height:2.08;color:#B9B9B9}
.pagination__page_current{color:var(--color-text)}
.pagination__arrow{width:58px;height:2px;border:0;background:var(--color-primary);padding:0;cursor:pointer}
.pagination__arrow_prev{mask:linear-gradient(90deg,#000 70%,transparent)}
.pagination__arrow_next{mask:linear-gradient(90deg,transparent,#000 30%)}

/* Recommend section */
.recommend{margin:80px 0 0}
.recommend__header{display:flex;align-items:center;gap:23px;justify-content:flex-end}
.recommend__title{margin:0;font-size:48px;line-height:1.18;font-weight:700;text-align:right}
.recommend__line{width:0;height:51px;border-left:1px solid var(--color-primary)}
.recommend__tiles{display:flex;gap:50px;flex-wrap:wrap;margin-top:23px}
.recommend__tile{display:flex;flex-direction:column;gap:20px;width:431px}
.recommend__tile-media{height:289px;background:var(--color-surface-alt);border:1px solid #fff}
.recommend__tile-title{font-size:20px;font-weight:300}

/* Banners inside grid */
.banner{grid-column:1/-1;height:350px;border-radius:var(--radius-sm);background:linear-gradient(135deg, #f0f6fb 0%, #e8f1f7 100%);border:1px solid var(--color-border)}
/*.banner--a{background:url("/local/templates/auqa/images/catalog/banner1.png") no-repeat}
.banner--b{background:url("/local/templates/auqa/images/catalog/banner2.png") no-repeat}*/

/* Responsiveness */
@media (max-width:1400px){
    .product-grid{grid-template-columns:repeat(3, 1fr)}
    .product-grid{grid-template-columns:repeat(3, 1fr)}
}
@media (max-width:1100px){
    .product-grid{grid-template-columns:repeat(2, 1fr)}
}
@media (max-width:720px){
    .catalog__title{font-size:36px}
    .search__input{min-width:160px}
    .product-grid{grid-template-columns:1fr}
    .recommend__header{justify-content:center}
}
.popular-category.popular-categoryinner h2.b2b__title.title-overflow {
    width: 630px;
}
span.filters-bar__button-text {
    font-family: "TTNormsPro";
    font-weight: 400;

    font-size: 20px;

}
.product-card__media {
    z-index: 90;
}
button.product-card__favorite.catalog__favorites.active svg:nth-child(1){
    display: none;
}
button.product-card__favorite.catalog__favorites.active svg:nth-child(2){
    display: block;
}
.product-item-container.hover .product-item__bottom{
    border: 1px solid transparent;
}
.product-item__bottom {
  /*  border: 1px solid rgba(185, 185, 185, 1);
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;*/
    margin-top: -22px;
    padding-top: 10px;
}
.product-card__content {
    border: 1px solid rgba(185, 185, 185, 1);
    border-radius: 10px;
}
.product-card__favorite:hover svg.active{
    display: none;
}
.product-card__favorite:hover svg:nth-child(2){
    display: block;
}
.catalog__content .product-item-image-slider-slide-container .item {
    background-size: contain;
}
section.b2b.popular-category.popular-categoryinner .popular-category__wrap {
    margin-left: 150px;
}
section.b2b.popular-category.popular-categoryinner .popular-category__blocks {
    padding-left: 0;
}

@media (max-width: 1450px) {
    .product-item-container {
        width: 23%;
    }
}

@media (max-width: 1100px) {
    .product-item-container {
        width: 31%;
    }
}
@media (max-width: 1024px) {
    .catalog__controls {
        margin-left: 0;
        border-left: 0;
        padding-left: 0;
    }

    .filters-bar {

        gap: 20px;
    }
    .catalog__controls {

        gap: 20px;
    }
}
@media (max-width: 810px) {
    .product-item-container {
        width: 47%;
    }
}
@media (max-width: 768px) {
    .popular-category.popular-categoryinner h2.b2b__title.title-overflow {
        width: auto;
        line-height: normal;
    }
    .product-item-label-left {
        z-index: 99;
    }
    ul.breadcrumbs {

        flex-wrap: wrap;
    }
    .breadcrumbs a, .breadcrumbs span {
        font-size: 16px;
    }
    div#title-search-catalog {
        max-width: 100%;
    }
    span.filters-bar__button-text {

    }
    .search__icon.search__submit {
        width: 35px;
    }
    .page-catalog h1 {
        font-size: 40px;
    }
    div#title-search-catalog

    {
        display: none;
    }
    .catalogs .banner {
        display: none;
    }
}
@media (max-width: 550px) {
    .product-item-container {
        width: 100%;
    }
    .catalogs   .product-item-container {

    }
}
.catalogs .banner {
    width: 100%;
}