:root {
  --iws--color--grey-light: #d9d9d9;
  --iws--color--grey-medium: #808080;
  --iws--color--black: #2c2b29;
  --iws--color--white: #ffffff;
  --iws--color--links: var(--iws--color--black);
  --iws--color--card-bg: #edebe9;
  --iws--color--cta-bg: var(--nectar-extra-color-1);
  --iws--font-size--smaller: 66%;
  --iws--font-size--small: 80%;
  --iws--shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.2),
    0 8px 10px -6px rgb(0 0 0 / 0.2);
  --iws--shadow-3xl: 0 20px 25px -5px rgb(0 0 0 / 0.6),
    0 8px 10px -6px rgb(0 0 0 / 0.6);
  /* --iws--content-max-width: 1425px; */
  --iws--content-max-width: var(--content-width, 1245px);
  --iws--content-whitespace: calc((100vw - var(--iws--content-max-width)) / 2);
}

/*******************************************************************
Filter
*******************************************************************/
#workshop-filter {
  background-color: var(--iws--color--black);
  padding: 1rem;
  margin-bottom: 8rem;
}
#workshop-filter::after {
  background-image: linear-gradient(
    to left,
    var(--iws--color--black),
    transparent
  );
}

#workshop-filter h3,
#workshop-filter ul li a,
#workshop-filter div {
  color: var(--iws--color--white);
  text-transform: uppercase;
}

#workshop-filter h3 {
  text-transform: none;
}

#workshop-filter ul {
  margin: 0px !important;
  padding-block: 0.5rem !important;
}

#workshop-filter ul li {
  line-height: 1rem;
}

#workshop-filter ul li a div {
  width: 1rem;
  height: 1rem;
  border: 1.5px solid var(--iws--color--white);
}

.ws-filter__lastline div {
  font-style: italic;
}

.ws-filter__title p a {
  border-radius: 1.5rem;
  border: 2px solid var(--iws--color--white);
  background-color: var(--iws--color--white);
}
.ws-filter__title p a:hover {
  background-color: transparent;
  color: var(--iws--color--white);
}

/*******************************************************************
Filter switch
*******************************************************************/
.ws-filter__switch-view {
  display: none;
}

/*******************************************************************
Workshop List
*******************************************************************/
#workshop-list {
  position: relative;
  display: grid;
  grid-template-columns: repeat(
    auto-fill,
    minmax(calc(var(--iws--content-max-width) / 4 - 1rem), 1fr)
  ) !important;
  row-gap: 2rem;
  column-gap: 1rem;
  min-width: unset;
  transform: unset;
  margin-left: 0px;
  padding-inline: 0.5rem;
  transition: all 150ms linear;
}

@media screen and (min-width: 1440px) {
  #workshop-list {
    padding-inline: 0;
  }
}

/*******************************************************************
Workshop card
*******************************************************************/
.workshop-card {
  box-shadow: none;
  background-color: var(--iws--color--card-bg);
}

.workshop-card__content__coaches {
  line-height: 1.25em;
  padding-bottom: 0.5em;
}

.workshop-card__color {
}

/*******************************************************************
Wishlist
*******************************************************************/
#wishlist-back-button {
  border-radius: 1.5rem;
  border: 2px solid var(--iws--color--cta-bg);
  background-color: var(--iws--color--cta-bg);
  text-transform: uppercase;
}
#wishlist-back-button:hover {
  background-color: transparent;
  color: var(--iws--color--cta-bg);
}

/*******************************************************************
Detail view (workshop)
*******************************************************************/
.iws-single-grid {
  max-width: var(--container-width);
  padding-bottom: 4rem;
  grid-template-columns: fit-content auto;
  gap: 2rem;
  width: 100%;
}

.workshop-header {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.workshop-header .workshop-types {
  font-weight: 700;
}

.workshop-header h1 {
  color: var(--iws--color--cta-bg);
}

.workshop-hero__image {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  margin-top: 1rem;
  margin-bottom: 1rem;
}

@media screen and (min-width: 540px) {
  .workshop-hero__image {
    aspect-ratio: 4 / 3;
    margin-top: 3rem;
    margin-bottom: 2rem;
  }
}

@media screen and (min-width: 1024px) {
  .workshop-hero__image {
    aspect-ratio: 2.69 / 1;
    margin-top: 3rem;
    margin-bottom: 2rem;
  }
}

.workshop-sidebar {
  padding-top: 0;
  width: fit-content;
  background-color: var(--iws--color--card-bg);
  padding: 1rem;
  width: 100%;
}

.workshop-sidebar ul {
  margin: 0px;
}

.workshop-sidebar .workshop-info {
  display: flex;
  flex-direction: column;
  row-gap: 1rem;
}

.workshop-sidebar__title {
  text-transform: uppercase;
  font-size: var(--iws--text-small);
  text-align: center;
  color: var(--iws--color--grey-medium);
  letter-spacing: 0.15em;
  margin-bottom: 1rem;
}

.workshop-sidebar .workshop-types {
  text-transform: uppercase;
}

.workshop-type__color {
  width: 1rem;
  height: 1rem;
  border-radius: 100%;
  justify-self: center;
}

.workshop-sidebar .workshop-coaches .workshop-coach {
}

.workshop-sidebar .workshop-type,
.workshop-sidebar .workshop-coaches,
.workshop-sidebar .workshop-time,
.workshop-sidebar .workshop-hall,
.workshop-sidebar .workshop-gear,
.workshop-sidebar .workshop-weapon {
  display: grid;
  grid-template-columns: 1fr 6fr;
  column-gap: 1rem;
  padding: 0px;
  width: 100%;
  align-items: center;
  text-transform: uppercase;
}

.workshop-sidebar .workshop-time > div,
.workshop-sidebar .workshop-hall > div,
.workshop-sidebar .workshop-gear > div,
.workshop-sidebar .workshop-weapon > div {
  display: flex;
  align-items: center;
}

.workshop-sidebar .workshop-coaches img,
.workshop-sidebar .workshop-time img,
.workshop-sidebar .workshop-hall img,
.workshop-sidebar .workshop-gear img,
.workshop-sidebar .workshop-weapon img {
  max-width: 38px;
}

.workshop-sidebar .workshop-coach a {
  color: var(--iws--color--black) !important;
}

.workshop-sidebar a {
  text-decoration: none !important;
  color: var(--iws--color--black) !important;
}

/*******************************************************************
Detail view (coach)
*******************************************************************/
.coach-website {
  text-transform: uppercase;
  border-top: 1px solid var(--iws--color--black);
  border-bottom: 1px solid var(--iws--color--black);
  margin-block: 1rem;
  padding-block: 1rem;
}

.coach-website a {
  color: var(--iws--color--black) !important;
}

.workshop-info span {
  font-weight: 700;
}

.workshop-info__item a {
  text-transform: uppercase;
  color: var(--iws--color--black);
}

.workshop-divider {
  width: 60%;
  border-top: 2px solid var(--iws--color--cta-bg);
  margin-block: 2rem;
}

/*******************************************************************
Embla Carousel (Showcase)
*******************************************************************/
.iws-showcase__footer-cta > a {
  border-radius: 1.5rem;
  border: 2px solid var(--iws--color--cta-bg);
  background-color: var(--iws--color--cta-bg);
  text-transform: uppercase;
}

.iws-showcase__footer-cta > a:hover {
  background-color: transparent;
  color: var(--iws--color--cta-bg);
}

.iws-showcase__cta > a {
  background-color: var(--iws--color--cta-bg);
}

.iws-showcase__cta > a:hover {
  background-color: var(--iws--color--black);
  color: var(--iws--color--white);
}