/*
 * «Nombre en la portada» (addons 1.1.466). Un componente: ficha (suelto y piezas de kit), pastillas del carrito,
 * minicarrito y checkout, y la hoja de edición. Paleta web del brandbook: burdeos solo para la acción.
 */
.orem-perso,
.orem-pk-box,
.orem-ps,
.orem-pt {
	--op-acento: #6b1d33;
	--op-acento-h: #862b45;
	--op-tinta: #2b2b2b;
	--op-suave: #6e6461;
	--op-linea: #e8d8c5;
	--op-fondo: #faf8f5;
	--op-chip: #f7efe8;
	--op-error: #a2302a;
}

.orem-perso [hidden],
.orem-pk-box[hidden],
.orem-ps [hidden],
.orem-pt [hidden] {
	display: none !important;
}

/* ------------------------------------------------------------------ ficha */

.orem-perso-ficha {
	border-top: 1px solid #f2f0f0;
	padding: 10px 0 18px;
}
.orem-perso {
	margin: 8px 0 4px;
	font-size: 14px;
	line-height: 1.4;
	color: var(--op-tinta);
}
.orem-perso-ficha .orem-perso {
	margin: 0;
}
.orem-perso__abrir {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 36px;
	margin: -4px 0;
	padding: 4px 0;
	border: 0;
	background: none;
	color: var(--op-acento);
	font: inherit;
	font-size: 14px;
	font-weight: 500;
	text-align: left;
	cursor: pointer;
	box-shadow: none;
}
.orem-perso__abrir:hover {
	background: none;
	color: var(--op-acento-h);
}
.orem-perso__abrir:hover > span:first-of-type {
	text-decoration: underline;
	text-underline-offset: 3px;
}
.orem-perso__ico {
	width: 15px;
	height: 15px;
	flex: none;
}
.orem-perso__precio {
	color: var(--op-suave);
	font-weight: 400;
}
.orem-perso__precio del,
.orem-perso__nota del {
	opacity: .7;
	margin-left: 2px;
}
.orem-perso__campo {
	display: grid;
	gap: 6px;
}
.orem-perso__lbl {
	margin: 0;
	font-size: 13px;
	font-weight: 500;
	color: var(--op-tinta);
}
.orem-perso__fila {
	position: relative;
	max-width: 340px;
}
.orem-perso .orem-perso__fila input[type="text"] {
	display: block !important;
	opacity: 1 !important;
	width: 100%;
	height: 44px;
	margin: 0;
	padding: 0 52px 0 14px;
	border: 1.5px solid #d9c9bb;
	border-radius: 10px;
	background: #fff;
	color: var(--op-tinta);
	font: inherit;
	font-size: 16px; /* iOS no hace zoom */
	letter-spacing: .02em;
	box-shadow: none;
}
.orem-perso .orem-perso__fila input[type="text"]:focus {
	outline: none;
	border-color: var(--op-acento);
	box-shadow: 0 0 0 3px rgba(107, 29, 51, .15);
}
.orem-perso.is-error .orem-perso__fila input[type="text"] {
	border-color: var(--op-error);
}
.orem-perso__cnt {
	position: absolute;
	right: 12px;
	top: 50%;
	transform: translateY(-50%);
	font-size: 12px;
	color: #9a8f8b;
	font-variant-numeric: tabular-nums;
	pointer-events: none;
}
.orem-perso__error {
	margin: 0;
	font-size: 13px;
	color: var(--op-error);
}
.orem-perso__nota {
	display: flex;
	flex-wrap: wrap;
	gap: 2px 10px;
	margin: 0;
	font-size: 12.5px;
	color: var(--op-suave);
}
.orem-perso__link {
	padding: 0;
	border: 0;
	background: none;
	color: var(--op-acento);
	font: inherit;
	text-decoration: underline;
	text-underline-offset: 2px;
	cursor: pointer;
	box-shadow: none;
}
.orem-perso__link:hover {
	background: none;
	color: var(--op-acento-h);
}
/* Pieza de kit: debajo de sus selectores, alineado con ellos. */
.bundled_product .orem-perso {
	margin-top: 10px;
}

