/**
 * CN Quote Registration — formulario del pedido según Figma.
 * Change: quote-request-account-registration
 *
 * Scope: sólo dentro del form default del RAQ (.cnq-raq-form), página /pedido/
 * (body.cnq-page). Tokens del sistema de diseño del proyecto.
 */

body.cnq-page.cnq-visitor .yith-ywraq-mail-form-wrapper > h3 {
	display: none; /* header propio según Figma (visitante) */
}

body.cnq-page .cnq-raq-form {
	font-family: Roboto, -apple-system, "Segoe UI", sans-serif;
}

/* Header del bloque (visitante) — grid/flex child: ritmo vía gap 24 */
.cnq-form-header {
	margin: 0;
}

.cnq-form-header__title {
	margin: 0 0 8px;
	font-size: 24px;
	line-height: 28px;
	font-weight: 700;
	color: #283641;
}

.cnq-form-header__text {
	margin: 0;
	font-size: 14px;
	line-height: 20px;
	color: #4b5563;
}

/* Grid del formulario: pares en dos columnas (nombre, contacto, fiscal) */
.cnq-raq-form .cnq-field {
	display: flex;
	flex-direction: column;
	margin: 0; /* ritmo vertical: row-gap/flex-gap 24 del contenedor (frame 6379:5266) */
	padding: 0;
}

.cnq-raq-form .cnq-field label,
.cnq-raq-form .cnq-segmented__legend {
	order: 0;
	margin: 0 0 8px; /* Input 6379:5274: label(14) gap 8 input(44) = 66 */
	font-size: 12px;
	line-height: 14px;
	font-weight: 700;
	color: #1f2937;
}

/* Client Type Group 6379:5279: label → track con gap 6 (no 8) */
.cnq-raq-form .cnq-segmented__legend {
	margin-bottom: 6px;
}

.cnq-required {
	color: #b91c1c;
	margin-left: 2px;
}

.cnq-raq-form .cnq-input,
.cnq-raq-form input.cnq-input,
.cnq-raq-form textarea.cnq-input {
	order: 1;
	width: 100%;
	height: 44px;
	padding: 0 14px;
	font-size: 14px;
	line-height: 20px;
	font-family: inherit;
	color: #283641;
	background: #ffffff;
	border: 1px solid #d1d5db;
	border-radius: 8px;
	box-sizing: border-box;
	transition: border-color 0.15s ease;
	-webkit-appearance: none;
	appearance: none;
}

.cnq-raq-form .cnq-input:focus {
	outline: none;
	border-color: #337c84;
}

/* Placeholder: color/gray-500 (#6B7280) según tokens del input */
.cnq-raq-form .cnq-input::placeholder {
	color: #6b7280;
	opacity: 1;
}

.cnq-raq-form textarea.cnq-input,
.cnq-raq-form .cnq-textarea {
	height: auto;
	min-height: 140px;
	padding: 12px 14px;
	resize: vertical;
}

.cnq-hint {
	order: 2;
	margin: 6px 0 0;
	font-size: 12px;
	line-height: 16px;
	color: #6b7280;
}

/* Orden visual según Figma (el plugin renderiza en orden de config DB:
   email primero). Grid (desktop) y flex column (mobile) respetan order. */
.cnq-raq-form #yith-ywraq-default-form > .cnq-key-first-name { order: 1; }
.cnq-raq-form #yith-ywraq-default-form > .cnq-key-last-name { order: 2; }
.cnq-raq-form #yith-ywraq-default-form > .cnq-key-email { order: 3; }
.cnq-raq-form #yith-ywraq-default-form > .cnq-key-cn-whatsapp { order: 4; }
.cnq-raq-form #yith-ywraq-default-form > .cnq-row-tipo { order: 5; }
.cnq-raq-form #yith-ywraq-default-form > .cnq-key-cn-dni-cuit { order: 6; }
.cnq-raq-form #yith-ywraq-default-form > .cnq-key-cn-razon-social { order: 7; }
.cnq-raq-form #yith-ywraq-default-form > .cnq-key-cn-direccion { order: 8; }
.cnq-raq-form #yith-ywraq-default-form > .cnq-key-message { order: 9; }
.cnq-raq-form #yith-ywraq-default-form > .woocommerce-account-fields { order: 10; }
.cnq-raq-form #yith-ywraq-default-form > .raq-send-request-row { order: 11; }

/*
 * El wrapper de account fields del plugin queda vacío con la configuración
 * del sitio (generación de usuario/contraseña automática): sin inputs, se
 * retira del layout para no ocupar una celda invisible del grid. Si la
 * política de contraseña cambia y vuelve a renderizar campos, ocupa su fila.
 */
.cnq-raq-form #yith-ywraq-default-form > .woocommerce-account-fields:not(:has(input)) {
	display: none;
}

.cnq-raq-form #yith-ywraq-default-form > .woocommerce-account-fields {
	grid-column: 1 / -1;
}

.cnq-raq-form .raq-send-request-row {
	margin: 0 0 16px;
	padding: 0;
	display: flex;
}

.cnq-raq-form .raq-send-request-row .raq-send-request {
	width: 100%;
}

/* Figma (Action Area 6379:5758, counterAxis MAX): botón hug alineado a la
 * derecha en desktop; full-width en mobile (6385:7068, w398). */
@media (min-width: 769px) {
	.cnq-raq-form .raq-send-request-row {
		justify-content: flex-end;
	}
}

@media (min-width: 769px) {
	/* Grid contenedor: cada campo ocupa su celda; las filas de ancho
	   completo (tipo, domicilio, mensaje, submit) la abarcan. */
	.cnq-raq-form #yith-ywraq-default-form {
		display: grid;
		grid-template-columns: 1fr 1fr;
		column-gap: 16px;
		row-gap: 24px; /* Checkout Form 6379:5266: itemSpacing 24 */
		align-items: start;
	}

	.cnq-raq-form #yith-ywraq-default-form > input[type="hidden"],
	.cnq-raq-form #yith-ywraq-default-form > .cnq-row-tipo,
	.cnq-raq-form #yith-ywraq-default-form > .cnq-row-address,
	.cnq-raq-form #yith-ywraq-default-form > .cnq-row-message,
	.cnq-raq-form #yith-ywraq-default-form > .raq-send-request-row,
	.cnq-raq-form #yith-ywraq-default-form > .cnq-form-header,
	.cnq-raq-form #yith-ywraq-default-form > p:not([class]) {
		grid-column: 1 / -1;
	}

	/* Persona física: DNI ocupa la fila completa (razón social oculta). */
	.cnq-raq-form[data-tipo="2"] #yith-ywraq-default-form > .cnq-key-cn-dni-cuit {
		grid-column: 1 / -1;
	}
}

/* Segmented control de tipo de cliente — track gris con píldora blanca
 * seleccionada (tokens: track #E5E7EB radius/md, selected bg #FFFFFF texto
 * #283641 Bold, unselected #4B5563 Medium). */
.cnq-segmented {
	border: 0;
	padding: 0;
	margin: 0;
}

.cnq-segmented__track {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0; /* Client Tabs 6379:5281: itemSpacing 0, tabs contiguos */
	padding: 3px;
	height: 40px; /* track 40 = tabs 34 + padding 3×2 */
	border: 0;
	border-radius: 8px;
	overflow: hidden;
	background: #e5e7eb;
	box-sizing: border-box;
}

.cnq-segmented__option {
	position: relative;
	display: block;
	margin: 0;
}

.cnq-segmented__option input {
	position: absolute;
	opacity: 0;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	cursor: pointer;
}

