@charset "UTF-8";
.product-sku__head {
  display: flex;
  margin-bottom: 16px;
  gap: 12px; }
  @media (max-width: 575px) {
    .product-sku__head {
      margin-bottom: 12px;
      gap: 8px; } }

.product-sku__title {
  font-weight: 600; }

.product-sku__list {
  position: relative;
  display: flex;
  overflow: hidden;
  margin: -2px; }
  .product-sku__list.active {
    z-index: 1;
    max-height: 100%;
    overflow: visible; }
    .product-sku__list.active .product-sku__item:nth-child(n + 14):not(.product-sku__toggler) {
      display: flex; }
    @media (max-width: 1099px) {
      .product-sku__list.active .product-sku__item:nth-child(n + 10):not(.product-sku__toggler) {
        display: flex; } }
    .product-sku__list.active .product-sku__toggler .icon {
      transform: rotate(180deg); }

.product-sku__overflow {
  height: 100%;
  display: flex;
  flex-wrap: wrap;
  padding: 2px;
  gap: 16px;
  background-color: #fff; }
  @media (max-width: 1099px) {
    .product-sku__overflow {
      gap: 12px; } }

.product-sku__item {
  position: relative;
  width: 73px;
  height: 73px;
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  justify-content: center;
  padding: 5px;
  transition: all 0.3s ease;
  border: 1px solid transparent;
  border-radius: 8px;
  background-color: #fff; }
  @media (max-width: 1099px) {
    .product-sku__item {
      width: 55px;
      height: 55px;
      padding: 4px; } }
  .product-sku__item.active {
    pointer-events: none;
    border-color: transparent; }
    .product-sku__item.active:after {
      visibility: visible;
      opacity: 1; }
  .product-sku__item img {
    max-width: 100%;
    max-height: 100%;
    border-radius: 8px; }

.product-sku__item::after, .product-sku__toggler::after {
  position: absolute;
  z-index: 1;
  width: calc(100% + 4px);
  height: calc(100% + 4px);
  visibility: hidden;
  opacity: 0;
  content: "";
  border: 1px solid var(--theme-base-color);
  border-radius: 8px;
  background-color: transparent;
  inset: -2px; }

@media (hover: hover) {
  .product-sku__item:hover, .product-sku__toggler:hover {
    cursor: pointer; }
    .product-sku__item:hover:after, .product-sku__toggler:hover:after {
      opacity: 1;
      visibility: visible; } }

.product-sku__tooltip {
  position: absolute;
  z-index: 10;
  bottom: calc(100% + 6px);
  left: 0;
  width: 125px;
  display: none;
  visibility: hidden;
  opacity: 0;
  padding: 4px 8px;
  transition: all 0.3s ease;
  transform: translateY(20px);
  pointer-events: none;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 3px 20px rgba(0, 0, 0, 0.08); }
  @media (max-width: 1099px) {
    .product-sku__tooltip {
      display: none; } }
  .product-sku__tooltip:after {
    position: absolute;
    top: 100%;
    left: 10px;
    content: "";
    border: 5px solid transparent;
    /* Прозрачные границы */
    border-top: 5px solid #fff;
    /* Добавляем треугольник */ }

.product-sku__toggler {
  position: relative;
  width: 73px;
  height: 73px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  border-radius: 8px;
  background-color: #fff; }
  .product-sku__toggler.visible {
    visibility: visible;
    opacity: 1; }
  @media (max-width: 1099px) {
    .product-sku__toggler {
      width: 55px;
      height: 55px; } }
  .product-sku__toggler .icon {
    fill: var(--theme-base-color); }

.product-sku.product-sku--v2 .product-sku__item {
  width: auto;
  min-width: 72px;
  height: 38px;
  padding: 8px;
  border: none;
  background-color: #f6f6f6; }
  @media (max-width: 1099px) {
    .product-sku.product-sku--v2 .product-sku__item {
      min-width: 62px;
      height: 34px; } }
  .product-sku.product-sku--v2 .product-sku__item:after {
    border-width: 2px; }

.product-sku.product-sku--v2 .product-sku__item-name {
  white-space: nowrap; }

.product-sku.product-sku--v2 .product-sku__toggler {
  width: 76px;
  height: 36px; }
  @media (max-width: 1099px) {
    .product-sku.product-sku--v2 .product-sku__toggler {
      width: 62px;
      height: 34px; } }