/* ------------------------------------------------------------------ pastillas (carrito, minicarrito, checkout) */

.orem-pk-box {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	margin: 8px 0 2px;
	font-size: 13px;
	line-height: 1.3;
	color: var(--op-tinta);
	clear: both;
}
.orem-pk-rot {
	color: var(--op-suave);
	font-size: 12.5px;
}
.orem-pk-chip {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	min-height: 30px;
	margin: 0;
	padding: 3px 11px;
	border: 1px solid var(--op-linea);
	border-radius: 999px;
	background: var(--op-chip);
	color: var(--op-tinta);
	font: inherit;
	font-size: 13px;
	font-weight: 500;
	letter-spacing: .02em;
	line-height: 1.2;
	text-transform: none;
	cursor: pointer;
	box-shadow: none;
}
.orem-pk-chip:hover {
	border-color: var(--op-acento);
	background: var(--op-chip);
	color: var(--op-tinta);
}
.orem-pk-chip svg {
	width: 12px;
	height: 12px;
	color: var(--op-acento);
	flex: none;
}
.orem-pk-chip small {
	font-size: 11px;
	font-weight: 400;
	color: var(--op-suave);
}
.orem-pk-chip.is-vacio {
	border: 1px dashed var(--op-acento);
	background: #fff;
	color: var(--op-acento);
	letter-spacing: 0;
}
.orem-pk-chip:focus-visible,
.orem-perso__abrir:focus-visible,
.orem-perso__link:focus-visible {
	outline: 2px solid var(--op-acento);
	outline-offset: 2px;
}
.orem-pk-precio {
	color: var(--op-suave);
	font-size: 12.5px;
}
/* Con pastillas, el resumen de texto sobra (queda como respaldo sin JS). */
.orem-pk-js .orem-pk .variation-Nombreenlaportada,
.orem-pk-js .orem-pk .wc-block-components-product-details__nombre-en-la-portada {
	display: none !important;
}
/* Minicarrito: el tema deja el bote de basura absoluto a la izquierda. */
.woocommerce-mini-cart-item .orem-pk-box {
	margin-top: 6px;
}

/* ------------------------------------------------------------------ hoja de edición */

