/** Shopify CDN: Minification failed

Line 240:3 Unexpected "/"

**/
/*
 * SCR-002 Searcher results layout — Phase A1. Measured on Figma 66:15195 (desktop 1536 x 1272, dark 66:15489), 66:15783 (tablet 834 x 1832,
 * dark 66:16046) and 66:16309 (mobile 390 x 2124, dark 66:16569), read with the bridge; Archivo is not installed in the test browser so
 * text widths are not comparable, heights/sizes/weights/gaps are. The theme header (CMP-001, 80 px band in the frames) and the catalog
 * footer are the theme's own and are not rebuilt here (decision pending, docs/normcore-a1-decisions.md).
 *
 * "Search and filters" (VStack gap 16): padding 20/48/28/48 desktop, 20/32/28/32 tablet, 12/16/20/16 mobile.
 *   Search row gap 12, 63 high = field (label 12 SemiBold, input 42 high radius 4, value 12) + Filtros action 121 x 42, radius 8,
 *   1 px Border/200, padding 0/18, gap 8, sliders icon 16 + label 12 Regular + count badge 18 x 18 pill Violet/050, count 10 Bold violet.
 *   Mobile: the action is 66 x 42 (padding 0/12, icon + badge, label hidden visually).
 *   Query summary 24 high: h1 20 Bold with the query in Violet/600 + count "125 resultados" 12 Regular muted right-aligned (y+5);
 *   mobile stacks them (gap 4) with the title at 16 Bold.
 *   Category chips gap 8, 30 high (wraps on mobile); applied filters 30 high gap 8 (nc-applied-filters).
 * "Catalog" (HStack gap 24, padding 0/48/48/48 desktop; 0/32/36/32 tablet; 0/16/36/16 mobile):
 *   Results column (1096 desktop / 770 tablet / 358 mobile; VStack gap 16): controls row 34 high = "Mostrando 1–10 de 125" 12 Regular muted
 *   (y+10) + sort select 161 x 34 radius 6 (mobile 95 x 34, value only); product grid: 5 columns on desktop (cards 200 wide, column gap
 *   24, row gap 16), 3 on tablet (241 wide), 2 on mobile (169 wide, column gap 20, row gap 12); card = nc-product-card (image 190 high);
 *   pagination 32 high, centered, gap 8 (nc-pagination). Figma lists 10 cards per page on tablet/mobile and 15 on desktop; the
 *   gateway returns 15 per page and this screen shows what it returns.
 *   Discovery sidebar 320 wide (desktop only: the tablet and mobile frames have none), gap 16: Trends 320 x 287 and Recently viewed 320 x 138.
 * "Support and assurances": Warm/100 band, padding 48/48/(footer) desktop, 36/32/32 tablet, 36/16/32 mobile; help block (nc-help-block) inside.
 *
 * Breakpoints (A1 decision, the frames only fix 1536 / 834 / 390): sidebar and 5 columns from 1440 (sidebar from 1280 with 4 columns),
 * 4 columns 1024 to 1279 without sidebar, 3 columns 600 to 1023, 2 columns below 600. Filters open as a drawer from 600 px, a sheet below.
 * Tokens only (assets/normcore-tokens.css); 20 / 28 / 63 / 66 / 121 px sizes have no token.
 */

.nc-search {
  display: block;
  background: var(--nc-color-canvas-050);
  color: var(--nc-color-ink-900);
  font-family: var(--nc-font-family);
}

.nc-search [hidden] {
  display: none !important;
}

/* ---- search and filters ---- */
.nc-search__intro {
  display: flex;
  flex-direction: column;
  gap: var(--nc-space-16);
  padding: var(--nc-space-12) var(--nc-page-inset) 20px;
}

.nc-search__row {
  display: flex;
  align-items: flex-end;
  gap: var(--nc-space-12);
  margin: 0;
}

.nc-search__field {
  flex: 1 1 auto;
  min-width: 0;
}

