/*
 * DCE shop (Elementor edition) - behaviour only.
 * No colours, fonts or spacing here: set those on the Elementor widgets and containers.
 */

/* Filter screen on tablet and phone: the Elementor container "Filters" becomes a full-screen layer. */
@media (max-width:1024px){
  .dce-el-drawer{display:none!important}
  html.dce-el-f-open .dce-el-drawer{display:flex!important;flex-wrap:nowrap;position:fixed;top:0;right:0;bottom:0;left:0;z-index:100000;overflow-y:auto;-webkit-overflow-scrolling:touch}
  html.dce-el-f-open .jupiterx-main{z-index:100001}
  html.dce-el-f-open .jupiterx-scroll-top{visibility:hidden}
  html.dce-el-f-open,html.dce-el-f-open body{overflow:hidden}
  .dce-el-drawer .dce-el-head{position:sticky;top:0;z-index:2}
  .dce-el-drawer .dce-el-foot{position:sticky;bottom:0;z-index:2;margin-top:auto}
}

/* Number of chosen options next to a group title. Takes the title colour; override with
   --dce-bubble-bg / --dce-bubble-text if ever needed. */
.dce-el-n{display:inline-grid;place-items:center;box-sizing:border-box;min-width:1.65em;height:1.65em;padding:0 .45em;margin-left:.7em;border-radius:99em;font-size:.7em;line-height:1;font-variant-numeric:tabular-nums;background:var(--dce-bubble-bg,currentColor);vertical-align:.12em}
.dce-el-n > i{font-style:normal;color:var(--dce-bubble-text,#fff)}
.dce-el-n:empty{display:none}

/* Counter of an option that is not chosen, in a filter group that already has a choice: the number would not
   say what a click gives, so it is not shown. The option itself stays visible and clickable. */
.jet-filters-counter.dce-el-c-off{visibility:hidden}

/* "Best sellers" switch: two Elementor buttons, one per state; only one shows (both show in the editor). */
html:not(.dce-el-best) body:not(.elementor-editor-active) .dce-el-best-on{display:none!important}
html.dce-el-best body:not(.elementor-editor-active) .dce-el-best-off{display:none!important}