/*=============== BREAKPOINTS ===============*/
/* For large devices */
@media screen and (max-width: 1400px) {
    .container {
      max-width: 1140px;
    }
  
    .products__container,
    .showcase__container {
      grid-template-columns: repeat(3, 1fr);
    }
  
    .accounts__container {
      grid-template-columns: 3fr 9fr;
    }
  }
  
  @media screen and (max-width: 1200px) {
    .container {
      max-width: 960px;
    }
  
    .header__top {
      display: none;
    }
  
    .nav {
      height: calc(var(--header-height) + 1.5rem);
    }
  
    .nav__logo-img {
      width: 116px;
    }
  
    .nav__menu {
      position: fixed;
      right: -100%;
      top: 0;
      max-width: 400px;
      width: 100%;
      height: 100%;
      padding: 1.25rem 2rem;
      background-color: var(--body-color);
      z-index: 100;
      flex-direction: column;
      align-items: flex-start;
      row-gap: 2rem;
      box-shadow: 0 0 15px hsl(0, 0%, 0%, 0.1);
      transition: right 0.5s ease-in-out;
      -webkit-transition: right 0.5s ease-in-out;
      -moz-transition: right 0.5s ease-in-out;
      -ms-transition: right 0.5s ease-in-out;
      -o-transition: right 0.5s ease-in-out;
    }
  
    .nav__menu.show-menu {
      right: 0;
    }
  
    .nav__list {
      order: 1;
      flex-direction: column;
      align-items: flex-start;
      row-gap: 1.5rem;
    }
  
    .nav__link {
      font-size: var(--large-font-size);
    }
  
    .header__search .form__input {
      border-color: var(--first-color);
    }
  
    .nav__menu-top,
    .nav__toggle {
      display: flex;
    }
  
    .nav__toggle,
    .nav__close {
      cursor: pointer;
    }
  
    .nav__menu-top {
      align-items: center;
      justify-content: space-between;
      width: 100%;
      margin-bottom: 1.25rem;
    }
  
    .nav__menu-logo img {
      width: 100px;
    }
  
    .nav__close {
      font-size: var(--h1-font-size);
      margin-right: 10px;
    }
  
    .header__action-btn {
      width: 21px;
    }
  
    .home__container {
      grid-template-columns: 5.5fr 6.5fr;
    }
  
    .countdown {
      column-gap: 1rem;
    }
  
    .countdown__period {
      width: 36px;
      height: 36px;
      line-height: 36px;
    }
  
    .countdown__amount::after {
      right: -25%;
      top: 12%;
    }
  
    .swiper-button-next,
    .swiper-button-prev {
      top: -28px;
      width: 26px;
      height: 26px;
    }
  
    .swiper-button-prev {
      right: 36px;
    }
  
    .account__tab {
      padding: 0.75rem 1rem;
    }
  
    .checkout__group:nth-child(2) {
      padding: 1.5rem;
    }
  
    .details__brand {
      margin-block: 0.75rem;
    }
  
    .details__price {
      padding-block: 0.75rem;
    }
  
    .short__description {
      margin-bottom: 1.5rem;
    }
  
    .details__color {
      margin-block: 1.75rem;
    }
  
    .details__size {
      margin-bottom: 2.25rem;
    }
  
    .color__link {
      width: 22px;
      height: 22px;
    }
  
    .size__link {
      padding: 0.375rem 0.625rem;
    }
  
    .details__action {
      margin-bottom: 2.75rem;
    }
  }
  
  /* For medium devices */
  @media screen and (max-width: 992px) {
    .container {
      max-width: 776px;
    }
  
    .home__container,
    .deals__container,
    .checkout__container,
    .newsletter__container,
    .accounts__container,
    .cart__group {
      grid-template-columns: 1fr;
    }
  
    .cart__group {
      row-gap: 2.75rem;
    }
  
    .home__img {
      justify-self: center;
    }
  
    .btn {
      height: 45px;
      line-height: 39px;
    }
  
    .btn--md {
      height: 42px;
      line-height: 35px;
    }
    .btn--sm {
      height: 38px;
      line-height: 35px;
    }
  
    .newsletter__description {
      display: none;
    }
  
    .products__container,
    .showcase__container,
    .footer__container,
    .details__container {
      grid-template-columns: repeat(2, 1fr);
    }
  
    .login,
    .register {
      padding: 1.25rem;
    }
  
    .table thead tr th:nth-child(1),
    .table tbody tr td:nth-child(1) {
      width: 140px;
    }
  
    .table thead tr th:nth-child(2),
    .table tbody tr td:nth-child(2) {
      width: 330px;
    }
  
    .table thead tr th:nth-child(3),
    .table tbody tr td:nth-child(3) {
      width: 80px;
    }
  
    .table thead tr th:nth-child(4),
    .table tbody tr td:nth-child(4) {
      width: 220px;
    }
  
    .table thead tr th:nth-child(5),
    .table tbody tr td:nth-child(5) {
      width: 160px;
    }
  
    .table thead tr th:nth-child(6),
    .table tbody tr td:nth-child(6) {
      width: 100px;
    }
  }
  
  @media screen and (max-width: 768px) {
    main{
      overflow: hidden;
    }
    .container {
      max-width: 570px;
    }
  
    .products__container,
    .showcase__container,
    .footer__container,
    .login-register__container,
    .details__container {
      grid-template-columns: 100%;
    }
  
    .tab__header,
    .tab__body {
      padding: 0.75rem;
    }
  
    .compare__table tr td {
      display: block;
    }
  
    .home__img {
      max-width: 300px;
    }
  }
  
  /* For small devices */
  @media screen and (max-width: 576px) {
    .category__item {
      padding-bottom: 1rem;
    }
  
    .category__img {
      margin-bottom: 1rem;
    }
    .deals__item,
    .checkout__group:nth-child(2) {
      padding: 1.25rem;
    }
  
    .pagination {
      column-gap: 0.5rem;
      margin-top: 2.5rem;
    }
  
    .pagination__link {
      width: 30px;
      height: 30px;
      line-height: 30px;
    }
  
    .placed__order-table th,
    .order__table tr th {
      display: none;
    }
  
    .placed__order-table tr td,
    .order__table tr td,
    .info__table tr th,
    .info__table tr td {
      display: block;
    }
  
    .form__group {
      grid-template-columns: 1fr;
    }
  
    .cart__total {
      padding: 1.25rem;
    }
  
    .payment__methods {
      margin-block: 2.25rem 2.5rem;
    }
  
    .detail__tabs {
      column-gap: 1.25rem;
      margin-bottom: 2rem;
    }
  
    .review__single {
      column-gap: 1rem;
    }
  
    .footer__title {
      margin-top: 0.25rem;
    }
  
    .footer__bottom {
      flex-direction: column;
      align-items: center;
    }
  
    .product__actions {
      display: none;
    }
  
    .header__search {
      max-width: 300px;
    }
  }
  
  @media screen and (max-width: 350px) {
    .action__btn {
      width: 34px;
      height: 34px;
      line-height: 36px;
    }
  
    .cart__btn {
      bottom: 1.4rem;
      right: 1.25rem;
    }
  
    .showcase__item {
      column-gap: 1rem;
    }
  
    .showcase__img {
      width: 70%;
    }
  
    .showcase__content {
      width: calc(100% - 86px);
    }
  
    .swiper-button-next,
    .swiper-button-prev {
      display: none;
    }
  
    .compare__table tr th,
    .cart__total-table tr td {
      display: block;
      width: 100%;
    }
  
    .cart__actions {
      justify-content: center;
    }
  
    .home__img {
      display: none;
    }
  
    .header__search {
      max-width: 270px;
    }
  }