.nc-search__filters {
  position: relative;
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  gap: var(--nc-space-8);
  box-sizing: border-box;
  min-width: 66px;
  height: 42px;
  margin: 0;
  padding: 0 11px; /* mobile: icon-only, 66 x 42 including the 1 px borders (the label comes back from 600) */
  background: var(--nc-color-surface-000);
  color: var(--nc-color-ink-900);
  border: var(--nc-border-width) solid var(--nc-color-border-200);
  border-radius: var(--nc-radius-8);
  font: inherit;
  font-size: var(--nc-font-size-label);
  cursor: pointer;
  transition: background-color var(--nc-duration-fast) var(--nc-easing-standard), box-shadow var(--nc-duration-fast) var(--nc-easing-standard);
}

.nc-search__filters::before {
  content: '';
  position: absolute;
  inset: -2px 0;
}

.nc-search__filters:hover {
  background: var(--nc-color-warm-100);
  box-shadow: var(--nc-elevation-panel);
}

.nc-search__filters:active {
  background: var(--nc-color-border-200);
  box-shadow: none;
}

.nc-search__filters:focus-visible {
  outline: var(--nc-focus-ring-width) solid var(--nc-focus-ring-color);
  outline-offset: var(--nc-focus-ring-offset);
}

.nc-search__filters-label {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

.nc-search__filters svg {
  flex: 0 0 auto;
  width: var(--nc-icon-16);
  height: var(--nc-icon-16);
}

.nc-search__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  background: var(--nc-color-violet-050);
  color: var(--nc-color-violet-600);
  border-radius: var(--nc-radius-pill);
  font-size: var(--nc-font-size-micro);
  font-weight: var(--nc-font-weight-bold);
  line-height: 1;
}

.nc-search__summary {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--nc-space-4);
  min-height: 24px;
}

.nc-search__title {
  margin: 0;
  font-size: var(--nc-font-size-lead);
  font-weight: var(--nc-font-weight-bold);
  line-height: var(--nc-line-height-tight);
}

.nc-search__title:focus {
  outline: none;
}

.nc-search__title:focus-visible {
  outline: var(--nc-focus-ring-width) solid var(--nc-focus-ring-color);
  outline-offset: var(--nc-focus-ring-offset);
}

.nc-search__query {
  color: var(--nc-color-violet-600);
}

.nc-search__total {
  margin: 0;
  color: var(--nc-color-muted-600);
  font-size: var(--nc-font-size-label);
  white-space: nowrap;
}

.nc-search__categories {
  display: flex;
  flex-wrap: wrap;
  /* rows 14 apart: the 44 px hit areas (30 + 7 each side) of two wrapped rows touch without overlapping (F-02); columns keep Figma's 8 */
  gap: 10px var(--nc-space-8);
  margin: 0;
  padding: 0;
  list-style: none;
}

.nc-search__categories > li {
  display: block;
}

/* selected category chip carries the sparkles icon (Figma 66:15195, 14 px, 1.5 stroke); the mask follows the text colour in both themes */
.nc-search__categories .nc-chip__main[aria-pressed='true'],
.nc-search__categories .nc-chip__main[aria-current] {
  gap: 4px;
}

.nc-search__categories .nc-chip__main[aria-pressed='true']::after,
.nc-search__categories .nc-chip__main[aria-current]::after {
  content: '';
  order: -1;
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.5.5 0 0 1 0-.962L8.5 9.936A2 2 0 0 0 9.937 8.5l1.582-6.135a.5.5 0 0 1 .963 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.581a.5.5 0 0 1 0 .964L15.5 14.063a2 2 0 0 0-1.437 1.437l-1.582 6.135a.5.5 0 0 1-.963 0z'/%3E%3Cpath d='M20 3v4M22 5h-4M4 17v2M5 18H3'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.5.5 0 0 1 0-.962L8.5 9.936A2 2 0 0 0 9.937 8.5l1.582-6.135a.5.5 0 0 1 .963 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.581a.5.5 0 0 1 0 .964L15.5 14.063a2 2 0 0 0-1.437 1.437l-1.582 6.135a.5.5 0 0 1-.963 0z'/%3E%3Cpath d='M20 3v4M22 5h-4M4 17v2M5 18H3'/%3E%3C/svg%3E") center / contain no-repeat;
}



