/* Keep the coupon toolbar intentional at the narrowest V2 viewport. */
/* Keep the search control readable at every responsive breakpoint. */
.v2-panel-soft:has(input[placeholder="Buscar cupons"]) > .v2-search > svg {
  width: 1rem;
  height: 1rem;
}

.v2-panel-soft:has(input[placeholder="Buscar cupons"]) input[placeholder="Buscar cupons"] {
  min-width: 0;
  font-size: 0.875rem !important;
  letter-spacing: -0.01em;
  -webkit-text-size-adjust: none;
}

@media (max-width: 1023px) {
  .v2-panel-soft:has(input[placeholder="Buscar cupons"]) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem;
  }

  .v2-panel-soft:has(input[placeholder="Buscar cupons"]) > .v2-search {
    grid-column: 1;
    min-width: 0;
    height: 3rem;
    gap: 0.1rem;
    padding-inline: 0.3rem;
  }

  .v2-panel-soft:has(input[placeholder="Buscar cupons"]) > .v2-search > svg {
    width: 0.8rem;
    height: 0.8rem;
  }

  .v2-panel-soft:has(input[placeholder="Buscar cupons"]) > .space-y-2 {
    grid-column: 2 / -1;
    min-width: 0;
    display: contents;
  }

  .v2-panel-soft:has(input[placeholder="Buscar cupons"]) > .space-y-2 > .flex {
    grid-column: 2 / -1;
    align-self: center;
  }

  .v2-panel-soft:has(input[placeholder="Buscar cupons"]) > .space-y-2 > .flex {
    gap: 0.5rem;
    overflow: visible;
    padding-bottom: 0;
  }

  .v2-panel-soft:has(input[placeholder="Buscar cupons"]) > .space-y-2 > .v2-panel-soft {
    grid-column: 1 / -1;
    width: 100%;
    min-width: 0;
    margin-top: 0.25rem;
  }

  .v2-panel-soft:has(input[placeholder="Buscar cupons"]) > .space-y-2 > .flex > .v2-filter-chip {
    width: auto;
    min-width: 0;
    height: 2.75rem;
    min-height: 2.75rem;
    justify-content: center;
    gap: 0.2rem;
    padding-inline: 0.35rem;
    color: var(--v2-text);
    font-size: 0.625rem;
    white-space: nowrap;
  }

  .v2-panel-soft:has(input[placeholder="Buscar cupons"]) > .space-y-2 > .flex > .v2-filter-chip > svg {
    width: 0.9rem;
    height: 0.9rem;
    color: var(--v2-blue);
  }

  .v2-panel-soft:has(input[placeholder="Buscar cupons"]) > .space-y-2 > .flex > .v2-filter-chip[data-active="true"] > svg {
    color: var(--v2-bg);
  }

  .v2-panel-soft:has(input[placeholder="Buscar cupons"]) input[placeholder="Buscar cupons"] {
    min-width: 0;
    font-size: 0.5625rem !important;
    letter-spacing: -0.02em;
    -webkit-text-size-adjust: none;
  }

  /* Reserve the heart's top-right zone for the title in every V2 coupon card. */
  .v2-panel:has(> button[aria-label*="favoritos"]) > [class*="flex-1"][class*="flex-col"] > a:first-child {
    padding-right: 4rem;
  }
}

@media (min-width: 640px) {
  .v2-panel:has(> button[aria-label*="favoritos"]) > [class*="flex-1"][class*="flex-col"] > a:first-child {
    padding-right: 4rem;
  }
}

@media (min-width: 640px) and (max-width: 1023px) {
  .v2-panel-soft:has(input[placeholder="Buscar cupons"]) > .v2-search {
    gap: 0.5rem;
    padding-inline: 0.75rem;
  }

  .v2-panel-soft:has(input[placeholder="Buscar cupons"]) > .space-y-2 > .flex > .v2-filter-chip {
    gap: 0.35rem;
    padding-inline: 0.75rem;
    font-size: 0.875rem;
  }

  .v2-panel-soft:has(input[placeholder="Buscar cupons"]) > .space-y-2 > .flex > .v2-filter-chip > svg {
    width: 1.125rem;
    height: 1.125rem;
  }

  .v2-panel-soft:has(input[placeholder="Buscar cupons"]) input[placeholder="Buscar cupons"] {
    font-size: 0.95rem;
  }
}
/* Shared V2 interaction token: neutral and active filter controls invert on hover/focus. */
.v2-filter-chip,
[data-filter-top-actions] > button,
[data-filter-actions] > button,
[data-filter-categories] > button {
  transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease, box-shadow 150ms ease;
}

.v2-filter-chip:hover,
.v2-filter-chip:focus-visible,
[data-filter-top-actions] > button:hover,
[data-filter-top-actions] > button:focus-visible,
[data-filter-actions] > button:hover,
[data-filter-actions] > button:focus-visible,
[data-filter-categories] > button:hover,
[data-filter-categories] > button:focus-visible {
  background-color: #ffffff !important;
  border-color: #ffffff !important;
  color: #101820 !important;
  box-shadow: 0 0 0 2px rgb(255 255 255 / 22%);
}

.v2-filter-chip:hover > svg,
.v2-filter-chip:focus-visible > svg,
[data-filter-top-actions] > button:hover > svg,
[data-filter-top-actions] > button:focus-visible > svg,
[data-filter-actions] > button:hover > svg,
[data-filter-actions] > button:focus-visible > svg,
[data-filter-categories] > button:hover > svg,
[data-filter-categories] > button:focus-visible > svg {
  color: inherit !important;
}
[data-filter-categories] > button:hover,
[data-filter-categories] > button:focus,
[data-filter-categories] > button:focus-visible,
[data-filter-categories] > button:active {
  background-color: transparent !important;
  border-color: transparent !important;
  color: inherit !important;
  box-shadow: none !important;
  outline: none !important;
}

/* Category rail invariant: tiles stay contiguous and scroll horizontally. */
[data-filter-categories] {
  display: flex !important;
  justify-content: flex-start !important;
  align-items: flex-start !important;
  column-gap: 0.25rem !important;
  gap: 0.25rem !important;
  overflow-x: auto !important;
}

[data-filter-categories] > button {
  flex: 0 0 88px !important;
  width: 88px !important;
  min-width: 88px !important;
  margin-inline: 0 !important;
}

[data-filter-categories] {
  padding-bottom: 0 !important;
}

/* Coupons: keep the first card close to the shared toolbar. */
[data-coupon-toolbar] + .grid {
  margin-top: 0.25rem !important;
}