.cnq-segmented__option span {
	display: block;
	padding: 7px 12px; /* tab 34 = 7+7+20 (línea) */
	text-align: center;
	font-size: 14px;
	line-height: 20px;
	font-weight: 500;
	color: #4b5563;
	background: transparent;
	border-radius: 6px;
	transition: background 0.15s ease, color 0.15s ease;
	cursor: pointer;
	box-sizing: border-box;
	height: 34px;
}

.cnq-segmented__option input:checked + span {
	background: #ffffff;
	color: #283641;
	font-weight: 700;
}

.cnq-segmented__option input:focus-visible + span {
	outline: 2px solid #337c84;
	outline-offset: -2px;
}

/* Variante por tipo: razón social sólo jurídica */
.cnq-raq-form[data-tipo="2"] .cnq-juridica-only {
	display: none !important;
}

/* Botón de envío (Button/Medium del sistema: full-width 60px, Roboto Bold 16,
 * radius/md; Default #337C84 texto blanco; Disabled #E5E7EB texto #9CA3AF) */
body.cnq-page .cnq-raq-form .raq-send-request-row .raq-send-request,
body.cnq-page .cnq-raq-form input.raq-send-request[type="submit"] {
	width: 100%;
	height: 60px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: inherit;
	font-size: 16px;
	line-height: 20px;
	font-weight: 700;
	color: #ffffff;
	background: #337c84;
	border: 0;
	border-radius: 8px;
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease;
	text-transform: none;
	padding: 0 20px; /* Button 6379:5296 */
}

body.cnq-page .cnq-raq-form input.raq-send-request[type="submit"]:hover:not(:disabled) {
	background: #2c6b72;
}

body.cnq-page .cnq-raq-form input.raq-send-request[type="submit"]:disabled,
body.cnq-page .cnq-raq-form input.raq-send-request[type="submit"][aria-disabled="true"] {
	color: #9ca3af;
	background: #e5e7eb;
	cursor: default;
}

/* Errores del submit (bloque de mensajes del plugin): foco visual */
body.cnq-page .yith-ywraq-mail-form-wrapper .woocommerce-error,
body.cnq-page .cnq-raq-form .ywraq-default-form-errors {
	border-radius: 8px;
}

/* Logueado: sólo header nativo + mensaje (identidad oculta) */
body.cnq-page.cnq-logged .cnq-raq-form form#yith-ywraq-default-form {
	grid-template-columns: 1fr;
}

/* Mobile (≤768px): una columna, sin scroll horizontal */
@media (max-width: 768px) {
	.cnq-raq-form #yith-ywraq-default-form {
		display: flex;
		flex-direction: column;
		gap: 24px;
	}

	.cnq-input,
	.cnq-segmented__track {
		max-width: 100%;
	}
}

/* ==================================================================
 * Layout de la página /pedido/ (change: quote-request-account-registration,
 * iteración 9): dos columnas desktop — izquierda listado + formulario,
 * derecha resumen + pasos + banner. Mobile apilado (el resumen se
 * interpone entre listado y formulario vía JS).
 * ================================================================== */

@media (min-width: 1025px) {
	body.cnq-page .cnq-page-grid {
		display: grid;
		grid-template-columns: minmax(0, 1fr) 420px;
		gap: 48px;
		align-items: start;
	}
}

body.cnq-page .cnq-col-left {
	min-width: 0;
}

body.cnq-page .cnq-col-right {
	display: flex;
	flex-direction: column;
	gap: 24px;
	min-width: 0;
}

/* Paneles base (tokens: radius, padding 24, tipografías del sistema) */
.cnq-panel {
	padding: 24px;
	border-radius: 8px;
	box-sizing: border-box;
	font-family: Roboto, -apple-system, "Segoe UI", sans-serif;
}

.cnq-summary {
	background: #f9fafb;
	border: 1px solid #e5e7eb;
}

/* Summary Panel visitante (6353:26322): radius 16 (el logueado
 * 6353:26965 es 8 — así está en el archivo). */
.cnq-summary[data-cnq-summary="visitor"] {
	border-radius: 16px;
}

.cnq-panel__title {
	margin: 0 0 20px;
	font-size: 28px;
	line-height: 32px;
	font-weight: 700;
	color: #283641;
}

.cnq-summary-cta {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 16px;
	/* registration-cta 6358:6106: fondo #E0EBED, rectangular (sin radius
	 * ni borde — la card blanca anterior era un invento, pero el bloque
	 * sí lleva este fondo claro propio). */
	background: #e0ebed;
}

.cnq-badge {
	align-self: flex-start;
	padding: 5px 16px;
	font-size: 12px;
	line-height: 14px;
	font-weight: 700;
	color: #ffffff; /* Badge 6361:6158: teal #337C84 con texto blanco */
	background: #337c84;
	border-radius: 999px;
}

.cnq-summary-cta__text {
	margin: 0;
	font-size: 16px;
	line-height: 24px;
	font-weight: 500;
	color: #283641; /* Registration Text 6358:6108: navy Medium */
}

.cnq-summary-cta__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px; /* Button 6361:6120: 48px, full-width del bloque */
	width: 100%;
	padding: 0 32px;
	font-family: inherit;
	font-size: 16px;
	line-height: 20px;
	font-weight: 700;
	color: #ffffff;
	background: #337c84;
	border: 0;
	border-radius: 8px;
	text-decoration: none;
	cursor: pointer;
	transition: background 0.15s ease;
}

.cnq-summary-cta__button:hover {
	background: #2c6b72;
	color: #ffffff;
}

/* Logueado: total presupuestado (token color/secondary #337C84, 32/38 Bold) */
.cnq-summary-total {
	display: flex;
	flex-direction: row;
	align-items: baseline;
	justify-content: space-between;
	margin: 0;
}

.cnq-summary-total__label {
	font-size: 14px;
	line-height: 20px;
	font-weight: 700;
	color: #4b5563;
}

.cnq-summary-total__amount {
	font-size: 32px;
	line-height: 38px;
	font-weight: 700;
	color: #337c84;
}

/* Pasos */
.cnq-steps {
	background: #f1f6f6;
	border: 1px solid #c2d8da;
}

.cnq-steps__title {
	margin: 0 0 24px;
	font-size: 20px;
	line-height: 24px;
	font-weight: 700;
	color: #283641;
}

.cnq-steps__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.cnq-steps__item {
	display: flex;
	align-items: flex-start;
	gap: 12px;
}

.cnq-steps__badge {
	flex: 0 0 auto;
	width: 24px; /* Step Badge 6353:26336: 24×24 radius 12 */
	height: 24px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 12px;
	font-weight: 700;
	color: #ffffff;
	background: #337c84;
	border-radius: 12px;
}

