/* ===== Ozon-like clean ===== */
.ozTagsV2{margin:10px 0;}
h1.heading { margin: 0 0 0px;}
/* Top row */
.ozTop{display:flex;align-items:center;gap:10px;}
.ozPopular{display:flex;gap:8px;flex:1;overflow:auto;scrollbar-width:none;white-space:nowrap;padding:2px 0;}



.ozPopular{
  position: relative;
  overflow-x: auto;
  overflow-y: hidden;

  -webkit-mask-image: linear-gradient(
    to right,
    rgba(0,0,0,1) 0%,
    rgba(0,0,0,1) 85%,
    rgba(0,0,0,0) 100%
  );

  mask-image: linear-gradient(
    to right,
    rgba(0,0,0,1) 0%,
    rgba(0,0,0,1) 85%,
    rgba(0,0,0,0) 100%
  );
}
.ozPopular::-webkit-scrollbar{display:none;}


.ozChip{
  display:inline-flex;align-items:center;
  padding:7px 10px;border-radius:999px;
  background:#f1f5f9;border:1px solid #e2e8f0;
  color:#0f172a;text-decoration:none;font-weight:700;font-size:13px;
  transition:.15s;white-space:nowrap;
}
.ozChip:hover{background:#2563eb;border-color:#2563eb;color:#fff;}
.ozAllBtn{
  display:inline-flex;align-items:center;gap:8px;
  padding:7px 12px;border-radius:999px;
  border:1px solid #e2e8f0;background:#fff;cursor:pointer;
  font-weight:900;color:#0f172a;white-space:nowrap;
}
.ozAllBtn:hover{border-color:#2563eb;color:#2563eb;}
.ozArr{font-size:16px;line-height:1;font-weight:900;}

/* Inline panel */
/* ПК inline dropdown */
@media (min-width: 992px){
  .ozPanelInline{
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% - 40px); /* сразу под строкой тегов */
    z-index: 9999;

    margin-top: 0;
    background:#fff;
    border:1px solid #e2e8f0;
    border-radius:16px;
    box-shadow:0 20px 40px rgba(0,0,0,.15);

  }

  /* контейнер должен быть relative */
  .ozTagsV2{
    position: relative;
  }

  .ozGroupTags.ozGroupTags--flat {
    padding-right: 35px;
}
}

.ozPanelHead{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;}
.ozPanelTitle{font-weight:1000;color:#0f172a;font-size:15px;}
.ozPanelClose{
width: 34px;
    height: 34px;
    border: none;
    border-radius: 10px;
    background: #f1f5f9;
    cursor: pointer;
    font-size: 22px;
    line-height: 1;
    position: absolute;
    right: 10px;
    top: 10px;
}
.ozPanelClose:hover{background:#e2e8f0;}

.ozPanelBody{display:flex;flex-direction:column;gap:12px;}
.ozGroupBlock{padding:10px;}
.ozGroupTitle{font-weight:1000;color:#0f172a;margin-bottom:8px;font-size:14px;}
.ozGroupTags{display:flex;flex-wrap:wrap;gap:8px;}
.ozPill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 8px;
    border-radius: 12px;
    background: #e2e8f0;
    border: 1px solid #e2e8f0;
    text-decoration: none;
    color: #0f172a;
    font-weight: 800;
    font-size: 13px;
    transition: .15s;

}
.ozPill:hover{background:#2563eb;border-color:#2563eb;color:#fff;}
.ozN{font-weight:1000;color:#64748b;}
.ozPill:hover .ozN{color:#fff;}

/* Brands at bottom */
.ozBrandsRow{display:flex;gap:10px;overflow:auto;scrollbar-width:none;padding:2px;}
.ozBrandsRow::-webkit-scrollbar{display:none;}
.ozBrand{
  min-width:120px;max-width:160px;
  display:flex;align-items:center;justify-content:center;
  border:1px solid #e2e8f0;background:#fff;border-radius:14px;
  padding:10px;text-decoration:none;color:#0f172a;font-weight:1000;
}
.ozBrand:hover{border-color:#2563eb;}
.ozBrand img{max-height:26px;max-width:120px;object-fit:contain;}
.ozBrandTxt{font-size:13px;text-align:center;line-height:1.15;}

/* Mobile open button (hidden on desktop) */
.ozMobOpen{display:none;margin-top:10px;width:100%;
  padding:10px 12px;border-radius:14px;border:1px solid #e2e8f0;background:#fff;
  font-weight:1000;cursor:pointer;align-items:center;justify-content:center;gap:8px;
}

/* Sheet */
.ozSheet{position:fixed;inset:0;display:none;z-index:10000;}
.ozSheet.isOpen{display:block;}
.ozSheetBackdrop{position:absolute;inset:0;background:rgba(15,23,42,.45);}
.ozSheetBox{
  position:absolute;left:0;right:0;bottom:0;
  background:#fff;border-radius:18px 18px 0 0;
  box-shadow:0 -10px 30px rgba(0,0,0,.25);
  padding:12px;max-height:82vh;display:flex;flex-direction:column;
}
.ozSheetHead{display:flex;align-items:center;gap:8px;justify-content:space-between;}
.ozBack{
  width:38px;height:34px;border-radius:10px;border:none;
  background:#f1f5f9;font-size:20px;font-weight:1000;cursor:pointer;
}
.ozSheetTitle{font-weight:1000;color:#0f172a;font-size:16px;flex:1;text-align:left;}
.ozSheetClose{
  width:34px;height:34px;border:none;border-radius:10px;background:#f1f5f9;
  font-size:22px;cursor:pointer;line-height:1;
}
.ozSheetTabs{display:flex;gap:8px;margin:10px 0 8px;}
.ozTab{
  flex:1;padding:10px;border-radius:12px;border:1px solid #e2e8f0;background:#f8fafc;
  font-weight:1000;cursor:pointer;
}
.ozTab.isActive{background:#2563eb;border-color:#2563eb;color:#fff;}
.ozSheetBody{overflow:auto;padding-right:4px;}
.ozSheetGroups,.ozSheetTags,.ozSheetBrands{display:flex;flex-direction:column;gap:8px;}
.ozRowBtn{
  text-align:left;padding:12px;border-radius:14px;border:1px solid #e2e8f0;background:#fff;
  font-weight:1000;cursor:pointer;color:#0f172a;
}
.ozRowBtn:hover{border-color:#2563eb;color:#2563eb;}
.ozTagGrid{display:flex;flex-wrap:wrap;gap:8px;}
.ozTagGrid a{flex:0 0 auto;}
.ozBrandsGrid{display:flex;flex-wrap:wrap;gap:10px;}
.ozBrandsGrid .ozBrand{min-width:calc(50% - 6px);max-width:none;}

/* Responsive rules */
@media (max-width: 991px){
  .ozAllBtn{display:none;}
  .ozPanelInline{display:none;}   /* panel not inline on mobile; open sheet instead */
  .ozMobOpen{display:flex;}
}
@media (min-width: 992px){
  .ozMobOpen{display:none;}
  .ozSheet{display:none !important;}
}


.ozGroupTags--flat{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.ozBrandsWrap{
  display:flex;
  align-items:center;
  gap:8px;
}

.ozBrandNav{
  width:36px;
  height:36px;

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

  border-radius:50%;
  border:1px solid #e2e8f0;
  background:#fff;
  cursor:pointer;

  font-size:22px;      /* ↑ чуть больше */
  font-weight:900;
  line-height:1;       /* 🔥 ключ */
  padding:0;           /* 🔥 убрать padding */
}


.ozBrandNav:hover{
  border-color:#2563eb;
  color:#2563eb;
}

.ozBrandsRow{
  display:flex;
  gap:10px;
  overflow:hidden;
  scroll-behavior:smooth;
  flex:1;
}

@media (max-width: 991px){

  .ozMobAllTags{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin-bottom:16px;
  }

  .ozMobAllTags .ozPill{
    font-size:13px;
    padding:8px 10px;
  }

  .ozMobBrandsTitle{
    font-weight:900;
    margin:8px 0;
    color:#0f172a;
  }
}


/* ===== MOBILE TAGS FLOW ===== */
.ozSheetBody{
  overflow-y:auto;
}

/* контейнер с тегами */
.ozSheetBrands{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

/* сами теги */
.ozSheetBrands .ozPill{
  display:inline-flex;
  align-items:center;

  padding:8px 12px;
  border-radius:999px;

  background:#f1f5f9;
  border:1px solid #e2e8f0;

  font-size:13px;
  font-weight:600;
  color:#0f172a;
  white-space:nowrap;
}
/* скрываем стрелки */
.ozSheetBrands .ozlslid_nav{
  display:none;
}

/* убираем поведение слайдера */
.ozSheetBrands .ozlslid_wrap{
  display:block;
}

.ozSheetBrands .ozlslid_track{
  display:grid;
  gap:12px;

  overflow:visible;
  mask-image:none;
  -webkit-mask-image:none;
}
@media (max-width: 575px){
  .ozSheetBrands .ozlslid_track{
    grid-template-columns:repeat(2, 1fr);
  }
}

@media (min-width: 576px) and (max-width: 991px){
  .ozSheetBrands .ozlslid_track{
    grid-template-columns:repeat(auto-fit, minmax(120px, 1fr));
  }
}
@media (min-width: 992px){
  .ozSheetBrands .ozlslid_track{
    grid-template-columns:repeat(auto-fit, minmax(140px, 1fr));
  }
}
.ozSheetBrands .ozBrand{
  height:56px;

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

  background:#fff;
  border:1px solid #e2e8f0;
  border-radius:14px;

  transition:.15s;
}

.ozSheetBrands .ozBrand:hover{
  border-color:#2563eb;
  box-shadow:0 4px 10px rgba(37,99,235,.15);
}

.ozSheetBrands .ozBrand img{
  max-height:32px;
  max-width:100%;
  object-fit:contain;
}



        :root {
            --primary-color: #2563eb;
            --bg-light: #f8fafc;
            --bg-white: #ffffff;
            --text-dark: #0f172a;
            --text-muted: #64748b;
            --border-light: #e2e8f0;
            --radius: 8px;
            --shadow: 0 2px 4px rgba(0,0,0,0.1);
            --shadow-lg: 0 4px 8px rgba(0,0,0,0.12);
        }

        .subcategories-container { margin-bottom: 15px; }

        .subcategories-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 7px;
        }

        .subcategory-card {
            background: var(--bg-light);
            border: 1px solid var(--border-light);
            border-radius: var(--radius);
            padding: 8px;
            display: flex;
            align-items: center;
            gap: 10px;
            cursor: pointer;
            text-decoration: none;
            color: inherit;
            min-height: 60px;
            transition: 0.2s;
            animation: fadeIn .3s ease-out;
        }

        .subcategory-card:hover {
            transform: translateY(-1px);
            background: var(--bg-white);
            border-color: var(--primary-color);
            box-shadow: var(--shadow-lg);
        }

        .subcategory-image {
            width: 70px;
            height: 70px;
            border-radius: var(--radius);
            overflow: hidden;
            background: var(--bg-white);
            border: 1px solid var(--border-light);
            flex-shrink: 0;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .subcategory-image img {
            width: 100%;
            height: 100%;
            object-fit: contain;
            transition: 0.2s;
        }

        .subcategory-card:hover .subcategory-image img { transform: scale(1.05); }

        .subcategory-name {
            font-size: 13px;
            font-weight: 600;
            color: var(--text-dark);
            line-height: 1.2;
        }

        .subcategory-arrow {
            width: 16px;
            height: 16px;
            color: var(--text-muted);
            flex-shrink: 0;
            transition: .2s;
        }

        .subcategory-card:hover .subcategory-arrow {
            transform: translateX(2px);
            color: var(--primary-color);
        }

        .subcategories-hidden { display: none !important; }

        /* Кнопка */
        .show-all-container { text-align: center; margin-top: 12px; }
        .show-all-btn {
            background: var(--primary-color);
            color: #fff;
            padding: 5px 12px;
            border-radius: var(--radius);
            border: none;
            cursor: pointer;
            font-size: 12px;
            font-weight: 600;
            box-shadow: var(--shadow);
            transition: .2s;
            display: inline-flex;
            align-items: center;
            gap: 6px;
        }
        .show-all-btn:hover { transform: translateY(-1px); background: #1e4fcc; }
        .show-all-btn.expanded .show-all-icon { transform: rotate(180deg); }

        @keyframes fadeIn {
            from { opacity:0; transform: translateY(10px); }
            to { opacity:1; transform: translateY(0); }
        }

        /* 📱 Мобильная версия — 2 карточки в ряд, вертикальная ориентация */
        @media (max-width: 768px) {
            .subcategories-grid {
                grid-template-columns: repeat(2, 1fr) !important;
                gap: 7px;
            }
            .subcategory-card {
                flex-direction: column;
                min-height:120px;
                padding:12px;
                text-align:center;
                justify-content:flex-start;
            }
            .subcategory-image {
                width: 100%;
                height: 100px;
            }
            .subcategory-name {
                margin-top: 6px;
                font-size: 13px;
            }
            .subcategory-arrow { display:none; }
        }