/** Shopify CDN: Minification failed

Line 1037:0 Unexpected "}"
Line 1608:0 Unexpected "}"

**/

/* Motion 3D Grid — scoped by #Motion3DGrid-{{ section.id }} wrapper via inline vars */

.motion-3d-collection-grid {
  background: var(--motion-bg);
  color: var(--motion-text);
  padding: 24px 0;
}

.motion-3d-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin: 8px 0 18px;
}

.motion-3d-title {
  margin: 0;
  font-size: clamp(20px, 2vw, 28px);
  letter-spacing: 0.02em;
}

.motion-3d-count {
  color: var(--motion-muted);
  font-size: 14px;
}

/* Grid */
.motion-3d-grid {
  list-style: none;
  margin: 0;
  padding: 0;

  display: grid;
  gap: var(--motion-gap);
  grid-template-columns: repeat(2, minmax(0, 1fr)); /* mobile always 2 */
}

@media screen and (min-width: 990px) {
  .motion-3d-grid {
    grid-template-columns: repeat(var(--motion-cols-desktop), minmax(0, 1fr));
  }
}

.motion-3d-item {
  min-width: 0;
}

/* The 3D card wrapper around Dawn's card-product */
.motion-3d-card {
  background: var(--motion-card);
  border: 1px solid var(--motion-border);
  border-radius: var(--motion-radius);
  overflow: hidden;

  transform-style: preserve-3d;
  will-change: transform;
  transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.38);
  position: relative;
}

/* Subtle highlight sheen */
.motion-3d-card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(
    700px 220px at 20% 0%,
    rgba(255, 255, 255, 0.06),
    transparent 60%
  );
  opacity: 0.9;
}

/* Lift on hover (tilt is added by JS via --rx/--ry) */
.motion-3d-card:hover {
  border-color: rgba(255, 255, 255, 0.18);
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.55);
  transform: perspective(900px)
    rotateX(var(--rx, 0deg))
    rotateY(var(--ry, 0deg))
    translateY(-6px);
}



