@import url('https://fonts.cdnfonts.com/css/sf-ui-text-2');
@import url('https://fonts.cdnfonts.com/css/sf-pro-display');

body {
  max-width: 100vw; 
  overflow-x: hidden; 
  margin: 0;
  background: #fff;
  color: #222;
  font-family: 'SF UI Text', Arial, sans-serif;
  line-height: 1.2;
}
/* Путь */
.breadcrumbs {
  margin: 26px auto 32px auto;
  width: 1420px;
  max-width: calc(100vw - 32px);
  font-size: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: 'SF UI Text', Arial, sans-serif;
  color: #888;
}
.breadcrumbs a {
  color: #888;
  text-decoration: none;
  transition: color 0.2s;
}
.breadcrumbs a.active {
  color: #222;
  font-weight: regular;
  pointer-events: none;
}
.breadcrumbs a:hover:not(.active) {
  color: #eb5757;
}

/* Название раздела */
.page-title {
  margin: 0 auto 32px auto;
  width: 1420px;
  max-width: calc(100vw - 32px);
  font-family: 'SF Pro Display', Arial, sans-serif;
  font-size: 36px;
  font-weight: 600;
  letter-spacing: 0px;
}

.filters {
  display: flex;
  gap: 24px;
  width: 1420px;
  max-width: calc(100vw - 24px);
  margin: 0 auto 24px auto;
}
.filter-group {
  display: flex;
  flex-direction: column;
  min-width: 288px;
  min-height: 40;
}
.filter-group label {
  margin-bottom: 6px;
  margin-left: 16px;
  font-size: 12px;
  color: #4F4F4F;
  font-family: 'SF Pro Display', Arial, sans-serif;
}
select {
  width: 100%;
  padding: 9px 24px 9px 16px;
  font-size: 12px;
  border: 1px solid #eee;
  border-radius: 0px;
  background: #fafafa url('data:image/svg+xml;utf8,<svg width="14" height="8" xmlns="http://www.w3.org/2000/svg"><path d="M1 1l6 6 6-6" stroke="%23888" stroke-width="2" fill="none" fill-rule="evenodd"/></svg>') no-repeat right 16px center/16px;
  font-family: 'SF Pro Display', Arial, sans-serif;
  appearance: none;
  cursor: pointer;
}
select:focus {
  border-color: #eb5757;
  outline: none;
}

/* Сетка */
.products-outer {
  width: 1920px;
  max-width: 100vw;
  overflow-x: auto;
}
.products-grid {
  display: grid;
  grid-template-columns: repeat(4, 336px);
  gap: 48px;
  padding: 0;
  margin: 0 auto 48px auto;
  width: 1420px;
  max-width: calc(100vw - 32px);
  min-height: 100px;
  justify-content: start;
}

/* Карточка */
.product-card {
  box-sizing: border-box;
  background: #fff;
  border: 1px solid #EEEEEE;
  border-radius: 0px;
  width: 336px;
  min-height: 352px;
  display: flex;
  flex-direction: column;
  position: relative;
  transition: border-color 0.2s, box-shadow 0.2s;
  font-family: 'SF UI Text', Arial, sans-serif;
}
.product-card:hover {
  border-color: #eb5757;
  box-shadow: 0 4px 24px #eb57570a;
}

/* Скидка */
.product-card .sale-badge {
  position: absolute;
  top: 8px;
  left: 0;
  width: 81px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #eb5757;
  color: #fff;
  font-size: 14px;
  font-family: 'SF UI Text', Arial, sans-serif;
  font-weight: 500;
}

/* Картинка */
.product-img {
  margin: 9px auto 0 auto;
  display: block;
  width: 238px;
  height: 237px;
  object-fit: contain;
  background: #fff;
}
.product-info {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  flex: 1;
  padding: 0 12px 16px 12px;
}

