.elementor-element.dsk-cached-loop-grid-widget{
  width: 100%;
  max-width: 100%;
  flex: 0 0 100%;
  align-self: stretch;
  min-width: 0;
}
.elementor-element.dsk-cached-loop-grid-widget > .elementor-widget-container{
  width: 100%;
  max-width: 100%;
  min-width: 0;
}
.elementor-element.dsk-cached-loop-grid-widget /* The widget always spans its container — a flex/centered parent must not
   shrink-wrap the grid (centering needs the full row to be visible). */
.elementor-widget-dsk_cached_loop_grid{
  width: 100%;
  max-width: 100%;
}

.dsk-cached-loop-grid{
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.dsk-cached-loop-grid{
  --dsk-row-gap: 20px;
  --dsk-column-gap: 20px;
  --dsk-cols: 3;
  --dsk-featured-cols: 2;

  --dsk-align-items: stretch;
  --dsk-item-display: flex;
  --dsk-item-child-flex: 1 1 auto;
  --dsk-item-child-width: 100%;
  --dsk-loading-wave-color: #000;
  --dsk-loading-wave-padding: 60px;
  
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;   
  box-sizing: border-box;
}

.dsk-cached-loop-grid__content{
  display: flex;
  justify-content: var(--dsk-justify-items, center);
  flex-wrap: wrap;
  row-gap: var(--dsk-row-gap);
  column-gap: var(--dsk-column-gap);
  width: 100%;
  align-items: var(--dsk-align-items, flex-start);
}

.dsk-cached-loop-grid__header{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--dsk-items-gap, 20px);
  justify-content: flex-start;
  width: 100%;
  /* the widget's own default gap between the header (search + filters) and the
     cards; Style > Search Bar > Spacing overrides it */
  margin-bottom: 20px;
}

.dsk-cached-loop-grid__heading{
  margin: 0;
}

.dsk-cached-loop-grid__search{
  width: var(--dsk-control-width, auto);
  display: flex;
  max-width: 100%;
}

.dsk-cached-loop-grid__search-field{
  --dsk-search-text-align: left;
  --dsk-search-icon-color: #6b7280;

  display: flex;
  align-items: center;
  gap: .6em;
  width: 100%;
  max-width: 360px;
  box-sizing: border-box;
  background: #fff;
  border: 1px solid #d7dce1;
  border-radius: 999px;
  padding: 10px 18px;
  cursor: text;
  transition: border-color .2s ease, box-shadow .2s ease;
}

.dsk-cached-loop-grid__search-field:focus-within{
  border-color: #9aa4ae;
  box-shadow: 0 0 0 3px rgba(48, 48, 60, .08);
}

.dsk-cached-loop-grid__search-input::placeholder{
  color: #9aa3ad;
}

.dsk-cached-loop-grid__search-field--icon-right .dsk-cached-loop-grid__search-icon{
  order: 2;
}

.dsk-cached-loop-grid__search-field--icon-right .dsk-cached-loop-grid__search-input{
  order: 1;
}

.dsk-cached-loop-grid__search-icon{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  color: var(--dsk-search-icon-color, currentColor);
  line-height: 1;
}

.dsk-cached-loop-grid__infinite-sentinel{
  width: 100%;
  height: 1px;
}

.dsk-cached-loop-grid__search-icon svg{
  width: 1em;
  height: 1em;
  display: block;
  fill: currentColor;
}

.dsk-cached-loop-grid__search-icon svg *{
  fill: currentColor;
}

.dsk-cached-loop-grid__item{
  flex: 0 0 calc((100% - ((var(--dsk-cols) - 1) * var(--dsk-column-gap))) / var(--dsk-cols));
  min-width: 0;
  display: var(--dsk-item-display, block);
}

.dsk-cached-loop-grid__item--featured{
  flex-basis: calc((100% - ((var(--dsk-featured-cols) - 1) * var(--dsk-column-gap))) / var(--dsk-featured-cols));
}

.dsk-cached-loop-grid__item > *{
  flex: var(--dsk-item-child-flex, 0 0 auto);
  width: var(--dsk-item-child-width, auto);
}

.dsk-cached-loop-grid__no-results{
  width: 100%;
  text-align: var(--dsk-no-results-align, center);
}

.dsk-cached-loop-grid--animate-fade-in .dsk-cached-loop-grid__item{
  animation: dskPostFadeIn .28s ease both;
}

