/* Tarjetas de complemento (WC_Orem_Reco_Tarjeta, addons 1.1.421). Mismo lenguaje que el bloque
 * «Complementa tu pedido» de Growth OS que eligió Jesús. Fuera de RUCSS por handle (las tarjetas
 * llegan por AJAX). El tema pinta todo <button>: aquí cada estado se fija con dos clases.
 * Toda regla que pone display lleva su guarda [hidden]. */

.orc-caja [hidden] { display: none !important; }

.orc-caja {
	background: #f8f4ee;
	border-radius: 16px;
	padding: 14px 12px 12px;
	margin: 16px 0 4px;
	font-family: "Prompt", system-ui, sans-serif;
	color: #4c1520;
}
.orc-caja *, .orc-caja *::before, .orc-caja *::after { box-sizing: border-box; }

.orc-caja .orc-titulo {
	margin: 0 0 10px;
	font-family: "Noto Serif Display", Georgia, serif;
	font-size: 19px;
	font-weight: 400;
	line-height: 1.2;
	color: #4c1520;
}

.orc-caja .orc-lista { list-style: none; margin: 0; padding: 0; }

/* Cabecera con «Ver más» / volver */
.orc-caja .orc-cab { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 0 10px; }
.orc-caja .orc-cab .orc-titulo { margin: 0; flex: 1 1 auto; }
.orc-caja .orc-ver-mas,
.orc-caja .orc-ver-mas:hover,
.orc-caja .orc-ver-mas:focus,
.orc-caja .orc-volver,
.orc-caja .orc-volver:hover,
.orc-caja .orc-volver:focus {
	min-height: 32px;
	padding: 4px 6px;
	border: 0;
	background: none;
	box-shadow: none;
	color: #9a1430;
	font: 500 13px/1.2 "Prompt", system-ui, sans-serif;
	cursor: pointer;
	white-space: nowrap;
}
.orc-caja .orc-ver-mas:hover { text-decoration: underline; }
.orc-caja .orc-volver { order: -1; display: inline-flex; align-items: center; padding: 0 8px 0 0; color: #4c1520; }
.orc-caja .orc-volver svg { width: 20px; height: 20px; }

/* «Ver más»: grupos por familia, rejilla de tarjetas verticales */
.orc-caja .orc-grupo { border-top: 1px solid #eadccf; padding: 8px 0; }
.orc-caja .orc-grupo:first-of-type { border-top: 0; }
.orc-caja .orc-grupo > summary {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 6px 0;
	font-weight: 600;
	font-size: 14px;
	color: #4c1520;
	cursor: pointer;
	list-style: none;
}
.orc-caja .orc-grupo > summary::-webkit-details-marker { display: none; }
.orc-caja .orc-grupo > summary::after {
	content: "";
	width: 7px;
	height: 7px;
	margin: 0 4px 3px auto;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate( 45deg );
	transition: transform .15s;
}
.orc-caja .orc-grupo[open] > summary::after { transform: rotate( -135deg ); margin-bottom: -3px; }
.orc-caja .orc-grupo__n { font-weight: 400; color: #8a4a57; }
.orc-caja .orc-lista--rejilla { display: grid; grid-template-columns: repeat( 2, minmax( 0, 1fr ) ); gap: 8px; margin-top: 6px; }
.orc-caja .orc-lista--rejilla .orc-card { display: flex; flex-direction: column; margin: 0; }
.orc-caja .orc-lista--rejilla .orc-fila { display: flex; flex-direction: column; gap: 6px; flex: 1 1 auto; }
.orc-caja .orc-lista--rejilla .orc-info { display: flex; flex-direction: column; flex: 1 1 auto; }
.orc-caja .orc-lista--rejilla .orc-accion { margin-top: auto; }
.orc-caja .orc-lista--rejilla .orc-img img { width: 100%; height: auto; aspect-ratio: 1; }
.orc-caja .orc-lista--rejilla .orc-accion { text-align: left; }
.orc-caja .orc-lista--rejilla .orc-btn { width: 100%; }
.orc-caja .orc-lista--rejilla .orc-listo { align-items: stretch; width: 100%; text-align: center; }

.orc-caja .orc-card {
	background: #fff;
	border-radius: 12px;
	padding: 8px;
	margin: 0 0 8px;
	box-shadow: 0 1px 0 rgba( 76, 21, 32, .06 );
	list-style: none;
}
.orc-caja .orc-card:last-child { margin-bottom: 0; }

.orc-caja .orc-fila {
	display: grid;
	grid-template-columns: 58px minmax( 0, 1fr ) auto;
	gap: 10px;
	align-items: center;
}
.orc-caja .orc-img img {
	display: block;
	width: 58px;
	height: 58px;
	margin: 0;
	border-radius: 9px;
	object-fit: cover;
	background: #f8f4ee;
}
.orc-caja .orc-info { min-width: 0; }
.orc-caja .orc-frase { margin: 0 0 2px; font-size: 11.5px; line-height: 1.25; color: #8a4a57; }
.orc-caja .orc-frase:empty { display: none; }
.orc-caja .orc-nombre {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	font-size: 13px;
	font-weight: 500;
	line-height: 1.25;
	color: #4c1520;
	text-decoration: none;
}
.orc-caja .orc-precio { display: block; margin-top: 2px; font-size: 13px; font-weight: 600; color: #2a1417; }
.orc-caja .orc-precio del { font-weight: 400; color: #8a7a7d; }
.orc-caja .orc-precio ins { text-decoration: none; }
.orc-caja .orc-nota { display: block; margin-top: 2px; font-size: 11.5px; color: #8a4a57; }
.orc-caja .orc-nota a { color: inherit; text-decoration: underline; }

.orc-caja .orc-accion { text-align: right; }

.orc-caja .orc-btn,
.orc-caja .orc-btn:hover,
.orc-caja .orc-btn:focus {
	min-height: 36px;
	padding: 8px 14px;
	border: 0;
	border-radius: 99px;
	background: #4c1520;
	color: #f8f4ee;
	font: 500 12.5px/1.2 "Prompt", system-ui, sans-serif;
	white-space: nowrap;
	cursor: pointer;
	box-shadow: none;
	transition: background .2s, transform .15s;
}
.orc-caja .orc-btn:hover { background: #6b1d33; }
.orc-caja .orc-btn:active { transform: scale( .96 ); }
.orc-caja .orc-btn[aria-expanded="true"] { background: #6b1d33; }
.orc-caja .is-ocupado .orc-btn,
.orc-caja .is-ocupado .orc-op,
.orc-caja .is-ocupado .orc-confirmar { opacity: .6; cursor: progress; }

.orc-caja .orc-listo { display: inline-flex; flex-direction: column; align-items: flex-end; gap: 2px; font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.orc-caja .orc-listo__txt {
	display: inline-block;
	padding: 8px 12px;
	border-radius: 99px;
	background: #4c1520;
	color: #f8f4ee;
}
.orc-caja .orc-quitar,
.orc-caja .orc-quitar:hover,
.orc-caja .orc-quitar:focus {
	min-height: 0;
	padding: 2px;
	border: 0;
	background: none;
	color: #8a4a57;
	font: 400 12px/1.2 "Prompt", system-ui, sans-serif;
	text-decoration: underline;
	box-shadow: none;
	cursor: pointer;
}
.orc-caja .is-listo .orc-btn:not(.orc-perso__ok) { display: none; }

/* Selector de opciones dentro de la tarjeta */
.orc-caja .orc-pick { margin: 8px 0 0; padding-top: 8px; border-top: 1px solid #f1e6dc; }
.orc-caja .orc-attr { margin: 0 0 7px; }
.orc-caja .orc-attr__nom { display: block; margin: 0 0 4px; font-size: 11.5px; color: #8a4a57; }
.orc-caja .orc-ops { display: flex; flex-wrap: wrap; gap: 5px; }
.orc-caja .orc-op,
.orc-caja .orc-op:hover,
.orc-caja .orc-op:focus {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 34px;
	padding: 5px 11px;
	border: 1.5px solid #e8d5c4;
	border-radius: 99px;
	background: #fff;
	color: #4c1520;
	font: 500 12px/1.2 "Prompt", system-ui, sans-serif;
	box-shadow: none;
	cursor: pointer;
}
.orc-caja .orc-op:hover { border-color: #b5677a; }
.orc-caja .orc-op--foto { padding-left: 4px; }
.orc-caja .orc-op img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; margin: 0; }
.orc-caja .orc-op[aria-pressed="true"] { background: #4c1520; border-color: #4c1520; color: #f8f4ee; }
.orc-caja .orc-op:disabled { opacity: .4; cursor: default; text-decoration: line-through; }

.orc-caja .orc-confirmar,
.orc-caja .orc-confirmar:hover,
.orc-caja .orc-confirmar:focus {
	display: block;
	width: 100%;
	min-height: 38px;
	margin-top: 4px;
	padding: 9px 12px;
	border: 0;
	border-radius: 99px;
	background: #f1b7c7;
	color: #4c1520;
	font: 600 12.5px/1.2 "Prompt", system-ui, sans-serif;
	box-shadow: none;
	cursor: pointer;
}
.orc-caja .orc-confirmar:disabled { opacity: .6; cursor: default; }

.orc-caja .orc-error { margin: 6px 0 0; font-size: 11.5px; color: #9b2c3c; }

/* Personalización después de agregar (o en el carrito lateral para lo que entró desde una recomendación) */
.orc-caja .orc-perso { margin-top: 8px; padding-top: 8px; border-top: 1px solid #f1e6dc; }
.orc-caja .orc-perso__q { display: block; margin: 0 0 5px; font-size: 12px; font-weight: 600; color: #4c1520; }
.orc-caja .orc-perso__fila { display: flex; gap: 6px; }
.orc-caja .orc-perso__fila input[type="text"] {
	flex: 1 1 auto;
	min-width: 0;
	height: 36px;
	margin: 0;
	padding: 0 12px;
	border: 1.5px solid #e8d5c4;
	border-radius: 99px;
	background: #fff;
	color: #2a1417;
	font: 500 13px/1.2 "Prompt", system-ui, sans-serif;
	box-shadow: none;
}
.orc-caja .orc-perso__fila input[type="text"]:focus { border-color: #4c1520; outline: none; }
.orc-caja .orc-perso__ok { flex: 0 0 auto; }
.orc-caja .orc-perso__nota { margin: 4px 0 0; font-size: 11px; line-height: 1.3; color: #8a4a57; }
.orc-caja .orc-perso-listo { margin: 6px 0 0; font-size: 12.5px; font-weight: 600; color: #2e6b3a; }
.orc-caja .orc-card--perso { border: 1.5px solid #f1b7c7; }

/* Dentro del carrito lateral (WC_Orem_Reco_Cajon): el tema da estilo de partida a todo <li> del mini
 * carrito; aquí se devuelve a un bloque normal (mismo trato que daba Growth OS a su .oxm). */
#shoptimizerCartDrawer ul.woocommerce-mini-cart li.orc-cajon,
ul.woocommerce-mini-cart li.orc-cajon {
	display: block;
	position: static;
	float: none;
	min-height: 0;
	margin: 12px 0 4px;
	padding: 0 !important;
	border: 0;
	list-style: none;
	background: none;
}
#shoptimizerCartDrawer li.orc-cajon .orc-caja { margin: 0; }
#shoptimizerCartDrawer li.orc-cajon li.orc-card,
ul.woocommerce-mini-cart li.orc-cajon li.orc-card {
	display: block;
	position: static;
	float: none;
	min-height: 0;
	padding: 8px !important;
	border: 0;
	list-style: none;
}
#shoptimizerCartDrawer li.orc-cajon .orc-img img,
ul.woocommerce-mini-cart li.orc-cajon .orc-img img { position: static; float: none; width: 58px; max-width: 58px; height: 58px; margin: 0; }
#shoptimizerCartDrawer li.orc-cajon a.orc-nombre { padding: 0; font-weight: 500; }

@media ( prefers-reduced-motion: reduce ) {
	.orc-caja .orc-btn { transition: none; }
	.orc-caja .orc-btn:active { transform: none; }
}