/* ==========================================================================
   MMX / PRODUCT LIST
   ========================================================================== */

:host {
	--mmx-form__size: var(--mmx-custom-product-list__size);
	--mmx-form__slider-size: calc(var(--mmx-form__size) * 1.5);
	--mmx-custom-product-list__gap: var(--mmx-custom-product-list__size);
	--mmx-custom-product-list__size: 1rem;
	--mmx-custom-product-list__control-height: calc(var(--mmx-custom-product-list__size) * 3);
	--mmx-custom-product-list__animation-facets: mmx-left-drawer 0.5s ease;
  --mmx-custom-product-list__font-family: "Work Sans", sans-serif;

	scroll-margin-top: 10vh;
}

:focus-visible {
	outline: 2px solid var(--mmx-color-focus);
}

.mmx-custom-product-list {
	display: block;
  font-family: "Work Sans", sans-serif;
}

/* Title */
.mmx-custom-product-list__heading {
	margin: 0 0 40px;
	/* font-style: italic; */
	font-family: "Cormorant Garamond", serif;
	font-weight: 600;
	color: var(--mmx-custom-product-list__heading-color);
	text-align: var(--mmx-custom-product-list__heading-align);
}

/* Main */
.mmx-custom-product-list__main {
	align-content: start;
	display: grid;
	gap: var(--mmx-custom-product-list__gap);
  padding-right: var(--mmx-custom-product-list__gap);
}
.mmx-product-card__text-detail {
	font-family: "Work Sans", sans-serif !important;
	font-weight: 300 !important;
}
.mmx-custom-product-list__main {
	grid-auto-rows: min-content;
	grid-template-areas:
		"header"
		"products"
		"footer";
}

/* Main: Desktop */
@media (min-width: 60em) {
	.mmx-custom-product-list.has-facets--true .mmx-custom-product-list__main {
		grid-template-areas:
			"facets header"
			"facets products"
			"facets footer";
		grid-template-columns: var(--mmx-custom-product-list__facets-width, 1fr 4fr);
		grid-template-rows: min-content min-content 1fr;
	}

	.mmx-custom-product-list.has-facets--false .mmx-custom-product-list__main {
		grid-template-areas:
			"header"
			"products"
			"footer"
			"facets";
	}
}

/* Header */
.mmx-custom-product-list__header {
	align-items: center;
	display: flex;
	gap: var(--mmx-custom-product-list__gap);
	grid-area: header;
	justify-content: space-between;
}

.has-details--false .mmx-custom-product-list__header {
	justify-content: right;
}

/* Details */
.mmx-custom-product-list__details {
	display: inline-flex;
	gap: calc(var(--mmx-custom-product-list__gap) / 2);
	grid-area: details;
	justify-content: right;
}

@media (min-width: 60em) {
	.mmx-custom-product-list__details {
		text-align: left;
	}
}

.mmx-custom-product-list__detail {
	border-right: 1px solid currentColor;
	padding-right: calc(var(--mmx-custom-product-list__gap) / 2);
}

.mmx-custom-product-list__detail:last-child {
	border-right: none;
	padding-right: none;
}

/* Footer */
.mmx-custom-product-list__footer {
	grid-area: footer;
	margin-top: calc(var(--mmx-custom-product-list__gap) * 2);
}

/* Products */
.mmx-custom-product-list__products {
	grid-area: products;
  max-width: 100vw;
}

.mmx-custom-product-list__products slot::slotted(*) {
	display: block;
  max-width: calc(100vw - 48px);
}

@media (min-width: 1440px) {
  .mmx-custom-product-list__products slot::slotted(*) {
    max-width: calc(90rem - 32px);
  }
}

/* Facets */
.mmx-custom-product-list__facets {
	display: grid;
	gap: var(--mmx-custom-product-list__gap);
	grid-area: facets;
	grid-auto-rows: min-content;
}

.mmx-custom-product-list__facets-form {
	display: flex;
	flex-direction: column;
	gap: var(--mmx-custom-product-list__gap);
}

.mmx-custom-product-list__facets-header {
	--mmx-text-margin-bottom: 0;
    align-items: center;
	display: grid;
	grid-area: header;
    grid-template-columns: 1fr max-content;
}

