@import url("/css/common/colors.css");
@import url("/css/common/common.css");
@import url("/css/common/nav/normal-nav.css");
@import url("/css/common/nav/responsive-nav.css");
@import url("/css/common/footer.css");

/*sliders*/
@import url("/css/common/sliders/hero-slider.css");
/*sliders*/

/*modals*/
@import url("/css/common/modals/search-results-modal.css");
/*modals*/

/*landingpage*/
@import url("/css/pages/landingpage.css");
/*landingpage*/

/*login register*/
@import url("/css/pages/login-register/login.css");
@import url("/css/pages/login-register/register.css");
/*login register*/

/*my-account*/
@import url("/css/pages/my-account/change-password.css");
@import url("/css/pages/my-account/my-account.css");
@import url("/css/pages/my-account/orders.css");
/*my-account*/

/*cart*/
@import url("/css/pages/cart/cart.css");
/*cart*/

/*article and group pages*/
@import url("/css/pages/articles/articles.css");
@import url("/css/pages/groups/groups.css");
/*article and group pages*/

/*about us and contact*/
@import url("/css/pages/contact/contact.css");
@import url("/css/pages/o-nama/o-nama.css");
/*about us and contact*/

/*gallery and certificates*/
@import url("/css/pages/certificates.css");
@import url("/css/pages/gallery.css");
/*gallery and certificates*/

#products {
  width: 100%;
  background-color: var(--f2-grey);
  padding-top: 2%;
}

#products .container {
  display: flex;
  justify-content: space-between;
}

#products .container:first-child {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 2%;
}

#products .container:first-child span {
  width: 20%;
  font-size: 1.3em;
  font-weight: 300;
  color: rgba(0, 0, 0, 0.6);
}

#products .container:first-child span a {
  color: rgba(0, 0, 0, 0.6);
}

#products .container .top-filters {
  display: flex;
  justify-content: flex-end;
  width: 78%;
}

#products .container .top-filters select {
  outline: none;
  background-color: var(--white-color);
  border-radius: 5px;
  border-color: rgba(0, 0, 0, 0.3);
  height: 30px;
}

#products #filter {
  width: 20%;
}

#products .filter-box {
  background-color: var(--white-color);
  z-index: 0;
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(0, 0, 0, 0.3);
  padding: 5%;
  margin-bottom: 5%;
  color: rgba(0, 0, 0, 0.7);
}

#products .filter-box span:first-child {
  font-size: 1.2em;
  font-weight: 800;
}

#products .filter-box input[type="range"] {
  background: #053a5f;
  height: 0.5rem;
}

#products .filter-box ul {
  display: flex;
  flex-direction: column;
}

#products .filter-box ul li {
  margin-top: 5%;
}

#range-slider-input {
  width: 90%;
  z-index: 9;
  margin: auto;
  height: 10px;
}

#range-slider-input .noUi-connect {
  background: var(--middle-grey);
  z-index: 9;
}

#range-slider-input .noUi-handle {
  height: 18px;
  width: 18px;
  top: -5px;
  right: -9px;
  border-radius: 9px;
  background: var(--main-color);
  box-shadow: none;
  z-index: 9;
}

#products .range-filter > span:nth-child(2) {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

#products .products-grid {
  width: 78%;
  height: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 40px;
  margin-bottom: 5%;
}

#products .product-card {
  flex: 1;
  border: 1px solid rgba(0, 0, 0, 0.3);
  border-radius: 5px;
  background-color: var(--white-color);
  transition: 0.3s;
}

#products .product-card:hover {
  box-shadow: var(--main-shadow);
}

#products .product-card-container {
  display: flex;
  flex-direction: column;
  width: 80%;
  margin: auto;
}

#products .product-card img {
  width: 100%;
  margin-top: 10%;
  max-height: 200px;
  max-height: 200px;
}

#products .product-card-container p {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  -webkit-line-clamp: 2;
  text-overflow: ellipsis;
  font-size: 1.4em;
  font-weight: 600;
  color: rgba(0, 0, 0, 0.7);
}

