/** Shopify CDN: Minification failed

Line 36:0 Expected ")" to go with "("

**/
/* custom-select-search — editable type-to-filter combobox. Paired with custom-select-search.js.
 * Neutral base styling (bordered field + scrollable panel).
 *
 * Este fichero decía que las marcas re-skinean .velara-combo* "libremente", pero no exponía con
 * qué: la única forma era escribir reglas sobre .velara-combo__input / __caret / __panel /
 * __option, que son internos que este fichero puede renombrar. Ahora cada cosa que una marca
 * quiso cambiar de verdad es una variable, y el default es lo que había escrito en la misma
 * línea, así que base y quien no las use renderizan igual. */
.velara-combo { position: relative; display: inline-block; }
/* once enhanced, hide the native select (kept for a11y / no-JS + holds the value) */
.velara-combo--ready [data-combo-select] { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); opacity: 0; pointer-events: none; }
.velara-combo__input { box-sizing: border-box; width: 100%; height: var(--combo-input-height, auto); border: var(--combo-input-border, 1px solid rgb(var(--color-hairline))); background: rgb(var(--color-background)); color: var(--combo-input-color, rgb(var(--color-foreground))); text-align: var(--combo-input-align, start); font-size: var(--combo-input-size, inherit); padding: var(--combo-input-padding, var(--space-sm) 34px var(--space-sm) var(--space-md); font: inherit; font-size: var(--font-size-sm); cursor: pointer; }
.velara-combo__input:focus { outline: none; border-color: rgb(var(--color-foreground)); }
.velara-combo__input::placeholder { color: rgb(var(--color-ink-muted)); opacity: 1; }
.velara-combo__caret { position: absolute; right: var(--combo-caret-right, var(--space-md)); color: var(--combo-caret-color, inherit); top: 50%; transform: translateY(-50%); pointer-events: none; transition: transform .15s ease; }
.velara-combo.is-open .velara-combo__caret { transform: translateY(-50%) rotate(180deg); }
.velara-combo__panel { position: absolute; z-index: var(--z-dropdown, 40); top: calc(100% + 2px); left: 0; right: 0; margin: 0; padding: 4px 0; list-style: none; background: rgb(var(--color-background)); border: 1px solid rgb(var(--color-hairline)); max-height: 240px; overflow-y: auto; box-shadow: 0 6px 24px rgb(0 0 0 / 0.10); }
.velara-combo__panel[hidden] { display: none; }
.velara-combo__option { padding: var(--combo-option-padding, var(--space-sm) var(--space-md)); font-size: var(--combo-option-size, var(--font-size-sm)); text-align: var(--combo-option-align, start); color: rgb(var(--color-foreground)); cursor: pointer; }
.velara-combo__option[hidden] { display: none; }
.velara-combo__option:hover, .velara-combo__option.is-active { background: rgb(var(--color-wash)); }
.velara-combo__option[aria-selected="true"] { font-weight: 600; }

/* --bare: panel sin barra de desplazamiento visible. Es un MODIFICADOR y no una variable a
   propósito: ocultar la barra necesita una regla ::-webkit-scrollbar, y en WebKit el simple
   hecho de que esa regla exista cambia cómo se pinta la barra de TODOS los paneles. Con el
   modificador, la regla solo alcanza a quien la pide. La marca lo pone en su propio markup,
   que es el único nodo del combo que no crea custom-select-search.js. */
.velara-combo--bare .velara-combo__panel { scrollbar-width: none; -ms-overflow-style: none; }
.velara-combo--bare .velara-combo__panel::-webkit-scrollbar { width: 0; height: 0; display: none; }