/*
Custom Css
*/

.main_navigation {
  width: 100% !important;

  .navbar-nav {
    max-width: 100% !important;
    width: 100% !important;

    .nav {
      justify-content: space-between !important;
      display: flex !important;
      width: 100% !important;
    }
  }
}

/* === Product Slider Styles === */

.product-main-image img {
  border-radius: 8px;
}

.thumbnails-carousel {
  max-width: 400px;
  margin: 0 auto;
}

.thumbnails-carousel .thumbnail img {
  border: 2px solid transparent;
  transition: border-color 0.3s, transform 0.3s;
}

.thumbnails-carousel .thumbnail img:hover,
.thumbnails-carousel .slick-current img {
  border-color: #007bff;
  transform: scale(1.05);
}

.path-product,
.node-type--product-collection,
.path-user,
.path-my-orders,
.path-cart,
.path-checkout,
.path-my-orders {
  background-color: rgba(248, 249, 250, 1) !important;

  .page__header {
    .block--dc-radix-breadcrumbs,
    .block--dc-radix-page-title {
      display: none;
    }
  }

  .page__content {
    .container {
      .commerce-product {
        .commerce-product-data {
          .field--name-title {
            font-size: 38px !important;
          }

          .brand-product-type,
          .specifications {

            .brand,
            .product-type {

              .field--name-field-brand,
              .field--name-field-product-type {
                display: flex;

                .field__label {
                  font-size: 22px;
                  font-weight: bold !important;

                }

                .field__item {
                  padding-left: 10px;
                  cursor: none;
                  text-decoration: none;
                  color: black;

                  a {
                    cursor: none;
                    text-decoration: none;
                    color: black;
                  }
                }
              }
            }

            .field--name-sku,
            .field--name-field-size,
            .field--name-field-tags,
            .field--name-field-colour {
              display: flex;

              .field__label {
                font-size: 22px;
                font-weight: bold !important;

              }

              .field__item {
                padding-left: 10px;
                cursor: none;
                text-decoration: none;
                color: black;

                a {
                  cursor: none;
                  text-decoration: none;
                  color: black;
                }
              }
            }
          }

          .add-to-cart {
            .field--name-variations {
              .commerce-order-item-add-to-cart-form {
                .field--name-quantity {
                  padding-bottom: 10px;

                  .form-control {
                    padding-bottom: 10px;
                    width: 25%;
                  }
                }
              }
            }
          }
        }
      }

      .block__content {
        display: flex;
        justify-content: center;

        .user-login-form,
        .user-register-form {
          .js-form-item {
            .form-control {
              width: 100%;
            }
          }

          .field--type-image {
            display: none;
          }


          .form-actions {
            padding-top: 10px;

            .js-form-submit {
              background-color: #558073;
              border: none;
            }
          }
        }

        .view-my-orders {
          .view-header {
            display: flex;
            justify-content: center;
            font-size: 42px !important;
            padding-top: 20px !important;
            font-weight: bold !important;
            padding-bottom: 20px;
          }
        }
      }
    }
  }

  .new-user-button {
    .btn-outline-success :hover {
      background-color: #558073 !important;

    }
  }
}



/* change the main navigation hover as per requirement  */
.main_navigation {
  .navbar-nav {
    .nav-item.dropdown {
      position: relative;


      &:hover>.dropdown-menu {
        display: block;
        opacity: 1;
        visibility: visible;
      }


      >a {
        pointer-events: auto;
        cursor: pointer;
      }


      >a.dropdown-toggle::after {
        display: none;
      }


      .dropdown-menu {
        display: none;
        opacity: 0;
        visibility: hidden;
        transition: all 0.2s ease-in-out;
        margin-top: 0;
        border-radius: 0.5rem;


        .dropdown.dropend {
          position: relative;

          &:hover>.dropdown-menu {
            display: block;
            opacity: 1;
            visibility: visible;
            top: 0;
            left: 100%;
            margin-left: 0;
          }

          >a {
            pointer-events: auto;
            cursor: pointer;
          }
        }
      }
    }
  }
}