/* NORMCORE — Categorías Filtro */

/* .nc-search__categories .nc-chip {
  display: inline-flex;
  align-items: center;
  border-radius: 4px;
}

.nc-search__categories .nc-chip__main {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-height: 36px;
  padding: 7px 14px;
  box-sizing: border-box;

  border-radius: 8px;
  font-family: var(--nc-font-family);
  font-size: 13px;
  font-weight: 500;
  line-height: 20px;
  white-space: nowrap;
}

/* Móvil: conservar el tamaño compacto */
@media screen and (max-width: 749px) {
  .nc-search__categories .nc-chip__main {
    min-height: 36px;
    padding: 7px 12px;
  }
} */

/* NORMCORE — Categorías Filtro */

.nc-search__categories .nc-chip {
  display: inline-flex;
  align-items: center;
  border: none;
  border-radius: 999px;
}

.nc-search__categories .nc-chip__main {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-height: 36px;
  padding: 7px 14px;
  box-sizing: border-box;

  border: none;
  border-radius: 999px;

  font-family: var(--nc-font-family);
  font-size: 13px;
  font-weight: 500;
  line-height: 20px;
  white-space: nowrap;
}

/* Móvil: conservar el tamaño compacto */
@media screen and (max-width: 749px) {
  .nc-search__categories .nc-chip__main {
    min-height: 36px;
    padding: 7px 12px;
  }
}



/* ---- catalog ---- */
.nc-search__catalog {
  display: flex;
  align-items: flex-start;
  gap: var(--nc-space-24);
  padding: 0 var(--nc-page-inset) 36px;
}

/* audit H-4: while the skeleton is up, the catalogue keeps a minimum height so the footer is not pushed when the results paint
   (values are estimates of the 10-card skeleton grid; tune them with a measurement) */
.nc-search__catalog:has([data-block='skeleton']:not([hidden])) {
  min-height: 720px;
}

@media (min-width: 1280px) {
  .nc-search__catalog:has([data-block='skeleton']:not([hidden])) {
    min-height: 960px;
  }
}

.nc-search__results {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  gap: var(--nc-space-16);
  min-width: 0;
}

.nc-search__controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--nc-space-16);
  min-height: 34px;
}

.nc-search__shown {
  margin: 0;
  color: var(--nc-color-muted-600);
  font-size: var(--nc-font-size-label);
}

.nc-search__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--nc-space-12) 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Figma fixes the card image at 190 high at every width (cards 276 / 276 / 255 high) */
.nc-search__grid .nc-product-card .nc-card__media {
  aspect-ratio: auto;
  height: 190px;
}

/* sort control: 34 visible, 44 effective (the shared ::before stops at 42 because it is measured from the padding box) */
.nc-search__controls nc-select[data-variant='sort'] .nc-select__control::before {
  inset: -6px -2px;
}

.nc-search__grid > li {
  display: block;
  min-width: 0;
}

.nc-search__grid[aria-busy='true'] {
  opacity: 0.6;
  transition: opacity var(--nc-duration-fast) var(--nc-easing-standard);
}

.nc-search__skeleton-card {
  display: grid;
  gap: var(--nc-space-8);
}

.nc-search__skeleton-lines {
  display: grid;
  gap: var(--nc-space-8);
}

.nc-search__sidebar {
  display: none;
  flex: 0 0 320px;
  flex-direction: column;
  gap: var(--nc-space-16);
  min-width: 0;
}

.nc-search__support {
  padding: 36px var(--nc-page-inset) var(--nc-space-32);
  background: var(--nc-color-warm-100);
}

