/* Pack de Signos — selector desplegable.
   Ajusta los colores en las variables de .ps-pack. */
.ps-pack {
	--ps-text: #1a1a1a;
	--ps-gold: #c09851;
	--ps-gold-dark: #8a6a2f;   /* versión legible del dorado para texto */
	--ps-line: #d9d4ca;
	--ps-soft: #f8f4ec;
	font-family: Roboto, Arial, sans-serif;
	font-size: 16px;
	color: var(--ps-text);
	border: 0;
	margin: 0 0 20px;
	padding: 0;
	min-width: 0;
	width: 100%;
	flex: 1 1 100%;
}

/* El formulario de Elementor/WooCommerce es una fila: el selector ocupa su propia
   fila y la cantidad + botón quedan abajo. */
form.cart.ps-form,
form.cart:has(.ps-pack) {
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: wrap !important;
	align-items: flex-start !important;
}
form.cart.ps-form > .ps-pack {
	flex: 0 0 100% !important;
	width: 100% !important;
	max-width: 100% !important;
}
form.cart.ps-form > .quantity { display: none !important; }

/* Botón: negro mientras faltan signos, dorado al completar los 5. */
form.cart.ps-form .single_add_to_cart_button.ps-btn-locked,
form.cart.ps-form .single_add_to_cart_button.ps-btn-locked:hover,
form.cart.ps-form .single_add_to_cart_button.ps-btn-locked:focus {
	background: #1a1a1a !important;
	border-color: #1a1a1a !important;
	color: #fff !important;
	opacity: 1 !important;
	cursor: not-allowed !important;
}
form.cart.ps-form .single_add_to_cart_button.ps-btn-ready,
form.cart.ps-form .single_add_to_cart_button.ps-btn-ready:focus {
	background: #c09851 !important;
	border-color: #c09851 !important;
	color: #1a1a1a !important;
	opacity: 1 !important;
	cursor: pointer !important;
}
form.cart.ps-form .single_add_to_cart_button.ps-btn-ready:hover {
	background: #ad8743 !important;
	border-color: #ad8743 !important;
	color: #1a1a1a !important;
}
form.cart.ps-form .single_add_to_cart_button { transition: background-color .2s, color .2s; }

.ps-title {
	font-size: 16px;
	font-weight: 500;
	color: var(--ps-text);
	margin: 0 0 8px;
	padding: 0;
}

.ps-pack *, .ps-pack *::before, .ps-pack *::after { box-sizing: border-box; }

/* Disparador del desplegable */
.ps-pack .ps-toggle {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	max-width: 420px;
	min-height: 50px;
	padding: 0 16px;
	margin: 0;
	background: #fff;
	border: 1px solid var(--ps-line);
	border-radius: 3px;
	font: inherit;
	color: var(--ps-text);
	text-align: left;
	text-transform: none;
	letter-spacing: normal;
	cursor: pointer;
	box-shadow: none;
}
.ps-pack .ps-toggle,
.ps-pack .ps-toggle:hover,
.ps-pack .ps-toggle:focus,
.ps-pack .ps-toggle:active {
	background: #fff !important;
	color: var(--ps-text) !important;
	border: 1px solid var(--ps-line) !important;
	box-shadow: none !important;
	text-transform: none !important;
	font-family: Roboto, Arial, sans-serif !important;
	font-size: 16px !important;
	font-weight: 400 !important;
}
.ps-pack .ps-toggle:hover,
.ps-pack.is-open .ps-toggle { border-color: var(--ps-gold) !important; }
.ps-pack .ps-toggle:focus-visible { outline: 2px solid var(--ps-gold); outline-offset: 2px; }

.ps-toggle-text { flex: 1; }
.ps-counter { font-variant-numeric: tabular-nums; color: var(--ps-gold-dark); font-weight: 500; }
.ps-pack.is-complete .ps-counter { color: var(--ps-text); }

.ps-chevron {
	display: inline-block;
	flex: 0 0 auto;
	width: 8px;
	height: 8px;
	margin: -4px 2px 0 0;
	border-right: 2px solid var(--ps-text);
	border-bottom: 2px solid var(--ps-text);
	transform: rotate(45deg);
	transition: transform .2s, margin .2s;
}
.ps-pack.is-open .ps-chevron { transform: rotate(-135deg); margin-top: 4px; }

/* Lista: se despliega en el flujo de la página (no se corta dentro de contenedores) */
.ps-list[hidden] { display: none !important; }
.ps-list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	max-width: 420px;
	margin-top: 4px;
	padding: 6px;
	background: #fff;
	border: 1px solid var(--ps-gold);
	border-radius: 3px;
}

.ps-option {
	position: relative;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 9px 10px;
	border-radius: 2px;
	cursor: pointer;
	line-height: 1.2;
	margin: 0;
}
.ps-option:hover { background: var(--ps-soft); }

.ps-check {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
	margin: 0;
}

.ps-box {
	flex: 0 0 18px;
	height: 18px;
	border: 1.5px solid #9b958b;
	border-radius: 2px;
	background: #fff;
	position: relative;
}
.ps-check:checked + .ps-box { background: var(--ps-gold); border-color: var(--ps-gold); }
.ps-check:checked + .ps-box::after {
	content: "";
	position: absolute;
	left: 5px;
	top: 1px;
	width: 5px;
	height: 10px;
	border: solid #fff;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}
.ps-check:focus-visible + .ps-box { outline: 2px solid var(--ps-gold); outline-offset: 2px; }

.ps-option.is-locked { opacity: .4; cursor: not-allowed; }
.ps-option.is-locked:hover { background: transparent; }

/* Elegidos */
.ps-chips { display: flex; flex-wrap: wrap; gap: 8px; max-width: 420px; }
.ps-chips:not(:empty) { margin-top: 12px; }
.ps-chip {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 4px 4px 4px 12px;
	border: 1px solid var(--ps-gold);
	border-radius: 999px;
	font-size: 14px;
	line-height: 1.2;
}
.ps-pack .ps-chip-x {
	width: 22px;
	height: 22px;
	padding: 0;
	margin: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--ps-gold-dark);
	font-size: 16px;
	line-height: 1;
	cursor: pointer;
	min-height: 0;
	box-shadow: none;
}
.ps-pack .ps-chip-x,
.ps-pack .ps-chip-x:focus,
.ps-pack .ps-chip-x:active {
	background: transparent !important;
	color: var(--ps-gold-dark) !important;
	border: 0 !important;
	box-shadow: none !important;
	padding: 0 !important;
}
.ps-pack .ps-chip-x:hover { background: var(--ps-soft) !important; color: var(--ps-text) !important; }

.ps-hint { margin: 10px 0 0; font-size: 14px; color: #6b665e; }
.ps-hint[hidden], .ps-savings[hidden] { display: none; }

.ps-savings { margin: 12px 0 0; font-size: 15px; color: var(--ps-text); }
.ps-savings s { color: #6b665e; }
.ps-savings strong { color: var(--ps-gold-dark); font-weight: 600; }


@media (prefers-reduced-motion: reduce) { .ps-chevron { transition: none; } }
@media (max-width: 380px) { .ps-list { grid-template-columns: 1fr; } }