:root {
        --e-global-color-primary: #DCE9C9;
        --e-global-color-text: #433B38;
        --e-global-color-secondary: #FFFDEE;
        --e-global-typography-primary-font-family: "cinzel(RU)";
        --e-global-typography-text-font-family: "Century Gothic";
    }

    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    .name-space {
        max-width: 1400px;
        margin: 0 auto;
      }

    .filetered-area {
      max-width: 1400px;
      margin: 0 auto;
      font-family: var(--e-global-typography-text-font-family), sans-serif;
      background: var(--e-global-color-secondary);
      padding: 0px;
      color: var(--e-global-color-text);
    }

    .product-table {
      margin: 0 auto;
      max-width: 1400px;
      padding-top: 40px;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      justify-content: center;
      gap: 20px
    }

    .product-card {
      border-radius: 10px;
      box-shadow: 0px 0px 15px 0px rgba(220, 233, 201, 0.3764705882352941);
      width: 380px;
      height: 582px;
      overflow: hidden;
      transition: transform 0.3s ease;
      position: relative;
    }

    .product-image {
      position: relative;
      height: 316px;
      overflow: hidden;
    }

    .search-placeholder, .search-button {
      padding: 0px !important;
    }

    .product-image img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .cart-icon {
      position: absolute;
      bottom: 15px;
      right: 15px;
      max-width: 50px;
      max-height: 50px;
      border-radius: 10px;
      cursor: pointer;
      object-fit: cover;
    }

    .product-info {
      padding: 20px;
    }

    .product-name {
      font-size: 26px;
      font-weight: bold;
      margin-bottom: 20px;
    }

    .product-price {
      font-size: 22px;
      margin-bottom: 20px;
    }

    .buy-button {
      width: 100% !important;
      height: 60px !important;
      padding: 12px !important;
      background-color: var(--e-global-color-primary) !important;
      border: none !important;
      border-radius: 10px !important;
      font-size: 26px !important;
      cursor: pointer !important;
      transition: background-color 0.3s ease !important;
      margin-bottom: 6px !important;
      box-shadow: 0px 6px 0px 0px #A3BCA2 !important;
      color: var(--e-global-color-text) !important;
    }

    .details-link {
      text-align: center;
      position: relative;
      display: block;
      width: fit-content;
      text-decoration: none;
      font-size: 18px;
      font-weight: bold;
      margin: auto;
      color: var(--e-global-color-text) !important;
      transition: color 0.3s ease;
    }

    a {
      text-decoration: none;
      color: inherit;
    }

    .details-link::after {
      content: "";
      left: 0;
      bottom: 0;
      width: 100%;
      width: 100%;
      height: inherit;
      position: absolute;
      border-bottom: var(--e-global-color-text) solid 2px;
    }

    .filters {
      display: flex;
      gap: 40px;
      align-items: flex-start;
    }

    .filter-group {
      position: relative;
      cursor: pointer;
    }

    .filter-title {
      font-size: 24px;
    }

    .fileter-in-catigory {
      padding-left: 10px;
    }

    .filter-title.active {
      color: var(--e-global-color-primary);
    }

    .dropdown {
      position: absolute;
      top: 100%;
      left: -50%;
      border-radius: 10px;
      padding: 16px;
      box-shadow: 0 4px 16px rgba(0,0,0,0.1);
      background-color: var(--e-global-color-secondary);
      display: none;
      flex-direction: column;
      gap: 12px;
      z-index: 10;
    }

    .filter-group:hover .dropdown,
    .dropdown:hover {
      display: flex;
    }

    .checkbox {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 20px;
      color: #3c3c3c;
    }

    .checkbox input[type="checkbox"] {
      appearance: none;
      width: 20px;
      height: 20px;
      border: 2px solid #a8c4a0;
      border-radius: 4px;
      background: #f6f6f6;
      display: inline-block;
      position: relative;
      cursor: pointer;
    }

    .checkbox input[type="checkbox"]:checked::after {
      content: "✔";
      color: #3c3c3c;
      position: absolute;
      left: 2px;
      top: -2px;
      font-size: 18px;
    }

    /* Цена */
    .price-dropdown {
      width: 180px;
    }

    .slider-container {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
    }

    .slider-container input[type="range"] {
      width: 100%;
      -webkit-appearance: none;
      height: 6px;
      background: #cde3c9;
      border-radius: 3px;
      outline: none;
    }

    .slider-container input[type="range"]::-webkit-slider-thumb {
      -webkit-appearance: none;
      appearance: none;
      width: 16px;
      height: 16px;
      border-radius: 50%;
      background: #a8c4a0;
      cursor: pointer;
      border: none;
    }



    .found-count {
        font-size: 16px;
        color: var(--e-global-color-text);
    }

    .found-count strong {
        font-weight: 700;
    }

    .search-div {
        display: flex;
        margin-left: auto;
        align-items: center;
        gap: 20px;
    }

    .search-form {
        display: flex;
        align-items: center;
        border: 1px solid var(--e-global-color-primary);
        border-radius: 6px;
        padding: 6px 10px;
        background-color: var(--e-global-color-secondary);
    }

    .search-form input[type="text"] {
        border: none;
        background: transparent;
        font-size: 16px;
        outline: none;
        padding-right: 5px;
        width: 120px;
        color: var(--e-global-color-text);
    }

    input::placeholder {
        color: var(--e-global-color-primary);
        opacity: 1;
    }

    .search-button {
        background: none !important;
	background-color: none !important;
        border: none;
        cursor: pointer;
        font-size: 18px;
        color: #a7c4a0;
    }

    .cart {
    	display: flex !important;
    	width: 100%;
    	column-gap: 20px;
    }

    .full-card {
        display: flex;
        gap: 40px;
        max-width: 1400px;
        width: 1400px;
        margin: 40px auto;
        padding: 0px;
    }

    .left-block {
    	max-width: 480px;
    }	
   

    .left-block h1 {
        font-weight: 480px;
        font-size: 42px;
        line-height: 1.3;
        text-transform: uppercase;
        margin-bottom: 24px;
        padding-bottom: 6px;
        width: 500px;
        max-width: 500px;
        font-family: var(--e-global-typography-primary-font-family), sans-serif;
    }

    .left-block > p {
    	font-size: 20px !important;
    }

   .left-block > a {
   	font-size: 22px;
	color: var(--e-global-color-text);
   } 

    .wave-product-h1 {
        font-weight: 500;
        font-size: 42px;
        line-height: 1.3;
        text-transform: uppercase;
        margin-bottom: 24px;
        padding-bottom: 6px;
        width: 500px;
        max-width: 500px;
        font-family: var(--e-global-typography-primary-font-family), sans-serif;
    }

    .left-block .description {
        font-weight: 400;
        font-size: 20px;
        line-height: 1.5;
        max-width: 480px;
        margin-bottom: 24px;
    }

    .instruction-link {
        font-weight: 700;
        font-size: 16px;
        text-decoration: underline;
        cursor: pointer;
    }

    .center-block {
        position: relative;
        max-width: 380px;
    }

    .center-block img {
        width: 380px;
	height: 100%;
        border-radius: 12px;
        object-fit: cover;
	max-width: none !important;
    }

    .carousel-controls {
        position: absolute;
        bottom: 12px;
        right: calc(50% - 50px);
        display: flex;
        gap: 10px;
    }

    .carousel-btn {
        border: none !important;
        border-radius: 8px !important;
        width: 36px !important;
        height: 36px !important;
        font-size: 20px !important;
        cursor: pointer !important;
        transition: background-color 0.3s ease !important;
        background-color: var(--e-global-color-primary) !important;
    	color: var(--e-global-color-text) !important;
    	padding: 0px;
	padding-inline: inherit !important;
    }

    .right-block {
        display: grid;
        border-radius: 8px;
        row-gap: 40px;
    }

    .info {
        display: grid;
        font-size: 22px;
        row-gap: 20px;
	max-width: 460px;
    }

    .info > p {
    	margin-block-end: 0px;
    }

    .price-label {
      font-size: 20px;
    }

    .buttons-card {
        display: flex;
        column-gap: 20px;
    }

    .btn-buy {
        max-width: 200px;
    }
    
    .btn-cart {
        max-width: 60px;
    }

    .site-main {
      max-width: 1400px !important;
    }



    @media (max-width: 1200px) {
   
  .site-main {
    max-width: 1400px !important;
  }
  .product-table {
    grid-template-columns: repeat(2, 1fr);
  }

  .full-card {
    width: 100%;
    flex-direction: column;
    align-items: center;
  }

  .left-block h1,
  .wave-product-h1 {
    font-size: 36px;
    width: 100%;
    max-width: 100%;
  }

  .left-block .description {
    font-size: 18px;
    max-width: 100%;
  }
}

