/* =============================================================================
 *  cvip-tienda.css — aspecto de la tienda cvip.es/shop (v0.4.0)
 * -----------------------------------------------------------------------------
 *  Lo carga CVIP_Aspecto::estilos() SOLO en páginas de WooCommerce (body.cvip-tienda).
 *  Colores sacados de las páginas de servicio de cvip.es (ver cabecera de
 *  includes/class-cvip-aspecto.php). Todo va colgado de body.cvip-tienda para no
 *  tocar NADA del resto de la web.
 *
 *  SECCIONES:
 *    1. Variables y fondo
 *    2. Banda de cabecera (degradado + migas + título)
 *    3. Columnas: menú lateral | productos
 *    4. Menú de categorías
 *    5. Recuadro de asesoría
 *    6. Rejilla de productos (tarjetas blancas)
 *    7. Carrito / checkout / cuenta / ficha (solo caja blanca sobre el fondo)
 *    8. Móvil
 * ============================================================================= */

/* ---- 1. Variables y fondo -------------------------------------------------- */
body.cvip-tienda {
	--cvip-azul-osc: #004F73;
	--cvip-azul: #2796BD;
	--cvip-verde: #13AC85;
	--cvip-verde-osc: #0f9c78;
	--cvip-texto: #4A5A66;
	--cvip-borde: #d6e6ee;
	background: linear-gradient(160deg, #EAF3F7 0%, #DCECF2 100%) fixed;
	color: var(--cvip-texto);
	font-family: "Red Hat Display", sans-serif;
}

/* ---- 2. Banda de cabecera ---------------------------------------------------- */
.cvip-tienda .cvip-banda {
	background: linear-gradient(130deg, #003F5E 0%, #2796BD 100%);
	color: #fff;
	padding: 34px 20px 56px;
	clip-path: polygon(0 0, 100% 0, 100% 82%, 0 100%);   /* borde inferior inclinado, como las de servicio */
	margin-bottom: 10px;
}
.cvip-tienda .cvip-banda__dentro { max-width: 1320px; margin: 0 auto; text-align: center; }
.cvip-tienda .cvip-banda__titulo {
	color: #fff; font-weight: 900; font-size: 36px; margin: 6px 0 8px; line-height: 1.15;
}
.cvip-tienda .cvip-banda__sub { color: #dff1f8; margin: 0; font-size: 16px; }
.cvip-tienda .cvip-banda .woocommerce-breadcrumb { color: #cfe8f2; font-size: 14px; margin: 0; }
.cvip-tienda .cvip-banda .woocommerce-breadcrumb a { color: #fff; text-decoration: none; }
.cvip-tienda .cvip-banda .woocommerce-breadcrumb a:hover { text-decoration: underline; }

/* La cabecera de Elementor no tiene fondo propio: sin esto se vería el azul claro del body. */
.cvip-tienda .elementor-location-header { background: #fff; }

/* Hello Elementor limita .site-main a ~1140 px: en el catálogo, algo más ancho. */
body.cvip-catalogo .site-main { max-width: 1320px; width: 100%; margin: 0 auto; padding: 0 20px 40px; }

/* ---- 3. Columnas -------------------------------------------------------------- */
.cvip-tienda .cvip-cols { display: flex; gap: 28px; align-items: flex-start; }
.cvip-tienda .cvip-lateral { flex: 0 0 270px; position: sticky; top: 20px; max-height: calc(100vh - 40px); overflow-y: auto; }
.cvip-tienda .cvip-cols__productos { flex: 1 1 auto; min-width: 0; }

.cvip-tienda .cvip-caja {
	background: #fff; border-radius: 14px; box-shadow: 0 6px 20px rgba(0, 63, 94, .08);
	padding: 16px 16px 14px; margin-bottom: 18px;
}
.cvip-tienda .cvip-caja__titulo {
	font-weight: 800; color: var(--cvip-azul-osc); font-size: 18px; list-style: none; cursor: default;
	padding-bottom: 10px; border-bottom: 2px solid var(--cvip-verde); margin-bottom: 10px;
}
.cvip-tienda .cvip-caja__titulo::-webkit-details-marker { display: none; }

/* ---- 4. Menú de categorías ------------------------------------------------------ */
.cvip-tienda .cvip-cats a { color: var(--cvip-texto); text-decoration: none; }
.cvip-tienda .cvip-cats a:hover { color: var(--cvip-azul); }
.cvip-tienda .cvip-cats a.es-actual { color: var(--cvip-verde); font-weight: 800; }
.cvip-tienda .cvip-cats__todo { display: block; font-weight: 700; padding: 4px 0 8px; }
.cvip-tienda .cvip-cats__lista { list-style: none; margin: 0; padding: 0; }
.cvip-tienda .cvip-cats__lista .cvip-cats__lista { padding-left: 14px; border-left: 1px solid var(--cvip-borde); margin: 2px 0 6px 6px; }
.cvip-tienda .cvip-cats li { margin: 0; padding: 0; font-size: 15px; line-height: 1.35; }
.cvip-tienda .cvip-cats li > a,
.cvip-tienda .cvip-cats summary { display: block; padding: 5px 0; }
.cvip-tienda .cvip-cats summary { list-style: none; cursor: pointer; position: relative; padding-right: 18px; }
.cvip-tienda .cvip-cats summary.cvip-caja__titulo { padding: 0 0 10px; cursor: default; }
.cvip-tienda .cvip-cats summary::-webkit-details-marker { display: none; }
/* Flecha a la derecha: ▸ cerrado, ▾ abierto */
.cvip-tienda .cvip-cats summary:not(.cvip-caja__titulo)::after {
	content: "▸"; position: absolute; right: 2px; top: 5px; color: var(--cvip-azul); font-size: 13px;
}
.cvip-tienda .cvip-cats details[open] > summary:not(.cvip-caja__titulo)::after { content: "▾"; }
.cvip-tienda .cvip-cats__n {
	font-size: 12px; color: #8aa0ad; background: #f0f4f7; border-radius: 10px; padding: 0 6px; margin-left: 2px;
}

/* ---- 5. Asesoría ------------------------------------------------------------------- */
.cvip-tienda .cvip-asesoria { background: linear-gradient(130deg, #003F5E 0%, #2796BD 100%); color: #e6f4fa; }
.cvip-tienda .cvip-asesoria p { margin: 0 0 12px; font-size: 14px; line-height: 1.45; }
.cvip-tienda .cvip-asesoria .cvip-asesoria__titulo { color: #fff; font-weight: 900; font-size: 19px; margin-bottom: 6px; }
.cvip-tienda .cvip-boton {
	display: block; text-align: center; background: var(--cvip-verde); color: #fff !important;
	border-radius: 100px; padding: 9px 14px; font-weight: 700; text-decoration: none; margin-bottom: 8px;
}
.cvip-tienda .cvip-boton:hover { background: var(--cvip-verde-osc); }
.cvip-tienda .cvip-boton--wa { background: #25D366; }
.cvip-tienda .cvip-boton--wa:hover { background: #1ebe5a; }
.cvip-tienda .cvip-asesoria__mas { color: #fff; font-size: 14px; display: block; text-align: center; }

/* Enlaces legales bajo la asesoría (v0.6) */
.cvip-tienda .cvip-legales { list-style: none; margin: 0 0 18px; padding: 0 6px; font-size: 13px; }
.cvip-tienda .cvip-legales li { margin: 3px 0; }
.cvip-tienda .cvip-legales a { color: var(--cvip-azul-osc); }

/* Páginas legales (v0.6): tablas y formulario de desistimiento legibles.
 * v0.7.2: SOLO en body.cvip-legal — con .cvip-tienda pintaban bordes en la tabla del CARRITO. */
.cvip-legal .page-content table { width: 100%; border-collapse: collapse; margin: 10px 0 20px; }
.cvip-legal .page-content th, .cvip-legal .page-content td { border: 1px solid var(--cvip-borde); padding: 8px 10px; text-align: left; vertical-align: top; }
.cvip-legal .page-content th { background: #f0f6f9; color: var(--cvip-azul-osc); }
.cvip-legal .page-content blockquote { border-left: 4px solid var(--cvip-verde); background: #f6fafb; margin: 10px 0; padding: 12px 18px; }
.cvip-legal .page-content h2 { color: var(--cvip-azul-osc); font-weight: 800; margin-top: 1.4em; }

/* ---- 6. Rejilla de productos --------------------------------------------------------- */
.cvip-tienda .woocommerce-result-count { color: var(--cvip-texto); }

/* Selector de ORDEN reducido a un ICONO (v0.7.3, usuario 14/11: «el selector de orden redúcelo a
 * un icono que abra desplegable»). Truco sin JS: el <select> de Woo sigue ahí, a tamaño del icono
 * y TRANSPARENTE encima de él; al tocarlo se abre el desplegable nativo de siempre y el JS de Woo
 * envía el formulario al elegir (no se toca). El icono es un SVG de «ordenar» en data-URI. */
.cvip-tienda form.woocommerce-ordering { position: relative; width: 42px; height: 42px; margin: 0 0 1em auto; border-radius: 50%; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23004F73' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 4v16M3 16l4 4 4-4M17 20V4M13 8l4-4 4 4'/%3E%3C/svg%3E") center / 22px no-repeat; border: 2px solid var(--cvip-verde); box-shadow: 0 4px 12px rgba(0, 63, 94, .10); }
.cvip-tienda form.woocommerce-ordering:hover { background-color: #EAF7F3; }
.cvip-tienda form.woocommerce-ordering select.orderby { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; font-size: 16px; /* 16 px: iOS no hace zoom al tocar */ }
.cvip-tienda ul.products li.product {
	background: #fff; border-radius: 14px; box-shadow: 0 6px 20px rgba(0, 63, 94, .07);
	padding: 14px 14px 16px !important; text-align: center;
	transition: transform .15s ease, box-shadow .15s ease;
}
.cvip-tienda ul.products li.product:hover { transform: translateY(-3px); box-shadow: 0 10px 26px rgba(0, 63, 94, .14); }
.cvip-tienda ul.products li.product img { border-radius: 8px; aspect-ratio: 1 / 1; object-fit: contain; background: #fff; }
.cvip-tienda ul.products li.product .woocommerce-loop-product__title {
	color: var(--cvip-azul-osc); font-size: 14px !important; font-weight: 700; line-height: 1.3;
	min-height: 3.9em;   /* 3 líneas: que las tarjetas queden alineadas */
	display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
	/* v0.7.4 (usuario 14/11: «la última fila con el texto cortado»): WooCommerce le pone padding .5em
	 * arriba/abajo; con el recorte a 3 líneas, la 4.ª asomaba medio cortada por ese hueco de abajo.
	 * El espacio pasa a MARGEN (fuera de la caja recortada): misma separación, sin la línea a medias. */
	padding: 0 !important; margin: .5em 0 !important;
}
.cvip-tienda ul.products li.product .price { color: var(--cvip-azul-osc) !important; font-weight: 900; font-size: 18px !important; }
.cvip-tienda .woocommerce a.button,
.cvip-tienda .woocommerce button.button,
.cvip-tienda a.button, .cvip-tienda button.button {
	background: var(--cvip-verde); color: #fff; border-radius: 100px; font-weight: 700; border: 0;
}
.cvip-tienda .woocommerce a.button:hover, .cvip-tienda a.button:hover,
.cvip-tienda button.button:hover { background: var(--cvip-verde-osc); color: #fff; }
.cvip-tienda .woocommerce-pagination .page-numbers li .current { background: var(--cvip-azul-osc); color: #fff; }

/* Botones «alt» (Añadir al carrito de la ficha, Finalizar compra…): WooCommerce los pinta
 * MORADOS con `.woocommerce button.button.alt`; body.cvip-tienda les gana en especificidad.
 * Y los botones de los BLOQUES de carrito/checkout (wc-block-components-button). */
body.cvip-tienda button.button.alt, body.cvip-tienda a.button.alt, body.cvip-tienda input.button.alt,
body.cvip-tienda .wc-block-components-button:not(.is-link) {
	background: var(--cvip-verde); color: #fff; border-radius: 100px; font-weight: 700; border: 0;
}
body.cvip-tienda button.button.alt:hover, body.cvip-tienda a.button.alt:hover, body.cvip-tienda input.button.alt:hover,
body.cvip-tienda .wc-block-components-button:not(.is-link):hover { background: var(--cvip-verde-osc); color: #fff; }

/* Ficha de producto: título más contenido y precio en azul oscuro (Woo lo pone verde oliva). */
body.cvip-tienda div.product .product_title { color: var(--cvip-azul-osc); font-weight: 900; font-size: 30px; line-height: 1.2; }
body.cvip-tienda div.product p.price, body.cvip-tienda div.product span.price { color: var(--cvip-azul-osc); font-weight: 900; font-size: 26px; }
body.cvip-tienda .woocommerce-tabs ul.tabs li.active { background: #fff; }

/* ---- 7. Resto de páginas de la tienda: contenido en caja blanca ------------------------ */
body.cvip-tienda:not(.cvip-catalogo) .site-main,
body.cvip-tienda:not(.cvip-catalogo) .page-content {
	background: #fff; border-radius: 14px; box-shadow: 0 6px 20px rgba(0, 63, 94, .07);
}
body.cvip-tienda:not(.cvip-catalogo) .site-main { padding: 24px 28px 36px; margin-top: 30px; margin-bottom: 40px; }
body.cvip-tienda:not(.cvip-catalogo) .site-main .page-content { box-shadow: none; }

/* ---- 7b. Carrito / checkout de BLOQUES (v0.7.2) -------------------------------------------
 * El bloque del carrito lleva la clase «alignwide» de WordPress → margen negativo (-80 px) que,
 * dentro de nuestra caja blanca, lo sacaba por la izquierda en el MÓVIL («está descuadrado»). */
body.cvip-tienda .site-main .alignwide,
body.cvip-tienda .site-main .alignfull { margin-left: 0 !important; margin-right: 0 !important; max-width: 100% !important; width: auto !important; }

/* Selector de categorías del móvil (v0.7.2): oculto en escritorio. */
.cvip-tienda .cvip-cats-movil { display: none; }

/* ---- 8. Móvil: el menú baja encima de los productos y se pliega ------------------------- */
@media (max-width: 900px) {
	/* v0.7.2: en móvil, categorías en un SELECTOR arriba y sin columna lateral. */
	.cvip-tienda .cvip-lateral { display: none; }
	.cvip-tienda .cvip-cats-movil { display: block; background: #fff; border-radius: 14px; box-shadow: 0 6px 20px rgba(0, 63, 94, .08); padding: 12px 14px; margin: 0 0 16px; }
	/* v0.7.3: desplegable propio (<details>) en vez de <select>, para poder poner las familias en negrita. */
	.cvip-tienda .cvip-cats-movil { position: relative; }
	.cvip-tienda .cvip-cats-movil summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 8px; padding: 10px 36px 10px 12px; border: 2px solid var(--cvip-verde); border-radius: 10px; font-size: 16px; color: var(--cvip-azul-osc); background: #fff; position: relative; }
	.cvip-tienda .cvip-cats-movil summary::-webkit-details-marker { display: none; }
	.cvip-tienda .cvip-cats-movil summary::after { content: "▾"; position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: var(--cvip-verde); font-size: 18px; }
	.cvip-tienda .cvip-cats-movil[open] summary::after { content: "▴"; }
	.cvip-tienda .cvip-cats-movil__et { font-weight: 800; }
	.cvip-tienda .cvip-cats-movil__actual { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
	.cvip-tienda .cvip-cats-movil__lista { position: absolute; left: 14px; right: 14px; top: calc(100% - 6px); z-index: 50; background: #fff; border: 1px solid var(--cvip-borde); border-radius: 12px; box-shadow: 0 12px 30px rgba(0, 63, 94, .18); max-height: 65vh; overflow-y: auto; padding: 6px 0; }
	.cvip-tienda .cvip-cats-movil__lista a { display: block; padding: 9px 14px; color: var(--cvip-texto); text-decoration: none; font-size: 15px; line-height: 1.3; }
	.cvip-tienda .cvip-cats-movil__lista a.cvip-cm-n0 { font-weight: 800; color: var(--cvip-azul-osc); border-top: 1px solid var(--cvip-borde); }   /* FAMILIA PRINCIPAL en negrita */
	.cvip-tienda .cvip-cats-movil__lista a.cvip-cm-n0:first-child { border-top: 0; }
	.cvip-tienda .cvip-cats-movil__lista a.cvip-cm-n1 { padding-left: 28px; }
	.cvip-tienda .cvip-cats-movil__lista a.cvip-cm-n2 { padding-left: 42px; font-size: 14px; }
	.cvip-tienda .cvip-cats-movil__lista a.cvip-cm-n3 { padding-left: 56px; font-size: 14px; }
	.cvip-tienda .cvip-cats-movil__lista a.es-actual { color: var(--cvip-verde); background: #EAF7F3; }
	body.cvip-tienda:not(.cvip-catalogo) .site-main { padding: 16px 14px 24px; margin: 14px 8px 24px; width: auto; }
	.cvip-tienda .cvip-cols { flex-direction: column; gap: 0; }
	.cvip-tienda .cvip-lateral { position: static; flex: none; width: 100%; max-height: none; }
	.cvip-tienda .cvip-cats:not([open]) .cvip-caja__titulo { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }
	.cvip-tienda .cvip-cats summary.cvip-caja__titulo { cursor: pointer; }
	.cvip-tienda .cvip-caja__titulo::after { content: " ▾"; color: var(--cvip-azul); }
	.cvip-tienda .cvip-asesoria { display: none; }   /* en móvil ya está el teléfono en la cabecera */
	.cvip-tienda .cvip-banda__titulo { font-size: 26px; }
}