.product-grid {display: grid;  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));  gap: 25px;  margin-top: 20px;}
.product-name{color:rgb(13, 42, 64); font-size:20px;color:var(--main-text-color);  margin: 0 0 10px 0; }
.product-item {   max-width:300px;   transition: all 0.3s ease;  }

 
.product-link {display: inline-block;position:relative;    text-decoration: none;  color:var(--main-text-color);    margin-left: 20px;}
.product-link:before {display: inline-block;content:""; bottom: -4px;font-family: Glyphter; font-style: normal;line-height: 1; -webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;color: #ff3162;content: "\0047";font-size: 14px;font-weight: 400;left: -20px; line-height: 27px;  position: absolute; transform: rotate(-90deg);}
.product-department{color:var(--main-text-color)}
.product-department:before{content:"Подразделение:";letter-spacing: .5px;font-weight: 500;  margin-right: 5px;}
.product-description {color:var(--main-text-color);line-height: 1.5; margin: 0 0 20px 0;}


.product-item {padding-bottom: 30px;border-bottom: 1px solid #d3d8dc;transition: all 0.4s ease; opacity: 1; transform: scale(1);}
.product-item.hidden { opacity: 0; transform: scale(0.8); height: 0; padding: 0; margin: 0; overflow: hidden; pointer-events: none;}
.product-container {display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 25px;  position: static !important;  height: auto !important;  min-height: 200px;}

.catalog-block{max-width: 1230px; margin: 0 auto;}
.catalog-loading {  text-align: center;  padding: 40px;  color: #666;}
.catalog-filter {border-bottom: 1px solid #d3d8dc;padding-bottom: 15px;margin-bottom:15px;display: flex;flex-wrap: wrap;gap: 10px;/* justify-content: center; */}

.filter-button {  padding: 10px 20px;  border: 2px solid #00617f;  background: white;  color: #00617f;  cursor: pointer;  border-radius: 5px;  transition: all 0.3s ease;  font-weight: 500;}
.filter-button:hover,
.filter-button.active {  background: #00617f;  color: white;  transform: translateY(-2px);}


.loading-spinner {  border: 3px solid #f3f3f3;  border-top: 3px solid #0071b8;  border-radius: 50%;  width: 40px;  height: 40px;  animation: spin 1s linear infinite;  margin: 0 auto 20px;}



.catalog-error {  text-align: center;  padding: 40px;  color: #d32f2f;  background: #ffebee;  border-radius: 8px;}
.search-container {margin-bottom: 20px;width: 47%;/* max-width: 400px; */margin: 0 auto 20px;position: relative}
.search-input {      width: 100%;    transition: border-color 0.3s ease;    border-radius: 0;    font-size: 16px;    font-style: normal;    font-weight: 600;    height: 54px;    line-height: 1;    margin: 0;    border: 1px solid #834283;    padding: 15px;}
.search-input::placeholder {  color: #404040;}
.search-container:after{height: 54px;background-color: #624963;  bottom: 0;  clip-path: polygon(20% 0,100% 0,100% 100%,0 100%);  content: " ";top: 0;width: 60px;right: 0;background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 30 30'%3E%3Ccircle cx='18' cy='12' r='10' style='stroke:%23fff;stroke-width:2;fill:none'/%3E%3Cpath d='m1.2 27.8 9.8-9.7' style='stroke:%23fff;stroke-width:2;fill:none'/%3E%3C/svg%3E");background-position: 50%;background-repeat: no-repeat;position: absolute;pointer-events: none;}
.filter-buttons {  display: flex;  flex-wrap: wrap;  gap: 10px;  justify-content: center;}
.filter-controls {display: flex;justify-content: space-between;/* align-items: center; */flex-wrap: wrap;gap: 20px;width: 50%;}

.view-toggle {display: flex;gap: 5px;border-radius: 8px;padding: 4px;}
.view-button {display: flex;align-items: center;justify-content: center;width: 40px;height: 40px;background: #624963;cursor: pointer;color: #fff;transition: all 0.3s ease;border: solid 1px;}
.view-button.active {background: white;color: #624963;border-color: #624963;}
.view-button svg {  transition: transform 0.2s ease;}
.view-button:hover svg {  transform: scale(1.1);}


.product-container.view-grid { display: flex;  flex-direction: column;  gap: 25px;  margin-top: 20px;}
.product-container.view-list {  display: flex;  flex-direction: column;  gap: 15px;  margin-top: 20px;}
.product-container.view-list .product-item {  display: flex;  flex-direction: column; max-width: 100%;  width: 100%;}
.product-container.view-list .product-name {  font-size: 1.3rem;  margin-bottom: 8px;}
.product-container.view-list .product-department {  font-size: 0.95rem;  margin-bottom: 12px;}
.product-container.view-list .product-description {  flex-grow: 1;  margin-bottom: 15px;  line-height: 1.6;}
.product-container.view-list .product-link {  align-self: flex-start;}

.alphabet-section {  margin-bottom: 30px;  width: 100%;}
.alphabet-letter { color: #0d2a40;  font-size: 50px;  font-style: normal;  font-weight: 200;  letter-spacing: .5px;  line-height: 54px; margin-bottom:30px;   margin-top: 20px;}

.products-by-letter {  display: grid;  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));  gap: 25px;  width: 100%;}
.product-container {  width: 100%;}
.product-container.view-list .alphabet-section {  margin-bottom: 20px;  width: 100%;}
.product-container.view-list .products-by-letter {  display: flex;  flex-direction: column;  gap: 15px;  width: 100%;}
.product-container.view-list .product-item {  width: 100%;  max-width: 100%;  box-sizing: border-box;}
.catalog-block {width: 100%;}
.catalog-block-container { width: 100%;}
.product-container {width: 100% !important;}
.alphabet-section {  width: 100%;}
.products-by-letter { width: 100% !important; float: none !important;}


.paragraph--type--catalog > div>div:first-child, .catalog-block>h2{display:none}  /* КОСТЫЛИ */





.dropdown-filter {  position: relative;  width: 100%;  display: inline-block;}
.dropdown-toggle {display: flex;   align-items: center;   gap: 8px;  background: white;   color: #fff;  cursor: pointer;  font-weight: 500;   transition: all 0.3s ease;   width: 100%;   background-color: #624963;  border: 1px solid #834283;  height: 54px;  margin: 0;  outline: none;   padding: 12px 21px 12px 24px;justify-content: space-between;}
.filter-count {  background: #ff4757;  color: white;  border-radius: 50%;  width: 20px;  height: 20px;  display: none;  align-items: center;  justify-content: center;  font-size: 12px;  font-weight: bold;}
.dropdown-menu {  position: absolute;  top: 100%;  left: 0;  background: white;  padding: 15px;  z-index: 1000;  margin-top: 0;  border: 1px solid #624963;  width: 100%;}
.dropdown-header {  display: flex;  justify-content: space-between;  align-items: center;  margin-bottom: 15px;  padding-bottom: 10px;  border-bottom: 1px solid #eee;}
.dropdown-header h4 {  margin: 0;  color: #333;  font-size: 14px;}
.select-all-btn {  background: none;  border: none;  color: #0071b8;  cursor: pointer;  font-size: 12px;  text-decoration: underline;}
.select-all-btn:hover {  color: #0056b3;}
.checkbox-group {  max-height: 200px;  overflow-y: auto;  margin-bottom: 15px;}
.checkbox-label {  display: flex;  align-items: center;  padding: 8px 0;  cursor: pointer;  font-size: 14px;  color: #333;}
.checkbox-input {  position: absolute;  opacity: 0;  cursor: pointer;}
.checkmark {  width: 18px;  height: 18px;  border: 1px solid #624963;  margin-right: 10px;  position: relative;  transition: all 0.3s ease;}
.checkbox-input:checked ~ .checkmark {background: #624963;  border-color: #624963;}

.checkbox-input:checked ~ .checkmark:after {  content: '';  position: absolute;  left: 5px;  top: 2px;  width: 5px;  height: 10px;  border: solid white;  border-width: 0 2px 2px 0;  transform: rotate(45deg);}
.dropdown-actions {  display: flex;  gap: 10px;  justify-content: flex-end;}
.apply-btn, .clear-btn {  padding: 8px 16px;  border: none;  border-radius: 4px;  cursor: pointer;  font-size: 12px;  font-weight: 500;}
.apply-btn {  background: #0071b8;  color: white;}
.apply-btn:hover {  background: #0056b3;}
.clear-btn {  background: #f1f1f1;  color: #666;}
.clear-btn:hover {  background: #e0e0e0;}
.active-filters {  display: flex;  flex-wrap: wrap;  gap: 8px;  align-items: center;}
.filter-tag {display: flex;align-items: center;gap: 5px;border: 1px solid #ff3162;cursor: pointer;letter-spacing: .44px;line-height: 18px;margin-bottom: 10px;margin-right: 0px;padding: 10px 30px 10px 9px;color: #0d2a40;font-size: 14px;position: relative;}
.remove-filter-btn {background: none;border: none;color: #ff3162;cursor: pointer;font-size: 26px;padding: 0 6px 0 0;display: flex;align-items: center;justify-content: flex-end;border-radius: 50%;position: absolute;width: 100%;height: 100%;left: 0;}
.remove-filter-btn:hover {/* background: #bbdefb; */}











@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}




@media (max-width: 768px) {
  .dropdown-menu {    left: 50%;    transform: translateX(-50%);    min-width: 280px;  }
  .dropdown-filter {    order: 1;  }  
  .filter-controls {    flex-direction: column;    gap: 15px;  }  
  .active-filters {    order: 3;    justify-content: center;  }
  .view-toggle {    display:none }
  .alphabet-letter {font-size: 24px;}
  .product-item {max-width: 100%;}
  .products-by-letter {grid-template-columns: 1fr;}
  .alphabet-section, .products-by-letter {  width: 100%;}
  .search-container {max-width: 100%;width: 100%;}
  .filter-button {    width: 200px;  }
  .product-grid {    grid-template-columns: 1fr;  }
  .filter-controls {flex-direction: column;gap: 15px;width: 100%;}
  .filter-buttons {    order: 2;  }
  .view-toggle {    order: 1;    align-self: center;  }
  .product-container.view-grid {    grid-template-columns: 1fr;  }
  .product-container.view-list .product-item {    padding: 15px;  }
}

@media (max-width: 480px) {
  .dropdown-menu {width: 90vw;min-width: unset;}
  .checkbox-group { max-height: 150px;}
  .view-toggle {   align-self: stretch;   justify-content: center;  }
  .view-button {  width: 35px; height: 35px;  }
}