.mmx-custom-product-list__facets-title {
  font-family: var(--mmx-custom-product-list__facets-title-font-family);
	font-weight: var(--mmx-custom-product-list__facets-title-font-weight);
	color: var(--mmx-custom-product-list__facets-title-color);
}

.mmx-custom-product-list__facet-applied-values {
	grid-area: applied;
}

.mmx-custom-product-list__facet-list {
	grid-area: list;
}

.mmx-custom-product-list__facet-value {
	display: grid;
	gap: 0.5em;
	grid-template-columns: min-content 1fr min-content;
	margin-left: calc(var(--mmx-custom-product-list__gap) * var(--mmx-custom-product-list__facet-value-depth, 0));
  font-family: var(--mmx-custom-product-list__facet-options-font-family);
}

.mmx-custom-product-list__facet-value .mmx-form-caption,
.mmx-custom-product-list__facet-value-count {
  color: var(--mmx-custom-product-list__facet-options-color, --mmx-color-form-labels);
  font-weight: var(--mmx-custom-product-list__facet-options-font-weight);
}

.mmx-custom-product-list__facet-value .mmx-form-checkbox__input,
.mmx-custom-product-list__facet-value .mmx-form-radio__input {
	margin: 0;
}

.mmx-custom-product-list__facet-value-count {
	letter-spacing: 0.05em;
}

/* Facets: Dialog */
.mmx-custom-product-list__facets-dialog-open {
  font-family: var(--mmx-custom-product-list__facets-dialog-open-font-family);
	background-color: var(--mmx-custom-product-list__facets-dialog-open-background-color);
	border: var(--mmx-custom-product-list__facets-dialog-open-border-width) solid var(--mmx-custom-product-list__facets-dialog-open-border-color);
	font-weight: var(--mmx-custom-product-list__facets-dialog-open-font-weight);
	color: var(--mmx-custom-product-list__facets-dialog-open-color);
	grid-area: facets-dialog-open;
	text-align: left;
  cursor: pointer;
  padding: 8px 24px;
  border-radius: 30px;
  transition: 0.3s ease;
}

.mmx-custom-product-list__facets-dialog-open:hover {
	background: var(--mmx-custom-product-list__facets-dialog-open-background-color-hover);
	border: var(--mmx-custom-product-list__facets-dialog-open-border-width-hover) solid var(--mmx-custom-product-list__facets-dialog-open-border-color-hover);
	color: var(--mmx-custom-product-list__facets-dialog-open-color-hover);
}

.mmx-custom-product-list__facets-dialog-open mmx-icon {
	margin-right: 0.25em;
	vertical-align: middle;
}

.mmx-custom-product-list__facets-dialog-close {
	background: none;
	border: none;
  outline: none;
  cursor: pointer;
}

.mmx-custom-product-list__facets-dialog {
	width: 100%;
}

.mmx-custom-product-list__facets-dialog:not([open]) {
	background: none;
	border: none;
	display: none;
	margin: 0;
	padding: 0;
	position: static;
}

@media (min-width: 60em) {
	.has-facets--true .mmx-custom-product-list__facets-dialog:not([open]) {
		display: block;
	}

	.mmx-custom-product-list__facets-dialog-open {
		display: none;
	}
}

.mmx-custom-product-list__facets-dialog[open] {
	animation: var(--mmx-custom-product-list__animation-facets);
	border: 0;
	border-radius: 0;
	box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.15);
	height: 100%;
	margin: 0;
	max-height: 100%;
	outline: 0;
	padding: var(--mmx-spacing-m);
	width: min(40em, 90vw);
}

@keyframes mmx-left-drawer {
	from {
		transform: translateX(-100%);
	}
}

/* Facets: Dialog: Backdrop */
.mmx-custom-product-list__facets-dialog::backdrop {
	background: rgba(0, 0, 0, 0.8);
}

/* Facets: Dialog: Close Button */
.mmx-custom-product-list__facets-dialog:not([open]) .mmx-custom-product-list__facets-dialog-close {
	display: none;
}

.mmx-custom-product-list__facets-dialog[open] .mmx-custom-product-list__facets-dialog-close {
	display: inline-block;
	position: absolute;
    right: var(--mmx-custom-product-list__gap);
    top: var(--mmx-custom-product-list__gap);
}

.mmx-custom-product-list__facets-dialog[open] .mmx-custom-product-list__clear-all {
	display: none;
}