.cnq-steps__copy {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.cnq-steps__copy strong {
	font-size: 14px;
	line-height: 20px;
	font-weight: 700;
	color: #283641;
}

.cnq-steps__copy span {
	font-size: 14px;
	line-height: 20px;
	color: #4b5563;
}

/* Banner de envíos (frame 6353:26374): panel teal oscuro con foto de fondo,
 * texto blanco, ícono de camión y botón "Consultar" con flecha. */
.cnq-shipping {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 16px;
	/* Fondo sólido #24575C: el IMAGE fill del frame es un plano teal
	 * claro (placeholder del archivo, rgb≈119,190,187) que con cover
	 * tapaba el color real del panel. */
	background: #24575c;
	border: 1px solid #1b4045;
	border-radius: 8px;
	box-sizing: border-box;
	font-family: Roboto, -apple-system, "Segoe UI", sans-serif;
}

.cnq-shipping__top {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
}

.cnq-shipping__title {
	margin: 0 0 4px;
	font-size: 20px;
	line-height: 24px;
	font-weight: 700;
	color: #ffffff;
}

.cnq-shipping__desc {
	margin: 0;
	font-size: 14px;
	line-height: 20px;
	color: #ffffff;
}

.cnq-shipping__icon {
	flex: 0 0 auto;
	width: 44px;
	height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: #ffffff;
	border-radius: 999px;
}

.cnq-shipping__icon svg {
	width: 20px;
	height: 20px;
}

.cnq-shipping__button {
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 36px;
	padding: 8px 12px 8px 16px;
	font-family: inherit;
	font-size: 14px;
	line-height: 16px;
	font-weight: 700;
	color: #ffffff;
	background: transparent;
	border: 1.5px solid #ffffff;
	border-radius: 999px;
	text-decoration: none;
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease;
}

.cnq-shipping__button:hover {
	background: #ffffff;
	color: #24575c;
}

.cnq-shipping__button svg {
	width: 16px;
	height: 16px;
}

/* "Seguir explorando productos" (bajo el listado) */
.cnq-continue {
	display: flex;
	justify-content: flex-end;
	margin: 48px 0;
}

.cnq-continue__link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 48px;
	padding: 12px 16px;
	font-family: Roboto, -apple-system, "Segoe UI", sans-serif;
	font-size: 16px;
	line-height: 20px;
	font-weight: 700;
	color: #337c84;
	background: transparent;
	border: 1px solid #337c84;
	border-radius: 8px;
	text-decoration: none;
	transition: background 0.15s ease, color 0.15s ease;
}

.cnq-continue__link:hover {
	background: #337c84;
	color: #ffffff;
}

/* ------------------------------------------------------------------
 * Listado: tabla nativa del plugin re-skinneada a cards del diseño.
 * Sin override de template: display block sobre table/tr/td + celdas
 * reordenadas por flex. El comportamiento ajax (quitar/cantidad) se
 * conserva intacto.
 * ------------------------------------------------------------------ */
body.cnq-page .yith-ywraq-before-table .wc-backward,
body.cnq-page .ywraq-question-message .ywraq-back-to-shop {
	display: none; /* reemplazado por "Seguir explorando productos" */
}

body.cnq-page #yith-ywrq-table-list thead {
	display: none;
}

body.cnq-page #yith-ywrq-table-list,
body.cnq-page #yith-ywrq-table-list tbody {
	display: block;
	border: 0;
	margin: 0;
	padding: 0;
	background: transparent;
}

body.cnq-page #yith-ywrq-table-list tr.cart_item {
	padding: 16px;
	background: #ffffff;
	box-sizing: border-box;
	/* display/colocación: grid en el bloque "re-grounding" (final del archivo) */
}

body.cnq-page #yith-ywrq-table-list td {
	display: block;
	border: 0;
	padding: 0;
	background: transparent;
}

/* Celdas del card: thumb 80 / nombre+presentación / stepper / precios / quitar */
body.cnq-page #yith-ywrq-table-list td.product-remove {
	flex: 0 0 auto;
}

body.cnq-page #yith-ywrq-table-list td.product-remove .remove {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	font-size: 0;
	color: #dc2626;
	background: transparent;
	border-radius: 8px;
	text-decoration: none;
	overflow: hidden;
}

/* Ícono tacho del diseño: SVG data-URI (el markup nativo trae sólo ×
 * y Basel lo dibuja blanco — invisible sobre card blanca). */
body.cnq-page #yith-ywrq-table-list td.product-remove .remove::before,
body.cnq-page #yith-ywrq-table-list td.product-remove .remove::after {
	content: none;
}

body.cnq-page #yith-ywrq-table-list td.product-remove .remove {
	/* SVG exportado del Icon/trash del archivo Figma (instancia
	 * I6353:26907;4259:1126): barra superior #E63333 + cuerpo con
	 * tapa/manija #DC2626, sin líneas internas. */
	background-image: url("../img/cn-icon-trash.svg");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 16px 16px;
}

body.cnq-page #yith-ywrq-table-list td.product-remove .remove:hover {
	background-color: #fef2f2;
}

body.cnq-page #yith-ywrq-table-list td.product-thumbnail {
	flex: 0 0 auto;
}

body.cnq-page #yith-ywrq-table-list td.product-thumbnail img {
	/* !important: Basel fuerza max-width:48px en thumbs de shop_table.cart. */
	width: 80px !important;
	max-width: 80px !important;
	height: 80px !important;
	object-fit: cover;
	border-radius: 8px;
	display: block;
}

body.cnq-page #yith-ywrq-table-list td.product-name {
	min-width: 0;
}

body.cnq-page #yith-ywrq-table-list td.product-name > a {
	display: block;
	font-size: 14px;
	line-height: 20px;
	font-weight: 700;
	color: #283641;
	text-decoration: none;
}

body.cnq-page #yith-ywrq-table-list td.product-name > a:hover {
	color: #337c84;
}

body.cnq-page #yith-ywrq-table-list td.product-name .ywmmq-icon {
	display: none;
}

.cnq-item-presentation {
	display: block;
	margin-top: 0;
	font-size: 12px;
	line-height: 16px;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: #6b7280;
}

/* Visitante: sin precios (celdas vacías por logged_users_prices) */
body.cnq-page.cnq-visitor #yith-ywrq-table-list td.product-price,
body.cnq-page.cnq-visitor #yith-ywrq-table-list td.product-subtotal,
body.cnq-page.cnq-visitor #yith-ywrq-table-list td.product-name .mobile-price {
	display: none;
}

/* Logueado: colocación y apilado de precios en el bloque grid final;
 * aquí sólo la tipografía del subtotal. */
body.cnq-page.cnq-logged #yith-ywrq-table-list td.product-subtotal {
	font-size: 16px;
	line-height: 24px;
	font-weight: 700;
	color: #283641;
}

body.cnq-page.cnq-logged #yith-ywrq-table-list td.product-name .mobile-price {
	display: none;
}

/* Stepper (− n +) sobre el input nativo */
.cnq-stepper {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	padding: 4px;
	background: #f3f4f6;
	border-radius: 6px;
}

.cnq-stepper input.qty {
	width: 24px;
	height: 20px;
	padding: 0;
	text-align: center;
	font-size: 14px;
	line-height: 20px;
	font-weight: 700;
	color: #1f2937; /* Frame 6353:26900: fill_a43bhy (gray-800) */
	background: transparent;
	border: 0;
	-moz-appearance: textfield;
	appearance: textfield;
}

.cnq-stepper input.qty::-webkit-outer-spin-button,
.cnq-stepper input.qty::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.cnq-stepper__btn {
	/* Frame 6353:26900: Icon/minus e Icon/plus son 16×16 (stepper 28px de
	 * alto = padding 4×2 + línea de texto 20). */
	width: 16px;
	height: 16px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 16px;
	line-height: 1;
	color: #4b5563;
	background: transparent;
	border: 0;
	border-radius: 999px;
	cursor: pointer;
	padding: 0;
	position: relative;
}

/* Área de hit 24×24 (WCAG 2.5.8 mínimo) manteniendo el visual 16×16
 * del diseño: pseudo expandible sin afectar el layout. */
body.cnq-page #yith-ywrq-table-list .cnq-stepper__btn::before {
	content: "";
	position: absolute;
	inset: -4px;
}

.cnq-stepper__btn:hover {
	color: #1f2937; /* feedback sutil dentro del token; sin bg — el diseño no define hover */
}

/* Mobile: paneles compactos (la card móvil se define en el bloque grid
 * final del archivo). */
@media (max-width: 768px) {
	.cnq-panel {
		padding: 16px;
	}

	.cnq-continue {
		justify-content: flex-start;
		margin: 24px 0;
	}

	.cnq-panel__title {
		font-size: 20px;
		line-height: 24px;
	}

	.cnq-summary-total__amount {
		font-size: 28px;
		line-height: 32px;
	}
}

