ul.products {
  display: flex;
  flex-wrap: wrap;
  list-style-type: none;
  padding: 0;
  max-width: 100%;
  overflow: hidden;
  padding-bottom: 1rem;

  --border-card: 0px;
}

.products ul {
  list-style-type: none;
  padding-left: 0;
}

ul.products > li {
  position: relative;
  aspect-ratio: 1 / 1;
}

ul.products li img.product-img {
  aspect-ratio: 1/1;
  width: 100%;
  object-fit: cover;
}

ul.products li img.product-sticker {
  position: absolute;
  right: -1rem;
  left: auto;
  width: 160px;
  bottom: -1rem;
  pointer-events: none;
  visibility: hidden;
  display: none;

  max-height: 45%;
  width: auto;
  height: 100%;
  object-fit: contain;
  object-position: bottom;
  max-width: 35%;
  z-index: 12;
}

ul.products li:hover img.product-sticker {
  visibility: visible;
  display: block;
}

ul.products .product-tags {
  position: absolute;
  background-color: var(--dark);

  bottom: 0;
  left: 0;

  z-index: 2;

  text-align: left;
  padding: 0.75rem 1rem;

  pointer-events: none;
  transition: opacity 0.2s ease;
  max-width: calc(100% - 16px);
}

ul.products li div:not(.product-cta) {
  background-color: var(--dark);

  text-align: left;
  padding: 1rem 1rem 2.5rem 1rem;

  pointer-events: none;
  transition: opacity 0.2s ease;
}

ul.products .product-tags {
  top: 0;
  left: 0;
  bottom: auto;
  opacity: 1;
  display: none;
}

ul.products .product-tags li {
  font-size: 1.75rem;
  font-family: var(--f-family);
  font-weight: 500;
  letter-spacing: 1px;
}

ul.products li div h3 {
  font-size: 1.75rem;

  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: calc(100%);
}

ul.products li div .price {
  font-size: 1.2rem;
}

ul.products li .product-cta {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
}

ul.products li:hover .product-cta {
  opacity: 1;
}

ul.products li {
  position: relative;
  width: calc(50% - var(--border-card));
}

/* Medium devices (tablets/desktops, 768px and up) */
@media only screen and (min-width: 860px) {
  ul.products li {
    width: calc(33.33% - var(--border-card));
  }

  ul.products li div:not(.product-cta) {
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 2;
    padding: 0.75rem 1rem;
    max-width: calc(100% - 16px);
  }
}

/* Large devices (large laptops and desktops, 1168px and up) */
@media only screen and (min-width: 1168px) {
  ul.products li {
    width: calc(25% - var(--border-card));
  }
}

/* Large devices (large laptops and desktops, 1168px and up) */
@media only screen and (min-width: 1400px) {
  ul.products li {
    width: calc(20% - var(--border-card));
  }
}

/* Large devices (large laptops and desktops, 1168px and up) */
@media only screen and (min-width: 1800px) {
  ul.products li {
    width: calc(16.66666% - var(--border-card));
  }
}

.product-card .button_list {
  position: absolute;
  right: 0.5rem;
  top: 0.5rem;
}

a.button_list {
  transition: transform 0.5s ease;
}

a.button_list:hover {
  transform: scale(0.8);
}

a.button_list:active {
  transform: scale(1.4);
}

.onsale {
  display: none;
}

.product-card:before {
  content: "";
  height: 100%;
  width: 100%;
  position: absolute;
  background-color: rgba(0, 0, 0, 0);
  pointer-events: none;
  transition: background-color 0.3s ease;
}

.product-card:hover:before {
  background-color: rgba(0, 0, 0, 0.7);
}

/* */

body .searchandfilter .meta-slider {
  margin: 1rem auto;
}

body .searchandfilter {
  margin: 0 auto;
}

li.sf-field-search,
li.sf-field-post-meta-_price,
body .searchandfilter ul li[data-sf-field-type="taxonomy"] {
  width: 100%;
}

.searchandfilter ul li.sf-field-reset,
.searchandfilter ul li.sf-field-submit {
  width: fit-content;
  margin: 0 0.5rem;
  padding: 0;
}

body .searchandfilter ul li[data-sf-field-type="taxonomy"] ul {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  padding: 1rem;
  align-items: center;
  justify-content: flex-start;
}

/* Style for the checkbox elements */
body .searchandfilter ul li[data-sf-field-type="taxonomy"] input[type="radio"],
body
  .searchandfilter
  ul
  li[data-sf-field-type="taxonomy"]
  input[type="checkbox"] {
  display: none;
}

/* Style each label to look like a button */
body .searchandfilter ul li[data-sf-field-type="taxonomy"] label {
  font-family: "kaarna";
  display: flex;
  justify-content: center;
  align-items: center;

  color: white;
  text-transform: none;
  font-size: 24px;
  cursor: pointer;

  padding: 0;
  margin: 0;
  padding-left: 0px;
  letter-spacing: 1px;
}

/* Style each label to look like a button */
body .searchandfilter li[data-sf-field-type="taxonomy"] ul li {
  padding: 0;
  margin: 0;
}

/* When checkbox is checked, change label style */
body
  .searchandfilter
  li[data-sf-field-type="taxonomy"]
  ul
  input[type="radio"]:checked
  + label:before,