/* Keep Dawn card internals clean and consistent */
.motion-3d-card .card {
  background: transparent;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.motion-3d-card .card__inner {
  border-radius: calc(var(--motion-radius) - 2px);
  flex: 0 0 auto;
}

/* Content area: top-left stack */
.motion-3d-card .card__content {
  flex: 1 1 auto;
  padding: 14px 16px 16px !important;
  display: flex;
  flex-direction: column;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  text-align: left !important;
}

/* If theme adds "center" helpers */
.motion-3d-card .card__content.center,
.motion-3d-card .card__information.center {
  text-align: left !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
}

.motion-3d-card .card__information {
  width: 100%;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  gap: 6px;
}

/* Vendor / Brand */
.motion-3d-card .vendor,
.motion-3d-card .card__vendor,
.motion-3d-card .caption-with-letter-spacing {
  letter-spacing: 0.01em !important;
  text-transform: none !important;
  font-weight: 700 !important;
  margin: 0 !important;
  line-height: 1.15;
  color: var(--motion-text);
}

/* Product title */
.motion-3d-card .card__heading {
  width: 100%;
  margin: 0 !important;
  line-height: 1.25;
}

.motion-3d-card .card__heading,
.motion-3d-card .card__heading a {
  color: var(--motion-text);
  letter-spacing: 0.02em;
}

.motion-3d-card .card__heading a {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  -webkit-line-clamp: 2;
}

/* Price row – left aligned under title */
.motion-3d-card .price {
  width: 100%;
  margin: 4px 0 0 0 !important;
  display: flex !important;
  justify-content: flex-start !important;
  align-items: baseline !important;
  gap: 10px;
}

.motion-3d-card .price,
.motion-3d-card .price * {
  color: var(--motion-text);
}

.motion-3d-card .price__sale .price-item--sale {
  color: var(--motion-text);
}

.motion-3d-card .price__sale .price-item--regular,
.motion-3d-card .price-item--regular {
  color: var(--motion-muted);
}

.motion-3d-card .price__container {
  justify-content: flex-start !important;
}

/* Desktop sizing (keep your current desktop look) */
@media screen and (min-width: 990px) {
  .motion-3d-card .vendor,
  .motion-3d-card .card__vendor,
  .motion-3d-card .caption-with-letter-spacing {
    font-size: 15px !important;
  }

  .motion-3d-card .card__heading a {
    font-size: 13px !important;
    font-weight: 500 !important;
    opacity: 0.9;
  }

  .motion-3d-card .price {
    font-size: 14px !important;
    font-weight: 600 !important;
  }
}

/* Mobile only: SMALLER like your reference (no more giant 20px/18px) */
@media screen and (max-width: 749px) {
  .motion-3d-grid {
    gap: calc(var(--motion-gap) - 6px);
  }

  .motion-3d-card .card__content {
    padding: 12px 12px 14px !important;
  }

  .motion-3d-card .vendor,
  .motion-3d-card .card__vendor,
  .motion-3d-card .caption-with-letter-spacing {
    font-size: 14px !important;
  }

  .motion-3d-card .card__heading a {
    font-size: 12px !important;
    line-height: 1.25 !important;
    -webkit-line-clamp: 2;
  }

  .motion-3d-card .price {
    font-size: 13px !important;
    font-weight: 700 !important;
    margin-top: 4px !important;
  }
}

/* Pagination spacing */
.motion-3d-pagination {
  margin-top: 18px;
}

/* Empty state */
.motion-3d-empty {
  padding: 24px 0;
  color: var(--motion-muted);
}

/* Accessibility: reduce motion */
@media (prefers-reduced-motion: reduce) {
  .motion-3d-card,
  .motion-3d-card:hover {
    transition: none;
    transform: none !important;
  }
}
/* Mobile: make price tag smaller */
@media screen and (max-width: 749px) {
  .motion-3d-card .price {
    font-size: 12px !important;  /* was 13px */
    line-height: 1.15 !important;
  }

  /* Optional: make the currency code (GBP) a touch smaller too */
  .motion-3d-card .price .currency-code,
  .motion-3d-card .price .money {
    font-size: 12px !important;
  }
}
/* Remove duplicate white title/price overlay inside the image area (keep the text below) */
.motion-3d-card .card__inner .card__content {
  display: none !important;
}

/* Mobile: compare-at (strikethrough) same size as actual price */
@media screen and (max-width: 749px) {
  .motion-3d-card .price-item--sale,
  .motion-3d-card .price-item--regular {
    font-size: inherit !important; /* inherit from .price */
    line-height: inherit !important;
  }

  /* Optional: keep compare price slightly dim but same size */
  .motion-3d-card .price__sale .price-item--regular {
    opacity: 0.75;
  }
}
/* Desktop: reduce left/right gutter + allow wider grid (bigger cards) */
@media screen and (min-width: 990px) {
  .motion-3d-collection-grid .page-width {
    max-width: 1600px;          /* wider than Dawn default */
    padding-left: 0px !important;
    padding-right: 0px !important;
  }

  /* Slightly tighter gaps so cards feel larger */
  .motion-3d-grid {
    gap: calc(var(--motion-gap) - 6px);
  }
}
/* Desktop: increase spacing between cards (columns) + between rows */
@media screen and (min-width: 990px) {
  .motion-3d-grid {
    column-gap: calc(var(--motion-gap) + 20px);
    row-gap: calc(var(--motion-gap) + 50px);
  }
}
/* Bottom under-glow (outside the card outline) */
.motion-3d-card {
  /* keep your dark depth shadow + add subtle white glow from below */
  box-shadow:
    0 10px 28px rgba(0, 0, 0, 0.38),
    0 18px 22px -18px rgba(255, 255, 255, 0.28) !important;
}

/* Hover: still no zoom, just a touch more depth + glow */
.motion-3d-card:hover {
  box-shadow:
    0 18px 60px rgba(0, 0, 0, 0.55),
    0 26px 28px -22px rgba(226, 226, 226, 0.32) !important;
}
/* Mobile: more outer breathing room, tighter gaps between cards */
@media screen and (max-width: 749px) {
  /* More space at the sides of the screen */
  .motion-3d-collection-grid .page-width {
    padding-left: 21px !important;
    padding-right: 21px !important;
  }

  /* Reduce gap between cards (both directions) */
  .motion-3d-grid {
    column-gap: 14px !important;
    row-gap: 25px !important;
  }
}
/* Move text/price slightly more top-left (all devices) */
.motion-3d-card .card__content {
  padding-top: 12px !important;
  padding-left: 12px !important;
  padding-right: 12px !important;
  padding-bottom: 14px !important;
}

.motion-3d-card .card__information {
  gap: 4px !important; /* tighter vertical spacing */
}

/* Desktop: nudge a little more (optional) */
@media screen and (min-width: 990px) {
  .motion-3d-card .card__content {
    padding-top: 10px !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
    padding-bottom: 20px !important;
  }
}

/* Mobile: nudge slightly more (optional) */
@media screen and (max-width: 749px) {
  .motion-3d-card .card__content {
    padding-top: 7px !important;
    padding-left: 7px !important;
    padding-right: 10px !important;
    padding-bottom: 2px !important;
  }
}
/* Mobile: disable 3D hover/tilt/move effects */
@media screen and (max-width: 989px) {
  .motion-3d-card,
  .motion-3d-card:hover {
    transform: none !important;
    transition: none !important;
  }
}
/* Desktop: reduce gutters (left/right padding) even more */
@media screen and (min-width: 990px) {
  .motion-3d-collection-grid .page-width {
    max-width: 1800px;          /* let the grid run wider */
    padding-left: 50px !important;
    padding-right: 50px !important;
  }
}
/* Mobile: make all product cards equal height */
@media screen and (max-width: 749px) {}
  /* Make grid items stretch */
  .motion-3d-grid {
    align-items: stretch;
  }

  .motion-3d-item,
  .motion-3d-card,
  .motion-3d-card .card {
    height: 100%;
  }

/* Mobile: add extra space ONLY when needed (short cards), without changing image ratio */
@media screen and (max-width: 749px) {
  /* Make each card stretch to fill its grid cell */
  .motion-3d-item,
  .motion-3d-card,
  .motion-3d-card .card {
    height: 100%;
  }

  .motion-3d-card .card {
    display: flex;
    flex-direction: column;
  }

  /* Keep vendor to 1 line */
  .motion-3d-card .caption-with-letter-spacing.light,
  .motion-3d-card .card__vendor,
  .motion-3d-card .vendor {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Cap title to 2 lines so long titles don't make taller cards */
  .motion-3d-card .card__heading a {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    -webkit-line-clamp: 2;
  }

  /* This is the key: only short cards get extra space */
  .motion-3d-card .card__content:last-child {
    min-height: 74px;                 /* adjust 80–100px to taste */
    padding-bottom: 0px !important;  /* adds breathing room, but only if needed */
  }
}
/* Motion: make facets bar text/icons white */
.motion-3d-collection-grid .facets-container,
.motion-3d-collection-grid .facets-container * {
  color: var(--motion-text) !important;
}

.motion-3d-collection-grid .icon-caret,
.motion-3d-collection-grid .icon-filter,
.motion-3d-collection-grid .icon-close {
  fill: var(--motion-text) !important;
  color: var(--motion-text) !important;
}
/* =========================================================
   Motion sort bar — DripModa-inspired (BLACK)
   Forces layout + wins vs Dawn styles
   ========================================================= */

/* (Optional debug) Uncomment for 5 seconds to confirm CSS is applying */
/* .motion-3d-collection-grid .motion-sortbar { outline: 2px solid #00ff77 !important; } */

.motion-3d-collection-grid .motion-sortbar {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 18px !important;

  margin: 0 0 28px !important;
  padding: 12px 0 14px !important;

  border-bottom: 1px solid rgba(255, 255, 255, 0.14) !important; /* dark grey divider */
}

/* Left text: "Showing..." */
.motion-3d-collection-grid .motion-sortbar__count .product-count__text {
  color: rgba(255,255,255,0.65) !important;
  font-size: 13px !important;
  line-height: 1.2 !important;
}

/* Keep the sort form tight (NOT full width white bar) */
.motion-3d-collection-grid .motion-sortbar form.facet-filters {
  width: auto !important;
  margin: 0 !important;
}

/* Sort row */
.motion-3d-collection-grid .motion-sortbar .facet-filters__field {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 10px !important;
  margin: 0 !important;
}

/* SORT BY label */
.motion-3d-collection-grid .motion-sortbar .facet-filters__label {
  color: rgba(255,255,255,0.92) !important;
  font-weight: 700 !important;
  font-size: 12px !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  margin: 0 !important;
}

/* Select wrapper (override Dawn's full-width select styling) */
.motion-3d-collection-grid .motion-sortbar .select {
  width: auto !important;
  min-width: 180px !important;
  max-width: 240px !important;

  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;

  position: relative !important;
}

/* Select itself */
.motion-3d-collection-grid .motion-sortbar .select__select {
  width: 100% !important;
  background: transparent !important;
  border: 0 !important;

  color: rgba(255,255,255,0.92) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;

  padding: 0 22px 0 0 !important; /* room for caret */
  min-height: auto !important;
  line-height: 1 !important;
}

/* Caret icon */
.motion-3d-collection-grid .motion-sortbar .icon-caret {
  position: absolute !important;
  right: 0 !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  color: rgba(255,255,255,0.85) !important;
  fill: rgba(255,255,255,0.85) !important;
}

/* Mobile: match DripModa layout
   - Sort row on top right
   - Count centered underneath
*/
@media screen and (max-width: 749px) {
  .motion-3d-collection-grid .motion-sortbar {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;

    margin: 0 0 18px !important;
    padding: 10px 0 12px !important;
  }

  .motion-3d-collection-grid .motion-sortbar form.facet-filters {
    width: 100% !important;
  }

  .motion-3d-collection-grid .motion-sortbar .facet-filters__field {
    justify-content: flex-end !important;
  }

  .motion-3d-collection-grid .motion-sortbar__count {
    text-align: center !important;
  }

  .motion-3d-collection-grid .motion-sortbar__count .product-count__text {
    color: rgba(255,255,255,0.55) !important;
    font-size: 13px !important;
  }
}
/* =========================
   Sort dropdown: modern white pill
   ========================= */
.motion-3d-collection-grid .motion-sortbar .facet-filters__label{
  /* keep or hide this label – if you want ONLY the dropdown, uncomment next line */
  /* display:none !important; */
}

.motion-3d-collection-grid .motion-sortbar .select{
  min-width: 210px !important;
  max-width: 260px !important;
}

.motion-3d-collection-grid .motion-sortbar .select__select{
  background: #ffffff !important;
  color: #0b0b0e !important;
  border: 1px solid rgba(255,255,255,0.18) !important;
  border-radius: 999px !important;

  padding: 10px 42px 10px 14px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;

  min-height: 40px !important;
  line-height: 1 !important;
}

/* caret stays dark on the white pill */
.motion-3d-collection-grid .motion-sortbar .icon-caret{
  color: #0b0b0e !important;
  fill: #0b0b0e !important;
  right: 16px !important;
}

/* (Optional) make dropdown menu white too (works in many browsers, not all) */
.motion-3d-collection-grid .motion-sortbar .select__select option{
  background: #ffffff;
  color: #0b0b0e;
}
/* =========================
   Pagination: show numbers + white bold
   ========================= */
.motion-3d-collection-grid .motion-3d-pagination .pagination__list{
  display: flex !important;
  justify-content: center !important;
  gap: 10px !important;
}

/* Force number items visible (in case something hid them earlier) */
.motion-3d-collection-grid .motion-3d-pagination .pagination__list > li{
  display: list-item !important;
}

/* Links + current page */
.motion-3d-collection-grid .motion-3d-pagination .pagination__item{
  color: #ffffff !important;
  font-weight: 800 !important;
  opacity: 0.95;
}

/* Make the clickable ones look clean */
.motion-3d-collection-grid .motion-3d-pagination a.pagination__item{
  text-decoration: none !important;
  border: 1px solid rgba(255,255,255,0.14) !important;
  border-radius: 999px !important;
  padding: 10px 14px !important;
  min-width: 42px;
  text-align: center;
}

/* Current page (filled) */
.motion-3d-collection-grid .motion-3d-pagination .pagination__item--current{
  background: #ffffff !important;
  color: #0b0b0e !important;
  border-radius: 999px !important;
  padding: 10px 14px !important;
  min-width: 42px;
  text-align: center;
}

/* Next/Prev arrows white too */
.motion-3d-collection-grid .motion-3d-pagination .pagination__item--next,
.motion-3d-collection-grid .motion-3d-pagination .pagination__item--prev{
  color: #ffffff !important;
}
.motion-3d-collection-grid .motion-3d-pagination .icon{
  fill: #ffffff !important;
  color: #ffffff !important;
}
/* =========================
   Pagination: show numbers + white bold
   ========================= */
.motion-3d-collection-grid .motion-3d-pagination .pagination__list{
  display: flex !important;
  justify-content: center !important;
  gap: 10px !important;
}

/* Force number items visible (in case something hid them earlier) */
.motion-3d-collection-grid .motion-3d-pagination .pagination__list > li{
  display: list-item !important;
}

/* Links + current page */
.motion-3d-collection-grid .motion-3d-pagination .pagination__item{
  color: #ffffff !important;
  font-weight: 800 !important;
  opacity: 0.95;
}

/* Make the clickable ones look clean */
.motion-3d-collection-grid .motion-3d-pagination a.pagination__item{
  text-decoration: none !important;
  border: 1px solid rgba(255,255,255,0.14) !important;
  border-radius: 999px !important;
  padding: 10px 14px !important;
  min-width: 42px;
  text-align: center;
}

/* Current page (filled) */
.motion-3d-collection-grid .motion-3d-pagination .pagination__item--current{
  background: #ffffff !important;
  color: #0b0b0e !important;
  border-radius: 999px !important;
  padding: 10px 14px !important;
  min-width: 42px;
  text-align: center;
}

/* Next/Prev arrows white too */
.motion-3d-collection-grid .motion-3d-pagination .pagination__item--next,
.motion-3d-collection-grid .motion-3d-pagination .pagination__item--prev{
  color: #ffffff !important;
}
.motion-3d-collection-grid .motion-3d-pagination .icon{
  fill: #ffffff !important;
  color: #ffffff !important;
}
/* Mobile: divider line between sort and count (count below the line) */
@media (max-width: 749px) {

  /* Remove the old bottom border line on mobile */
  .motion-3d-collection-grid .motion-sortbar{
    border-bottom: 0 !important;
    padding-bottom: 0 !important;

    display: grid !important;
    grid-template-columns: 1fr !important;
    row-gap: 10px !important;
  }

  /* Sort row stays at the top */
  .motion-3d-collection-grid .motion-sortbar form.facet-filters{
    order: 1 !important;
    justify-self: end !important;
    width: auto !important;
    margin: 0 !important;
  }

  /* Add a divider line AFTER the sort row */
  .motion-3d-collection-grid .motion-sortbar::after{
    content: "";
    order: 2;
    display: block;
    width: 100%;
    height: 1px;
    background: rgba(255,255,255,.14);
  }

  /* Count goes BELOW the divider line */
  .motion-3d-collection-grid .motion-sortbar__count{
    order: 3 !important;
    text-align: center !important;
    margin: 0 !important;
  }

  /* Keep the pill tighter on mobile (optional – keep if you want) */
  .motion-3d-collection-grid .motion-sortbar .select{
    min-width: 0 !important;
    max-width: none !important;
    width: auto !important;
  }

  .motion-3d-collection-grid .motion-sortbar .select__select{
    width: auto !important;
    max-width: 145px !important;
    padding: 9px 34px 9px 12px !important;
    font-size: 11px !important;
    min-height: 36px !important;
    white-space: nowrap !important;
  }

  .motion-3d-collection-grid .motion-sortbar .icon-caret{
    right: 12px !important;
  }
}
/* Ensure overlays in Motion grid never cover the sold out pill */
.motion-3d-card { position: relative; }
.motion-3d-card::before { z-index: 0 !important; }
.motion-3d-card .card-wrapper,
.motion-3d-card .card,
.motion-3d-card .card__inner { position: relative !important; z-index: 1 !important; }

/* Pill always above */
.motion-3d-card .motion-soldout-pill { z-index: 60 !important; }
/* =========================
   SOLD OUT: keep on one line + darken image (Motion grid only)
   ========================= */

/* If you used the pseudo-element approach */
.motion-3d-collection-grid .motion-3d-card[data-sold-out="true"]::after{
  white-space: nowrap !important;
  line-height: 1 !important;
  padding: 12px 22px !important; /* a touch wider so it never wraps */
}

/* If you used a real span instead of ::after, keep this too (safe) */
.motion-3d-collection-grid .motion-soldout-pill{
  white-space: nowrap !important;
}


.motion-3d-collection-grid{
  padding-top: var(--motion-pad-top, 24px);
  padding-bottom: var(--motion-pad-bottom, 24px);
}

@media (max-width: 749px){
  .motion-3d-collection-grid{
    padding-top: var(--motion-pad-top-m, 18px);
    padding-bottom: var(--motion-pad-bottom-m, 18px);
  }
}

/* Desktop: underline should sit under the actual text (incl. wrapped lines) */
@media (min-width: 990px) {
  /* Kill the pseudo underline we added earlier */
  .motion-3d-collection-grid .card__heading a.full-unstyled-link::after {
    content: none !important;
  }

  /* Force true text underline on hover (whole card hover) */
  .motion-3d-collection-grid .card-wrapper:hover .card__heading a.full-unstyled-link,
  .motion-3d-collection-grid .card-wrapper:focus-within .card__heading a.full-unstyled-link {
    text-decoration: underline !important;
    text-underline-offset: 0.18em;
    text-decoration-thickness: 1px;
  }
}
/* Facets dropdown text visibility (Motion section only) */
#Motion3DGrid- .facets * { color: inherit; } /* harmless if ignored */

/* Scope correctly to your section container */
.motion-3d-collection-grid .facets__summary,
.motion-3d-collection-grid .facets__summary span,
.motion-3d-collection-grid .facets__heading,
.motion-3d-collection-grid .facets__label,
.motion-3d-collection-grid .facet-checkbox__text,
.motion-3d-collection-grid .facet-checkbox__label,
.motion-3d-collection-grid .facet-checkbox__count {
  color: rgba(255,255,255,0.92) !important;
}

/* Dropdown panel background */
.motion-3d-collection-grid .facets__display {
  background: #0b0b0e !important;
  border: 1px solid rgba(255,255,255,0.14) !important;
}
/* Keep "Sort by" left of the pill (desktop + mobile) */
.motion-3d-collection-grid .motion-sortbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
}

.motion-3d-collection-grid .motion-sort-form__field{
  display:flex;
  align-items:center;
  gap:10px;
}

.motion-3d-collection-grid .motion-sort-form__label{
  margin:0;
  color: var(--motion-text);
  font-weight:700;
  letter-spacing:.02em;
  white-space:nowrap;
}


































/* ========================================
   MOTION 3D GRID - COMPLETE CSS (WORKING VERSION)
   Replace your entire motion-3d-grid.css with this
   ======================================== */

/* HIDE "X of Y products" text EVERYWHERE on the page */
.collection p,
.page-width > p,
.title-wrapper p,
p.h2,
p[class*="heading"],
.collection__title-wrapper p,
span[class*="ProductCount"],
.product-count,
.facets__product-count,
.mobile-facets__count {
  display: none !important;
}

/* Show back ONLY the "Showing X of X" text in our sort bar */
.motion-3d-collection-grid .motion-sortbar .product-count__text,
.motion-3d-collection-grid .motion-sortbar__count {
  display: block !important;
}

/* Desktop: Force visual order with flexbox */
@media screen and (min-width: 750px) {
  .motion-3d-collection-grid .page-width {
    display: flex !important;
    flex-direction: column !important;
  }
  
 /* Desktop: hide ONLY product counts (do NOT hide all spans) */
@media screen and (min-width: 750px) {
  .motion-3d-collection-grid .facets__product-count,
  .motion-3d-collection-grid .facets-container .product-count,
  .motion-3d-collection-grid .facets__summary .facets__count,
  .motion-3d-collection-grid [id*="ProductCount"] {
    display: none !important;
  }

  /* Safety: ensure option text spans are visible */
  .motion-3d-collection-grid .facets__label span,
  .motion-3d-collection-grid .facet-checkbox__text,
  .motion-3d-collection-grid .facet-checkbox__text-label {
    display: inline !important;
  }
}

  
  /* 1. Filters */
  .motion-3d-collection-grid .motion-facets {
    order: 1 !important;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
    border: none !important;
  }
  
  /* 2. Pills */
  .motion-3d-collection-grid .motion-active-filters-wrapper {
    order: 2 !important;
    margin: 16px 0 20px 0 !important;
    padding: 0 !important;
    border: none !important;
  }
  
  /* 3. Sort bar WITH grey line below */
  .motion-3d-collection-grid .motion-sortbar {
    order: 3 !important;
    margin: 0 0 24px 0 !important;
    padding: 0 0 16px 0 !important;
    border-top: none !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.14) !important;
  }
  
  /* 4. Products */
  .motion-3d-collection-grid #ProductGridContainer {
    order: 4 !important;
  }
  
  /* 5. Pagination */
  .motion-3d-collection-grid .motion-3d-pagination {
    order: 5 !important;
  }
}


  .motion-3d-collection-grid .motion-active-filters-wrapper .active-facets__button {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 8px 14px !important;
    background: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.9) !important;
    border-radius: 999px !important;
    color: #000000 !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
    cursor: pointer !important;
  }

  .motion-3d-collection-grid .motion-active-filters-wrapper .active-facets__button:hover {
    background: rgba(255, 255, 255, 0.9) !important;
  }

  .motion-3d-collection-grid .motion-active-filters-wrapper .active-facets__button svg,
  .motion-3d-collection-grid .motion-active-filters-wrapper .active-facets__button .icon {
    width: 12px !important;
    height: 12px !important;
    fill: none !important;
    stroke: #000000 !important;
    stroke-width: 2 !important;
  }

  .motion-3d-collection-grid .motion-active-filters-wrapper .active-facets__button-remove {
    display: inline-block !important;
    color: #ffffff !important;
    text-decoration: underline !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    padding: 8px 14px !important;
    cursor: pointer !important;
    background: transparent !important;
    border: none !important;
  }

  .motion-3d-collection-grid .motion-active-filters-wrapper .active-facets__button-remove:hover {
    color: rgba(255, 255, 255, 0.8) !important;
  }
}