/* Артикул */
.product-sku {
  font-size: 13px;
  color: #888;
  margin-bottom: 4px;
  margin-top: 19px;
  min-height: 16px;
  letter-spacing: 0.6px;
  font-family: 'SF UI Text', Arial, sans-serif;
}
/* Наименование */
.product-title {
  font-family: 'SF UI Text', Arial, sans-serif;
  font-size: 16px;
  font-weight: 600 /* в макете medium, но макет не выглядит как медиум, а как семиболд или болд*/;
  color: #222;
  margin-bottom: 2px;
  margin-top: 2px;
  max-width: 228px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Цены */
.product-prices {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 0;
}
.old-price {
  font-size: 16px;
  color: #bbb;
  text-decoration: line-through;
}
.price {
  font-size: 16px;
  font-weight: medium;
  color: #111;
}

/* Иконки */
.product-actions {
  position: absolute;
  right: 12px;
  bottom: 12px;
  display: flex;
  gap: 11px;
  z-index: 3;
}
.icon-btn {
  width: 36px;
  height: 36px;
  border: none;
  outline: none;
  background: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: filter 0.2s, background 0.2s, box-shadow 0.2s;
  border-radius: 50%;
  padding: 0;
}
.icon-btn:active {
  filter: brightness(0.93);
}
.icon-btn:hover:not(.active) {
  background: #f4f4f4;
  box-shadow: 0 2px 10px #eb575733;
}
.icon-heart .heart {
  fill: none;
  stroke: #222;
  stroke-width: 2;
  transition: fill 0.15s, stroke 0.2s;
}
.icon-heart.active .heart {
  fill: #eb5757;
  stroke: #eb5757;
}
.icon-cart .cart,
.icon-cart .check {
  stroke: #222;
  stroke-width: 2.2;
  fill: none;
  transition: stroke 0.15s, fill 0.22s;
}
.icon-cart.active .check {
  stroke: #27ae60;
  fill: #27ae60;
}
.icon-cart.active {
  background: #d8f5e0;
}
.icon-cart .cart {
  display: block;
}
.icon-cart .check {
  display: none;
}
.icon-cart.active .cart {
  display: none;
}
.icon-cart.active .check {
  display: block;
}

@media (max-width: 1519px) {
  .products-outer, .breadcrumbs, .filters, .page-title {
    width: 100vw;
    max-width: 100vw;
  }
  .products-grid {
    width: 100vw;
    max-width: 100vw;
    grid-template-columns: repeat( 4, minmax(260px, 1fr) );
    gap: 22px;
    justify-content: center;
  }
  .page-title {padding-left: 2%;}
  .breadcrumbs {padding-left: 2%;}
}
@media (max-width: 1399px) and (min-width: 1000px) {
  .products-grid { grid-template-columns: repeat(3, 1fr); gap: 20px; }
  .products-outer, .filters { padding: 0 24px; }
  .page-title {padding-left: 2%;}
  .breadcrumbs {padding-left: 2%;}
}
@media (max-width: 1025px) and (min-width: 768px) {
  .products-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .products-outer, .filters { padding: 0 10px; }
  .page-title {padding-left: 2%;}
  .breadcrumbs {padding-left: 2%;}
}
@media (max-width: 768px) {
  body, .products-outer, .products-grid, .filters, .breadcrumbs, .page-title {
    padding-left: 1%;
    padding-right: 8px;
    box-sizing: border-box;
  }
  .filters {
    flex-direction: column;
    gap: 12px;
    width: 100%;
  }
  .filter-group {
    min-width: 0;
    width: 100%;
  }
  select {
    font-size: 14px;
    padding: 12px 24px 12px 12px;
  }
  .products-grid {
    grid-template-columns: 1fr;
    gap: 16px;
    width: 100%;
    padding-left: 8px;
    padding-right: 8px;
  }
  .product-card {
    width: 100%;
    min-width: 0;
    min-height: 220px;
    padding: 8px;
	 margin: 0 auto 12px auto;
    box-sizing: border-box;
  }
  .product-img {
    width: 90px;
    height: 90px;
    margin-bottom: 12px;
    margin-top: 6px;
  }
  .product-title,
  .product-sku,
  .price,
  .old-price {
    font-size: 15px;
  }
  .product-info {
    padding: 0 8px 8px 8px;
  }
  .icon-btn {
    width: 28px;
    height: 28px;
  }
  .product-actions {
    right: 6px;
    bottom: 6px;
  }
  .product-card .sale-badge {
    width: 60px;
    height: 20px;
    font-size: 12px;
  }
  .page-title {
	 padding-left: 1%;
    font-size: 18px;
    margin-bottom: 14px;
  }
  .breadcrumbs {
	 padding-left: 1%;
    font-size: 13px;
    margin-bottom: 10px;
  }
  .product-img {
    width: 180px !important;
    height: 200px !important;
    margin-bottom: 14px;
    margin-top: 8px;
    display: block;
  }
}
body, .products-outer, .products-grid {
  scrollbar-color: #eb5757 #fff; /* Firefox */
  scrollbar-width: thin;
}
::-webkit-scrollbar {
  width: 7px;
  border-radius: 6px;
  background: #f8f8f8;
}
::-webkit-scrollbar-thumb {
  background: #eb5757;
  border-radius: 6px;
  min-height: 20px;
}
::-webkit-scrollbar-corner {
  background: #fff;
}