/* 📱 Для мобильных */
@media (max-width: 768px) {

  .filetered-area {
    margin: 0 10px;
  }

  .name-space {
    margin: 0 10px;
  }

  .filters {
    flex-direction: column;
    gap: 20px;
    align-items: flex-start; /* выравниваем по левому краю */
    width: 100%;
  }

  .filter-group {
    position: relative;
    display: inline-block; /* теперь ширина = ширине заголовка */
  }

  .filter-title {
    display: inline-block;
    font-size: 20px;
    font-weight: 400;
    cursor: pointer;
  }

  /* дропдаун открывается справа от текста */
  .dropdown {
    position: absolute;
    top: 0;
    left: 100%; /* ровно от края текста */
    margin-left: -2px;
    min-width: 160px;
    border: 1px solid #cde3c9;
    background: var(--e-global-color-secondary);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  }

  .price-dropdown {
    min-width: 200px;
  }

  /* поиск на всю ширину */
  .search-div {
    flex-direction: column;
    gap: 10px;
    width: 100% !important;
  }

  .search-form {
    width: 100% !important;
    max-width: 100% !important;
  }

  .search-form input[type="text"] {
    width: 100%;
  }

  .found-count {
    order: 2;
    text-align: left;
    width: 100%;
  }
}

.name-space > h1 {
  font-family: "cinzel(RU)", sans-serif;
  font-size: 42px;
}
.name-space > p {
  font-family: "Century Gothic", sans-serif;
  font-size: 24px;
}