/* Full-width de la página RAQ: el template Basel trae col-sm-9 + sidebar
 * (scoped a body.cnq-page — el diseño del pedido es de ancho completo). */
@media (min-width: 1025px) {
	body.cnq-page .site-content.col-sm-9 {
		width: 100%;
		flex: 0 0 100%;
		max-width: 100%;
	}

	body.cnq-page .row > .col-sm-3.sidebar-container,
	body.cnq-page .site-content ~ .col-sm-3,
	body.cnq-page .widget-area,
	body.cnq-page .site-sidebar {
		display: none;
	}
}

/* El diseño de /pedido/ no tiene sidebar en NINGÚN estado ni viewport: en
 * mobile/tablet Basel muestra el opener off-canvas flotante del borde
 * izquierdo (.basel-sticky-sidebar-opener, la píldora "···") que desliza el
 * drawer del "Quote Widget Area". El botón es el único trigger del drawer —
 * oculto, la sidebar queda inalcanzable en todo ancho. (Footer intacto: su
 * .widget-area no depende de este botón.) */
body.cnq-page .basel-sticky-sidebar-opener {
	display: none !important;
}

/* Fila de totales nativa de la tabla: el total vive en el panel derecho
 * (regla reforzada: Basel setea display en th/td de shop_table). */
body.cnq-page table#yith-ywrq-table-list th.raq-totals-row,
body.cnq-page table#yith-ywrq-table-list .raq-totals-label,
body.cnq-page table#yith-ywrq-table-list td.raq-totals,
body.cnq-page table#yith-ywrq-table-list tr:has(.raq-totals-label) {
	display: none !important;
}

/* Stepper nativo de Basel en la tabla RAQ: los botones −/+ (input.minus /
 * input.plus) se reemplazan por el stepper del diseño — se ocultan los
 * nativos conservando sus handlers. */
body.cnq-page #yith-ywrq-table-list td.product-quantity .quantity > input.minus,
body.cnq-page #yith-ywrq-table-list td.product-quantity .quantity > input.plus,
body.cnq-page #yith-ywrq-table-list td.product-quantity .quantity > button.minus,
body.cnq-page #yith-ywrq-table-list td.product-quantity .quantity > button.plus {
	display: none !important;
}

/* Scroll horizontal defensivo: atributos de producto o nombres largos no
 * abren scroll en el wrapper de la tabla (el contenido fluye en la card). */
body.cnq-page .ywraq-form-table-wrapper {
	overflow-x: hidden;
}

body.cnq-page #yith-ywrq-table-list td.product-name ul,
body.cnq-page #yith-ywrq-table-list td.product-name .ywraq-question-message {
	margin-left: 0;
	padding-left: 0;
}

/* ==================================================================
 * Hero de la página (frame 6353:26828): sección clara que reemplaza el
 * banner de título de Basel. Título "Mi pedido" 32/38 Bold #283641 y
 * contador "N productos" 14/20 #6B7280 (badge y ResultsCount ocultos
 * en el diseño).
 * ================================================================== */
body.cnq-page.cnq-has-items .page-title,
body.cnq-page.cnq-has-items .main-page-wrapper > .page-title,
body.cnq-page.cnq-has-items .entry-header,
body.cnq-page.cnq-empty .page-title,
body.cnq-page.cnq-empty .main-page-wrapper > .page-title,
body.cnq-page.cnq-empty .entry-header {
	display: none !important;
}

/* HeroSection 6353:26828: padding 40/80/16/80 + gap 40 al contenido. El
 * badge "Catálogo Artesanal" y el "ResultsCount" del frame están ocultos. */
.cnq-hero {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 40px 0 16px;
	margin: 0 0 40px;
	font-family: Roboto, -apple-system, "Segoe UI", sans-serif;
}

.cnq-hero__title {
	margin: 0;
	font-size: 32px;
	line-height: 38px;
	font-weight: 700;
	color: #283641;
}

.cnq-hero__count {
	margin: 0;
	font-size: 14px;
	line-height: 20px;
	color: #6b7280;
}

/* ==================================================================
 * Correcciones de fidelidad (feedback screenshot): scroll horizontal,
 * thumb según fallback del diseño y distribución flex de la card.
 * ================================================================== */

/* Scroll horizontal: el wrapper .responsive-table (Basel/plugin) trae
 * overflow-x:auto y la fila no encogía (flex-basis auto del nombre). */
body.cnq-page .responsive-table {
	overflow-x: visible !important;
}

body.cnq-page #yith-ywrq-table-list td.product-name {
	min-width: 0;
	overflow-wrap: anywhere;
}

body.cnq-page #yith-ywrq-table-list tr.cart_item {
	max-width: 100%;
	box-sizing: border-box;
}

/* Thumb: 80×80 cover con el fallback del diseño (#0000000D) detrás. */
body.cnq-page #yith-ywrq-table-list td.product-thumbnail img {
	background: rgba(0, 0, 0, 0.05);
	object-fit: cover;
}

/* Basel asigna anchos porcentuales a las celdas del shop_table (remove ~1%,
 * name 60%...): anulan el flex-basis del card. Se neutralizan para que la
 * distribución flex del diseño gobierne. */
body.cnq-page #yith-ywrq-table-list td {
	width: auto !important;
}

body.cnq-page #yith-ywrq-table-list td.product-remove {
	width: 40px !important;
}

body.cnq-page #yith-ywrq-table-list td.product-thumbnail {
	width: 80px !important;
}

/* Ajuste mobile final (después de las correcciones base, mismo orden de
 * cascada): distribución de la card apilada — nombre ocupa el resto de la
 * fila del thumb (80) + quitar (40) + gaps, celda quitar a 40. */
@media (max-width: 768px) {
	body.cnq-page #yith-ywrq-table-list td.product-remove {
		flex: 0 0 40px !important; /* basis explícito: Basel fuerza width ~5% en responsive */
		width: 40px !important;
		max-width: 40px !important; /* Basel también clampa con max-width */
	}
}

/* ==================================================================
 * Fidelidad Figma — re-grounding de los frames visibles (2026-09-23).
 * order-item-card 6353:26892: NO es card flotante — es una fila de una
 * lista dividida: fondo blanco, borde inferior 1px #E5E7EB (sólo bottom,
 * sin radius ni bordes laterales), padding 16, contenido en 2 filas
 * (thumb 80 spanning | nombre+presentación / stepper | precios apilados
 * | tacho alineado al centro-derecha, gap 32 antes del tacho).
 * ================================================================== */
body.cnq-page #yith-ywrq-table-list tr.cart_item {
	display: grid;
	grid-template-columns: 80px minmax(0, 1fr) max-content auto;
	column-gap: 16px;
	row-gap: 8px;
	align-items: start; /* la imagen queda arriba; el texto largo fluye hacia abajo */
	margin: 0;
	padding: 16px;
	background: #ffffff;
	border: 0;
	border-bottom: 1px solid #e5e7eb;
	border-radius: 0;
}

body.cnq-page #yith-ywrq-table-list tbody tr.cart_item:last-of-type {
	border-bottom: 0;
}

body.cnq-page #yith-ywrq-table-list td.product-thumbnail {
	grid-column: 1;
	grid-row: 1 / span 2;
	justify-self: start;
	align-self: start; /* siempre arriba aunque el texto crezca */
}

body.cnq-page #yith-ywrq-table-list td.product-name {
	grid-column: 2;
	grid-row: 1;
}

body.cnq-page #yith-ywrq-table-list td.product-quantity {
	grid-column: 2;
	grid-row: 2;
	justify-self: start;
	align-self: center; /* Figma: counterAxisAlignItems CENTER de la fila stepper/precios */
}

/* Precios logueados: columna propia a la derecha, apilados (12/16 "c/u"
 * arriba + 16/24 Bold abajo, counterAxis MAX del frame). */