dialog.orem-ps {
	width: min(440px, calc(100vw - 32px));
	max-width: none;
	max-height: none;
	margin: auto;
	padding: 0;
	border: 0;
	border-radius: 16px;
	background: #fff;
	color: var(--op-tinta);
	box-shadow: 0 24px 60px rgba(43, 20, 27, .28);
	font-size: 15px;
	line-height: 1.45;
}
dialog.orem-ps::backdrop {
	background: rgba(30, 18, 22, .45);
}
.orem-ps__in {
	position: relative;
	display: grid;
	gap: 8px;
	margin: 0;
	padding: 22px 22px 20px;
}
.orem-ps__asa {
	display: none;
}
.orem-ps__x {
	position: absolute;
	top: 10px;
	right: 10px;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: none;
	color: var(--op-suave);
	font-size: 26px;
	line-height: 1;
	cursor: pointer;
	box-shadow: none;
}
.orem-ps__x:hover {
	background: var(--op-fondo);
	color: var(--op-tinta);
}
.orem-ps__t {
	margin: 0;
	padding-right: 36px;
	font-family: "Playfair Display", Georgia, serif;
	font-size: 20px;
	font-weight: 600;
	line-height: 1.25;
	color: var(--op-tinta);
}
.orem-ps__s {
	margin: 0 0 6px;
	font-size: 13.5px;
	color: var(--op-suave);
}
.orem-ps__lbl {
	margin: 0;
	font-size: 13px;
	font-weight: 500;
}
.orem-ps__fila {
	position: relative;
}
.orem-ps__fila input[type="text"] {
	width: 100%;
	height: 48px;
	margin: 0;
	padding: 0 56px 0 14px;
	border: 1.5px solid #d9c9bb;
	border-radius: 12px;
	background: #fff;
	color: var(--op-tinta);
	font: inherit;
	font-size: 17px;
	letter-spacing: .02em;
	box-shadow: none;
}
.orem-ps__fila input[type="text"]:focus {
	outline: none;
	border-color: var(--op-acento);
	box-shadow: 0 0 0 3px rgba(107, 29, 51, .15);
}
.orem-ps__fila input[aria-invalid="true"] {
	border-color: var(--op-error);
}
.orem-ps__cnt {
	position: absolute;
	right: 14px;
	top: 50%;
	transform: translateY(-50%);
	font-size: 12px;
	color: #9a8f8b;
	font-variant-numeric: tabular-nums;
	pointer-events: none;
}
.orem-ps__err {
	margin: 0;
	font-size: 13px;
	color: var(--op-error);
}
.orem-ps__nota {
	margin: 0;
	font-size: 12.5px;
	color: var(--op-suave);
}
.orem-ps__acc {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-top: 10px;
}
.orem-ps__quitar {
	padding: 10px 4px;
	border: 0;
	background: none;
	color: var(--op-error);
	font: inherit;
	font-size: 14px;
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
	box-shadow: none;
}
.orem-ps__quitar:hover {
	background: none;
	color: var(--op-error);
}
.orem-ps__ok {
	flex: 1 1 auto;
	max-width: 240px;
	min-height: 48px;
	margin-left: auto;
	padding: 0 22px;
	border: 0;
	border-radius: 12px;
	background: var(--op-acento);
	color: #faf8f5;
	font: inherit;
	font-size: 15px;
	font-weight: 500;
	cursor: pointer;
	box-shadow: none;
}
.orem-ps__ok:hover {
	background: var(--op-acento-h);
	color: #faf8f5;
}
.orem-ps.is-ocupada .orem-ps__ok {
	opacity: .75;
	cursor: progress;
}
.orem-ps button:focus-visible {
	outline: 2px solid var(--op-acento);
	outline-offset: 2px;
}

@media (max-width: 640px) {
	dialog.orem-ps {
		width: 100%;
		margin: auto 0 0;
		border-radius: 18px 18px 0 0;
	}
	.orem-ps__in {
		padding: 10px 18px calc(18px + env(safe-area-inset-bottom, 0px));
	}
	.orem-ps__asa {
		display: block;
		width: 40px;
		height: 4px;
		margin: 0 auto 6px;
		border-radius: 4px;
		background: var(--op-linea);
	}
	.orem-ps__x {
		top: 12px;
	}
	.orem-ps__ok {
		max-width: none;
	}
}

/* ------------------------------------------------------------------ aviso con deshacer */

.orem-pt {
	position: fixed;
	left: 50%;
	bottom: calc(20px + env(safe-area-inset-bottom, 0px));
	z-index: 1000001;
	display: flex;
	align-items: center;
	gap: 14px;
	max-width: calc(100vw - 32px);
	padding: 11px 14px 11px 16px;
	border-radius: 12px;
	background: var(--op-tinta);
	color: #faf8f5;
	font-size: 14px;
	line-height: 1.35;
	box-shadow: 0 10px 30px rgba(0, 0, 0, .2);
	opacity: 0;
	visibility: hidden;
	transform: translate(-50%, 12px);
	transition: opacity .2s ease, transform .2s ease, visibility .2s;
}
.orem-pt.is-on {
	opacity: 1;
	visibility: visible;
	transform: translate(-50%, 0);
}
.orem-pt button {
	padding: 6px 4px;
	border: 0;
	background: none;
	color: #f1b7c9;
	font: inherit;
	font-weight: 600;
	cursor: pointer;
	box-shadow: none;
	white-space: nowrap;
}
.orem-pt button:hover {
	background: none;
	color: #fff;
}

@media (prefers-reduced-motion: reduce) {
	.orem-pt {
		transition: none;
	}
}

