:root {
   --mainColor: #292929;
   --yellowColor: #FFA03C;
   --bgGrey: linear-gradient(93.27deg, rgba(255, 255, 255, 0.7) 5.84%, rgba(196, 196, 196, 0.7) 93.59%);
}

@media only screen and (max-width: 1199px) {
   .card-pr__characteristics-grid,
   .card-pr__grid {
      grid-template-columns: 1fr 1fr;
   }

   .t-footer__wrapper {
      gap: 20px 12px;
      grid-template-columns: repeat(3, 1fr);
   }

   .t-footer__section--2 {
      position: absolute;
      right: clamp(1rem, 0.443rem + 2.29vw, 2.5rem);
      top: 30px;
   }

   .t-social {
      display: flex;
   }

   .t-footer__section--4 {
      grid-row: 2;
      grid-column: 1/-1;
   }

   .t-footer__section--5 {
      grid-column: 2 /span 2;
      grid-row: 3;
   }

   .t-footer__section--2,
   .t-footer__section--3 {
      padding-top: 0;
   }

   .t-footer-address__list {
      display: grid;
      grid-template-columns: calc(33% - 45px) 1fr 1fr;
      align-items: center;
      gap: 12px;
   }

   .t-footer-address {
      align-items: center;
   }
}

@media only screen and (max-width: 959px) {


 #t-filter {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    z-index: 99999999;
    max-height: 100vh;
    border-radius: 0;
    padding-bottom: 60px;
}
   .t-tab-panel__desc {
      max-height: 100%;
      overflow-y: visible;
   }

   #t-filter, #t-mob-menu {
      background: #F6F4F2;
   }


   .t-form__grid {
      grid-template-columns: 1fr 1fr;
   }

   .input-container-textarea,
   .t-form__grid .t-button {
      grid-column: 1 / -1;
   }

   .product-gallery {
      order: 2;
      grid-row: inherit;
   }

   .card-pr__content {
      order: 3;
   }

   /*t-mob-menu__wrapper + all*/
   .t-contacts__item,
   .card-pr__characteristics-grid,
   .t-mob-menu__wrapper {
      grid-template-columns: 1fr;
   }

   .menu-category{
      padding-top: 8px;
   }

   .menu-category__li {
      display: contents;
   }

   .card-pr__title,
   .menu-category__link {      
      order: 1;
   }

   .menu-subcategory {
      margin-top: 24px;
      padding: 0px;
      grid-column: 1/-1;
      display: none; 
      position: static; 
      width: 100%;
      max-height: none; 
      overflow-y: visible;
      order: 2;
   }

   .menu-subcategory__wrapper{
      padding: 20px;
   }

   .menu-category__link:hover {
      background: transparent;
      box-shadow: none;
   }

   /* Стиль для активної (натиснутої) категорії на мобільці */
   .menu-category__li.js-mob-active .menu-category__link {
      background: #fff;
      box-shadow: 0px 4px 4px 0px #0000001A;
   }   

   /* Клас, який буде вмикатися через JS при кліку */
   .menu-category__li.js-mob-active .menu-subcategory {
      display: block !important;
   }
   /*-------------------*/

   .menu-category__list {
      display: grid;
      grid-template-columns: 1fr 1fr;
      column-gap: 2px;
   }

   #t-mob-menu .t-header-other {
      padding-top: 16px;
      gap: 24px;
   }

   .t-md-visible {
      display: flex;
   }

   .t-md-none {
      display: none;
   }

   .t-header-search {
      max-width: none;
   }
   .mobileSearchOpen{
      display: flex;
      position: absolute;
      left: 20px;
      right: 75px;
      width: auto;
   }

   .t-review .t-slider-buttons,
   .t-slider-products .t-slider-buttons {
      display: flex;
      gap: 10px;
      position: absolute;
      top: -70px;
      right: clamp(1rem, 0.443rem + 2.29vw, 2.5rem);
   }

   .t-review .t-slider-buttons .t-button-circle,
   .t-slider-products .t-slider-buttons .t-button-circle {
      position: static;
      margin-top: 0;
   }

   .t-slider-products--456 .t-slider-buttons {
      top: -89px;
   }

   .t-slider-products__head {
      justify-content: flex-start;
   }

   .card-pr__grid {
      grid-template-columns: 100%;
   }

   .t-brands__name {
      font-size: 14px;
   }
}

