/* ==========================================================================
   Velas Velia — Campo de raza (velas de mascota)
   --------------------------------------------------------------------------
   Select obligatorio de raza + campo libre "Otros", debajo del nombre para
   personalizar. Se auto-encola por el glob de parts/*.css.
   ========================================================================== */

/* Cada campo respira: buena separación del campo anterior y del botón de compra. */
.vv-single__breed {
	margin-top: var(--space-6);
	margin-bottom: var(--space-5);
}

.vv-single__breed-other {
	margin-top: var(--space-4);
	margin-bottom: var(--space-5);
}

/* La etiqueta separada del control. */
.vv-single__breed .vv-field__label,
.vv-single__breed-other .vv-field__label {
	display: block;
	margin-bottom: var(--space-2);
}

/* Select de raza: cómodo, alto y con chevron propio (no el doble flecha del SO). */
.vv-single__breed .vv-select {
	width: 100%;
	min-height: 52px;
	padding: var(--space-3) var(--space-10) var(--space-3) var(--space-4);
	border: var(--border-w) solid var(--gold-300) !important;
	border-radius: var(--radius-md);
	background-color: var(--white);
	/* Chevron fino dorado a la derecha. */
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23A6824F' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right var(--space-4) center;
	background-size: 14px;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	font-family: var(--font-sans);
	font-size: var(--text-base);
	color: var(--ink-800) !important;
	line-height: 1.3;
	cursor: pointer;
	transition: border-color var(--dur) var(--ease-out),
		box-shadow var(--dur) var(--ease-out);
}

.vv-single__breed .vv-select:hover {
	border-color: var(--gold-400) !important;
}

.vv-single__breed .vv-select:focus {
	outline: none;
	border-color: var(--gold-600) !important;
	box-shadow: 0 0 0 3px var(--gold-100);
}

/* Campo de texto "Otros": misma altura/espaciado para que combine. */
.vv-single__breed-other .vv-input {
	min-height: 52px;
}

/* Aparece oculto hasta que el JS lo muestra (atributo hidden). */
.vv-single__breed-other[hidden] {
	display: none;
}