/* ------------------------------------------------------------------ blindaje contra el tema */
/* El tema y CommerceKit estilizan todo <button> del formulario de la ficha y del carrito (texto blanco,
   fondo burdeos, span en bloque, mayúsculas). Medido en staging 2026-11-13: el botón salía como «·+$129»
   en blanco sobre blanco. Lo esencial del componente se fija aquí con !important. */
.orem-perso button.orem-perso__abrir,
.orem-perso button.orem-perso__link,
button.orem-pk-chip,
dialog.orem-ps button,
.orem-pt button {
	width: auto !important;
	height: auto !important;
	float: none !important;
	text-transform: none !important;
	text-shadow: none !important;
	box-shadow: none !important;
	letter-spacing: normal !important;
	opacity: 1 !important;
}
.orem-perso button.orem-perso__abrir {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: flex-start !important;
	gap: 6px !important;
	min-height: 36px !important;
	margin: -4px 0 !important;
	padding: 4px 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: none !important;
	color: #6b1d33 !important;
	font-size: 14px !important;
	font-weight: 500 !important;
	line-height: 1.3 !important;
	text-align: left !important;
	white-space: normal !important;
}
.orem-perso button.orem-perso__abrir > span {
	display: inline !important;
	color: inherit !important;
	font-size: inherit !important;
	margin: 0 !important;
	padding: 0 !important;
}
.orem-perso button.orem-perso__abrir > .orem-perso__precio {
	color: #6e6461 !important;
	font-weight: 400 !important;
}
.orem-perso button.orem-perso__link {
	display: inline !important;
	min-height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	background: none !important;
	color: #6b1d33 !important;
	font-size: inherit !important;
	font-weight: inherit !important;
	line-height: inherit !important;
	text-decoration: underline !important;
}
button.orem-pk-chip {
	display: inline-flex !important;
	align-items: center !important;
	gap: 5px !important;
	min-height: 30px !important;
	margin: 0 !important;
	padding: 3px 11px !important;
	border: 1px solid #e8d8c5 !important;
	border-radius: 999px !important;
	background: #f7efe8 !important;
	color: #2b2b2b !important;
	font-size: 13px !important;
	font-weight: 500 !important;
	line-height: 1.2 !important;
	text-align: left !important;
}
button.orem-pk-chip.is-vacio {
	border: 1px dashed #6b1d33 !important;
	background: #fff !important;
	color: #6b1d33 !important;
}
button.orem-pk-chip:hover {
	border-color: #6b1d33 !important;
}
button.orem-pk-chip > small {
	display: inline !important;
}
dialog.orem-ps button.orem-ps__ok {
	display: block !important;
	min-height: 48px !important;
	padding: 0 22px !important;
	border: 0 !important;
	border-radius: 12px !important;
	background: #6b1d33 !important;
	color: #faf8f5 !important;
	font-size: 15px !important;
	font-weight: 500 !important;
}
dialog.orem-ps button.orem-ps__ok:hover {
	background: #862b45 !important;
}
dialog.orem-ps button.orem-ps__quitar {
	padding: 10px 4px !important;
	border: 0 !important;
	background: none !important;
	color: #a2302a !important;
	font-size: 14px !important;
	text-decoration: underline !important;
}
dialog.orem-ps button.orem-ps__x {
	width: 40px !important;
	height: 40px !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 50% !important;
	background: none !important;
	color: #6e6461 !important;
	font-size: 26px !important;
	line-height: 1 !important;
}
.orem-pt button {
	padding: 6px 4px !important;
	border: 0 !important;
	background: none !important;
	color: #f1b7c9 !important;
	font-weight: 600 !important;
}
.orem-perso button.orem-perso__abrir[hidden],
dialog.orem-ps button[hidden],
.orem-pt button[hidden] {
	display: none !important;
}

/* Kit en el minicarrito: una línea por pieza («Agenda pasta dura 2027  [Ana ✎] [＋ Nombre]»). */
.orem-pk-box .orem-pk-pieza {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	width: 100%;
}
.orem-pk-box .orem-pk-nom {
	font-size: 12.5px;
	color: #6e6461;
	margin-right: 2px;
}