body
  .searchandfilter
  li[data-sf-field-type="taxonomy"]
  ul
  input[type="checkbox"]:checked
  + label:before {
  background-color: #fff;
}

body .searchandfilter li[data-sf-field-type="taxonomy"] ul label:before {
  content: "";
  height: 8px;
  width: 8px;
  margin-right: 0.25rem;
  border: 4px solid white;
  display: inline-block;
}

body
  .searchandfilter
  li[data-sf-field-type="taxonomy"]
  ul
  input[type="radio"]
  + label:before {
  border-radius: 50px;
}

/* */
body .searchandfilter ul {
  margin-top: 0;
  margin-bottom: 0;
  padding-left: 0;
  text-align: center;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

.sf-field-taxonomy-pa_color,
.sf-field-taxonomy-product_tag {
  padding-bottom: 1.5rem;
}

body .searchandfilter input:hover + label {
  opacity: 0.7;
}

body .searchandfilter .sf-field-taxonomy-pa_color ul label:before {
  height: 35px !important;
  width: 35px !important;
}

.sf-field-submit > input,
a.search-filter-reset {
  font-family: "kaarna", Sans-serif;
  font-size: 1.5rem;
  font-weight: 500;
  text-transform: uppercase;
  line-height: 1em;
  letter-spacing: 1px;
  color: #ffffff;
  background-color: #000000;
  border-style: solid;
  border-width: 4px 4px 4px 4px;
  border-color: var(--e-global-color-primary);
  border-radius: 0px 0px 0px 0px;

  padding: 0.5rem 1rem;
}

a.search-filter-reset:hover {
  text-decoration: none;
}

body
  .searchandfilter
  .sf-field-taxonomy-pa_color
  input[type="checkbox"]
  + label:before {
  border: none;
  margin-right: 0;
}

body
  .searchandfilter
  .sf-field-taxonomy-pa_color
  input[type="checkbox"]:checked
  + label:before {
  border: 4px solid white;
}

body
  .searchandfilter
  .sf-field-taxonomy-pa_color
  input[type="checkbox"]
  + label {
  font-size: 0px;
  font-size: 0px;
  gap: 0;
  margin: 0;
  padding: 0;
  display: block !important;
}

body .searchandfilter .sf-field-taxonomy-pa_color ul {
  gap: 0.5rem !important;
}

body
  .searchandfilter
  .sf-field-taxonomy-pa_color
  input[type="checkbox"]
  + label
  span {
  display: none;
}

body .searchandfilter .sf-field-taxonomy-pa_color input:checked ~ label:before {
  transform: scale(1.3);
}

body
  .searchandfilter
  .sf-field-taxonomy-pa_color
  input[value="schwarz"]
  ~ label:before {
  border: 1px solid white;
  background-color: black !important;
}

body
  .searchandfilter
  .sf-field-taxonomy-pa_color
  input[value="schwarz"]:checked
  ~ label:before {
  background-color: black !important;
}

body
  .searchandfilter
  .sf-field-taxonomy-pa_color
  input[value="weiss"]
  ~ label:before {
  background-color: white;
}

body
  .searchandfilter
  .sf-field-taxonomy-pa_color
  input[value="weiss"]:checked
  ~ label:before {
  border: 4px solid gray;
}

body
  .searchandfilter
  .sf-field-taxonomy-pa_color
  input[value="s-w"]
  ~ label:before {
  background: linear-gradient(45deg, black 50%, white 50%);

  border: 1px solid white;
}

body
  .searchandfilter
  .sf-field-taxonomy-pa_color
  input[value="s-w"]:checked
  ~ label:before {
  border: 4px solid gray;
}

/* */
body #shop-buttons {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-content: center;

  max-width: min(960px, 90%);
  margin: 0 auto;
  gap: 6px;
}

body #shop-buttons a,
body #shop-buttons a button {
  width: 100%;
}

body #shop-buttons button.active {
  color: var(--light);
  background-color: var(--dark);

  pointer-events: none;
}

body:not(.show-filter) #filter-box {
  right: -100%;
}

#filtder-box {
  position: fixed;
  max-height: 90svh;
  height: fit-content;
  max-height: calc(100lvh - 164px + var(--admin-bar, 0) - 9.75rem);

  left: 50%;
  right: 50%;
  transform: translateX(-50%);
  bottom: 6rem;
  z-index: 15;
  background-color: var(--dark);
  padding-bottom: 1rem;
  overflow-y: auto;

  transition: all 1s ease;

  width: 100%;
  max-width: min(960px, 90%);
}

#filter-box {
  position: fixed;
  max-height: 100svh;
  height: 100%;
  max-height: calc(100lvh - var(--admin-bar) * 2);

  left: auto;
  right: 0;

  bottom: 0rem;
  z-index: 25;
  background-color: var(--dark);

  overflow-y: auto;

  transition: all 1s ease;

  width: min(75%, 650px);

  min-width: 320px;
}

#shop-filter-button svg {
  max-width: 20px;
  height: auto;
  display: inline;
  margin-right: 0.5rem;
}

#shop-filter-button {
  position: fixed;
  bottom: 1rem;
  z-index: 20;
  left: 50%;
  right: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: min(960px, 90%);
  padding: 0 0;

  border: 4px solid white;
}

#shop-filter-button button {
  border: none;
}

#shop-filter-button button,
#shop-filter-button a {
  max-width: min(960px, 100%);
  width: 100%;
  text-align: center;
}