@media only screen and (max-width: 853px) {
   .review-item-product {
      grid-template-columns: 3.5fr 6fr;
   }

   .product-gallery {
      grid-template-columns: 1fr 156px;
   }

   .material-item__name img {
      width: clamp(2rem, 1.409rem + 2.42vw, 2.5rem);
   }

   .material-item {
      font-size: clamp(0.75rem, 0.455rem + 1.21vw, 1rem);
      padding: 12px 24px;
   }

   .t-about.sec-padding {
      padding-block: clamp(0.625rem, -0.071rem + 2.86vw, 1.25rem);
   }

   .cart-table__td--bottom {
      grid-template-columns: auto;
   }

   .cart-table__delete {
      align-self: flex-start;
      text-align: right;
      order: -1;
   }
}

@media only screen and (max-width: 719px) {
   .t-brands__name {
      display: none;
   }

   .ordering-check-item{
      flex-direction: column;
   }

   .ordering-check-item__text{
      text-align: center;
   }

   .t-footer__wrapper {
      gap: 12px;
      grid-template-columns: 1fr;
      justify-items: center;
   }

   .t-footer__section--1 {
      width: 100%;
      display: flex;
      justify-content: center;
      order: 1;
      padding-bottom: 24px;
      margin-bottom: 12px;
   }

   .t-footer__section--2 {
      position: inherit;
      right: inherit;
      top: inherit;
      order: 5;
   }

   .t-footer__section--3 .t-button-grey,
   .t-footer__section--4 .t-button-grey {
      display: none;
      order: 3;
   }

   .t-footer-address__list {
      grid-template-columns: 1fr;
      text-align: center;
      max-width: 80%;
      margin-inline: auto;
   }

   .t-footer__section--4,
   .t-footer__section--5 {
      grid-row: inherit;
      grid-column: inherit;
   }

   .t-footer__section--3 {
      order: 3;
   }

   .t-footer__section--4 {
      order: 4;
   }

   .t-footer__section--5 {
      order: 2;
      width: 100%;
      padding-bottom: 24px;
      border-bottom: 1px solid #0000001A;
      margin-bottom: 24px;
      gap: 12px;
   }

   .t-footer__wrapper {
      padding-bottom: 0;
      border: none;
   }

   .t-footer-logo {
      display: inline-block;
      width: 205px;
   }

   .t-footer-phone a,
   .t-footer-address__list a {
      position: relative;
      padding-left: 36px;
   }

   .t-footer-phone a::before,
   .t-footer-address__list a::before {
      font-size: 24px;
      position: absolute;
      top: 50%;
      left: 0;
      transform: translateY(-50%);
      content: "\e914";
      font-family: 'icomoon';
   }

   .t-footer-phone a::before {
      content: "\e905";
      top: 60%;
   }

   .item-error__text{
      font-size: 14px;
   }
}

@media only screen and (max-width: 639px) {
   .menu-category__list {
      grid-template-columns: 1fr;
   }
   .menu-category__li {
      display: block;
   }
   .menu-subcategory {
      margin-top: 15px;
      margin-bottom: 15px;
   }
   .t-header-personalarea{
      margin-left: auto;
   }
   .cpc-price-btn, .cpc-cod{
      display: grid;
   }
   .t-form__grid {
      grid-template-columns: 1fr;
   }

   .t-brands__flex {
      justify-content: flex-start;
   }

   .modal__buttons {
      grid-template-columns: 1fr;
      grid-template-rows: 1fr 1fr;
   }

   .brand-item {
      width: calc(20% - 10px);
   }

   #t-mob-menu .t-header-other {
      flex-wrap: wrap;
      justify-content: space-between;
   }

   .t-review .t-slider-buttons,
   .t-slider-products .t-slider-buttons {
      position: static;
      width: 100%;
      justify-content: center;
      margin-top: 32px;
   }

   .t-tab-btn {
      font-size: 12px;
      line-height: 15px;
      padding: 8px 16px;
   }

   .t-slider-products__head {
      justify-content: center;
   }

   .t-catalog-controls {
      display: grid;
      gap: 16px;
   }

   .t-catalog-controls__title {
      font-size: 14px;
   }

   .t-catalog-controls__col .drop-btn {
      padding-inline: 10px;
   }

   .product-gallery {
      display: flex;
      flex-direction: column;
      width: 100%;
   }

   .gallery-main {
      width: 100%;
      aspect-ratio: 360 / 256;
      order: 1;
   }

   .gallery-thumbs-container {
      width: 100%;
      order: 2;
   }

   .gallery-thumbs {
      height: clamp(5.625rem, -2.411rem + 35.71vw, 11.875rem);
   }
}

@media only screen and (max-width: 539px) {
   .cart-table__td--bottom {
      grid-template-columns: auto 1fr;
   }

   .cart-table__delete {
      order: 2;
      align-self: center;
   }

   .cpc-price__price {
      font-size: 32px;
   }

   .cart-table__item,
   .t-article__sec--50,
   .t-del-pay {
      grid-template-columns: 1fr;
   }
}