/* the filters panel and the toast are overlays; the file input never shows */
.nc-search__file {
  display: none;
}

/* ---- widths: mobile-first, base = 390 ---- */
@media (min-width: 600px) {
  /* icon + label filters button (Figma 121 x 42): 17 + 16 + 8 + label + 8 + 18 + 17 incl. the 1 px borders */
  .nc-search__filters {
    min-width: 121px;
    padding: 0 17px;
  }

  .nc-search__filters-label {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    clip: auto;
    white-space: normal;
  }

  .nc-search__summary {
    flex-direction: row;
    align-items: center;
    gap: var(--nc-space-16);
  }

  .nc-search__title {
    font-size: var(--nc-font-size-heading);
  }

  .nc-search__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--nc-space-16) var(--nc-space-24);
  }

  .nc-search__intro {
    padding-top: 20px;
    padding-bottom: 28px;
  }
}

@media (min-width: 1024px) {
  .nc-search__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (min-width: 1280px) {
  .nc-search__sidebar {
    display: flex;
  }

  .nc-search__catalog {
    padding-bottom: var(--nc-space-48);
  }

  .nc-search__support {
    padding-top: var(--nc-space-48);
    padding-bottom: var(--nc-space-48);
  }
}

@media (min-width: 1440px) {
  .nc-search__grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

@media (prefers-reduced-motion: reduce) {
  .nc-search__grid[aria-busy='true'] {
    transition: none;
  }
}

/* ---- real mode: breadcrumbs (collections) and the link to the next server page ---- */
.nc-search__crumbs-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--nc-space-8);
  margin: 0;
  padding: 0;
  color: var(--nc-color-muted-600);
  font-size: var(--nc-font-size-label);
  list-style: none;
}

.nc-search__crumbs-list li {
  display: flex;
  align-items: center;
}

.nc-search__crumbs-list li + li::before {
  content: '/';
  margin-right: var(--nc-space-8);
}

.nc-search__crumb-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: inherit;
  text-decoration: none;
}

.nc-search__crumb-link:hover {
  color: var(--nc-color-ink-900);
  text-decoration: underline;
}

.nc-search__crumb-link:focus-visible,
.nc-search__server-link:focus-visible {
  outline: var(--nc-focus-ring-width) solid var(--nc-focus-ring-color);
  outline-offset: var(--nc-focus-ring-offset);
}

.nc-search__server-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--nc-space-16);
  padding-top: var(--nc-space-16);
}

.nc-search__server-status {
  margin: 0;
  color: var(--nc-color-muted-600);
  font-size: var(--nc-font-size-label);
}

.nc-search__server-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-width: 44px;
  min-height: 44px;
  padding: 0 var(--nc-space-16);
  color: var(--nc-color-ink-900);
  background: var(--nc-color-surface-000);
  border: var(--nc-border-width) solid var(--nc-color-border-200);
  border-radius: var(--nc-radius-8);
  font-size: var(--nc-font-size-label);
  font-weight: var(--nc-font-weight-semibold);
  text-decoration: none;
  text-transform: uppercase;
}

.nc-search__server-link:hover {
  background: var(--nc-color-warm-100);
  box-shadow: var(--nc-elevation-panel);
}

/* Layout decision (Javi, 2026-10-23): "Figma en sus anchos y rejilla comun en el resto". Figma 66:15783 (834): 32 / 32 = shared; 66:15195 (1536): 48 / 48.
   Figma tablet from 768, shared grid again at 1024 (32) and 1280 (48), Figma desktop from 1500, shared centring from 1920. */
@media (min-width: 1500px) {
  .nc-search {
    --nc-page-gutter: 48px;
    --nc-page-inset: 48px;
  }
}

@media (min-width: 1920px) {
  .nc-search {
    --nc-page-inset: max(var(--nc-page-gutter), calc((100% - var(--nc-page-max)) / 2));
  }
}