@layer cavalree {
	[data-cavalree="section@detail-card-grid"i] {
		[data-type="cavalree/query-filter"i] + & {
			--c-box--padding--block--start: 2rem;
		}
	}

	[data-cavalree="section/asset@detail-card-grid"i] {
	}

	[data-cavalree="section/content@detail-card-grid"i] {
	}

	[data-cavalree="section/figure@detail-card-grid"i] {
	}

	[data-cavalree="section/inner@detail-card-grid"i] {
		& :where([data-cavalree="group/inner"i], [data-cavalree^="group/inner@"i]) {
			--c-grid--gap: var(--c--size--gutter);
			--c-grid--repeat-form: auto-fill;
			--c-grid--size: 24.5rem;
		}
	}

	[data-cavalree="section/kicker@detail-card-grid"i] {
	}

	[data-cavalree="section/label@detail-card-grid"i] {
	}
}

[data-type="cavalree/query-filter"i] {
  & .c-checkselect-heading {
    text-transform: var(--c--typography--display--case);
    font-family: var(--c--typography--display--family);
    line-height: var(--c--typography--display--line-height);
    font-size: 1.5rem;
    font-style: var(--c--typography--display--style);
    letter-spacing: var(--c--typography--display--tracking);
    font-weight: var(--c--typography--display--weight);
  }

  & .c-checkselect {
			--caret: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' %3E%3Cpath d='M12.53 16.28a.75.75 0 0 1-1.06 0l-7.5-7.5a.75.75 0 0 1 1.06-1.06L12 14.69l6.97-6.97a.75.75 0 1 1 1.06 1.06l-7.5 7.5Z' /%3E%3C/svg%3E%0A");
		align-items: center;
		column-gap: 0.5em;
    text-transform: var(--c--typography--mark--case);
    font-family: var(--c--typography--mark--family);
    line-height: 1;
    font-size: 0.75rem;
    font-style: var(--c--typography--mark--style);
    letter-spacing: var(--c--typography--mark--tracking);
    font-weight: var(--c--typography--mark--weight);
    position: relative;

		&:has(> [aria-expanded="true"i]) {
			--caret: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' %3E%3Cpath d='M11.47 7.72a.75.75 0 0 1 1.06 0l7.5 7.5a.75.75 0 1 1-1.06 1.06L12 9.31l-6.97 6.97a.75.75 0 0 1-1.06-1.06l7.5-7.5Z' /%3E%3C/svg%3E%0A");
		}

    &[data-filter="sort"] {
      margin-inline-start: auto;
    }

		&::after {
			background-color: currentcolor;
			content: "";
			display: inline-block;
			block-size: 1.25ch;
			inline-size: 1.25ch;
			mask-image: var(--caret);
			mask-repeat: no-repeat;
		}
  }

  & .c-checkselect_btn {
    background-color: transparent;
    cursor: pointer;
    min-inline-size: fit-content;
    text-align: start;
		color: inherit;
		font: inherit;
		text-transform: inherit;
		letter-spacing: inherit;
  }

  & .c-checkselect_panel {
    background-color: var(--c--color--500D07);
    position: absolute;
    z-index: 10;
    min-inline-size: 10rem;
    margin-block-start: 0.25rem;
    border-color: var(--c--color--E4E0CF);
    border-width: 1px;
    text-wrap: nowrap;

    label {
      display: flex;
      gap: .5rem;
      align-items: center;
      padding-block: 0.5rem;
      padding-inline: 0.75rem;
      cursor: pointer;

      &:hover {
        background-color: var(--c--color--44110C);
      }

      &:has(:checked) {
        background-color: var(--c--color--300000);
        color: var(--c--color--FBF9ED);
      }
    }

    input {
      display: none;
    }
  }
}

[data-type="cavalree/query-filter"i] {
  display: flex;
  align-items: center;
	justify-content: start;
  column-gap: 1.25rem;
	padding-inline: var(--c--size--gutter);
		max-inline-size: calc(100rem + var(--c--size--gutter) * 2);
		margin-inline: auto;
		inline-size: 100%;

  & .c-checkselect-heading {
    text-transform: var(--c--typography--display--case);
    font-family: var(--c--typography--display--family);
    line-height: var(--c--typography--display--line-height);
    font-size: 1.5rem;
    font-style: var(--c--typography--display--style);
    letter-spacing: var(--c--typography--display--tracking);
    font-weight: var(--c--typography--display--weight);
		text-wrap: nowrap;
  }

  & .c-radioselect {
		align-items: center;
		gap: 0.5rem;
    text-transform: var(--c--typography--mark--case);
    font-family: var(--c--typography--mark--family);
    line-height: 1;
    font-size: 0.75rem;
    font-style: var(--c--typography--mark--style);
    letter-spacing: var(--c--typography--mark--tracking);
    font-weight: var(--c--typography--mark--weight);
		flex-wrap: wrap;
		justify-content: center;
  }

  & .c-radioselect_btn {
    background-color: transparent;
    cursor: pointer;
    min-inline-size: fit-content;
    text-align: start;
		color: inherit;
		font: inherit;
		text-transform: inherit;
		letter-spacing: inherit;
  }

	& .c-radioselect_option {
		border-block-color: transparent;
		border-block-width: 3px;
		border-block-style: solid;
    display: flex;
    align-items: center;
    padding-block: 0.5rem;
    padding-inline: 0.75rem;
    cursor: pointer;

    &:hover {
      background-color: var(--c--color--44110C);
    }

    &:has(> input:checked) {
      border-block-end-color: var(--c--color--8D241B);
    }

		& input {
			display: none;
		}
	}

  & .c-radioselect_panel {
    background-color: var(--c--color--500D07);
    position: absolute;
    z-index: 10;
    min-inline-size: 10rem;
    margin-block-start: 0.25rem;
    border-color: var(--c--color--E4E0CF);
    border-width: 1px;
    text-wrap: nowrap;

    label {
      display: flex;
      gap: .5rem;
      align-items: center;
      padding-block: 0.5rem;
      padding-inline: 0.75rem;
      cursor: pointer;

      &:hover {
        background-color: var(--c--color--44110C);
      }

      &:has(:checked) {
        background-color: var(--c--color--300000);
        color: var(--c--color--FBF9ED);
      }
    }

    input {
      display: none;
    }
  }
}

.c-filter--desktop { display: none !important; }
.c-checkselect-heading { display: none !important; }

@media (min-width: 800px) {
	.c-checkselect-heading { display: block flow !important; }
  .c-filter--mobile  { display: none !important; }
  .c-filter--desktop { display: flex !important; }
}