@media only screen and (max-width:479px) {
   .cart-table__img {
      height: 90px;
      width: 90px;
   }

   .ordering-form{
      padding-top: 0;
   }

   .card-pr-form{
      border-radius: 24px;
      gap: 24px;
   }

   .card-pr-form__row {
      grid-template-columns: 1fr 1fr;
   }

   .menu-category__list,
   .card-pr-form__sec {
      grid-template-columns: 1fr;
   }

   .title-h2--min {
      font-size: 20px;
   }

   .t-button{
      font-size: 16px;
   }

   .t-breadcrumb {
      padding-left: 0;
   }

   .t-news__grid {
      gap: 12px;
   }

   .news-item__img {
      height: clamp(10.625rem, -0.208rem + 44.44vw, 13.125rem);
   }

   .t-contacts {
      text-align: center;
   }

   .rating-bl {
      order: 3;
   }

   .title-bottom--min {
      margin-bottom: 16px;
   }

   .t-tab-panel__desc td {
      font-size: 14px;
   }

   .cpc-price {
      width: 100%;
      justify-content: space-between;
   }

   .cpc-price .icon {
      font-size: 32px;
   }

   .cpc-btn .t-button--circle {
      min-height: 44px;
      font-size: 16px;
      padding: 6px 20px 6px 48px;
   }

   .cpc-btn .t-button--circle:hover {
      padding: 6px 48px 6px 20px;
   }

   .cpc-btn .t-button--circle:hover .t-button--black {
      left: calc(100% - 38px);
   }

   .cpc-btn .t-button--circle .t-button--black {
      height: 32px;
      width: 32px;
      font-size: 18px;
   }

   .menu-category__link,
   .menu-subcategory__li {
      padding-block: 15px;
   }

   .t-header__top {
      width: 100%;
      padding-right: 30px;
   }

   .t-header {
      height: 76px;
   }

   #t-body {
      padding-top: 76px;
   }

   #t-mob-menu {
      max-height: calc(100vh - 76px);
   }

   #t-mob-menu.__open {
      top: 76px;
   }

   .t-header-logo {
      max-width: 180px;
      margin-inline: auto;
   }

   .review-item-product__img {
      grid-row: span 1;
   }

   .review-item-product__button {
      grid-column: 1/-1;
   }

   .material-item {
      padding: 8px 16px;
   }

   .title-h3,
   h3 {
      font-size: 16px;
   }

   .t-description {
      font-size: 14px;
   }
}

@media only screen and (max-width:389px) {
   .menu-subcategory__list {
      column-count: 1;
   }

   .t-cart__buttons .t-button {
      width: 100%;
   }
}

@media only screen and (max-width:359px) {
   .t-container{
      padding-inline: 8px;
   }
}

/*min-width*/
@media only screen and (min-width: 960px) {
   #t-mob-menu .t-header-other {
      display: none;
   }
}

@media only screen and (min-width: 640px) {
   .gallery-thumbs-container .swiper-button-next,
   .gallery-thumbs-container .swiper-button-prev {
      left: 50%;
      margin-top: 0;
      margin-left: -15px;
      transform: rotate(90deg);
   }

   .gallery-thumbs-container .swiper-button-next {
      top: inherit;
      bottom: -5px;
   }

   .gallery-thumbs-container .swiper-button-prev {
      top: -5px;
      transform: rotate(-90deg);
   }

   .brand-item:nth-child(11n + 7),
   .brand-item:nth-child(11n + 8),
   .brand-item:nth-child(11n + 9),
   .brand-item:nth-child(11n + 10),
   .brand-item:nth-child(11n + 11) {
      width: calc(20% - 15px);
   }
}

/*min-max-width*/
@media (min-width: 720px) and (max-width: 851px) {
   .review-item-product__img {
      grid-row: span 1;
   }

   .review-item-product__button {
      grid-column: 1/-1;
   }

   .news-item__img {
      height: clamp(10.625rem, -5.603rem + 35.09vw, 13.125rem);
   }
}

@media (min-width: 390px) and (max-width: 539px) {
   .t-catalog-grid {
      grid-template-columns: 1fr 1fr;
   }

   .t-catalog-grid .t-product__wrapper {
      height: clamp(8.438rem, -8.625rem + 70vw, 15rem);
   }
}

@media only screen and (min-width: 1200px) {
   .t-footer__section--1 {
      grid-column: 1 / 3;
      border: none;
      padding-bottom: 0;
      margin-bottom: 0;
   }

   .t-footer__section--5 {
      grid-column: 3;
      grid-row: 1 / span 3;
   }

   .t-footer__section--2,
   .t-footer__section--3 {
      padding-top: 5px;
   }
}