#products .product-card-box {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10%;
}

#products .product-card-box p {
  margin: 0;
  font-weight: 400;
  font-size: 1.3em;
}

#product {
  width: 100%;
  margin: 5% 0;
}

#product .container {
  width: 80%;
}

#product .product-first-glance {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

#product .product-first-glance-box:first-child {
  width: 40%;
}

#product .product-first-glance-box:last-child {
  width: 55%;
}

#product .product-first-glance-box:last-child div {
  margin-bottom: 5%;
}

#product .product-first-glance-box:last-child h1 {
  font-size: 2em;
}

.product-slider {
  display: flex;
  flex-direction: column;
}

.product-slider > img {
  width: 100% !important;
  border: 1px solid rgba(0, 0, 0, 0.3);
  border-radius: 15px;
  margin-bottom: 3%;
  max-height: 400px;
  max-width: 400px;
}

.product-slider .slider-small-images {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 2%;
}

.product-slider .slider-small-images img {
  width: 100% !important;
  border: 1px solid rgba(0, 0, 0, 0.3);
  border-radius: 15px;
  cursor: pointer;
  max-height: 90px;
  max-width: 90px;
}

#product .product-reviews {
  margin-top: 5%;
}

#product .product-reviews ion-icon {
  font-size: 1.4em;
  color: rgb(97, 97, 31);
}

#product .product-price p {
  font-size: 1.5em;
}

#product .product-on-stock {
  display: flex;
  align-items: center;
  color: var(--main-color);
}

#product .product-off-stock {
  display: flex;
  align-items: center;
  color: var(--error-color);
}

#product .product-on-stock span {
  margin-left: 2%;
}

#product .product-choose-colors {
  display: flex;
  flex-direction: row;
  width: 60%;
  justify-content: space-between;
}

#product .product-choose-colors div {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 1px solid #808080;
}

#product .product-choose-colors div:first-child {
  background-color: rgb(139, 99, 99);
}

#product .product-choose-colors div:nth-child(2) {
  background-color: rgb(0, 0, 0);
}

#product .product-choose-colors div:nth-child(3) {
  background-color: rgb(255, 255, 255);
}

#product .product-choose-colors div:nth-child(4) {
  background-color: rgb(105, 153, 243);
}

#product .product-choose-colors div:last-child {
  background-color: rgb(160, 202, 160);
}

#product .product-buttons {
  display: flex;
  width: 80%;
  flex-direction: row;
  justify-content: space-between;
}

#product .product-button {
  display: flex;
  justify-content: space-around;
  align-items: center;
  font-size: 1em;
  background-color: var(--main-color);
  border-radius: 10px;
  padding: 2.5% 4%;
  border: 0;
  outline: 0;
  color: var(--white-color);
}

#product .product-short-info {
  font-size: 1.1em;
}

#product .product-second-glance {
  margin-top: 5%;
}

#product .product-second-glance-table-box {
  border-top: 1px solid #dddddd;
}

#product .product-second-glance-table-box:last-child {
  border-bottom: 1px solid #dddddd;
}

#product-second-glance-spec-table-button,
#product-second-glance-desc-button {
  cursor: pointer;
}

#product .product-second-glance-table-box-line {
  padding: 3% 0;
  font-size: 1.4em;
  font-weight: 600;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

#product .product-second-glance-table-box button {
  font-size: 1.5em;
  outline: 0;
  border: none;
  background-color: var(--white-color);
}

#product .product-second-glance-table-box table {
  border-collapse: collapse;
  width: 100%;
}

#product-second-glance-spec-table {
  display: none;
}

#product .product-second-glance-table-box td,
#product .product-second-glance-table-box th {
  border: 1px solid var(--main-color);
  padding: 8px;
}

#product .product-second-glance-table-box tr {
  transition: 0.5s;
}

#product .product-second-glance-table-box tr:nth-child(even) {
  background-color: var(--f2-grey);
}

#product .product-second-glance-table-box tr:hover {
  background-color: #ddd;
}

