/* NEW 2024 Cateogry Styles */

* {
  margin: 0;
  padding: 0;
}

body {
  background-color: #f3f3f3 !important;
  color: black !important;
}

/* SPACING */

.space-150 {
  height: 50px;
}

.space-100 {
  height: 50px;
}

.space-15 {
  height: 50px;
}

/* FOOTER */
.h2.hashtag {
  display: none !important;
}

.page-content {
  max-width: 1240px !important;
  width: 100%;
  padding: 0 10px;
  margin: 0 auto;
}

.product-items {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: unset;
  margin-top: 20px;
}

.product-item {
  display: flex;
  width: calc((100% / 2));
  padding: 12px;
  border: 0.75px #d2d1cf solid;
  background-color: #eee;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
}

.price-text,
.item-spec {
  border-bottom: 0.5px solid #c0c0c0;
  display: flex;
  padding: 5px 0px !important;
  align-items: flex-start;
  align-self: stretch;
}

.color-container {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 10px;
}

.details {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 360px;
  width: 100%;
  /* MONITOR ARMS TITLE FIX */
  flex-grow: 1;
}

/* FILTER */

.page-filters {
  margin: 30px 0;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 10px;
}

select#weight {
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 2v20m10-10H2" stroke="black" stroke-width="2" fill="none"/></svg>') !important;
  background-repeat: no-repeat !important;
  background-position: right 5px center !important;
  background-size: 15px !important;
  font-size: 15px;
  background: #eaeaea;
  padding: 5px 10px;
  margin: 0;
  color: black;
}

/* WHEN FILTER IS IN FOCUS, CHANGE TO MINUS SIGN */
select#weight.selected {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M2 12h20" stroke="black" stroke-width="2" fill="none"/></svg>') !important;
}

.filterBtn {
  display: flex;
  padding: 5px;
  justify-content: space-between;
  align-items: center;
  border: 0.5px solid #d2d1cf;
  background: #eaeaea;
  height: 35px;
  width: calc((100% / 2) - 5px);
}

.filter-icon {
  mix-blend-mode: multiply !important;
  border-left: 0.5px solid #d2d1cf;
  padding: 5px 0 5px 5px;
  width: 40px;
}

/* FONTS */

.base {
  font-size: 15px;
  font-style: normal;
  font-weight: 400;
  line-height: 130%; /* 23.4px */
  letter-spacing: -0.18px;
  color: #2f2d2d;
}

.xxl {
  font-size: 25px;
  font-style: normal;
  font-weight: 400;
  line-height: 120%;
  letter-spacing: 0px;
}

.xl {
  font-size: 26px;
  font-style: normal;
  font-weight: 400;
  line-height: 120%; /* 43.2px */
  letter-spacing: -0.72px;
}

.l {
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 120%; /* 31.2px */
}

.m {
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 130%; /* 26px */
  letter-spacing: -0.2px;
}

.s {
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 130%; /* 20.8px */
}

.xs {
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 130%; /* 18.2px */
}

.xxs {
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: 130%; /* 15.6px */
}

.black {
  color: black;
}

.gray {
  color: #6e6e6e;
}

.bold {
  font-family: "NeueMontreal-Bold";
}

.catHeadline {
  margin-bottom: 30px;
}

.catHeadline h1 {
  padding-bottom: 0;
  margin: 0;
  color: black;
  font-family: "neuemontreal-regular";
}

.catHeadline p:nth-of-type(1) {
  display: none;
}

.promoBanner {
  display: flex;
  justify-content: center;
  /* max-width: 1200px; */
}

.sectionContainer {
  background: #162838;
}

.sectionHeader {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  margin-top: 2rem;
}

.sectionContent h2 {
  font-size: 45px;
  border-bottom: none;
  font-weight: normal;
  text-transform: none;
  margin: 0;
  color: white;
  width: 100%;
  padding-bottom: 1rem;
}