body.cnq-page.cnq-logged #yith-ywrq-table-list td.product-price {
	grid-column: 3;
	grid-row: 2;
	justify-self: end;
	align-self: start;
	margin-left: 16px; /* completa el gap 32 del frame hasta el tacho */
	font-size: 12px;
	line-height: 16px;
	font-weight: 400;
	color: #6b7280;
}

body.cnq-page.cnq-logged #yith-ywraq-table-list td.product-price::after {
	content: " c/u";
	font-size: 12px;
}

body.cnq-page.cnq-logged #yith-ywrq-table-list td.product-subtotal {
	grid-column: 3;
	grid-row: 2;
	justify-self: end;
	align-self: end;
	margin-left: 16px;
	min-width: 0;
}

body.cnq-page #yith-ywrq-table-list td.product-remove {
	grid-column: 4;
	grid-row: 1 / span 2;
	justify-self: end;
	align-self: center; /* centrado vertical de la card (Figma 6353:26263: y47 de 134) */
	margin-left: 16px;
}

/* Visitante: sin columna de precios (celdas price/subtotal ocultas). */
body.cnq-page.cnq-visitor #yith-ywraq-table-list tr.cart_item {
	grid-template-columns: 80px minmax(0, 1fr) auto;
}

/* La tabla contenedora no aporta chrome: la lista es el bloque del diseño. */
body.cnq-page #yith-ywrq-table-list {
	width: 100%;
	border: 0;
	margin: 0;
}

/* Form del plugin a ancho completo de la columna (el padding 25 del
 * wrapper encogía el form y desalineaba el submit del borde derecho). */
body.cnq-page .cnq-raq-form .yith-ywraq-mail-form-wrapper {
	padding: 0;
}

body.cnq-page .cnq-raq-form {
	margin-top: 0;
}

/* Header logueado "Datos adicionales" (Form Header 6379:5374): 24/28 Bold. */
body.cnq-page.cnq-logged .cnq-raq-form .yith-ywraq-mail-form-wrapper > h3 {
	margin: 0 0 24px;
	font-family: Roboto, -apple-system, "Segoe UI", sans-serif;
	font-size: 24px;
	line-height: 28px;
	font-weight: 700;
	color: #283641;
}

/* Submit: hug (Action Area counterAxis MAX) con piso por estado: la label
 * guest (240) + padding 64 ≈ 306; la logueada (199) + 64 ≈ 265. */
@media (min-width: 769px) {
	body.cnq-page .cnq-raq-form .raq-send-request-row .raq-send-request,
	body.cnq-page .cnq-raq-form input.raq-send-request[type="submit"] {
		width: auto; /* pisa el width:100% base: hug del Action Area */
		min-width: 0;
	}

	body.cnq-page.cnq-visitor .cnq-raq-form .raq-send-request-row .raq-send-request,
	body.cnq-page.cnq-visitor .cnq-raq-form input.raq-send-request[type="submit"] {
		min-width: 306px;
	}

	body.cnq-page.cnq-logged .cnq-raq-form .raq-send-request-row .raq-send-request,
	body.cnq-page.cnq-logged .cnq-raq-form input.raq-send-request[type="submit"] {
		min-width: 265px;
	}
}

/* Mobile: card apilada sobre el mismo grid — thumb | nombre | tacho,
 * stepper debajo alineado con el nombre, precios a la derecha. */
@media (max-width: 768px) {
	body.cnq-page #yith-ywraq-table-list tr.cart_item,
	body.cnq-page.cnq-visitor #yith-ywraq-table-list tr.cart_item {
		grid-template-columns: 80px minmax(0, 1fr) auto;
		row-gap: 12px;
	}

	body.cnq-page.cnq-logged #yith-ywraq-table-list td.product-price,
	body.cnq-page.cnq-logged #yith-ywraq-table-list td.product-subtotal {
		grid-column: 3;
		grid-row: 2;
		margin-left: 12px;
	}

	body.cnq-page.cnq-logged #yith-ywraq-table-list td.product-price {
		align-self: end;
	}

	body.cnq-page.cnq-logged #yith-ywraq-table-list td.product-subtotal {
		align-self: start;
	}
}

/* Contenido al ancho del diseño. Basel wrapper-wide entrega 1368 con
 * padding 15: se centra en el token del sitio (site-container-1280:
 * caja 1280 con padding 24 → 1232 útiles, igual que el header). */
@media (min-width: 1025px) {
	/* Sólo el contenido principal de la página RAQ: el selector NO debe
	 * alcanzar topbar/footer/sticky-header (viven en .website-wrapper). */
	body.cnq-page .main-page-wrapper .container {
		max-width: 1280px;
		margin: 0 auto;
		padding: 0 24px;
	}

	/* Respiro inferior: Basel lo daba vía margin de .site-content, anulado
	 * por este módulo. Con 1 ítem la columna derecha (banner de envíos)
	 * es la más baja y quedaba pegada al footer. Padding (no margin) para
	 * cubrir ambas columnas y ambos estados (mobile logueado oculta el
	 * banner y el último elemento es el submit). */
	body.cnq-page .site-content {
		padding: 0 0 64px;
		margin-bottom: 0;
	}
}

/* El .row de Bootstrap trae margin 0 -15px que desborda el contenedor de
 * 1280: se neutraliza sólo en el contenido de la página RAQ. */
@media (min-width: 1025px) {
	body.cnq-page .site-content.row,
	body.cnq-page .main-page-wrapper > .container > .row {
		margin: 0;
	}
}

/* Mobile (≤768): el scrollable-content del diseño usa padding 16 →
 * campos y botón a 398 (= 430 - 32), igual que el Action Area mobile. */
@media (max-width: 768px) {
	body.cnq-page .main-page-wrapper .container {
		max-width: none;
		width: 100%;
		margin: 0;
		padding: 0 16px;
	}

	/* Mismo respiro inferior que desktop, escala mobile. */
	body.cnq-page .site-content {
		padding: 0 0 40px;
		margin-bottom: 0;
	}

	body.cnq-page .main-page-wrapper > .container > .row {
		margin: 0;
	}
}

/* Ajustes post-auditoría logueada: la segunda fila del card necesita 40px
 * para apilar precio (16) + subtotal (24) sin solape, y el input de
 * cantidad a 24px (Basel fuerza 60px). */
body.cnq-page #yith-ywrq-table-list tr.cart_item {
	grid-template-rows: auto minmax(40px, auto);
}

body.cnq-page.cnq-logged #yith-ywrq-table-list tr.cart_item {
	grid-template-rows: auto minmax(44px, auto);
}

body.cnq-page #yith-ywrq-table-list .cnq-stepper input.qty {
	width: 24px !important;
	max-width: 24px !important;
	height: 20px;
	/* !important: Basel mete padding-right:10px en los input.qty y el
	 * glifo (text-align:center sobre el content-box) queda corrido ~5px
	 * a la izquierda del centro entre los iconos −/+. */
	padding: 0 !important;
}

/* ==================================================================
 * Atributos de variación según Frame 73 (6669:6523, frame visitante
 * actualizado 2026-09-23): fila horizontal gap 8 integrada al stack del
 * nombre (nombre → presentación → atributos, gap 2), texto Roboto 12/16
 * UPPERCASE letter-spacing 2% #6B7280 con label Bold (el <strong> del
 * plugin) y valor Regular. El <ul> lo emite el plugin para ítems con
 * variación; se muestra tal cual (sin deduplicar). Vale para visitante
 * y logueado.
 * ================================================================== */
body.cnq-page #yith-ywrq-table-list td.product-name {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