/* Mobile - hide desktop pills wrapper */
@media screen and (max-width: 749px) {
  .motion-3d-collection-grid .motion-active-filters-wrapper {
    display: none !important;
  }
}

/* Mobile: ONLY target filter drawer - not other drawers */
@media screen and (max-width: 749px) {
  /* Make drawer narrower - show site on left */
  .mobile-facets__wrapper,
  menu-drawer.mobile-facets__wrapper,
  .mobile-facets {
    width: 85% !important;
    max-width: 420px !important;
    margin-left: auto !important;
    margin-right: 0 !important;
    right: 0 !important;
    left: auto !important;
  }
  
  /* Force ALL children to be full width */
  .mobile-facets__wrapper *,
  .mobile-facets * {
    box-sizing: border-box !important;
  }
  
  /* Make inner content span full drawer width */
  .mobile-facets__inner,
  .mobile-facets__main {
    width: 100% !important;
    max-width: 100% !important;
  }
  
  /* Remove ALL side padding so text/lines go full width - NUCLEAR */
  .mobile-facets__inner,
  .mobile-facets__main,
  .mobile-facets__form,
  .mobile-facets,
  .mobile-facets__wrapper,
  .mobile-facets__wrapper > *,
  .facets-container-drawer,
  menu-drawer,
  .menu-drawer__inner-container,
  details.mobile-facets__disclosure,
  .mobile-facets__disclosure,
  .mobile-facets__list,
  .facets__form,
  menu-drawer > *,
  .mobile-facets > *,
  .menu-drawer__inner,
  .drawer__inner {
    padding: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-inline-start: 0 !important;
    padding-inline-end: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-inline-start: 0 !important;
    margin-inline-end: 0 !important;
  }
  
  /* Force wrapper to have NO padding - multiple approaches */
  menu-drawer.mobile-facets__wrapper,
  .mobile-facets__wrapper.menu-drawer {
    padding: 0 !important;
    padding-inline: 0 !important;
    margin-inline: 0 !important;
  }
  
  /* Override any utility classes */
  .mobile-facets [class*="padding"],
  .mobile-facets__wrapper [class*="padding"] {
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-inline-start: 0 !important;
    padding-inline-end: 0 !important;
  }
  
  /* Header area - NO padding */
  .mobile-facets__header,
  .mobile-facets__heading,
  .mobile-facets .page-width,
  .mobile-facets__wrapper .page-width,
  .mobile-facets__wrapper .container {
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-inline-start: 0 !important;
    padding-inline-end: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  
  /* Text elements - add padding for breathing room on LEFT, less on RIGHT */
  .mobile-facets__summary,
  .mobile-facets__label,
  .facets__list {
    padding-left: 20px !important;
    padding-right: 20px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  
  /* Grey divider lines container - FULL WIDTH absolutely no padding */
  .mobile-facets__details {
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-inline-start: 0 !important;
    padding-inline-end: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  
  /* Make summary items stretch full width with padding */
  .mobile-facets__summary {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  
  /* Text flush left, arrows flush right */
  .mobile-facets__summary span {
    text-align: left !important;
  }
  
  .mobile-facets__summary svg,
  .mobile-facets__summary .icon {
    margin-left: auto !important;
  }
  
  /* Labels padding for checkboxes */
  .mobile-facets__label {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  
  /* But summary inside details needs padding */
  .mobile-facets__details .mobile-facets__summary {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  
  /* Footer - fix "Remove all" button layout - ZERO PADDING */
  .mobile-facets__footer {
    padding: 20px 0 20px 20px !important;
    padding-inline-start: 20px !important;
    padding-inline-end: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 12px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  
  /* Remove all link - don't let it stack */
  .mobile-facets__footer .active-facets__button-remove,
  .mobile-facets__footer a {
    white-space: nowrap !important;
  }
  
  /* Let borders go full width - edge to edge - AGGRESSIVE */
  .mobile-facets__details,
  details.mobile-facets__details {
    border-left: none !important;
    border-right: none !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }
  
  /* Ensure border-bottom goes full width spanning the entire drawer */
  .mobile-facets__details {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-bottom-width: 1px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  
  /* Only the filter drawer wrapper */
  menu-drawer.mobile-facets__wrapper {
    background: transparent !important;
  }
  
  /* Only filter disclosure */
  details.mobile-facets__disclosure {
    background: transparent !important;
  }
  
  /* Only filter button wrapper */
  details.mobile-facets__disclosure > summary.mobile-facets__open-wrapper,
  .mobile-facets__disclosure .mobile-facets__open-wrapper {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 8px 0 !important;
  }
  
  /* Filter button text/icon */
  .mobile-facets__open {
    background: transparent !important;
  }
  
  /* Show main filter label inside the button */
  .mobile-facets__open .mobile-facets__open-label:not(.hide) {
    color: #ffffff !important;
    display: inline !important;
  }
  
  .mobile-facets__open-label {
    color: #ffffff !important;
  }
  
  /* Hide the SECOND filter label - keep only first */
  .mobile-facets__open .mobile-facets__open-label:nth-child(2),
  .mobile-facets__open .mobile-facets__open-label:nth-of-type(2),
  .mobile-facets__open span:nth-child(3) {
    display: none !important;
  }
  
  /* Hide ALL duplicate filter labels - ULTRA AGGRESSIVE */
  .mobile-facets__open-wrapper span.hide,
  .mobile-facets__open-wrapper .button-label.small,
  .mobile-facets__open-wrapper .button-label.medium,
  span.mobile-facets__open-label.hide,
  span.mobile-facets__open-label.button-label.small.hide,
  span.mobile-facets__open-label.button-label.medium.hide,
  span.mobile-facets__open-label.large-up-hide,
  .mobile-facets__disclosure summary span.hide {
    display: none !important;
  }

  .mobile-facets__open svg,
  .mobile-facets__open .icon-filter {
    fill: #ffffff !important;
    color: #ffffff !important;
  }
  
  .mobile-facets__open line,
  .mobile-facets__open circle {
    stroke: #ffffff !important;
  }
  
  /* Hide ONLY product count next to filter button, not the filter label */
  .mobile-facets__open-wrapper > span[id*="ProductCount"],
  .mobile-facets__open-wrapper > .product-count {
    display: none !important;
  }
}

/* Mobile drawer - black background with white text */
@media screen and (max-width: 749px) {
  .menu-drawer,
  .mobile-facets__wrapper {
    background: #0b0b0e !important;
  }

  /* Main drawer area */
  .mobile-facets,
  .mobile-facets__inner {
    background: #0b0b0e !important;
  }

  /* Submenu when you click an option - BLACK with WHITE text */
  .mobile-facets__submenu,
  .mobile-facets__submenu.gradient {
    background: #0b0b0e !important;
    background-color: #0b0b0e !important;
    background-image: none !important;
  }

  /* All text white in drawer */
  .menu-drawer *,
  .mobile-facets__wrapper *,
  .mobile-facets *,
  .mobile-facets__submenu *,
  .facets-container-drawer * {
    color: #ffffff !important;
  }

  /* Heading */
  .mobile-facets__heading {
    color: #ffffff !important;
  }

  /* Close button icon */
  .mobile-facets__close svg,
  .mobile-facets__close .icon,
  .mobile-facets__close-button svg,
  .mobile-facets__close-button .icon {
    fill: #ffffff !important;
  }

  /* Form background */
  .mobile-facets__main,
  .mobile-facets__form {
    background: #0b0b0e !important;
  }

  /* Section dividers */
  .mobile-facets__details {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
  }

  /* Facet summaries (expandable sections) */
  .facets__summary,
  .mobile-facets__summary {
    color: #ffffff !important;
  }

  /* Icons white */
  .facets__summary svg,
  .facets__summary .icon,
  .mobile-facets__summary svg,
  .mobile-facets__summary .icon {
    fill: #ffffff !important;
  }

  /* Checkbox border */
  input[type="checkbox"] {
    border: 2px solid rgba(255, 255, 255, 0.3) !important;
  }

  /* Checked checkbox */
  input[type="checkbox"]:checked {
    background: #ffffff !important;
    border-color: #ffffff !important;
  }

  /* Footer - TRANSPARENT wrapper */
  .mobile-facets__footer,
  .facets__footer {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border-top: none !important;
    border: none !important;
    box-shadow: none !important;
  }
  
  /* Remove gradient class backgrounds on footer */
  .mobile-facets__footer.gradient,
  .mobile-facets__footer .gradient,
  .facets__footer.gradient,
  .facets__footer .gradient {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
  }
  
  /* Remove backgrounds from ALL descendants except button */
  .mobile-facets__footer > div,
  .mobile-facets__footer > form,
  .mobile-facets__footer form > div,
  .facets__footer > div,
  .facets__footer > form,
  .facets__footer form > div {
    background: none !important;
    background-color: transparent !important;
    background-image: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    border: none !important;
  }
  
  /* Remove any parent backgrounds and pseudo-elements */
  .mobile-facets__footer::before,
  .mobile-facets__footer::after,
  .facets__footer::before,
  .facets__footer::after,
  .mobile-facets__footer > div::before,
  .mobile-facets__footer > div::after,
  .mobile-facets__footer form::before,
  .mobile-facets__footer form::after {
    display: none !important;
    background: none !important;
  }

  /* Apply button - white pill */
  .mobile-facets__footer button {
    background: #ffffff !important;
    color: #0b0b0e !important;
    border-radius: 999px !important;
    font-weight: 700 !important;
  }

  /* Active filter pills - clickable */
  .active-facets,
  .active-facets-mobile {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    padding: 12px 20px !important;
    background: transparent !important;
    position: relative !important;
    z-index: 1 !important;
  }

  .active-facets__button,
  .active-facets-mobile__button {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    background: rgba(255, 255, 255, 0.15) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
    border-radius: 999px !important;
    padding: 8px 14px !important;
    font-size: 13px !important;
    text-decoration: none !important;
    cursor: pointer !important;
    pointer-events: auto !important;
    position: relative !important;
    z-index: 10 !important;
    -webkit-tap-highlight-color: transparent !important;
    touch-action: manipulation !important;
  }

  .active-facets__button *,
  .active-facets-mobile__button * {
    pointer-events: none !important;
  }

  .active-facets__button,
  .active-facets-mobile__button,
  a.active-facets__button,
  a.active-facets-mobile__button {
    pointer-events: auto !important;
  }

  .active-facets__button-remove,
  .active-facets-mobile__button--clear {
    display: inline-block !important;
    color: #ffffff !important;
    text-decoration: underline !important;
    font-size: 13px !important;
    padding: 8px 14px !important;
    cursor: pointer !important;
    pointer-events: auto !important;
    background: transparent !important;
    border: none !important;
    position: relative !important;
    z-index: 10 !important;
    -webkit-tap-highlight-color: transparent !important;
    touch-action: manipulation !important;
  }

  .active-facets__button svg,
  .active-facets__button .icon,
  .active-facets-mobile__button svg,
  .active-facets-mobile__button .icon {
    pointer-events: none !important;
    width: 12px !important;
    height: 12px !important;
  }

  .mobile-facets__footer {
    position: sticky !important;
    bottom: 0 !important;
    padding: 20px !important;
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border: none !important;
    border-top: none !important;
    box-shadow: none !important;
    z-index: 100 !important;
  }
  
  /* Nuclear: remove background from EVERYTHING inside footer except the button */
  .mobile-facets__footer > *:not(button) {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border: none !important;
    box-shadow: none !important;
  }

  .mobile-facets__footer button,
  .mobile-facets__footer button.button,
  .mobile-facets__footer button.button--primary,
  form.facets-form button[type="submit"],
  form.facets-form button.button,
  form.facets-form button.button--primary {
    width: auto !important;
    min-width: auto !important;
    padding: 11px 42px !important;
    margin-right: 20px !important;
    background: #2a2a2e !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 999px !important;
    font-weight: 400 !important;
    font-size: 14px !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    cursor: pointer !important;
    touch-action: manipulation !important;
    -webkit-tap-highlight-color: transparent !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
    transition: all 0.2s ease !important;
    outline: none !important;
  }
  
  /* Remove ALL Dawn button pseudo-elements */
  .mobile-facets__footer button::before,
  .mobile-facets__footer button::after,
  .mobile-facets__footer button.button::before,
  .mobile-facets__footer button.button::after,
  .mobile-facets__footer button.button--primary::before,
  .mobile-facets__footer button.button--primary::after,
  form.facets-form button[type="submit"]::before,
  form.facets-form button[type="submit"]::after {
    display: none !important;
    content: none !important;
    background: none !important;
  }

  .mobile-facets__footer button:active,
  form.facets-form button[type="submit"]:active {
    background: #363639 !important;
    transform: scale(0.98) !important;
  }

  .mobile-facets__footer button *,
  form.facets-form button[type="submit"] * {
    pointer-events: none !important;
  }
  
  /* Nuclear option: make ALL footer backgrounds TRANSPARENT */
  form.facets-form .mobile-facets__footer,
  form.facets-form footer,
  .facets-container-drawer footer,
  .facets__footer-group,
  .mobile-facets__footer-group,
  .facets__footer .button-group,
  .mobile-facets__footer .button-group {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border: none !important;
    box-shadow: none !important;
  }
}


  
  /* Checkboxes */
  .facets input[type="checkbox"] {
    border-color: rgba(255, 255, 255, 0.4) !important;
    background: transparent !important;
  }
  
  .facets input[type="checkbox"]:checked {
    background: #0b0b0e !important;
  }
}

/* Desktop & Mobile: Style checkboxes with WHITE X filling the box - FIXED ALIGNMENT */
.facets__checkbox,
input[type="checkbox"].facets__checkbox,
.mobile-facets__checkbox,
.mobile-facets__label input[type="checkbox"],
label.mobile-facets__label input[type="checkbox"],
.mobile-facets__details input[type="checkbox"] {
  appearance: none !important;
  -webkit-appearance: none !important;
  width: 20px !important;
  height: 20px !important;
  min-width: 20px !important;
  border: 2px solid rgba(255, 255, 255, 0.4) !important;
  border-radius: 3px !important;
  background: transparent !important;
  cursor: pointer !important;
  position: relative !important;
  flex-shrink: 0 !important;
  margin: 0 !important;
  top: 2px !important;
}

/* Checked state - dark background for white X */
.facets__checkbox:checked,
input[type="checkbox"].facets__checkbox:checked,
.mobile-facets__checkbox:checked {
  background: #0b0b0e !important;
  border-color: #ffffff !important;
}

/* WHITE X character that FILLS the box */
.facets__checkbox:checked::after,
input[type="checkbox"].facets__checkbox:checked::after,
.mobile-facets__checkbox:checked::after {
  content: "X" !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #ffffff !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  font-family: Arial, sans-serif !important;
}

/* HIDE Dawn's default checkbox SVG icons (the duplicate boxes) */
.facets__checkbox + svg,
.mobile-facets__checkbox + svg,
.facets__label svg[viewBox="0 0 16 16"],
.mobile-facets__label svg[viewBox="0 0 16 16"],
svg.icon-checkmark,
.mobile-facets__highlight {
  display: none !important;
  visibility: hidden !important;
}

/* Fix label alignment - simple flex */
.facets__label,
label.facets__label,
.mobile-facets__label,
label.mobile-facets__label {
  display: flex !important;
  align-items: flex-start !important;
  gap: 12px !important;
  cursor: pointer !important;
  padding: 8px 12px !important;
  color: rgba(255, 255, 255, 0.92) !important;
  margin: 0 !important;
}

/* Text inside label */
.facet-checkbox__text,
.facet-checkbox__text-label,
.mobile-facets__label span,
span.facet-checkbox__text {
  line-height: 1.5 !important;
}

/* Desktop specific */
@media screen and (min-width: 750px) {
  /* Hover state */
  .facets__checkbox:hover {
    border-color: rgba(255, 255, 255, 0.6) !important;
  }
  
  .facets__label:hover,
  label.facets__label:hover {
    background: rgba(255, 255, 255, 0.05) !important;
  }
}

/* Mobile specific */
@media screen and (max-width: 749px) {
  .mobile-facets__label {
    padding: 10px 12px !important;
  }
}

/* DESKTOP: Hide Dawn's duplicate active filters */
@media screen and (min-width: 750px) {
  .motion-3d-collection-grid .facets-container .active-facets,
  .motion-3d-collection-grid .facets-wrapper .active-facets,
  .motion-3d-collection-grid #main-collection-filters .active-facets {
    display: none !important;
  }
}




/* =========================================================
   DESKTOP FACETS DROPDOWN – DARK PANEL + WHITE TEXT
   ========================================================= */
@media (min-width: 750px) {

  /* The popup panel */
  .motion-3d-collection-grid .facets__disclosure[open] .facets__display {
    background: #141418 !important;              /* dark grey */
    color: #ffffff !important;
    border: 1px solid rgba(255,255,255,.12) !important;
    border-radius: 12px !important;
    box-shadow: 0 14px 40px rgba(0,0,0,.55) !important;
    padding: 10px 0 !important;
    overflow: hidden !important;
  }

  /* Remove any top “bar”/header strip Dawn injects */
  .motion-3d-collection-grid .facets__disclosure[open] .facets__display .facets__header {
    display: none !important;
  }
  .motion-3d-collection-grid .facets__disclosure[open] .facets__display::before,
  .motion-3d-collection-grid .facets__disclosure[open] .facets__display::after {
    display: none !important;
    content: none !important;
  }

  /* List container */
  .motion-3d-collection-grid .facets__disclosure[open] .facets__list {
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    max-height: 320px !important;
    overflow: auto !important;
  }

  /* Option text (force readable) */
  .motion-3d-collection-grid .facets__disclosure[open] .facets__label,
  .motion-3d-collection-grid .facets__disclosure[open] .facets__label *,
  .motion-3d-collection-grid .facets__disclosure[open] .facet-checkbox__text,
  .motion-3d-collection-grid .facets__disclosure[open] .facet-checkbox__text-label {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    text-shadow: none !important;
    -webkit-text-stroke: 0 !important;
  }

  /* Row padding + hover */
  .motion-3d-collection-grid .facets__disclosure[open] .facets__label {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 10px 16px !important;
    border-radius: 10px !important;
    background: transparent !important;
  }

  .motion-3d-collection-grid .facets__disclosure[open] .facets__label:hover {
    background: rgba(255,255,255,.07) !important;
  }

  /* Checkbox (dark theme) */
  .motion-3d-collection-grid .facets__disclosure[open] input[type="checkbox"] {
    appearance: none !important;
    -webkit-appearance: none !important;
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    border: 1.5px solid rgba(255,255,255,.35) !important;
    border-radius: 3px !important;
    background: transparent !important;
    position: relative !important;
    cursor: pointer !important;
  }

  .motion-3d-collection-grid .facets__disclosure[open] input[type="checkbox"]:checked {
    background: #ffffff !important;
    border-color: #ffffff !important;
  }

  /* Check mark */
  .motion-3d-collection-grid .facets__disclosure[open] input[type="checkbox"]:checked::after {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    margin: auto !important;
    width: 6px !important;
    height: 10px !important;
    border: solid #141418 !important;  /* dark mark on white box */
    border-width: 0 2px 2px 0 !important;
    transform: rotate(45deg) !important;
  }

  /* Hide Dawn default checkmark svg in dropdown */
  .motion-3d-collection-grid .facets__disclosure[open] svg.icon-checkmark,
  .motion-3d-collection-grid .facets__disclosure[open] .facets__checkbox + svg {
    display: none !important;
  }
}
/* Desktop dropdown: align checkbox perfectly with option text */
@media (min-width: 750px) {
  .motion-3d-collection-grid .facets__disclosure[open] .facets__label,
  .motion-3d-collection-grid .facets__disclosure[open] label.facets__label {
    align-items: center !important;     /* was flex-start */
  }

  .motion-3d-collection-grid .facets__disclosure[open] input[type="checkbox"],
  .motion-3d-collection-grid .facets__disclosure[open] .facets__checkbox {
    top: 0 !important;                 /* remove the downward offset */
    margin-top: 0 !important;
  }

  /* Optional: makes text baseline feel perfect */
  .motion-3d-collection-grid .facets__disclosure[open] .facet-checkbox__text,
  .motion-3d-collection-grid .facets__disclosure[open] .facet-checkbox__text-label {
    line-height: 1.2 !important;
  }
}


/* =========================================================
   MOBILE: Fix checkbox visuals (no floating X, clean checkmark)
   ========================================================= */
@media (max-width: 749px) {

  /* Base checkbox look */
  .motion-3d-collection-grid .mobile-facets__label input[type="checkbox"],
  .motion-3d-collection-grid input[type="checkbox"].mobile-facets__checkbox {
    appearance: none !important;
    -webkit-appearance: none !important;

    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;

    border: 1.5px solid rgba(255,255,255,.35) !important;
    border-radius: 3px !important;
    background: transparent !important;

    position: relative !important;   /* important so ::after anchors correctly */
    display: inline-block !important;
    vertical-align: middle !important;
  }

  /* Kill the old X content on mobile */
  .motion-3d-collection-grid .mobile-facets__label input[type="checkbox"]::after,
  .motion-3d-collection-grid input[type="checkbox"].mobile-facets__checkbox::after {
    content: none !important;
  }

  /* Checked state */
  .motion-3d-collection-grid .mobile-facets__label input[type="checkbox"]:checked,
  .motion-3d-collection-grid input[type="checkbox"].mobile-facets__checkbox:checked {
    background: #ffffff !important;
    border-color: #ffffff !important;
  }

  /* Draw a proper checkmark */
  .motion-3d-collection-grid .mobile-facets__label input[type="checkbox"]:checked::after,
  .motion-3d-collection-grid input[type="checkbox"].mobile-facets__checkbox:checked::after {
    content: "" !important;
    position: absolute !important;
    left: 5px !important;
    top: 2px !important;
    width: 5px !important;
    height: 9px !important;
    border: solid #0b0b0e !important;
    border-width: 0 2px 2px 0 !important;
    transform: rotate(45deg) !important;
  }

  /* Hide Dawn's svg checkmark (prevents double icons) */
  .motion-3d-collection-grid .mobile-facets svg.icon-checkmark,
  .motion-3d-collection-grid .mobile-facets__checkbox + svg,
  .motion-3d-collection-grid .mobile-facets__label svg[viewBox="0 0 16 16"] {
    display: none !important;
  }
}

/* =========================================================
   MOBILE: hard-lock checkbox column alignment (Dawn-safe selectors)
   ========================================================= */
@media (max-width: 749px) {

  /* Remove any left indent on list items */
  .motion-3d-collection-grid .mobile-facets__list,
  .motion-3d-collection-grid .mobile-facets__list li {
    padding-left: 0 !important;
    margin-left: 0 !important;
    list-style: none !important;
  }

  /* Target ANY option row label in the mobile facets list */
  .motion-3d-collection-grid .mobile-facets__list label,
  .motion-3d-collection-grid .mobile-facets__list .mobile-facets__label,
  .motion-3d-collection-grid .mobile-facets__submenu label,
  .motion-3d-collection-grid .mobile-facets__submenu .mobile-facets__label {
    display: grid !important;
    grid-template-columns: 22px 1fr !important; /* checkbox column + text column */
    column-gap: 12px !important;
    align-items: center !important;

    /* keep your spacing but ensure it’s consistent */
    padding: 14px 20px !important;
  }

  /* Checkbox ALWAYS sits in the first column */
  .motion-3d-collection-grid .mobile-facets__list label input[type="checkbox"],
  .motion-3d-collection-grid .mobile-facets__submenu label input[type="checkbox"],
  .motion-3d-collection-grid input[type="checkbox"].mobile-facets__checkbox {
    grid-column: 1 !important;
    justify-self: start !important;
    margin: 0 !important;
  }

  /* Text ALWAYS starts at the same x-position */
  .motion-3d-collection-grid .mobile-facets__list label > span,
  .motion-3d-collection-grid .mobile-facets__submenu label > span,
  .motion-3d-collection-grid .mobile-facets__list .facet-checkbox__text,
  .motion-3d-collection-grid .mobile-facets__submenu .facet-checkbox__text,
  .motion-3d-collection-grid .mobile-facets__list .facet-checkbox__text-label,
  .motion-3d-collection-grid .mobile-facets__submenu .facet-checkbox__text-label {
    grid-column: 2 !important;
    margin: 0 !important;
    padding: 0 !important;
  }
}

/* =========================================================
   MOBILE: checkbox sits slightly lower than text — fix with nudge
   ========================================================= */
@media (max-width: 749px) {

  /* Normalize text block so centering is true */
  .motion-3d-collection-grid .mobile-facets__list label,
  .motion-3d-collection-grid .mobile-facets__submenu label,
  .motion-3d-collection-grid .mobile-facets__label {
    align-items: center !important;
  }

  .motion-3d-collection-grid .mobile-facets__list .facet-checkbox__text,
  .motion-3d-collection-grid .mobile-facets__submenu .facet-checkbox__text,
  .motion-3d-collection-grid .mobile-facets__list .facet-checkbox__text-label,
  .motion-3d-collection-grid .mobile-facets__submenu .facet-checkbox__text-label,
  .motion-3d-collection-grid .mobile-facets__list label > span,
  .motion-3d-collection-grid .mobile-facets__submenu label > span {
    line-height: 1.1 !important;
    display: inline-block !important;
  }

  /* Nudge checkbox up for perfect visual alignment */
  .motion-3d-collection-grid .mobile-facets__list input[type="checkbox"],
  .motion-3d-collection-grid .mobile-facets__submenu input[type="checkbox"],
  .motion-3d-collection-grid input[type="checkbox"].mobile-facets__checkbox {
    transform: translateY(-6px) !important; /* try -1px if you want subtler */
  }
}
/* =========================================================
   MOBILE: remove the drawer pills, keep the outside pills
   ========================================================= */
@media (max-width: 749px) {
  /* Hide pills inside the mobile filter drawer */
  .motion-3d-collection-grid menu-drawer.mobile-facets__wrapper .active-facets,
  .motion-3d-collection-grid menu-drawer.mobile-facets__wrapper .active-facets-mobile,
  .motion-3d-collection-grid .mobile-facets__main .active-facets,
  .motion-3d-collection-grid .mobile-facets__main .active-facets-mobile,
  .motion-3d-collection-grid .mobile-facets__footer .active-facets,
  .motion-3d-collection-grid .mobile-facets__footer .active-facets-mobile {
    display: none !important;
  }
}


/* =========================================================
   ACTIVE FILTER PILLS: sold-out finish (glassy dark) + keep current font
   ========================================================= */
.motion-3d-collection-grid .active-facets__button,
.motion-3d-collection-grid a.active-facets__button,
.motion-3d-collection-grid .active-facets-mobile__button,
.motion-3d-collection-grid a.active-facets-mobile__button {
  background: rgba(0,0,0,0.60) !important;              /* sold out finish */
  border: 1px solid rgba(255,255,255,0.22) !important;
  color: #ffffff !important;

  border-radius: 999px !important;
  padding: 10px 14px !important;

  /* keep your existing font settings (do NOT force new font) */
  font-weight: inherit !important;
  font-size: inherit !important;
  letter-spacing: inherit !important;
  text-transform: inherit !important;

  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;

  box-shadow: 0 10px 30px rgba(0,0,0,0.45) !important;
}

/* Remove the "double wrapped" pill look */
.motion-3d-collection-grid .active-facets__button-inner,
.motion-3d-collection-grid .active-facets-mobile__button-inner {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Icons inside pills */
.motion-3d-collection-grid .active-facets__button svg,
.motion-3d-collection-grid .active-facets-mobile__button svg {
  stroke: #ffffff !important;
  fill: none !important;
}



/* =========================================================
   DESKTOP: align Remove all with pills
   ========================================================= */
@media (min-width: 750px) {
  .motion-3d-collection-grid .motion-active-filters-wrapper .active-facets {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
  }

  .motion-3d-collection-grid .motion-active-filters-wrapper .active-facets__button-remove {
    display: inline-flex !important;
    align-items: center !important;
    padding: 10px 14px !important;
    margin-left: 4px !important;
    line-height: 1 !important;
  }
}
/* =========================================================
   MOBILE: remove the SECOND (white) pills + Remove all below product count
   ========================================================= */
@media (max-width: 749px) {

  /* Hard-hide your desktop pills wrapper (the duplicate block) */
  .motion-3d-collection-grid .motion-active-filters-wrapper,
  .motion-3d-collection-grid .motion-active-filters-wrapper * {
    display: none !important;
  }

  /* Safety: if Dawn/JS injects a second active-facets block near the grid, hide it too */
  .motion-3d-collection-grid #ProductGridContainer .active-facets,
  .motion-3d-collection-grid #ProductGridContainer .active-facets-mobile,
  .motion-3d-collection-grid #product-grid + .active-facets,
  .motion-3d-collection-grid #product-grid + .active-facets-mobile {
    display: none !important;
  }
}
/* =========================================================
   MOBILE: force active filter pills to dark (sold-out finish)
   ========================================================= */
@media (max-width: 749px) {

  /* Target the OUTSIDE pills (not drawer) */
  .motion-3d-collection-grid .active-facets__button,
  .motion-3d-collection-grid a.active-facets__button {
    background: rgba(0,0,0,0.60) !important;
    border: 1px solid rgba(255,255,255,0.22) !important;
    color: #ffffff !important;

    border-radius: 999px !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.45) !important;

    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
  }

  /* Kill the inner white "wrap" that Dawn applies */
  .motion-3d-collection-grid .active-facets__button-inner {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
  }

  /* Make sure the pill text stays white */
  .motion-3d-collection-grid .active-facets__button *,
  .motion-3d-collection-grid .active-facets__button-inner * {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    background: transparent !important;
  }

  /* Icons in pills */
  .motion-3d-collection-grid .active-facets__button svg,
  .motion-3d-collection-grid .active-facets__button .icon {
    stroke: #ffffff !important;
    fill: none !important;
  }
}





/* =========================================================
   FORCE ACTIVE FILTER PILLS TO SOLD-OUT DARK (wins over old styling)
   ========================================================= */

/* Higher specificity: targets your section wrapper id pattern too */
.motion-3d-collection-grid[id^="Motion3DGrid-"] .active-facets__button,
.motion-3d-collection-grid[id^="Motion3DGrid-"] a.active-facets__button,
.motion-3d-collection-grid[id^="Motion3DGrid-"] .active-facets-mobile__button,
.motion-3d-collection-grid[id^="Motion3DGrid-"] a.active-facets-mobile__button {
  background: rgba(0,0,0,0.60) !important;
  background-color: rgba(0,0,0,0.60) !important;
  border: 1px solid rgba(255,255,255,0.22) !important;
  color: #fff !important;

  border-radius: 999px !important;
  box-shadow: 0 10px 30px rgba(0,0,0,0.45) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
}

/* Kill the inner “second pill” / white wrap */
.motion-3d-collection-grid[id^="Motion3DGrid-"] .active-facets__button-inner,
.motion-3d-collection-grid[id^="Motion3DGrid-"] .active-facets-mobile__button-inner {
  background: transparent !important;
  background-color: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* Make sure no child can paint white */
.motion-3d-collection-grid[id^="Motion3DGrid-"] .active-facets__button *,
.motion-3d-collection-grid[id^="Motion3DGrid-"] .active-facets__button-inner * {
  background: transparent !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

/* Icons */
.motion-3d-collection-grid[id^="Motion3DGrid-"] .active-facets__button svg,
.motion-3d-collection-grid[id^="Motion3DGrid-"] .active-facets-mobile__button svg {
  stroke: #fff !important;
  fill: none !important;
}
/* =========================================================
   ACTIVE FILTER PILLS: match Sort-by pill size (responsive)
   ========================================================= */

/* Shared: make inner wrapper NOT affect sizing */
.motion-3d-collection-grid .active-facets__button-inner,
.motion-3d-collection-grid .active-facets-mobile__button-inner {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Desktop sizing (match the Sort-by pill on desktop) */
@media (min-width: 750px) {
  .motion-3d-collection-grid .active-facets__button,
  .motion-3d-collection-grid a.active-facets__button {
    min-height: 50px !important;        /* typical Dawn pill height */
    padding: 0 18px !important;         /* horizontal like sort pill */
    border-radius: 999px !important;

    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;

    font-size: 13px !important;
    line-height: 1 !important;
  }

  .motion-3d-collection-grid .active-facets__button svg,
  .motion-3d-collection-grid .active-facets__button .icon {
    width: 14px !important;
    height: 14px !important;
  }
}

/* Mobile sizing (match the Sort-by pill on mobile) */
@media (max-width: 749px) {
  .motion-3d-collection-grid .active-facets__button,
  .motion-3d-collection-grid a.active-facets__button,
  .motion-3d-collection-grid .active-facets-mobile__button,
  .motion-3d-collection-grid a.active-facets-mobile__button {
    min-height: 50px !important;        /* a touch smaller on mobile */
    padding: 0 16px !important;
    border-radius: 999px !important;

    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;

    font-size: 12px !important;
    line-height: 1 !important;
  }

  .motion-3d-collection-grid .active-facets__button svg,
  .motion-3d-collection-grid .active-facets-mobile__button svg,
  .motion-3d-collection-grid .active-facets__button .icon,
  .motion-3d-collection-grid .active-facets-mobile__button .icon {
    width: 14px !important;
    height: 14px !important;
  }
}


/* =========================================================
   MOBILE spacing tweaks: Filter area tighter, Sort area roomier
   ========================================================= */
@media (max-width: 749px) {

  /* 1) Bring pills closer to the Filter label */
  .motion-3d-collection-grid #main-collection-filters {
    margin-bottom: 6px !important; /* reduces overall block gap */
  }

  /* If Dawn is adding top margin above pills, remove it */
  .motion-3d-collection-grid .active-facets,
  .motion-3d-collection-grid .active-facets-mobile {
    margin-top: 0px !important;    /* smaller gap from "Filter" */
    padding-top: 0 !important;
  }

  /* 2) Give Sort-by row more breathing room */
  .motion-3d-collection-grid .motion-sortbar {
    padding-top: 12px !important;   /* more space above Sort by */
    padding-bottom: 18px !important;/* more space below Sort by */
  }

  /* Increase space between "Sort by" text and the sort pill */
  .motion-3d-collection-grid .motion-sort-form__field {
    gap: 12px !important; /* was tighter */
  }

  /* Slightly more padding inside the sort select pill */
  .motion-3d-collection-grid .motion-sortbar .select__select {
    padding-left: 18px !important;
    padding-right: 44px !important; /* keeps room for caret */
  }
}




@media (max-width: 749px) {
  .motion-3d-collection-grid .mobile-facets__open-label {
    font-size: 0 !important; /* hides existing text */
  }
  .motion-3d-collection-grid .mobile-facets__open-label::after {
    content: "FILTERS" !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
  }
}










/* =========================================
   SEARCH PAGE FINAL LAYOUT FIXES
   ========================================= */

/* Desktop: keep the divider line aligned with the grid */
@media screen and (min-width: 750px) {
  .template-search .motion-sortbar.page-width {
    max-width: 1800px !important;
    margin: 0 auto 24px !important;
    padding: 0 50px 16px !important;
    box-sizing: border-box !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.14) !important;
  }

  .template-search .motion-sortbar__count {
    margin-right: auto !important;
  }

  .template-search .motion-sort-form {
    margin-left: auto !important;
  }
}

/* Mobile: put Filters + Sort by on one row */
@media screen and (max-width: 749px) {
  .template-search #main-search-filters.page-width,
  .template-search .motion-sortbar.page-width,
  .template-search .template-search__results.page-width {
    padding-left: 21px !important;
    padding-right: 21px !important;
    box-sizing: border-box !important;
  }

  /* Filters row */
  .template-search #main-search-filters .facets-container {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 14px !important;
    flex-wrap: nowrap !important;
    border-bottom: 0 !important;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }

  /* Keep mobile filter button on left */
  .template-search .mobile-facets__disclosure {
    margin: 0 !important;
    flex: 0 0 auto !important;
  }

  .template-search .mobile-facets__open-wrapper {
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Put custom sort on same row, right side */
  .template-search .motion-sortbar {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    margin: 0 0 14px 0 !important;
    padding: 0 21px 14px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.14) !important;
  }

  /* Hide the count ABOVE products on mobile if it causes the extra stacked layout */
  .template-search .motion-sortbar__count {
    display: none !important;
  }

  /* Make sort row sit inline */
  .template-search .motion-sort-form {
    margin: 0 !important;
    flex: 0 0 auto !important;
  }

  .template-search .motion-sort-form__field {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    margin: 0 !important;
  }

  .template-search .motion-sort-form__label {
    margin: 0 !important;
    white-space: nowrap !important;
  }

  /* Remove the extra line above "Showing..." */
  .template-search .product-grid-container {
    border-top: 0 !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  .template-search .template-search__results {
    border-top: 0 !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  /* If Dawn injects a second divider in mobile facets, kill it */
  .template-search #main-search-filters::before,
  .template-search #main-search-filters::after,
  .template-search .facets-container::before,
  .template-search .facets-container::after {
    display: none !important;
  }

  /* Show the count only once, below the row and above products */
  .template-search .template-search__results::before {
    content: "Showing " attr(data-count-text);
    display: block;
    text-align: center;
    color: rgba(255,255,255,0.65);
    font-size: 13px;
    margin: 0 0 14px 0;
  }
}

/* Search page: hide product count only */
.template-search .motion-sortbar__count,
.template-search .product-count__text,
.template-search #ProductCount,
.template-search #ProductCountDesktop,
.template-search [id*="ProductCount"] {
  display: none !important;
}

/* If you added the mobile fake count via ::before, hide that too */
.template-search .template-search__results::before {
  display: none !important;
  content: none !important;
}


/* =========================================
   SEARCH MOBILE: stack Filters + Sort by
   ========================================= */
@media screen and (max-width: 749px) {
  /* Filters row */
  .template-search #main-search-filters .facets-container {
    display: block !important;
    border-bottom: 0 !important;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }

  .template-search .mobile-facets__disclosure,
  .template-search .mobile-facets__open-wrapper {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Sort row below filters */
  .template-search .motion-sortbar {
    display: flex !important;
    justify-content: flex-start !important;
    align-items: center !important;
    gap: 14px !important;
    margin: 14px 0 18px 0 !important;
    padding: 0 21px 0 !important;
    border-bottom: 0 !important;
  }

  .template-search .motion-sort-form {
    margin: 0 !important;
  }

  .template-search .motion-sort-form__field {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    margin: 0 !important;
  }

  .template-search .motion-sort-form__label {
    margin: 0 !important;
    white-space: nowrap !important;
  }

  /* Remove extra divider line above products */
  .template-search .product-grid-container,
  .template-search .template-search__results,
  .template-search #product-grid {
    border-top: 0 !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  .template-search .motion-sortbar::before,
  .template-search .motion-sortbar::after,
  .template-search #main-search-filters::before,
  .template-search #main-search-filters::after,
  .template-search .facets-container::before,
  .template-search .facets-container::after {
    display: none !important;
    content: none !important;
  }

  /* Keep mobile active pills hidden */
  .template-search .motion-active-filters-wrapper {
    display: none !important;
  }
}

/* Desktop: align active filter bubbles under the filter bar */
@media screen and (min-width: 750px) {
  .template-search .motion-active-filters-wrapper.page-width {
    max-width: 1800px !important;
    margin: 12px auto 20px !important;
    padding-left: 50px !important;
    padding-right: 50px !important;
    box-sizing: border-box !important;
  }

  .template-search .motion-active-filters-wrapper .active-facets {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .template-search .motion-active-filters-wrapper .active-facets__button,
  .template-search .motion-active-filters-wrapper .active-facets__button-remove {
    margin: 0 !important;
  }
}