.dsk-cached-loop-grid--animate-fade-in-up .dsk-cached-loop-grid__item{
  animation: dskPostFadeInUp .32s ease both;
}

/*
 * Set by the script the moment the entrance animation completes. An item that
 * keeps an animated opacity keeps its own compositing layer, and that layer is
 * a backdrop root — a backdrop-filter inside the card would sample an empty
 * backdrop and the glass effect would flatten. The animation fills to exactly
 * what the base rule paints, so dropping it here changes nothing on screen.
 */
.dsk-cached-loop-grid .dsk-cached-loop-grid__item.is-revealed{
  animation: none;
}

@keyframes dskPostFadeIn{
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes dskPostFadeInUp{
  from {
    opacity: 0;
    transform: translateY(5px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.dsk-cached-loop-grid__load-more-wrap{
  display: flex;
  width: 100%;
  margin-top: 20px;
  justify-content: center;
}

.dsk-cached-loop-grid__load-more{
  background: #000;
  color: #fff;
  padding: 15px 25px;
  border: 0;
  cursor: pointer;

  transition: background-color .2s ease, color .2s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.dsk-cached-loop-grid__load-more:hover{ background: #333; }
.dsk-cached-loop-grid__load-more:disabled{ opacity: .7; cursor: not-allowed; }

.dsk-cached-loop-grid__btn-text{ display: inline-block; }

.dsk-cached-loop-grid__btn-spinner{
  display: none;
  align-items: center;
  justify-content: center;
  gap: .28em;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
}

.dsk-cached-loop-grid__btn-spinner span,
.dsk-cached-loop-grid__spinner span,
.dsk-cached-loop-grid__infinite-spinner span{
  width: .42em;
  height: .42em;
  border-radius: 999px;
  background: var(--dsk-loading-wave-color, currentColor);
  opacity: .35;
  animation: dskWaveDots .9s ease-in-out infinite;
}

.dsk-cached-loop-grid__btn-spinner span:nth-child(2),
.dsk-cached-loop-grid__spinner span:nth-child(2),
.dsk-cached-loop-grid__infinite-spinner span:nth-child(2){
  animation-delay: .12s;
}

.dsk-cached-loop-grid__btn-spinner span:nth-child(3),
.dsk-cached-loop-grid__spinner span:nth-child(3),
.dsk-cached-loop-grid__infinite-spinner span:nth-child(3){
  animation-delay: .24s;
}

.dsk-cached-loop-grid.is-loading .dsk-cached-loop-grid__btn-spinner{ display: inline-flex; }
.dsk-cached-loop-grid.is-loading .dsk-cached-loop-grid__btn-text{ visibility: hidden; }

@keyframes dskWaveDots{
  0%, 80%, 100% {
    opacity: .35;
    transform: translateY(0);
  }
  40% {
    opacity: 1;
    transform: translateY(-.32em);
  }
}

.dsk-cached-loop-grid__spinner{
  display: none;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  margin: 18px auto;
  padding: var(--dsk-loading-wave-padding);
  font-size: 14px;
  color: var(--dsk-loading-wave-color, currentColor);
}

.dsk-cached-loop-grid.is-loading .dsk-cached-loop-grid__spinner{
  display: flex;
}

.dsk-cached-loop-grid__infinite-spinner{
  display: none;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  margin: 20px auto;
  padding: 20px;
  font-size: 14px;
  color: var(--dsk-loading-wave-color, currentColor);
}

.dsk-cached-loop-grid .dsk-cached-loop-grid__search-field input[type=search].dsk-cached-loop-grid__search-input{
  appearance: none;
  -webkit-appearance: none;
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
  color: inherit;
  /* A form control inherits neither font nor line-height, so without these the
     input renders at the UA's 13.3px and the field ends up SHORTER than the
     dropdown head next to it. Search Typography still overrides. */
  font: inherit;
  line-height: var(--dsk-control-line-height, 1.2);
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  outline: 0 !important;
  padding: 0 !important;
  margin: 0;
  transition: none !important;
  text-align: var(--dsk-search-text-align, left);
}

.dsk-cached-loop-grid .dsk-cached-loop-grid__search-field input[type=search].dsk-cached-loop-grid__search-input:focus{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  outline: 0 !important;
}

.dsk-cached-loop-grid .dsk-cached-loop-grid__search-field input[type=search].dsk-cached-loop-grid__search-input::-webkit-search-cancel-button{
  -webkit-appearance: none;
  appearance: none;
  width: 1em;
  height: 1em;
  margin-left: .5em;
  background-color: var(--dsk-search-icon-color, currentColor);
  -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.72 3.72a.75.75 0 0 1 1.06 0L8 6.94l3.22-3.22a.75.75 0 1 1 1.06 1.06L9.06 8l3.22 3.22a.75.75 0 1 1-1.06 1.06L8 9.06l-3.22 3.22a.75.75 0 1 1-1.06-1.06L6.94 8 3.72 4.78a.75.75 0 0 1 0-1.06Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.72 3.72a.75.75 0 0 1 1.06 0L8 6.94l3.22-3.22a.75.75 0 1 1 1.06 1.06L9.06 8l3.22 3.22a.75.75 0 1 1-1.06 1.06L8 9.06l-3.22 3.22a.75.75 0 1 1-1.06-1.06L6.94 8 3.72 4.78a.75.75 0 0 1 0-1.06Z'/%3E%3C/svg%3E") center / contain no-repeat;
  cursor: pointer;
}

.dsk-cached-loop-grid__search-field--align-space-between .dsk-cached-loop-grid__search-input{
  flex: 0 1 auto;
}

/* A labelled control: the label sits above its own dropdown/field, and the
   groups line up on their BASELINE so a labelled filter and an unlabelled one
   (or the Clear button) still sit on the same row. */
.dsk-cached-loop-grid__filter-group{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--dsk-filter-label-gap, 8px);
}
.dsk-cached-loop-grid__filter-label{
  display: block;
  font-size: 14px;
  line-height: 1.2;
}
.dsk-cached-loop-grid__filters.dsk-cached-loop-grid__filters--tax{
  align-items: flex-end;
}


/* Focus parity: the search field and the dropdown head take the SAME ring. The
   input's own outline is suppressed in the reset above, so the ring is drawn on
   the field wrapper — the dropdown head draws its own on :focus-visible. */
.dsk-cached-loop-grid .dsk-cached-loop-grid__search-field:focus-within,
.dsk-cached-loop-grid .dsk-cached-loop-grid__dropdown .dsk-cached-loop-grid__dropdown-trigger:focus{
  outline: var(--dsk-focus-ring-width, 1px) solid var(--dsk-focus-ring-color, rgba(48, 48, 60, .35));
  outline-offset: var(--dsk-focus-ring-offset, 2px);
}

/* Custom dropdown — the native select stays in the DOM as the state holder but
   is taken out of sight; everything visible here is control-driven through the
   --dsk-dd-* variables. The markup ships from PHP already in this state, so the
   first painted frame is the finished control rather than a bare select. */
.dsk-cached-loop-grid .dsk-cached-loop-grid__filter-select--enhanced{
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Without scripting the trigger is inert, so hand the row back to the select it
   stands in for — the one control that still works on its own. */
@media (scripting: none){
  .dsk-cached-loop-grid .dsk-cached-loop-grid__filter-select--enhanced{
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    clip: auto;
    clip-path: none;
    white-space: normal;
  }
  .dsk-cached-loop-grid__dropdown-trigger,
  .dsk-cached-loop-grid__dropdown-panel{
    display: none;
  }
}
.dsk-cached-loop-grid__dropdown{
  position: relative;
  display: inline-block;
}
.dsk-cached-loop-grid .dsk-cached-loop-grid__dropdown .dsk-cached-loop-grid__dropdown-trigger{
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  /* the shared Controls Width, unless this dropdown has its own Min Width.
     NOT capped with min(…, 100%): the wrapper is shrink-to-fit, so a percentage
     resolves against the head's own content and collapses it to ~120px. The
     stacked mobile block below drops this min-width instead. */
  min-width: var(--dsk-dd-min-width, var(--dsk-control-width, 200px));
  padding: var(--dsk-dd-padding, 10px 20px);
  border: var(--dsk-dd-border-width, 1px) solid var(--dsk-dd-border-color, currentColor);
  border-radius: var(--dsk-dd-radius, 999px);
  background-color: var(--dsk-dd-bg, transparent);
  color: var(--dsk-dd-color, inherit);
  font: inherit;
  line-height: var(--dsk-control-line-height, 1.2);
  cursor: pointer;
  text-align: left;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
.dsk-cached-loop-grid .dsk-cached-loop-grid__dropdown .dsk-cached-loop-grid__dropdown-trigger:hover,
.dsk-cached-loop-grid .dsk-cached-loop-grid__dropdown.is-open .dsk-cached-loop-grid__dropdown-trigger{
  background-color: var(--dsk-dd-bg-hover, var(--dsk-dd-bg, transparent));
  border-color: var(--dsk-dd-border-color-hover, var(--dsk-dd-border-color, currentColor));
  color: var(--dsk-dd-color-hover, var(--dsk-dd-color, inherit));
}
.dsk-cached-loop-grid__dropdown-chevron{
  width: .6em;
  height: .6em;
  flex: 0 0 auto;
  border-right: 2px solid var(--dsk-dd-chevron-color, currentColor);
  border-bottom: 2px solid var(--dsk-dd-chevron-color, currentColor);
  transform: translateY(-25%) rotate(45deg);
  transition: transform .2s ease;
}
.dsk-cached-loop-grid__dropdown.is-open .dsk-cached-loop-grid__dropdown-chevron{
  transform: translateY(15%) rotate(-135deg);
}
.dsk-cached-loop-grid__dropdown-panel{
  position: absolute;
  z-index: 20;
  top: calc(100% + var(--dsk-dd-panel-offset, 6px));
  left: 0;
  min-width: 100%;
  max-height: var(--dsk-dd-panel-max-height, 280px);
  overflow-y: auto;
  padding: var(--dsk-dd-panel-padding, 6px);
  border: var(--dsk-dd-panel-border-width, 1px) solid var(--dsk-dd-panel-border-color, rgba(0,0,0,.12));
  border-radius: var(--dsk-dd-panel-radius, 12px);
  background-color: var(--dsk-dd-panel-bg, #fff);
  box-shadow: var(--dsk-dd-panel-shadow, 0 12px 28px rgba(0,0,0,.12));

  /* Closed state. `visibility` rather than `display:none` so the panel can
     animate BOTH ways — display cannot be transitioned — while still leaving
     the accessibility tree when shut. It is delayed by the duration so the
     closing animation is seen before the panel goes away. */
  opacity: 0;
  visibility: hidden;
  transform: var(--dsk-dd-anim-from, translateY(-6px));
  transform-origin: top center;
  transition:
    opacity var(--dsk-dd-anim-duration, 180ms) var(--dsk-dd-anim-easing, ease),
    transform var(--dsk-dd-anim-duration, 180ms) var(--dsk-dd-anim-easing, ease),
    visibility 0s linear var(--dsk-dd-anim-duration, 180ms);
}
.dsk-cached-loop-grid__dropdown.is-open .dsk-cached-loop-grid__dropdown-panel{
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: 0s;
}

/* The panel both scrolls and is rounded. A classic scrollbar is painted over the
   border box and its track is a square column, so the rounded corners are cut
   off on the right edge and the track's own corners sit outside them. Giving the
   track no colour of its own leaves the panel's background to fill the corner,
   and the thumb is an inset pill instead of a full-width block with arrows. */
.dsk-cached-loop-grid__dropdown-panel{
  scrollbar-width: thin;
  scrollbar-color: var(--dsk-dd-scroll-thumb, rgba(0,0,0,.25)) transparent;
}
.dsk-cached-loop-grid__dropdown-panel::-webkit-scrollbar{
  width: 10px;
}
.dsk-cached-loop-grid__dropdown-panel::-webkit-scrollbar-track,
.dsk-cached-loop-grid__dropdown-panel::-webkit-scrollbar-corner{
  background: transparent;
}
/* Legacy stepper arrows: they cannot be rounded and they anchor the track to the
   panel's square outer edge. */
.dsk-cached-loop-grid__dropdown-panel::-webkit-scrollbar-button{
  display: none;
  width: 0;
  height: 0;
}
.dsk-cached-loop-grid__dropdown-panel::-webkit-scrollbar-thumb{
  background-color: var(--dsk-dd-scroll-thumb, rgba(0,0,0,.25));
  border-radius: 999px;
  border: 3px solid transparent;
  background-clip: content-box;
}
.dsk-cached-loop-grid__dropdown-panel::-webkit-scrollbar-thumb:hover{
  background-color: var(--dsk-dd-scroll-thumb-hover, rgba(0,0,0,.38));
}
@media (prefers-reduced-motion: reduce){
  .dsk-cached-loop-grid__dropdown-panel{
    transition-duration: 0s;
    transform: none;
  }
}
.dsk-cached-loop-grid__dropdown-option{
  padding: var(--dsk-dd-option-padding, 8px 12px);
  border-radius: var(--dsk-dd-option-radius, 8px);
  color: var(--dsk-dd-option-color, inherit);
  cursor: pointer;
  white-space: nowrap;
}
.dsk-cached-loop-grid__dropdown-option.is-active{
  background-color: var(--dsk-dd-option-bg-hover, rgba(0,0,0,.06));
  color: var(--dsk-dd-option-color-hover, var(--dsk-dd-option-color, inherit));
}
.dsk-cached-loop-grid__dropdown-option.is-selected{
  background-color: var(--dsk-dd-option-bg-selected, transparent);
  color: var(--dsk-dd-option-color-selected, var(--dsk-dd-option-color, inherit));
  font-weight: var(--dsk-dd-option-weight-selected, 600);
}
/* How many posts an option would leave on screen. It sits with the label rather
   than at the far edge: a column of numbers away from their names reads as a
   second list. Weight stays normal so a selected option's bold is still its own. */
.dsk-cached-loop-grid__dropdown-option-count,
.dsk-cached-loop-grid__filter-btn-count{
  margin-left: .4em;
  font-weight: 400;
  opacity: .6;
  font-variant-numeric: tabular-nums;
}

/* Filters (post-type buttons / taxonomy dropdown) */
.dsk-cached-loop-grid__filters{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  /* same variable as the header, so ONE setting spaces every item in the row */
  gap: var(--dsk-items-gap, 20px);
  order: var(--dsk-order-filters, 3);
}

/* Header ordering — the title, the search bar and the filters are siblings, so
   each just needs its own order. */
.dsk-cached-loop-grid__heading{ order: var(--dsk-order-title, 1); }
.dsk-cached-loop-grid__search{ order: var(--dsk-order-search, 2); }
.dsk-cached-loop-grid__header > .dsk-cached-loop-grid__filter-group:not(.dsk-cached-loop-grid__search){ order: var(--dsk-order-filters, 3); }

/* A labelled control is TALLER than an unlabelled one, so centring the row
   centres against label+control and the title, the search bar and the Clear
   button end up floating. As soon as ANY label is present the row aligns on
   its bottom edge instead, which is where the controls actually sit. */
.dsk-cached-loop-grid__header:has(.dsk-cached-loop-grid__filter-label){
  align-items: flex-end;
}
.dsk-cached-loop-grid__header:has(.dsk-cached-loop-grid__filter-label) .dsk-cached-loop-grid__heading{
  margin-bottom: 0;
  align-self: flex-end;
}
/* The chips are <button>s, so a Kit that styles `button` / `button:hover` /
   `button:focus` paints them in the site's primary-button palette — and the chip
   you just clicked keeps the focus colours because it stays focused. Every
   painted property is therefore neutralised here and re-opened as a control
   (Style > Filters). The three-class chain is deliberate: Kit selectors like
   `.elementor-kit-5 button:hover` weigh (0,2,1), so a two-class selector loses
   the border, while (0,4,0) control selectors still win over this. */
.dsk-cached-loop-grid .dsk-cached-loop-grid__filters .dsk-cached-loop-grid__filter-btn{
  padding: 8px 18px;
  border: 0 solid currentColor;
  border-radius: 999px;
  background-color: transparent;
  color: inherit;
  font: inherit;
  box-shadow: none;
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
/* Pills keep their outline; the grouped bar draws dividers instead. */
.dsk-cached-loop-grid .dsk-cached-loop-grid__filters--pills .dsk-cached-loop-grid__filter-btn{
  border-width: 1px;
}
.dsk-cached-loop-grid__filter-select{
  padding: 8px 14px;
  border: 1px solid currentColor;
  border-radius: 8px;
  background: transparent;
  font: inherit;
  cursor: pointer;
}
.dsk-cached-loop-grid__filter-clear{
  padding: 8px 4px;
  border: none;
  background: transparent;
  font: inherit;
  font-weight: 700;
  text-decoration: underline;
  cursor: pointer;
}

/* Grouped ("segmented") filter bar — the four chips read as ONE block: a single
   rounded bar, optional hairline dividers between the buttons, and the active
   one marked by an underline rather than a filled pill. Every colour here is
   overridable from Style > Filters, so a page needs no custom CSS for it. */
.dsk-cached-loop-grid__filters--segmented{
  display: inline-flex;
  flex-wrap: nowrap;
  gap: 0;
  padding: 4px;
  border-radius: 999px;
  background-color: rgba(255,255,255,.12);
}
.dsk-cached-loop-grid .dsk-cached-loop-grid__filters--segmented .dsk-cached-loop-grid__filter-btn{
  position: relative;
  border-radius: 0;
  padding: 10px 28px;
  white-space: nowrap;
}
[data-dividers="yes"] .dsk-cached-loop-grid__filter-btn + .dsk-cached-loop-grid__filter-btn{
  border-left: var(--dsk-filter-divider-width, 1px) solid var(--dsk-filter-divider-color, rgba(255,255,255,.25));
}
/* Opt-in: a rule the width of the chip, distinct from a typography underline. */
.dsk-cached-loop-grid__filters--segmented .dsk-cached-loop-grid__filter-btn.is-active::after{
  content: "";
  position: absolute;
  left: 28px;
  right: 28px;
  bottom: 4px;
  height: 1px;
  background-color: var(--dsk-filter-underline, transparent);
}
/* Between phone and desktop the header WRAPS: the filters take one row and the
   search drops onto the next, where it would otherwise sit at its desktop width
   against half a row of dead space. Every item grows into the row it lands on,
   so a row is never part-empty. Desktop is untouched — there the row does not
   wrap, and Controls Width stays exact. */
@media (min-width: 768px) and (max-width: 1024.98px){
  .dsk-cached-loop-grid__header > *,
  .dsk-cached-loop-grid__filters.dsk-cached-loop-grid__filters--tax > .dsk-cached-loop-grid__filter-group{
    flex: 1 1 auto;
  }
  .dsk-cached-loop-grid__search{
    width: auto;
  }
  /* stretch, or the group stays shrink-to-fit and the head collapses to the
     width of its own longest option instead of taking the row it was given */
  .dsk-cached-loop-grid__filter-group{
    align-items: stretch;
  }
  .dsk-cached-loop-grid__dropdown{
    display: block;
  }
  .dsk-cached-loop-grid .dsk-cached-loop-grid__dropdown .dsk-cached-loop-grid__dropdown-trigger{
    min-width: 0;
  }
}

/* .98 rather than a whole pixel on both bounds: a device with a fractional
   pixel ratio evaluates a 768px viewport at 767.x, and a whole-pixel boundary
   drops it through the gap between the two ranges into the desktop layout. */
@media (max-width: 767.98px){
  /* Stacked header: each control already owns its row, so it TAKES the row
     instead of sitting left-aligned against dead space — and a width meant for
     a 1340px desktop can never overflow a phone. Controls Width is therefore a
     desktop/tablet setting; on mobile the controls fill, by design. */
  .dsk-cached-loop-grid__header > *{
    width: 100%;
  }
  .dsk-cached-loop-grid__filter-group{
    align-items: stretch;
  }
  .dsk-cached-loop-grid__filters.dsk-cached-loop-grid__filters--tax{
    flex-direction: column;
    align-items: stretch;
  }
  .dsk-cached-loop-grid__dropdown{
    display: block;
  }
  /* Block-level here, so the head takes its width from the row instead of from
     a desktop min-width that would hang off the side of a small phone. */
  .dsk-cached-loop-grid .dsk-cached-loop-grid__dropdown .dsk-cached-loop-grid__dropdown-trigger{
    min-width: 0;
  }
  .dsk-cached-loop-grid__search{
    width: 100%;
  }
  /* The 360px cap is a desktop measure: it keeps the field from stretching the
     width of a 1340px row. On a phone the field already owns its row, so the cap
     only holds it short of the edge. */
  .dsk-cached-loop-grid__search-field{
    max-width: none;
  }
  .dsk-cached-loop-grid__filters--segmented{
    flex-wrap: wrap;
    border-radius: 18px;
  }
  .dsk-cached-loop-grid .dsk-cached-loop-grid__filters--segmented .dsk-cached-loop-grid__filter-btn{
    padding: 10px 16px;
  }
  .dsk-cached-loop-grid__filters--segmented .dsk-cached-loop-grid__filter-btn.is-active::after{
    left: 16px;
    right: 16px;
  }
}