body.cnq-page #yith-ywrq-table-list td.product-name ul {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	/* !important: el template del plugin trae margin-left:10px inline
	 * (request-quote-table.php:372) — la fila de atributos alinea con
	 * el resto del stack del nombre. */
	margin: 0 !important;
	padding: 0;
	list-style: none;
}

body.cnq-page #yith-ywrq-table-list td.product-name ul li {
	margin: 0;
	padding: 0;
	font-size: 12px;
	line-height: 16px;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: #6b7280;
}

body.cnq-page #yith-ywrq-table-list td.product-name ul li strong {
	font-weight: 700;
	color: inherit;
}

/* El template del plugin emite <br> entre <li> (y antes del <ul>):
 * dentro del flex no deben ocupar slot. */
body.cnq-page #yith-ywrq-table-list td.product-name ul br,
body.cnq-page #yith-ywrq-table-list td.product-name > br {
	display: none;
}

/* Basel decora los li de listas de contenido con una flecha (::before):
 * en la fila de atributos del card no va (Frame 73 los lista planos). */
body.cnq-page #yith-ywrq-table-list td.product-name ul li::before,
body.cnq-page #yith-ywrq-table-list td.product-name ul li::after {
	content: none;
}

/* El stack deshabilita la edición manual del qty en la tabla RAQ (sólo
 * botones) y Basel pinta los inputs disabled de gris con opacity .6.
 * El diseño muestra el valor #1F2937 Bold: presentación sólo, el estado
 * disabled del input se conserva (behaviour nativo intacto). */
body.cnq-page #yith-ywrq-table-list .cnq-stepper input.qty:disabled {
	color: #1f2937;
	-webkit-text-fill-color: #1f2937;
	opacity: 1;
	background: transparent;
}

/* Precios del card (Frame 6353:26904): Basel estila los spans
 * .woocommerce-Price-amount (16/18px, negro) y pisan los tokens del td.
 * Precio unitario: 12px Regular #6B7280 ("$10,600.00 c/u" — estilo
 * Breadcrumb/Regular); subtotal: 16/24 Bold #283641 (Body/M Bold). */
body.cnq-page.cnq-logged #yith-ywrq-table-list td.product-price .woocommerce-Price-amount,
body.cnq-page.cnq-logged #yith-ywrq-table-list td.product-price .woocommerce-Price-currencySymbol {
	font-size: 12px;
	line-height: 14px;
	font-weight: 400;
	color: #6b7280;
}

body.cnq-page.cnq-logged #yith-ywrq-table-list td.product-subtotal .woocommerce-Price-amount,
body.cnq-page.cnq-logged #yith-ywrq-table-list td.product-subtotal .woocommerce-Price-currencySymbol {
	font-size: 16px;
	line-height: 24px;
	font-weight: 700;
	color: #283641;
}

/* Ídem en el monto teal del resumen: el glifo vive en el span
 * .woocommerce-Price-amount y Basel lo pinta gris (148) aunque el
 * strong contenedor sea teal — hereda del strong (#337C84, 32/38 Bold). */
body.cnq-page .cnq-summary-total__amount .woocommerce-Price-amount,
body.cnq-page .cnq-summary-total__amount .woocommerce-Price-currencySymbol {
	color: inherit;
}

/* ==================================================================
 * Mensajes de error del submit (validación del pedido).
 * El JS del plugin (ywraq-default-form.js:177) prepended el bloque con
 * AMBAS clases: "woocommerce-error woocommerce-message" — Basel/Woo
 * estilan .woocommerce-message (verde con ✓) por último y el error se
 * ve como éxito. En esta página es un ERROR: se fuerza el aspecto del
 * sistema de diseño y se elimina el check verde.
 * ================================================================== */
body.cnq-page .yith-ywraq-mail-form-wrapper div.woocommerce-error.woocommerce-message,
body.cnq-page .cnq-raq-form div.woocommerce-error.woocommerce-message {
	color: #b91c1c;
	background: #fef2f2;
	border: 1px solid #dc2626;
	border-radius: 8px;
	box-sizing: border-box;
}

body.cnq-page .yith-ywraq-mail-form-wrapper div.woocommerce-error.woocommerce-message::before,
body.cnq-page .cnq-raq-form div.woocommerce-error.woocommerce-message::before {
	content: none; /* sin el ✓ verde del estado message */
}

body.cnq-page .yith-ywraq-mail-form-wrapper div.woocommerce-error.woocommerce-message a,
body.cnq-page .cnq-raq-form div.woocommerce-error.woocommerce-message a {
	color: #b91c1c;
}

/* Spinner AJAX del plugin: el beforeSend de ywraq-default-form.js agrega
 * <img class="ywraq-loader"> junto al botón al enviar — en esta página
 * renderiza como artefacto y el diseño no lo incluye. El feedback de
 * envío lo da el estado del botón ("Enviando…" deshabilitado). */
body.cnq-page .ywraq-loader {
	display: none;
}

/* ==================================================================
 * Pantalla de éxito post-envío (CN-336, "pedido-success"): el redirect
 * del submit aterriza en /pedido/?cnq_success={order_id} y este estado
 * reemplaza el preview nativo por la pantalla del diseño — check 80×80
 * centrado, título 24/28 Bold + subtítulo 14/20, bloque de referencia
 * (400, padding 20, gap 8) y CTA 60px "Ver mi solicitud" →
 * /mi-cuenta/view-quote/{id}.
 * Tokens del design system del flujo de pedido (grounding compact de
 * 6353:27105 + sistema 6353-*): contrato numérico pendiente de Figwright
 * reconectado.
 * ================================================================== */

/* El banner de título de Basel no aplica en el estado éxito (igual que
 * con ítems: el diseño tiene su propia jerarquía). */
body.cnq-page.cnq-success .page-title,
body.cnq-page.cnq-success .main-page-wrapper > .page-title,
body.cnq-page.cnq-success .entry-header {
	display: none !important;
}

/* Scoped con prefijo body.: la clase cnq-success también vive en el <body>
 * (body_class) — un selector suelto .cnq-success convertía al body entero
 * en contenedor flex (header/footer encogidos y centrados). */
body.cnq-success .cnq-success {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 32px;
	padding: 104px 0;
	font-family: Roboto, -apple-system, "Segoe UI", sans-serif;
	text-align: center;
}

/* Featured Icon 6353:27111 (Secondary LG): círculo 80×80 con paleta
 * success del design system — fondo color/success/100 #DCFCE7, borde
 * 1px color/success/300 #86EFAC y Icon/check #15803D (success/700). */
.cnq-success__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 80px;
	height: 80px;
	box-sizing: border-box;
	color: #15803d;
	background: #dcfce7;
	border: 1px solid #86efac;
	border-radius: 50%;
}

/* Icon/check 6233:11367 a 36×36 (36.36 en el frame) dentro del círculo. */
.cnq-success__icon svg {
	width: 36px;
	height: 36px;
}

/* Frame 6353:27112: título 28 + subtítulo 20 con gap 12, centrados. */
.cnq-success__heading {
	display: flex;
	flex-direction: column;
	gap: 12px;
	max-width: 812px;
}

.cnq-success__title {
	margin: 0;
	font-size: 24px;
	line-height: 28px;
	font-weight: 700;
	color: #283641;
}

.cnq-success__subtitle {
	margin: 0;
	font-size: 14px;
	line-height: 20px;
	color: #6b7280;
}

/* Bloque de referencia 6353:27115: 400×87 = padding 20 + label 15 + gap 8
 * + valor 24. Fondo #E0EBED (mismo tono del bloque confirmation-cta). */
.cnq-success__ref {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	width: 400px;
	max-width: 100%;
	box-sizing: border-box;
	padding: 20px;
	background: #e0ebed;
	border-radius: 8px;
}

.cnq-success__ref-label {
	font-size: 12px;
	line-height: 15px;
	font-weight: 700;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: #1f4c52;
}

