/*
 * Sils Addons — lo que se ve de cada obra en el carrito.
 *
 * Vale para los tres carritos: el de WooCommerce, el pago y el carrito lateral de
 * CheckoutWC. El lateral se abre en CUALQUIER página, así que esta hoja no puede vivir
 * dentro de personaliza.css (que solo se carga en la ficha, el carrito y el pago):
 * fuera de esas páginas, los datos de cada obra salían sin estilo, uno debajo de otro,
 * y el desplegable de «Personalización» sin su forma. Se carga en el carrito y en el
 * pago, y en el resto de páginas colgada de la hoja del lateral de CheckoutWC.
 *
 * Colores y letra con las variables del sistema (--sils-*), cada una con el valor que tiene
 * hoy de respaldo; tamaños en px, porque esta hoja también sale en páginas de CheckoutWC,
 * donde 1rem no es 10 px. Todos los datos de una obra (sueltas y de una composición) usan
 * la misma letra, «Texto pequeño»; las etiquetas, el gris del sistema.
 */

/* Estas clases viven en filas del TEMA, fuera de nuestros bloques: por eso los tokens
   van en :root y con su propio prefijo. */
:root {
	--sc-negro:  var(--sils-principal,   #000000);
	--sc-texto:  var(--sils-texto,      #2C2C2C);
	--sc-gris:   var(--sils-secundario, #6B6B6B);
	--sc-linea:  var(--sils-fondo-imagenes,   #EEEEEE);
	--sc-blanco: var(--sils-blanco,   #FFFFFF);
	/* La guía de la lista de obras de una composición: el gris del sistema, aclarado. */
	--sc-guia:   color-mix(in srgb, var(--sc-gris) 45%, var(--sc-blanco));
	/* «Texto pequeño» */
	--sc-dato-f:  var(--sils-fuente-thoren, "Thoren Sans"), sans-serif;
	--sc-dato-s:  13px;
	--sc-dato-w:  300;
	--sc-dato-ls: 1px;
}

/* ── Los datos de cada obra en el carrito lateral y en el pago ─────────── */
/* En línea («Acabado Q4attro   Medida 21x30   Marco Negro…») y no cada etiqueta encima
   de su valor: así cada obra ocupaba el doble de alto que su foto. Cada etiqueta va
   pegada a su valor: la línea solo se parte entre un dato y el siguiente (o dentro
   de un valor muy largo). El pago (#cfw.context-checkout: el resumen de escritorio y el
   de móvil) usa las mismas reglas que el lateral; la página de gracias no
   (.context-thank-you, con sus propias reglas en bricks-child/checkout-wc/sils.css). */
:is(#cfw-side-cart, #cfw.context-checkout) .cfw-cart-item-data dl.variation {
	display: block; margin: 4px 0 0; padding: 0; line-height: 1.5; white-space: nowrap;
	color: var(--sc-texto);
	font-family: var(--sc-dato-f); font-size: var(--sc-dato-s); font-weight: var(--sc-dato-w); letter-spacing: var(--sc-dato-ls);
}
:is(#cfw-side-cart, #cfw.context-checkout) .cfw-cart-item-data dl.variation dt,
:is(#cfw-side-cart, #cfw.context-checkout) .cfw-cart-item-data dl.variation dd {
	display: inline; float: none; clear: none; margin: 0; padding: 0;
}
/* CheckoutWC pone las etiquetas en negrita (700, que Thoren no tiene) con un selector
   largo: se repite para ganarle y dejar el grosor del kit. */
:is(#cfw-side-cart, #cfw.context-checkout) .cfw-cart-table .cart-item-row .cfw-cart-item-description .cfw-cart-item-data dl.variation dt {
	margin-right: 3px; font-weight: inherit; color: var(--sc-gris);
}
:is(#cfw-side-cart, #cfw.context-checkout) .cfw-cart-item-data dl.variation dd { margin-right: 12px; white-space: normal; }
:is(#cfw-side-cart, #cfw.context-checkout) .cfw-cart-item-data dl.variation dd p { display: inline; margin: 0; }
/* La personalización, en su propia línea (ver más abajo). */
:is(#cfw-side-cart, #cfw.context-checkout) .cfw-cart-item-data dl.variation dd:has(.sils-perso) { display: block; margin: 2px 0 0; }
/* El precio, en una línea: la cifra y la moneda se partían en dos. */
#cfw-side-cart .cfw-cart-item-subtotal .amount { white-space: nowrap; }

/* ── Composición dentro del carrito ───────────────────────────────────── */
/* La composición y sus obras tienen que leerse como UN BLOQUE: si no, no se sabe dónde
   acaba una composición y empieza la obra suelta de al lado.
   OJO: en este sitio conviven DOS carritos (la tabla clásica de WooCommerce y la de
   CheckoutWC), con celdas distintas. Por eso no se maqueta por posición de columna sino
   con lo nuestro: la clase de la fila (`sils-compo-padre` / `sils-compo-hijo`) y el
   envoltorio del nombre (`.sils-grupo__obra`), que sí están en las dos. */

/* Fondo común: se ve dónde empieza y dónde acaba el conjunto. */
tr.sils-compo-padre > *,
tr.sils-compo-hijo > *,
li.sils-compo-padre,
li.sils-compo-hijo {
	/* Con !important porque el tema pinta el fondo de las celdas del carrito. */
	background: color-mix(in srgb, var(--sc-linea) 30%, var(--sc-blanco)) !important;
	border-bottom: 0 !important;
}
tr.sils-compo-padre > * { padding-top: 14px !important; padding-bottom: 8px !important; }
tr.sils-compo-hijo > * { padding-top: 2px !important; padding-bottom: 2px !important; }
/* La última obra cierra el bloque. */
tr.sils-compo-hijo:has(+ tr:not(.sils-compo-hijo)) > * {
	padding-bottom: 14px !important;
	border-bottom: 1px solid var(--sc-linea) !important;
}

/* Conjunto a medida (el creador de paredes): la línea de arriba enseña la FOTO DE LA
   PARED, no la imagen del producto que hace de percha. */
.sils-conjunto__foto {
	display: block;
	width: 100%;
	height: auto;
	border: 1px solid var(--sc-linea);
}
.sils-conjunto__enlace {
	display: block;
	margin-top: 3px;
	color: var(--sc-texto);
	font-family: var(--sc-dato-f); font-size: var(--sc-dato-s); font-weight: var(--sc-dato-w); letter-spacing: var(--sc-dato-ls);
	text-decoration: underline; text-underline-offset: 3px;
	transition: color 160ms ease;
}
.sils-conjunto__enlace:hover {
	color: var(--sc-negro);
}

/* El nombre de cada obra: sangrado, con guía vertical y más pequeño que la composición. */
.sils-grupo__obra {
	display: block;
	position: relative;
	padding-left: 12px;
	font-size: var(--sc-dato-s);
	line-height: 1.4;
}
.sils-grupo__obra::before {
	content: "";
	position: absolute;
	left: 4px;
	top: 2px;
	bottom: 2px;
	width: 1px;
	background: var(--sc-guia);
}
.sils-grupo__obra a { font-size: var(--sc-dato-s); }

/* En el carrito lateral, las obras del conjunto no llevan su propia cantidad: la manda
   la composición, igual que en el carrito grande. */
tr.sils-compo-hijo .cfw-cart-item-quantity-bubble,
li.sils-compo-hijo .cfw-cart-item-quantity-bubble { display: none !important; }

/* Imagen más pequeña que la de la composición. */
tr.sils-compo-hijo img,
li.sils-compo-hijo img { max-width: 34px !important; }

/* Los datos de las obras de una composición y de la propia composición: en línea, con
   la misma letra que los de una obra suelta. Pueden llegar con el marcado de WCPA
   (`ul.wcpa_cart_meta`) o con el `dl.variation` de WooCommerce: se contemplan los dos. */
:is(tr, li):is(.sils-compo-hijo, .sils-compo-padre) .wcpa_cart_meta {
	display: flex; flex-wrap: wrap; gap: 0 12px; margin: 4px 0 0; padding: 0; list-style: none;
}
:is(tr, li).sils-compo-hijo .wcpa_cart_meta { margin-left: 18px; }
:is(tr, li):is(.sils-compo-hijo, .sils-compo-padre) .wcpa_cart_meta_item { display: flex; align-items: baseline; gap: 3px; margin: 0; }
:is(tr, li):is(.sils-compo-hijo, .sils-compo-padre) :is(.wcpa_cart_meta_item-label, .wcpa_cart_meta_item-value, .wcpa_cart_meta_item-value p) {
	display: inline; margin: 0;
	font-family: var(--sc-dato-f); font-size: var(--sc-dato-s); font-weight: var(--sc-dato-w); letter-spacing: var(--sc-dato-ls);
}
:is(tr, li):is(.sils-compo-hijo, .sils-compo-padre) .wcpa_cart_meta_item-label { color: var(--sc-gris); }
:is(tr, li):is(.sils-compo-hijo, .sils-compo-padre) .wcpa_cart_meta_item-value { color: var(--sc-texto); }

:is(tr, li).sils-compo-hijo dl.variation {
	margin: 2px 0 0 18px; line-height: 1.5; color: var(--sc-texto);
	font-family: var(--sc-dato-f); font-size: var(--sc-dato-s); font-weight: var(--sc-dato-w); letter-spacing: var(--sc-dato-ls);
}
:is(tr, li).sils-compo-hijo dl.variation dt { display: inline; clear: none; float: none; margin: 0 3px 0 0; font-weight: inherit; color: var(--sc-gris); }
:is(tr, li).sils-compo-hijo dl.variation dd { display: inline; margin: 0 12px 0 0; }
:is(tr, li).sils-compo-hijo dl.variation dd p { display: inline; margin: 0; }

/* ── La lista de obras de una composición en el carrito lateral y en el pago ── */
/* Como un árbol: una línea que baja del centro de la foto de la composición y un trazo
   hacia cada obra. Las obras van juntas (sin raya entre ellas y con poco margen), con
   la foto pequeña y sangrada; el nombre y los datos, alineados con los de la
   composición. La guía del nombre de arriba sobra aquí.
   Las mismas reglas para los dos: en los dos, cada obra es una fila en flex (el lateral,
   en bricks-child/assets/sils-bricks.css; el pago, en bricks-child/checkout-wc/sils.css).
   Solo cambia el margen izquierdo de la fila (--sc-fila-x): 1em en el lateral, nada en
   el pago. */
#cfw-side-cart .cfw-cart-table { --sc-fila-x: 1em; }
#cfw.context-checkout .cfw-cart-table { --sc-fila-x: 0px; }
/* Sin el fondo ni la raya final del bloque de arriba (los del carrito de WooCommerce): en
   flex, cada celda tiene su alto y la raya salía partida, a dos alturas. */
:is(#cfw-side-cart, #cfw.context-checkout) .cfw-cart-table .cart-item-row:is(.sils-compo-padre, .sils-compo-hijo) > * {
	background: transparent !important;
	border-bottom: 0 !important;
}
:is(#cfw-side-cart, #cfw.context-checkout) .cfw-cart-table .cart-item-row.sils-compo-padre {
	padding-bottom: 10px;
}
:is(#cfw-side-cart, #cfw.context-checkout) .cfw-cart-table .cart-item-row.sils-compo-padre > * {
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}
:is(#cfw-side-cart, #cfw.context-checkout) .cfw-cart-table .cart-item-row.sils-compo-hijo {
	position: relative;
	align-items: flex-start;
	padding-top: 6px;
	padding-bottom: 6px;
	border-top: 0 !important;
}
:is(#cfw-side-cart, #cfw.context-checkout) .cfw-cart-table .cart-item-row.sils-compo-hijo:not(:has(+ .sils-compo-hijo)) {
	padding-bottom: 16px;
}
/* La línea: centrada bajo la foto de la composición (margen de la fila + media foto). */
:is(#cfw-side-cart, #cfw.context-checkout) .cfw-cart-table .cart-item-row.sils-compo-hijo::before,
:is(#cfw-side-cart, #cfw.context-checkout) .cfw-cart-table .cart-item-row.sils-compo-hijo::after {
	content: "";
	position: absolute;
	left: calc(var(--sc-fila-x) + 2em);
	background: var(--sc-guia);
	pointer-events: none;
}
:is(#cfw-side-cart, #cfw.context-checkout) .cfw-cart-table .cart-item-row.sils-compo-hijo::before { top: 0; bottom: 0; width: 1px; }
/* Sube hasta la foto de la composición; en la última obra acaba en su trazo. */
:is(#cfw-side-cart, #cfw.context-checkout) .cfw-cart-table .cart-item-row.sils-compo-padre + .sils-compo-hijo::before { top: -10px; }
:is(#cfw-side-cart, #cfw.context-checkout) .cfw-cart-table .cart-item-row.sils-compo-hijo:not(:has(+ .sils-compo-hijo))::before { bottom: auto; height: 20px; }
:is(#cfw-side-cart, #cfw.context-checkout) .cfw-cart-table .cart-item-row.sils-compo-padre + .sils-compo-hijo:not(:has(+ .sils-compo-hijo))::before { height: 30px; }
/* El trazo hacia la obra. */
:is(#cfw-side-cart, #cfw.context-checkout) .cfw-cart-table .cart-item-row.sils-compo-hijo::after { top: 20px; width: 9px; height: 1px; }
:is(#cfw-side-cart, #cfw.context-checkout) .cfw-cart-table .cart-item-row.sils-compo-hijo .cfw-cart-item-image img {
	width: 28px !important;
	max-width: 28px !important;
	height: auto !important;
	margin-left: calc(2em + 12px);
}
/* Dentro de cada obra, nada de huecos vacíos: el del descuento y el de la cantidad (las
   obras de una composición no tienen cantidad propia) llegan vacíos y con margen. */
:is(#cfw-side-cart, #cfw.context-checkout) .cfw-cart-table .cart-item-row.sils-compo-hijo > * {
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}
:is(#cfw-side-cart, #cfw.context-checkout) .cart-item-row.sils-compo-hijo :is(.cfw-items-summary-item-discount, .cfw_side_cart_item_after_data, .cfw_cart_item_after_data):not(:has(*)) {
	display: none;
}
:is(#cfw-side-cart, #cfw.context-checkout) .sils-compo-hijo .sils-grupo__obra { padding-left: 0; }
:is(#cfw-side-cart, #cfw.context-checkout) .sils-compo-hijo .sils-grupo__obra::before { display: none; }
:is(#cfw-side-cart, #cfw.context-checkout) .sils-compo-hijo dl.variation { margin-left: 0; }
:is(#cfw-side-cart, #cfw.context-checkout) .sils-compo-hijo .wcpa_cart_meta { margin-left: 0; }
/* «Ver la pared» con el grosor de los enlaces del lateral (sils-bricks.css). */
#cfw.context-checkout .sils-conjunto__enlace { font-weight: 500; }
/* Móvil: el carrito heredado pone el título bajo la foto y los datos encima; en las obras
   de la lista, el nombre y luego sus datos, en su columna. */
@media (max-width: 1024px) {
	#cfw-side-cart .cfw-cart-table .cart-item-row.sils-compo-hijo .cfw-cart-item-description {
		flex-direction: column;
	}
	#cfw-side-cart .cfw-cart-table .cart-item-row.sils-compo-hijo .cfw-cart-item-description .cfw-cart-item-title {
		margin-left: 0;
	}
}

/* Personalización en el carrito: una sola línea que se abre.
   La etiqueta va dentro del desplegable, así que la de fuera (la que pinta WooCommerce o
   WCPA) se esconde: si no, se leería «Personalización: Personalización». */
dl.variation dt:has(+ dd .sils-perso),
.wcpa_cart_meta_item:has(.sils-perso) .wcpa_cart_meta_item-label { display: none !important; }

.sils-perso { display: block; }
.sils-perso > summary {
	display: inline-flex; align-items: center; gap: 4px;
	cursor: pointer; list-style: none; color: var(--sc-texto);
	font-family: var(--sc-dato-f); font-size: var(--sc-dato-s); font-weight: var(--sc-dato-w); letter-spacing: var(--sc-dato-ls);
	text-decoration: underline; text-underline-offset: 3px;
}
.sils-perso > summary::-webkit-details-marker { display: none; }
.sils-perso > summary::after {
	content: "";
	width: 0; height: 0;
	border-left: 4px solid transparent; border-right: 4px solid transparent;
	border-top: 4px solid currentColor;
	transition: transform .15s ease;
}
.sils-perso[open] > summary::after { transform: rotate(180deg); }
.sils-perso__texto {
	display: block; max-width: 34ch; margin-top: 4px; padding: 6px 8px;
	background: color-mix(in srgb, var(--sc-linea) 45%, var(--sc-blanco));
	border-radius: 4px; line-height: 1.5; white-space: pre-wrap;
	font-family: var(--sc-dato-f); font-size: var(--sc-dato-s); font-weight: var(--sc-dato-w); letter-spacing: var(--sc-dato-ls);
}