#product .product-second-glance-table-box th {
  padding-top: 12px;
  padding-bottom: 12px;
  text-align: left;
  background-color: var(--main-color);
  color: var(--white-color);
}

#product-second-glance-desc {
  display: none;
  margin-bottom: 3%;
}

#slider-container {
  width: 80%;
  margin: 50px auto;
  margin-top: 0;
  overflow: hidden;
  position: relative;
}

#slider-container .slider-title {
  text-align: center;
  font-size: 2em;
  font-weight: 600;
}

#sale-slider-wrapper {
  display: flex;
  transition: transform 0.5s ease-in-out;
}

.sale-slider-item {
  flex: 0 0 15%;
  margin-right: 20px;
  border: 1px solid rgba(0, 0, 0, 0.3);
  border-radius: 5px;
  background-color: var(--white-color);
  padding: 20px;
  box-shadow: var(--secondary-shadow);
}

.sale-slider-item img {
  width: 100%;
}

.sale-slider-item-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.sale-circle {
  position: absolute;
  right: 0;
  top: 0;
  background-color: #b93a3e;
  width: 40px;
  height: 40px;
  line-height: 40px;
  color: var(--white-color);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 16px;
  font-weight: 600;
}

.sale-slider-item-container {
  position: relative;
}

.sale-slider-item-container p {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  -webkit-line-clamp: 2;
  text-overflow: ellipsis;
  font-size: 1.4em;
  font-weight: 600;
  color: rgba(0, 0, 0, 0.7);
}

.sale-slider-item-box p {
  margin: 0;
  font-weight: 400;
  font-size: 1.3em;
}

#sale-slider-prev-btn,
#sale-slider-next-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.5em;
  cursor: pointer;
  padding: 2% 1%;
  color: #333;
  transition: 0.5s;
}

#sale-slider-next-btn:hover,
#sale-slider-prev-btn:hover {
  background-color: var(--main-color);
  color: var(--white-color);
}

#sale-slider-prev-btn {
  border-radius: 0px 5px 5px 0px;
  left: 0;
}

#sale-slider-next-btn {
  border-radius: 5px 0px 0px 5px;
  right: 0;
}
/*NEW PRODUCT SLIDER*/
#new-products-slider-container {
  width: 80%;
  margin: 50px auto;
  margin-top: 0;
  overflow: hidden;
  position: relative;
}

#new-products-slider-container .slider-title {
  text-align: center;
  font-size: 2em;
  font-weight: 600;
}

#new-products-slider-wrapper {
  display: flex;
  transition: transform 0.5s ease-in-out;
}

.new-products-slider-item {
  flex: 0 0 15%;
  margin-right: 20px;
  border: 1px solid rgba(0, 0, 0, 0.3);
  border-radius: 5px;
  background-color: var(--white-color);
  padding: 20px;
  box-shadow: var(--secondary-shadow);
}

.new-products-slider-item img {
  width: 100%;
}

.new-products-slider-item-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.new-products-circle {
  position: absolute;
  right: 0;
  top: 0;
  background-color: #b93a3e;
  width: 40px;
  height: 40px;
  line-height: 40px;
  color: var(--white-color);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 16px;
  font-weight: 600;
}

.new-products-slider-item-container {
  position: relative;
}

.new-products-slider-item-container p {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  -webkit-line-clamp: 2;
  text-overflow: ellipsis;
  font-size: 1.4em;
  font-weight: 600;
  color: rgba(0, 0, 0, 0.7);
}

.new-products-slider-item-box p {
  margin: 0;
  font-weight: 400;
  font-size: 1.3em;
}

#new-products-slider-prev-btn,
#new-products-slider-next-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.5em;
  cursor: pointer;
  padding: 2% 1%;
  color: #333;
  transition: 0.5s;
}

#new-products-slider-next-btn:hover,
#new-products-slider-prev-btn:hover {
  background-color: var(--main-color);
  color: var(--white-color);
}

#new-products-slider-prev-btn {
  border-radius: 0px 5px 5px 0px;
  left: 0;
}

#new-products-slider-next-btn {
  border-radius: 5px 0px 0px 5px;
  right: 0;
}