.cnq-success__ref-value {
	font-size: 16px;
	line-height: 24px;
	font-weight: 700;
	color: #283641;
}

.cnq-success__actions {
	display: flex;
	justify-content: center;
	width: 100%;
}

/* Botón 6353:27119: 197×60 centrado — hug con padding 32 (mismo token del
 * botón del formulario: 60px, #337C84, blanco 16 Bold, radius 8). */
.cnq-success__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 60px;
	padding: 0 32px;
	font-family: inherit;
	font-size: 16px;
	line-height: 20px;
	font-weight: 700;
	color: #ffffff;
	background: #337c84;
	border: 0;
	border-radius: 8px;
	text-decoration: none;
	cursor: pointer;
	transition: background 0.15s ease;
}

.cnq-success__cta:hover,
.cnq-success__cta:focus-visible {
	background: #2c6b72;
	color: #ffffff;
}

/* Mobile (6353:27576): apilado centrado con padding lateral 16 del
 * contenedor; referencia y CTA a full-width del contenido (width 100%),
 * mismo patrón del Action Area mobile del formulario. */
@media (max-width: 768px) {
	body.cnq-success .cnq-success {
		gap: 24px;
		padding: 48px 0 40px;
	}

	.cnq-success__heading {
		max-width: 100%;
	}

	.cnq-success__ref {
		width: 100%;
	}

	.cnq-success__actions {
		justify-content: stretch;
	}

	.cnq-success__cta {
		width: 100%;
	}
}

/* ==================================================================
 * Pantalla de confirmación del presupuesto (visitor-quote-confirmation):
 * landing del envío de visitante con la orden sin confirmar (ywraq-new).
 * Comparte contenedor, header y referencia con la pantalla de éxito
 * (body.cnq-success) y agrega el listado de ítems + el botón "Confirmar
 * pedido". El listado ESPEJA el markup del RAQ (mismo id/clases), así
 * que hereda todo el CSS de cards de /pedido/ (grid, thumb 80, nombre +
 * presentación, precios apilados con "c/u", dividers); este bloque sólo
 * ajusta lo que diferencia a la pantalla: sin columna de quitar, qty
 * estática (chip sin input) y fila de totales propia (la nativa
 * raq-totals-* está oculta por el módulo en la página RAQ).
 * Especificidad: los overrides del LISTADO van con
 * body.cnq-page.cnq-success + .cnq-confirm para superar a las reglas
 * base/mobile del listado (máx. body.cnq-page[.cnq-logged] #id …) sin
 * importar el orden de cascada — misma lección del fix de review de la
 * tabla anterior. Los del wrapper/form apuntan a clases propias del
 * módulo, sin competencia base.
 * ================================================================== */

body.cnq-success .cnq-confirm .cnq-confirm__table-wrap {
	width: 100%;
	max-width: 812px;
	box-sizing: border-box;
}

/* Card congelada: 3 pistas (thumb | nombre/qty | precios) — sin tacho. */
body.cnq-page.cnq-success .cnq-confirm #yith-ywrq-table-list tr.cart_item {
	grid-template-columns: 80px minmax(0, 1fr) max-content;
}

/* Cantidad estática: chip .cnq-stepper sin input ni botones (el JS del
 * módulo decora input.qty, que esta pantalla no emite). */
body.cnq-page.cnq-success .cnq-confirm #yith-ywrq-table-list .cnq-stepper {
	cursor: default;
}

body.cnq-page.cnq-success .cnq-confirm #yith-ywrq-table-list .cnq-stepper__value {
	min-width: 24px;
	text-align: center;
	font-size: 14px;
	line-height: 20px;
	font-weight: 700;
	color: #1f2937;
}

/* Fila de totales: mismo patrón de fila del listado (blanca, divider
 * superior), label + monto a los extremos — rol de la fila "Total
 * presupuestado" del resumen. */
body.cnq-page.cnq-success .cnq-confirm #yith-ywrq-table-list tr.cnq-confirm__totals-row {
	display: flex;
	width: 100%;
	box-sizing: border-box;
	margin: 0;
	padding: 16px;
	background: #ffffff;
	/* Sin border-top: el divider lo aporta el border-bottom de la última
	 * card (la regla :last-of-type no la alcanza porque esta fila es la
	 * última tr) — con ambos quedaba una línea doble de 2px. */
}

body.cnq-page.cnq-success .cnq-confirm #yith-ywrq-table-list .cnq-confirm__totals-cell {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	width: 100%;
	padding: 0;
	background: transparent;
}

body.cnq-page.cnq-success .cnq-confirm #yith-ywrq-table-list .cnq-confirm__totals-label {
	font-size: 14px;
	line-height: 20px;
	font-weight: 700;
	color: #4b5563;
}

body.cnq-page.cnq-success .cnq-confirm #yith-ywrq-table-list .cnq-confirm__totals-value {
	font-size: 20px;
	line-height: 28px;
	font-weight: 700;
	color: #337c84;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

/* Form del botón: mismo CTA del éxito (comparte .cnq-success__cta). */
.cnq-confirm__form {
	display: flex;
	justify-content: center;
	width: 100%;
}

.cnq-confirm__submit {
	font-family: inherit;
	border: 0;
}

/* Mobile: la card base ya apila solo (thumb | nombre / qty+precios);
 * sólo hacen falta 2 pistas (sin tacho). Los precios heredan su
 * colocación mobile del listado (col del nombre, apilados a la
 * derecha, reglas 1888+ del archivo). */
@media (max-width: 768px) {
	body.cnq-page.cnq-success .cnq-confirm #yith-ywrq-table-list tr.cart_item {
		grid-template-columns: 80px minmax(0, 1fr);
	}
}


/* ==================================================================
 * Estado vacío (pedido-empty-state 6353:27026, bloque 6353:27097):
 * círculo 100×100 #F0F1F2 con Icon/shopping-cart (46×46, trazo 3
 * #9CA3AF), título Bold 24/28 #283641 + subtítulo 14/20 #6B7280 (grupo
 * con gap 8) y CTA "Explorar productos" 60px #337C84 radius 8 con
 * Icon/arrow-right blanco. Contenedor centrado con gap 32 (spacing/8) y
 * padding 40/80 (spacing/10 / spacing/20 del frame). Idéntico para
 * visitante y logueado. Change: pedido-empty-state.
 * ================================================================== */

/* Contenedor prefijado body.cnq-page (la body class cnq-empty vive en el
 * <body>; el nombre de bloque no colisiona, pero se mantiene el patrón
 * de scoping por página del módulo). */
body.cnq-page .cnq-empty-state {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 32px;
	padding: 40px 0 80px;
	font-family: Roboto, -apple-system, "Segoe UI", sans-serif;
	text-align: center;
}

/* Featured Icon 6353:27099 (Secondary LG): círculo 100 #F0F1F2. */
.cnq-empty-state__icon {
	flex: 0 0 auto;
	width: 100px;
	height: 100px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: #f0f1f2;
	border-radius: 50%;
}

/* Icon/shopping-cart 6233:11393: 46×46 exportado (assets/img), trazo 3
 * #9CA3AF — dimensionado explícito (el img hereda width/height del SVG
 * y sin esto escala a su intrínseco). */
.cnq-empty-state__icon img {
	width: 46px;
	height: 46px;
	display: block;
}

/* Grupo título+subtítulo (Frame 6353:27100): gap 8, centrados. */
.cnq-empty-state__copy {
	display: flex;
	flex-direction: column;
	gap: 8px;
	max-width: 100%;
}

.cnq-empty-state__title {
	margin: 0;
	font-size: 24px;
	line-height: 28px;
	font-weight: 700;
	color: #283641;
}