.inner-copy {
  display: flex;
  width: 100%;
  flex-wrap: wrap;
  padding: 20px;
  flex-direction: row;
  justify-content: space-between;
  margin: 0 auto;
  max-width: 1230px;
  gap: 10px 20px;
}

.sectionContent p {
  color: white;
  padding-bottom: 0;
  margin: 0;
}

.sectionImg img {
  width: 100vw;
  height: 100%;
}

/* CAROUSEL */

.slick-dots li button:before {
  content: "";
  width: 25px;
  height: 3px;
  background: black;
}

.slide-info {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: baseline;
  margin-top: 2rem;
  color: #6e6e6e;
}

.slide.slick-slide {
  width: 85vw;
  padding: 1rem;
}

.inspo .slick-slide img {
  height: auto;
}

.slide button {
  padding: 9px 10px;
  border-radius: 30px;
  background: #90d6ff;
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: 100%;
  border: none;
}

.product-item img {
  mix-blend-mode: multiply;
}

.h2.hashtag {
  background: #f3f3f3 !important;
  padding-top: 100px !important;
}

/* ACCORDION */
.category-info-accordion {
  max-width: 1100px;
  margin: 0 auto;
  width: 100%;
  padding: 0 20px;
}

.accordion-header {
  max-width: 700px;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 15px;
  align-items: flex-start;
  margin-bottom: 30px;
}

.accordion {
  width: 100%;
  border-top: 0.5px solid #6e6e6e;
}

div[data-toggle="collapse"],
div[data-toggle="collapsed"] {
  width: 100%;
  border-bottom: 0.5px solid #6e6e6e;
  margin: 15px 0;
}

div[aria-expanded="true"] p.tab-font {
  color: black;
}

.tab-font {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
  gap: 10px;
  margin: 0;
  color: #6e6e6e;
}

.collapsed[aria-expanded="false"] .toggle-icon::before {
  content: "+"; /* Default to plus icon */
  font-size: 30px; /* Optional: Adjust the icon size as needed */
  float: right;
  color: #6e6e6e;
}

/* Style for the minus icon when the accordion is expanded */
div[data-toggle="collapse"] .toggle-icon::before {
  content: "\2013";
  font-size: 30px; /* Optional: Adjust the icon size as needed */
  float: right;
  color: #6e6e6e;
}

.chart-row {
  max-width: 600px;
  width: 100%;
}

.chart-info {
  margin: 10px 0 30px;
}

/* MEDIA QUERIES */

/* X-Small devices (portrait phones, 300px and up) */
@media (min-width: 300px) {
  .sectionContent {
    width: 100%;
  }
}

@media (min-width: 576px) {
  .product-item {
    padding: 20px;
  }
}

@media (min-width: 768px) {
  .inspo .slick-slide img {
    height: 600px;
  }

  .product-item {
    width: calc((100% / 3));
  }

  .category-info-accordion {
    max-width: 1100px;
    width: 100%;
    margin: 0 auto;
    padding: 0 20px;
  }

  /* SPACING */

  .space-150 {
    height: 150px;
  }

  .space-100 {
    height: 100px;
  }

  .page-content {
    padding: 0 20px;
  }

  .filterBtn {
    width: calc((100% / 3) - 7px);
  }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
  .base {
    font-size: 18px;
  }

  .xxl {
    font-size: 50px;
  }

  .xl {
    font-size: 36px;
  }

  .l {
    font-size: 26px;
  }

  .m {
    font-size: 20px;
  }

  .s {
    font-size: 16px;
  }

  .xs {
    font-size: 14px;
  }

  .xxs {
    font-size: 12px;
  }

  .slide.slick-slide {
    width: unset;
    padding: unset;
    margin-left: 20px;
  }

  .slide-info {
    flex-direction: row;
    gap: 2rem;
  }

  .filterBtn {
    width: calc((100% / 7) - 9px);
  }
}

@media (min-width: 1024px) {
  #filterDiv select {
    width: 175px;
  }

  form {
    gap: 30px;
  }
}

@media (min-width: 1200px) {
  .inspo .slick-slide img {
    height: 750px;
  }
}