@media (max-width: 480px) {
  .filter-title {
    font-size: 18px;
  }

  .product-name {
    font-size: 20px;
  }

  .product-price {
    font-size: 18px;
  }

  .left-block h1,
  .wave-product-h1 {
    font-size: 28px;
  }

  .left-block .description {
    font-size: 16px;
  }

  .buttons-card {
    flex-direction: column;
    gap: 12px;
  }
}

.fade-in {
  opacity: 0;
  animation: fadeIn 0.8s ease forwards;
}

/* Fade In */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Fade In Up */
.fade-in-up {
  opacity: 0;
  transform: translateY(20px);
  animation: fadeInUp 0.8s ease forwards;
}

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

/* Fade In Down */
.fade-in-down {
  opacity: 0;
  transform: translateY(-20px);
  animation: fadeInDown 0.8s ease forwards;
}

@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Fade In Left */
.fade-in-left {
  opacity: 0;
  transform: translateX(-20px);
  animation: fadeInLeft 0.8s ease forwards;
}

@keyframes fadeInLeft {
  from {
    opacity: 0;
    transform: translateX(-20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Fade In Right */
.fade-in-right {
  opacity: 0;
  transform: translateX(20px);
  animation: fadeInRight 0.8s ease forwards;
}

@keyframes fadeInRight {
  from {
    opacity: 0;
    transform: translateX(20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}