.cnq-empty-state__text {
	margin: 0;
	font-size: 14px;
	line-height: 20px;
	color: #6b7280;
}

/* Button 6353:27103 (Primary M): 60px, padding-x 20, gap 8, radius 8,
 * #337C84, label 16 Bold blanco + Icon/arrow-right 20 blanco. */
.cnq-empty-state__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 60px;
	padding: 0 20px;
	font-family: inherit;
	font-size: 16px;
	line-height: 20px;
	font-weight: 700;
	color: #ffffff;
	background: #337c84;
	border: 0;
	border-radius: 8px;
	text-decoration: none;
	cursor: pointer;
	transition: background 0.15s ease;
}

.cnq-empty-state__cta:hover,
.cnq-empty-state__cta:focus-visible {
	background: #2c6b72;
	color: #ffffff;
}

.cnq-empty-state__cta img {
	width: 20px;
	height: 20px;
	display: block;
}

/* El bloque vive dentro del wrapper vacío del plugin
 * (.ywraq-empty > .ywraq-before-form). El CSS del plugin dibuja ahí su
 * estado vacío nativo (ywraq-frontend.css:722-750): padding 30, borde
 * 2px dashed #aaa, height 100% y un ::before con la ilustración
 * empty-quote.svg ("hoja en blanco"). El diseño del estado vacío
 * (pedido-empty-state) no tiene caja ni ilustración: se neutraliza
 * todo, scopeado a la página RAQ vacía (.ywraq-empty sólo existe con
 * lista vacía; con ítems el listado vive fuera de este div). */
body.cnq-page .ywraq-empty .ywraq-before-form {
	margin: 0;
	padding: 0;
	border: 0;
	height: auto;
}

body.cnq-page .ywraq-empty .ywraq-before-form::before {
	display: none;
}

/* Mobile (≤768): apilado centrado con CTA full-width — mismo patrón del
 * CTA de la pantalla de éxito (el contenedor de la página ya aplica
 * padding lateral 16). Sin frame mobile dedicado del diseño. */
@media (max-width: 768px) {
	body.cnq-page .cnq-empty-state {
		gap: 24px;
		padding: 24px 0 48px;
	}

	.cnq-empty-state__cta {
		width: 100%;
	}
}

/* ==================================================================
 * Hotfix mobile (2026-09-24, feedback "vista mobile del /pedido/"):
 * card de 3 pistas en <=768px. La plantilla desktop del re-grounding
 * (4 pistas: thumb | nombre | max-content precios | tacho) ganaba la
 * cascada sobre el bloque mobile historico (~linea 1140) y el tacho
 * en grid-column 4 creaba una pista implicita extra: el nombre quedaba
 * comprimido (~142px en 390) con un gap fantasma antes del tacho.
 * Re-declarado al final del archivo — colocacion verificada en vivo
 * (mismo patron que la seccion empty-state, que aplica correctamente):
 * thumb 80 | nombre 1fr | tacho auto, tacho en pista 3 fila del nombre.
 * ================================================================== */
@media (max-width: 768px) {
	body.cnq-page #yith-ywrq-table-list td.product-remove {
		grid-column: 3;
		grid-row: 1;
		justify-self: end;
		align-self: start;
		margin-left: 0;
	}

	body.cnq-page #yith-ywrq-table-list tr.cart_item,
	body.cnq-page.cnq-visitor #yith-ywrq-table-list tr.cart_item {
		grid-template-columns: 80px minmax(0, 1fr) auto;
		row-gap: 12px;
	}
}

/* ==================================================================
 * Fidelidad móvil según frame "pedido-con-productos" (6353:27501/27502,
 * 2026-09-24): tacho 24x40 (Button 6353:27526, icono 16), precios del
 * card DENTRO de la columna del nombre (6353:27518: stepper a la
 * izquierda + precio "c/u" 12/14 sobre subtotal 16/20 apilados a la
 * derecha), resumen móvil sin título con padding 16 (6353:27557: fila
 * "Total presupuestado" + nota OCULTA) y "Seguir explorando productos"
 * centrado como Outline S (6362:6221; el primario teal de 6362:6201
 * quedó obsoleto). El submit del form se
 * mantiene full-width: lo exige el spec (página 430 apilada) aunque el
 * frame lo muestre hug centrado.
 * ================================================================== */
@media (max-width: 768px) {
	body.cnq-page #yith-ywrq-table-list tr.cart_item,
	body.cnq-page.cnq-visitor #yith-ywrq-table-list tr.cart_item {
		grid-template-columns: 80px minmax(0, 1fr) 24px;
	}

	body.cnq-page #yith-ywrq-table-list td.product-remove,
	body.cnq-page #yith-ywrq-table-list td.product-remove .remove {
		width: 24px !important;
		max-width: 24px !important;
	}

	body.cnq-page.cnq-logged #yith-ywrq-table-list td.product-price {
		grid-column: 2;
		grid-row: 2;
		justify-self: end;
		align-self: start;
		margin-left: 0;
	}

	body.cnq-page.cnq-logged #yith-ywrq-table-list td.product-subtotal {
		grid-column: 2;
		grid-row: 2;
		justify-self: end;
		align-self: end;
		margin-left: 0;
	}

	body.cnq-page .cnq-summary {
		padding: 16px;
		border: 0;
	}

	body.cnq-page .cnq-summary .cnq-panel__title {
		display: none;
	}

	/* "Seguir explorando productos": Outline S (6362:6221, Button
	   Type=Outline State=Default Size=S — reemplaza el primario teal de
	   6362:6201). La base ya es outline (blanco con borde y label teal);
	   mobile solo lo centra. Hover: relleno teal (State=Hover). */
	body.cnq-page .cnq-continue {
		justify-content: center;
	}
}

/* Full-bleed mobile (frame 6353:27502): cards y resumen tocan los bordes
 * de pantalla con su padding interno de 16 (order-item-card 430 full-bleed,
 * summary-section 430 full-bleed), mientras formulario/pasos/banner/exito
 * conservan el margen de 16 del contenedor (Checkout Form y shipping-banner
 * viven a x=16 en el frame). Negativo solo sobre .responsive-table (envuelve
 * exclusivamente la tabla) para no arrastrar el form que comparte wrapper.
 * Gana 32px de nombre: 262px a 430 = frame exacto (antes 175px a 390).
 */
@media (max-width: 768px) {
	body.cnq-page .responsive-table,
	body.cnq-page .cnq-summary {
		margin-left: -16px;
		margin-right: -16px;
	}
}

/* Mobile por estado (2026-09-24, frames 6385:7082 visitante / 6353:27501
 * logueado): el panel de pasos y el banner de envios viven en mobile SOLO
 * para visitantes (Frame 50 / 6385:7237 los incluye al final del flujo del
 * formulario de visitante). Logueado, el frame termina en submit -> footer:
 * sin pasos y sin banner ("Contact Info" 6353:27567 HIDDEN). Desktop los
 * conserva en ambos estados (frames desktop + spec).
 */
@media (max-width: 768px) {
	body.cnq-page.cnq-logged .cnq-steps,
	body.cnq-page.cnq-logged .cnq-shipping {
		display: none;
	}
}

/* Espaciado superior mobile (2026-09-24): el frame arranca el contenido
 * pegado al header (HeroSection 6353:27505: padding-top 20, titulo a 20 del
 * header; scrollable-content y=212 = borde inferior del hero, sin gap).
 * Basel suma 40 de padding-top en .main-page-wrapper y el hero desktop usa
 * padding-top 40 + margin-bottom 40 (~116px extra en mobile).
 */
@media (max-width: 768px) {
	body.cnq-page .main-page-wrapper {
		padding-top: 0;
	}

	body.cnq-page .cnq-hero {
		padding-top: 20px;
		margin-bottom: 0;
	}
}