#products-list-sort {
  border: 1px solid #d4d4d4;
  /* flex-direction: row-reverse; */
  display: flex;
  gap: 4px;
  font-size: 16px;
  height: 40px;
  align-items: center;
  justify-content: center;
  border-radius: 0;
}

#products-list-filter {
  background: #f1f0f0;
  /* flex-direction: row-reverse; */
  display: flex;
  gap: 4px;
  font-size: 16px;
  height: 40px;
  align-items: center;
  justify-content: center;
  border-radius: 0;
}

/* ===========================
    Grid Layout - 4 columns (default)
    =========================== */
.vertical_prod {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  width: 100%;
  gap: 1rem;
  margin: 0 auto;
}

/* ===========================
    3 Columns
    =========================== */
.three_col {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  width: 100%;
  gap: 1rem;
  margin: 0 auto;
}

/* ===========================
    2 Columns
    =========================== */
.two_col {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  width: 100%;
  gap: 1rem;
  margin: 0 auto;
}

/* ===========================
    Single Column (List)
    =========================== */
.single_col {
  display: grid;
  grid-template-columns: 1fr;
  width: 100%;
  gap: 1rem;
  margin: 0 auto;
}

/* ===========================
    Horizontal List View
    =========================== */
.herozintal_prod {
  display: flex;
  flex-direction: column;
  width: 100%;
  gap: 1rem;
  margin: 0 auto;
}

.herozintal_prod .product-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 1rem;
}

.herozintal_prod .sportify-media-wrapper {
  width: 200px;
  flex-shrink: 0;
}

.herozintal_prod .sportify-details {
  flex: 1;
}

/* ===========================
    Responsive
    =========================== */