.mmx-custom-product-list__facets-dialog-close mmx-icon {
	line-height: 1;
}

/* Facets: Accordion */
.mmx-custom-product-list__facets mmx-accordion::part(title) {
	display: none;
}

.mmx-custom-product-list__facets mmx-accordion {
	--mmx-accordion__spacing: 0.75rem;
	--mmx-accordion__padding: 1rem;
}

.mmx-custom-product-list__facets .mmx-accordion__heading,
.mmx-custom-product-list__facets .mmx-accordion__content {
	padding-left: 0;
	padding-right: 0;
}

.mmx-custom-product-list__facets .mmx-accordion__heading:first-of-type {
	padding-top: 0;
}

.mmx-custom-product-list__facets .mmx-accordion__details:last-of-type {
	border-bottom: 0;
}

.mmx-custom-product-list__facet-title {
  font-family: var(--mmx-custom-product-list__facet-title-font-family);
	font-weight: var(--mmx-custom-product-list__facet-title-font-weight);
	color: var(--mmx-custom-product-list__facet-title-color);
}


/* Mobile */
@media screen and (max-width: 40em) {
  /* Title */
	.mmx-custom-product-list__heading {
		font-size: var(--mmx-custom-product-list__heading-font-size-mobile, 28px);
	}

  /* Facets */
  .mmx-custom-product-list__facets-title {
    font-size: var(--mmx-custom-product-list__facets-title-font-size-mobile, 14px);
  }

  
  .mmx-custom-product-list__facet-value .mmx-form-caption,
  .mmx-custom-product-list__facet-value .mmx-form-checkbox__input,
  .mmx-custom-product-list__facet-value-count {
    font-size: var(--mmx-custom-product-list__facet-options-font-size-mobile, 14px);
  }

  /* Facets: Dialog */
  .mmx-custom-product-list__facets-dialog-open {
    font-size: var(--mmx-custom-product-list__facets-dialog-open-font-size-mobile, 14px);
  }

  /* Facets: Accordion */
  .mmx-custom-product-list__facet-title {
    font-size: var(--mmx-custom-product-list__facet-title-font-size-mobile, 14px);
  }
}

/* Tablet */
@media screen and (min-width: 40em) and (max-width: 75em) {
  /* Title */
	.mmx-custom-product-list__heading {
		font-size: var(--mmx-custom-product-list__heading-font-size-tablet, 30px);
	}

  /* Facets */
  .mmx-custom-product-list__facets-title {
    font-size: var(--mmx-custom-product-list__facets-title-font-size-tablet, 14px);
  }

  
  .mmx-custom-product-list__facet-value .mmx-form-caption,
  .mmx-custom-product-list__facet-value .mmx-form-checkbox__input,
  .mmx-custom-product-list__facet-value-count {
    font-size: var(--mmx-custom-product-list__facet-options-font-size-tablet, 14px);
  }

  /* Facets: Dialog */
  .mmx-custom-product-list__facets-dialog-open {
    font-size: var(--mmx-custom-product-list__facets-dialog-open-font-size-tablet, 14px);
  }

  /* Facets: Accordion */
  .mmx-custom-product-list__facet-title {
    font-size: var(--mmx-custom-product-list__facet-title-font-size-tablet, 14px);
  }
}

/* Desktop */
@media screen and (min-width: 75em) {
  /* Title */
	.mmx-custom-product-list__heading {
		font-size: var(--mmx-custom-product-list__heading-font-size-desktop, 32px);
	}

  /* Facets */
  .mmx-custom-product-list__facets-title {
    font-size: var(--mmx-custom-product-list__facets-title-font-size-desktop, 16px);
  }

  .mmx-custom-product-list__facet-value .mmx-form-caption,
  .mmx-custom-product-list__facet-value .mmx-form-checkbox__input,
  .mmx-custom-product-list__facet-value-count {
    font-size: var(--mmx-custom-product-list__facet-options-font-size-desktop, 16px);
  }

  /* Facets: Dialog */
  .mmx-custom-product-list__facets-dialog-open {
    font-size: var(--mmx-custom-product-list__facets-dialog-open-font-size-desktop, 16px);
  }

  /* Facets: Accordion */
  .mmx-custom-product-list__facet-title {
    font-size: var(--mmx-custom-product-list__facet-title-font-size-desktop, 16px);
  }
}