/* The complete filter menu uses one surface; only its contents scroll. */
html.cacti-filter-open, html.cacti-filter-open body { overflow: hidden; overscroll-behavior: none; }
@media (min-width: 901px) { html:has(.cactiFilterFloat) { scrollbar-gutter: stable; } }
html.cacti-filter-open .shell.header { visibility: hidden; pointer-events: none; }
.cactiFilterFloat {
  position: fixed; z-index: 34; left: calc(16px + env(safe-area-inset-left)); bottom: calc(16px + env(safe-area-inset-bottom));
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; padding: 0;
  border: 0; border-radius: 12px; background: var(--color-cream);
  color: var(--color-ink); font: 500 16px/1.25 var(--font-body), sans-serif;
  box-shadow: 0 2px 10px hsl(0 0% 0% / .14); cursor: pointer;
  transition: transform 180ms ease, opacity 180ms ease, border-color 180ms ease;
}
.cactiFilterFloat[data-in-products="false"] { visibility: hidden; opacity: 0; pointer-events: none; }
.cactiFilterFloat[data-active="true"] { color: hsl(113 22% 34%); }
.cactiFilterBadge { position: absolute; top: -4px; right: -4px; min-width: 16px; padding: 0 3px; font-size: 10px; line-height: 16px; border-radius: 4px; background: hsl(113 22% 34%); color: white; text-align: center; }
.cactiFilterBadge[hidden] { display: none; }
.cactiFilterFloat svg, .cactiFilterClose svg { fill: none; stroke: currentColor; stroke-width: 1.25; stroke-linecap: round; }
.cactiFilterFloat svg { stroke-width: 1.8; }
@media (hover: hover) {
  .cactiFilterFloat:hover { transform: translateY(-2px); }
}
html.cacti-filter-open .cactiFilterFloat, html.cacti-popup-open:not(.cacti-filter-open) .cactiFilterFloat { opacity: 0; pointer-events: none; }
body:has(.cactiCookieBanner:not([hidden])) .cactiFilterFloat { visibility: hidden; }
.cactiFilterBackdrop { display: block !important; z-index: 70; visibility: hidden; background: transparent; transition: opacity 240ms ease, visibility 240ms; }
.cactiFilterBackdrop[data-open="true"] { visibility: visible; }
.cactiFilterMorph { position: fixed; z-index: 71; display: none; pointer-events: none; background: var(--color-cream); border: 1px solid hsl(0 0% 0% / .45); box-shadow: 0 10px 24px hsl(0 0% 0% / .1); transform-origin: center; }
.sortDialog.cactiFilterDialog {
  --filter-line: hsl(0 0% 0% / .22);
  display: flex; flex-direction: column; position: fixed; z-index: 71;
  top: 50%; left: 50%; width: min(960px, calc(100vw - 48px)); max-height: calc(100dvh - 48px);
  transform: translate(-50%, -50%); padding: 0; background: var(--color-cream);
  border: 1px solid hsl(0 0% 0% / .45); border-radius: 8px; box-shadow: 0 10px 24px hsl(0 0% 0% / .1);
  color: var(--color-ink); font: 400 14px/1.5 var(--font-body), sans-serif;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 240ms ease, visibility 240ms; isolation: isolate;
}
.sortDialog.cactiFilterDialog[data-open="true"] { transform: translate(-50%, -50%); visibility: visible; opacity: 1; pointer-events: auto; }
.cactiFilterDialog button, .cactiFilterDialog input, .cactiFilterDialog select { font: inherit; color: inherit; }
.cactiFilterDialog button, .cactiFilterDialog label { -webkit-tap-highlight-color: transparent; }
.cactiFilterDialog button { cursor: pointer; }
.cactiFilterHeader { flex: none; padding: 24px 32px 16px; }
.cactiFilterTitleRow { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.cactiFilterTitleRow h2 { margin: 0; font: 700 30px/1.1 var(--font-heading), sans-serif; letter-spacing: -.02em; }
.cactiFilterClose { border: 0; background: none; display: grid; place-items: center; min-width: 44px; min-height: 44px; margin: -8px -12px -8px 0; }
.cactiFilterSummary { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-top: 16px; padding-bottom: 16px; border-bottom: 1px solid var(--filter-line); }
.cactiFilterChips { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; min-width: 0; }
.cactiFilterChip, .cactiFilterTextAction { border: 0; border-radius: 0; background: none; text-decoration: underline; text-underline-offset: 4px; padding: 8px 0; min-height: 40px; font-size: 14px; }
.cactiFilterChip { display: inline-flex; gap: 8px; align-items: center; }
.cactiFilterChip span { text-decoration: none; }
.cactiFilterTextAction { white-space: nowrap; }
.cactiFilterEmpty { color: hsl(0 0% 35%); padding: 8px 0; }
.cactiFilterBody { display: grid; grid-template-columns: 1fr 1.25fr 1fr; overflow: auto; overscroll-behavior: contain; min-height: 0; padding: 8px 32px 24px; scrollbar-width: thin; }
.cactiFilterColumn { min-width: 0; padding: 0 24px; border-left: 1px solid var(--filter-line); }
.cactiFilterColumn:first-child { padding-left: 0; border: 0; }
.cactiFilterColumn:last-child { padding-right: 0; }
.cactiFilterDialog h3, .cactiFilterSection > legend { font-size: 16px; font-weight: 600; line-height: 1.5; margin: 0 0 8px; padding: 0; }
.cactiFilterDialog fieldset { min-width: 0; border: 0; padding: 0; margin: 0; }
.cactiFilterGroup legend { font-size: 14px; color: hsl(0 0% 35%); padding: 0; margin-bottom: 4px; }
.cactiFilterGroup + .cactiFilterGroup { margin-top: 16px; }
.cactiFilterCheck { display: flex; align-items: center; gap: 8px; min-height: 32px; cursor: pointer; }
.cactiFilterCheck input { width: 14px; height: 14px; flex: none; appearance: none; border: 1px solid hsl(0 0% 0% / .55); border-radius: 0; margin: 0; background: transparent; cursor: pointer; }
.cactiFilterCheck input:checked { background: var(--color-ink); border-color: var(--color-ink); }
.cactiFilterCheck input:checked::after { content: ''; display: block; width: 4px; height: 7px; margin: 1px 0 0 4px; border: solid var(--color-cream); border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); }
.cactiFilterCheck input:focus-visible { outline: 2px solid hsl(113 22% 34%); outline-offset: 3px; }
.cactiFilterCheck:has(input:checked) > span { font-weight: 600; }
.cactiFilterGift { display: inline-flex; gap: 8px; align-items: center; min-height: 44px; margin-top: 16px; text-decoration: underline; text-underline-offset: 4px; }
.cactiFilterSection + .cactiFilterSection { margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--filter-line); }
.cactiFilterHint { color: hsl(0 0% 35%); font-size: 12px; margin: 0 0 12px; }
.cactiFilterSizes { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px; }
.cactiFilterSize, .cactiFilterColour { position: relative; cursor: pointer; min-width: 0; }
.cactiFilterSize input, .cactiFilterColour input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.cactiFilterSize span { display: grid; place-items: center; min-height: 44px; font-size: 12px; border-bottom: 1px solid hsl(0 0% 0% / .5); }
.cactiFilterSize input:checked + span { background: var(--color-ink); color: var(--color-cream); }
.cactiFilterSize input:focus-visible + span, .cactiFilterColour input:focus-visible + span { outline: 2px solid hsl(113 22% 34%); outline-offset: 3px; }
.cactiFilterColours { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 8px; }
.cactiFilterColour { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; font-size: 12px; min-height: 56px; }
.cactiFilterSwatch { width: 32px; height: 32px; display: block; background: var(--swatch); border: 1px solid hsl(0 0% 0% / .45); position: relative; }
.cactiFilterColour input:checked + .cactiFilterSwatch { outline: 1px solid var(--color-ink); outline-offset: 3px; }
.cactiFilterColour input:checked + .cactiFilterSwatch::after { content: '✓'; position: absolute; inset: 4px; display: grid; place-items: center; background: hsl(0 0% 0% / .65); color: white; font: 600 14px/1 sans-serif; }
.cactiFilterFits { display: flex; flex-wrap: wrap; column-gap: 16px; }
.cactiFilterSlider { position: relative; height: 44px; margin: 8px 0 0; }
.cactiFilterTrack { position: absolute; top: 21px; left: 8px; right: 8px; height: 2px; background: hsl(0 0% 0% / .15); }
.cactiFilterTrack span { display: block; position: absolute; height: 100%; background: var(--color-ink); left: 0; right: 0; }
.cactiFilterSlider input[type="range"] { position: absolute; top: 0; left: 0; width: 100%; height: 44px; margin: 0; border: 0; padding: 0; background: transparent; appearance: none; pointer-events: none; }
.cactiFilterSlider input[type="range"]::-webkit-slider-runnable-track { height: 2px; background: transparent; }
.cactiFilterSlider input[type="range"]::-webkit-slider-thumb { appearance: none; width: 16px; height: 16px; margin-top: -7px; border: 0; border-radius: 50%; background: var(--color-ink); pointer-events: auto; cursor: grab; }
.cactiFilterSlider input[type="range"]::-moz-range-track { height: 2px; background: transparent; }
.cactiFilterSlider input[type="range"]::-moz-range-thumb { width: 16px; height: 16px; border: 0; border-radius: 50%; background: var(--color-ink); pointer-events: auto; cursor: grab; }
.cactiFilterSlider input:focus-visible { outline: 1px solid hsl(113 22% 34%); outline-offset: 2px; }
.cactiFilterPriceLimits { display: flex; justify-content: space-between; font-size: 12px; color: hsl(0 0% 35%); }
.cactiFilterAmounts { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 16px; }
.cactiFilterAmounts label { font-size: 12px; color: hsl(0 0% 35%); }
.cactiFilterAmounts input { display: block; width: 100%; height: 44px; border: 0; border-bottom: 1px solid hsl(0 0% 0% / .5); border-radius: 0; padding: 4px 0; background: transparent; font-size: 16px; color: var(--color-ink); appearance: textfield; }
.cactiFilterAmounts input::-webkit-inner-spin-button { appearance: none; }
.cactiFilterFooter { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 16px 32px; border-top: 1px solid var(--filter-line); }
.cactiFilterOrder { display: flex; align-items: center; gap: 16px; font-size: 12px; min-width: 0; }
.cactiFilterOrder select { max-width: 192px; border: 0; border-bottom: 1px solid hsl(0 0% 0% / .5); border-radius: 0; background: transparent; padding: 8px 24px 8px 0; min-height: 44px; font-size: 14px; }
.cactiFilterApply { border: 1px solid var(--color-ink); border-radius: 4px; min-height: 48px; padding: 12px 24px; display: inline-flex; align-items: center; justify-content: center; gap: 16px; background: var(--color-ink); color: var(--color-cream) !important; white-space: nowrap; }
.cactiFilterApply:disabled { opacity: .65; cursor: default; }
.cactiFilterDialog :focus-visible, .cactiFilterFloat:focus-visible { outline: 2px solid hsl(113 22% 34%); outline-offset: 4px; }
.cactiAppliedFilters { display: flex; gap: 16px; align-items: center; justify-content: space-between; padding: 0 13px 16px; font-size: 12px; }
.cactiAppliedFilters[hidden] { display: none; }
.cactiAppliedFilters > span { flex: none; color: hsl(0 0% 35%); }
@media (max-width: 900px) and (min-width: 641px) {
  .cactiFilterHeader { padding-inline: 24px; }
  .cactiFilterBody { padding-inline: 24px; grid-template-columns: 1fr 1.2fr 1fr; }
  .cactiFilterColumn { padding-inline: 16px; }
  .cactiFilterFooter { padding-inline: 24px; }
}
@media (max-width: 640px) {
  .sortDialog.cactiFilterDialog { width: calc(100vw - 24px); max-height: calc(100dvh - 32px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); border-radius: 8px; }
  .cactiFilterHeader { padding: 16px 16px 0; }
  .cactiFilterTitleRow h2 { font-size: 24px; }
  .cactiFilterSummary { margin-top: 8px; padding-bottom: 8px; gap: 8px; }
  .cactiFilterSummary .cactiFilterTextAction, .cactiFilterChips { font-size: 12px; }
  .cactiFilterChips { gap: 0 12px; }
  .cactiFilterChip { font-size: 12px; min-height: 44px; }
  .cactiFilterBody { display: block; padding: 16px; }
  .cactiFilterColumn { padding: 0; border: 0; }
  .cactiFilterColumn + .cactiFilterColumn { border-top: 1px solid var(--filter-line); margin-top: 16px; padding-top: 16px; }
  .cactiFilterTypeGroups { display: block; }
  .cactiFilterGroup { display: grid; grid-template-columns: 1fr 1fr; column-gap: 12px; }
  .cactiFilterGroup + .cactiFilterGroup { margin-top: 12px; }
  .cactiFilterCheck { min-height: 44px; }
  .cactiFilterGift { margin-top: 8px; }
  .cactiFilterSizes { gap: 8px; grid-template-columns: repeat(auto-fit, minmax(32px, 1fr)); }
  .cactiFilterColours { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px 8px; }
  .cactiFilterSwatch { width: 32px; height: 32px; }
  .cactiFilterSection + .cactiFilterSection { margin-top: 16px; }
  .cactiFilterFooter { flex-wrap: wrap; gap: 8px; padding: 8px 16px 12px; }
  .cactiFilterOrder { width: 100%; justify-content: space-between; }
  .cactiFilterOrder select { max-width: 75%; min-height: 40px; }
  .cactiFilterApply { width: 100%; }
  .cactiAppliedFilters { flex-wrap: wrap; padding-inline: 6px; }
}
@media (prefers-reduced-motion: reduce) {
  .cactiFilterDialog, .cactiFilterBackdrop, .cactiFilterFloat, .cactiFilterFloat::after { transition: none !important; }
}