@media (max-width: 1200px) {
  .vertical_prod {
    grid-template-columns: repeat(3, 1fr);
  }

  .three_col {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .vertical_prod {
    grid-template-columns: repeat(2, 1fr);
  }

  .three_col {
    grid-template-columns: repeat(2, 1fr);
  }

  .two_col {
    grid-template-columns: repeat(2, 1fr);
  }

  .single_col {
    grid-template-columns: 1fr;
  }

  .herozintal_prod .sportify-media-wrapper {
    width: 140px;
  }
}

@media (max-width: 480px) {
  .vertical_prod {
    grid-template-columns: repeat(2, 1fr);
  }

  .three_col {
    grid-template-columns: repeat(2, 1fr);
  }

  .herozintal_prod .product-item {
    flex-direction: column;
  }

  .herozintal_prod .sportify-media-wrapper {
    width: 100%;
  }
}

.product-attributes-light-box {
  .attribute-group {
    border-radius: 0 !important ;

    .attribute-header {
      border-radius: 0 !important;
    }
  }

  .filter-close-btn {
    display: none;
  }

  /* Checkbox square */

  input[type="checkbox"] + .attribute-label::before {
    border-radius: 5px;
  }

  /* Selected state */

  input[type="radio"]:checked + .attribute-label::before,
  input[type="checkbox"]:checked + .attribute-label::before {
    background: var(--primary-color);
    border-color: var(--primary-color);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 8'%3E%3Cpath d='M1 4l2.5 2.5L9 1' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 10px;
  }

  /* ===============================
   Color Swatch
================================= */

  .attribute-label-extra {
    display: flex;
    align-items: center;
  }

  .attribute-color {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid #fff;
    box-shadow: unset;
    transition: 0.2s ease;
  }

  input:checked + .attribute-label .attribute-color {
    box-shadow: unset;
  }

  /* Hide original input */

  .filter-row input[type="checkbox"],
  .filter-row input[type="radio"] {
    display: none;
  }

  /* Label */

  .attribute-label {
    display: flex !important;
    align-items: center !important;
    gap: 0.6rem !important;
    width: 100% !important;
    font-size: 0.9rem !important;
    color: #333 !important;
    background-color: transparent !important;
    justify-content: flex-start !important;
    cursor: pointer !important;
    min-height: 35px !important;
  }

  .attribute-label span {
    font-size: 16px;
  }

  /* Custom checkbox / radio */

  .attribute-label::before {
    content: "";
    width: 25px;
    height: 25px;
    border: 2px solid #ddd;
    border-radius: 50%;
    background: #fff;
    flex-shrink: 0;
    transition: 0.2s ease;
  }

  /* Checkbox square */

  input[type="checkbox"] + .attribute-label::before {
    border-radius: 5px;
  }
  .filter-count {
    display: none;
  }
  .attribute-footer {
    .form-row {
      align-items: center;

      .form-group {
        margin-bottom: 1rem;
        justify-content: center;
        display: flex;
        flex-direction: column;
        align-items: center;
      }
    }
    .highlight-button {
      width: 100%;
      border: 1px solid var(--primary-color);
    }
  }
}

@media (max-width: 768px) {
  /* ===============================
   Product Attributes Wrapper
================================= */

  .product-attributes-show-mobile{
    top: 6% !important;
  }
  .product-attributes {
    transition: all 0.4s ease;
  }

  .product-attributes .product-attributes-light-box-top-section {
    height: 0;
  }

  .product-attributes .attribute-body {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    padding: 0 16px;
  }

    .attribute-arrow-collapse svg ,
  .attribute-arrow-expand svg  {

    width: 16px !important;
    height: 14px !important;
  }

  .attribute-arrow-collapse svg path,
  .attribute-arrow-expand svg path {
    fill: var(--primary-color);
    width: 20px;
    height: 20px;
  }

  /* ===============================
   Filters Container
================================= */

  .product-attributes .products-filters-container {
    transition: 0.4s ease;
    height: 91%;
    overflow-y: auto;
    background-color: #fff;
    max-height: 100%;
    opacity: 1;
  }

  /* .product-attributes .products-filters-container.active {
    max-height: 100%;
    opacity: 1;
  } */

  /* Price body */

  .product-attributes .attribute-body.attribute-price-body {
    flex-direction: column;
    align-items: center;
  }

  .product-attributes .attribute-body.attribute-price-body .form-row {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    flex-direction: row;
    flex-wrap: nowrap;
    width: 100%;
  }

  .product-attributes .attribute-body.attribute-price-body .form-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  .form-group label span,
  .form-group label h6 {
    font-size: 16px;
  }

  .form-control {
    font-size: 14px !important;
    padding: 10px 5px !important;
  }
  /* Footer */

  .product-attributes .attribute-footer {
    display: flex;
    justify-content: center;
    width: 100%;
  }

  .product-attributes .attribute-footer button.highlight-button.btn.btn-sm {
    height: 40px;
    width: 100%;
    background: var(--primary-color);
    color: var(--white-color);
    font-size: 17px;
    border-radius: 5px;
    transition: 0.3s ease;
  }

  .product-attributes
    .attribute-footer
    button.highlight-button.btn.btn-sm:hover {
    background: transparent;
    color: var(--text-color-primary-bg);
    border: 1px solid var(--primary-color);
  }

  /* ===============================
   Filter Rows
================================= */

  .filter-row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.4rem 0.2rem;
    border-radius: 8px;
    transition: background 0.15s;
    cursor: pointer;
  }

  .filter-row:hover {
    background: #f5f5f5;
  }

  /* Hide original input */

  .filter-row input[type="checkbox"],
  .filter-row input[type="radio"] {
    display: none;
  }

  /* Label */

  .attribute-label {
    display: flex !important;
    align-items: center !important;
    gap: 0.6rem !important;
    width: 100% !important;
    font-size: 0.9rem !important;
    color: #333 !important;
    background-color: transparent !important;
    justify-content: flex-start !important;
    cursor: pointer !important;
    min-height: 35px !important;
  }

  .attribute-label span {
    font-size: 16px;
  }

  /* Custom checkbox / radio */

  .attribute-label::before {
    content: "";
    width: 18px;
    height: 18px;
    border: 2px solid #ddd;
    border-radius: 50%;
    background: #fff;
    flex-shrink: 0;
    transition: 0.2s ease;
  }

  /* Checkbox square */

  input[type="checkbox"] + .attribute-label::before {
    border-radius: 5px;
  }

  /* Selected state */

  input[type="radio"]:checked + .attribute-label::before,
  input[type="checkbox"]:checked + .attribute-label::before {
    background: var(--primary-color);
    border-color: var(--primary-color);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 8'%3E%3Cpath d='M1 4l2.5 2.5L9 1' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 10px;
  }

  /* ===============================
   Color Swatch
================================= */

  .attribute-label-extra {
    display: flex;
    align-items: center;
  }

  .attribute-color {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid #fff;
    box-shadow: 0 0 0 1.5px #ddd;
    transition: 0.2s ease;
  }

  input:checked + .attribute-label .attribute-color {
    box-shadow: unset;
  }

  /* ===============================
   Collapse
================================= */

  .filter-content {
    overflow: hidden;
    max-height: 500px;
    opacity: 1;
    transition:
      max-height 0.3s ease,
      opacity 0.2s ease;
    padding: 0.5rem 0;
  }

  .filter-content.collapsed {
    max-height: 0;
    opacity: 0;
    padding: 0;
  }

  /* ===============================
   Header
================================= */
  .attribute-group {
    margin: 25px 0;
  }
  .attribute-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px !important;
    padding-bottom: 0 !important;
    cursor: pointer;
    border-bottom: 1px solid var(--secondary-color-alt0);
    user-select: none;
  }

  .attribute-name {
    font-weight: 700;
    font-size: 18px;
    color: #222;
  }

  .attribute-arrow {
    display: inline-flex !important;
    transition: transform 0.3s ease;
  }

  .attribute-arrow.collapsed {
    transform: rotate(-90deg);
  }

  .filter-count {
    display: none;
  }
  /* ===============================
   Filtration Header
================================= */

  .filtration-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px !important;
    border-bottom: 1px solid var(--secondary-color-alt0);
  }

  .filtration-header span {
    font-weight: 700;
    font-size: 24px;
    color: #222;
  }

  .filter-close-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 6px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    transition: 0.2s ease;
    display: inline-block !important;
  }

  .filter-close-btn:hover {
    background: var(--secondary-color-alt0);
  }

  .filter-close-btn {
    display: flex !important;
    background: none;
    border: none;
    font-size: 20px;
    cursor: pointer;
    color: #555;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    transition: 0.2s ease;
    align-items: center;
    justify-content: center;
  }

  .filter-close-btn:hover {
    background: var(--secondary-color-alt0);
  }
}