/* =============================================================================
   CÓDIGO N°6
   Duración e incluye en catálogo
   Archivo: 06-duracion-e-incluye-catalogo.css
   ============================================================================= */

.product-duration {
	width: calc(100% - 24px);
	max-width: calc(100% - 24px);
	margin: -6px auto 8px auto;
	padding: 0;
	text-align: center;
	font-size: 11px;
	color: #0073aa;
	font-weight: 800;
	line-height: 1.25;
	box-sizing: border-box;
}

.product-includes {
	width: 100%;
	max-width: 100%;
	margin: 0 auto;
	padding: 0 12px 16px 12px;
	text-align: center;
	font-size: 11px;
	box-sizing: border-box;
}

.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product,
.related.products ul.products li.product {
	position: relative !important;
}

.woocommerce ul.products li.product img,
.woocommerce-page ul.products li.product img,
.related.products ul.products li.product img {
	backface-visibility: hidden !important;
	transform-style: preserve-3d !important;
	transition:
		transform 0.42s ease,
		opacity 0.26s ease,
		filter 0.26s ease !important;
}

.woocommerce ul.products li.product.raco-includes-open img,
.woocommerce-page ul.products li.product.raco-includes-open img,
.related.products ul.products li.product.raco-includes-open img {
	transform: rotateY(180deg) !important;
	opacity: 0 !important;
	filter: blur(1px) !important;
}

.related.products ul.products li.product .raco-related-card-inner {
	position: relative !important;
	perspective: 1200px !important;
}

/* ==========================================================================
   BOTÓN VER QUÉ INCLUYE / OCULTAR
   ========================================================================== */

.product-includes button.includes-toggle,
.woocommerce ul.products li.product .product-includes button.includes-toggle,
.woocommerce-page ul.products li.product .product-includes button.includes-toggle,
.related.products .product-includes button.includes-toggle {
	appearance: none !important;
	-webkit-appearance: none !important;
	-webkit-tap-highlight-color: transparent !important;

	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 7px !important;

	width: auto !important;
	max-width: calc(100% - 12px) !important;
	min-width: 136px !important;
	min-height: 31px !important;

	margin: 2px auto 0 auto !important;
	padding: 7px 15px !important;

	background: linear-gradient(180deg, #ffffff 0%, #f4fbfb 100%) !important;
	border: 1px solid rgba(1, 113, 122, 0.34) !important;
	border-radius: 999px !important;

	color: #01717a !important;
	font-family: inherit !important;
	font-size: 11px !important;
	font-weight: 800 !important;
	line-height: 1.15 !important;
	text-align: center !important;
	text-decoration: none !important;

	cursor: pointer !important;
	box-sizing: border-box !important;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.055) !important;
	outline: none !important;

	transition:
		background-color 0.18s ease,
		border-color 0.18s ease,
		color 0.18s ease,
		box-shadow 0.18s ease,
		transform 0.18s ease !important;
}

.product-includes button.includes-toggle.is-open,
.product-includes button.includes-toggle[aria-expanded="true"] {
	background: linear-gradient(180deg, #eefafa 0%, #ffffff 100%) !important;
	border-color: rgba(1, 113, 122, 0.56) !important;
	color: #01717a !important;
	box-shadow: 0 6px 16px rgba(1, 113, 122, 0.11) !important;
}

@media (hover: hover) and (pointer: fine) {
	.product-includes button.includes-toggle:hover {
		background: linear-gradient(180deg, #eefafa 0%, #ffffff 100%) !important;
		border-color: rgba(1, 113, 122, 0.56) !important;
		color: #01717a !important;
		box-shadow: 0 6px 16px rgba(1, 113, 122, 0.11) !important;
		transform: translateY(-1px) !important;
	}
}

.product-includes button.includes-toggle:focus,
.product-includes button.includes-toggle:focus-visible {
	outline: none !important;
}

.product-includes button.includes-toggle:focus-visible {
	box-shadow:
		0 4px 12px rgba(0, 0, 0, 0.055),
		0 0 0 3px rgba(1, 113, 122, 0.16) !important;
}

/* ==========================================================================
   SIGNO + / −
   ========================================================================== */

.includes-toggle-symbol,
.includes-toggle-icon {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;

	width: 14px !important;
	min-width: 14px !important;
	height: 14px !important;
	min-height: 14px !important;

	margin: 0 !important;
	padding: 0 !important;

	background: transparent !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;

	color: #01717a !important;
	font-family: Arial, Helvetica, sans-serif !important;
	font-size: 15px !important;
	font-weight: 900 !important;
	line-height: 1 !important;
	text-align: center !important;

	box-sizing: border-box !important;
	pointer-events: none !important;
	opacity: 1 !important;
	visibility: visible !important;
	transform: none !important;
	position: static !important;
}

.includes-toggle.is-open .includes-toggle-symbol,
.includes-toggle[aria-expanded="true"] .includes-toggle-symbol,
.includes-toggle.is-open .includes-toggle-icon,
.includes-toggle[aria-expanded="true"] .includes-toggle-icon {
	color: #01717a !important;
	font-size: 17px !important;
}

.includes-toggle-text {
	display: inline-block !important;
	width: auto !important;
	max-width: 100% !important;

	margin: 0 !important;
	padding: 0 !important;

	color: currentColor !important;
	white-space: normal !important;
	text-align: center !important;
	line-height: 1.15 !important;
}

/* Limpieza de restos antiguos */
.includes-toggle-icon::before,
.includes-toggle-icon::after,
.includes-toggle-symbol::before,
.includes-toggle-symbol::after,
.includes-toggle-text::before,
.includes-toggle-text::after,
.product-includes button.includes-toggle::before,
.product-includes button.includes-toggle::after {
	content: none !important;
	display: none !important;
}

/* ==========================================================================
   DETALLE SOBRE LA IMAGEN
   ========================================================================== */

.includes-content[hidden] {
	display: none !important;
}

.includes-content {
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
	right: 0 !important;

	width: 100% !important;
	height: auto !important;
	aspect-ratio: 1 / 1 !important;

	margin: 0 !important;
	padding: 15px 14px !important;

	display: flex !important;
	flex-direction: column !important;
	justify-content: space-between !important;

	background:
		linear-gradient(135deg, rgba(0, 59, 122, 0.97) 0%, rgba(1, 113, 122, 0.97) 100%) !important;
	border: none !important;
	border-radius: 0 !important;

	color: #ffffff !important;
	font-size: 11px !important;
	font-weight: 700 !important;
	line-height: 1.35 !important;
	text-align: center !important;

	box-sizing: border-box !important;
	box-shadow:
		inset 0 0 0 1px rgba(255, 255, 255, 0.14),
		0 8px 24px rgba(0, 0, 0, 0.16) !important;

	z-index: 50 !important;
	overflow: hidden !important;

	backface-visibility: hidden !important;
	transform-style: preserve-3d !important;
	transform: rotateY(-180deg) !important;
	opacity: 0 !important;
	pointer-events: none !important;

	transition:
		transform 0.42s ease,
		opacity 0.26s ease !important;
}

.includes-content.is-visible,
li.product.raco-includes-open .includes-content:not([hidden]) {
	transform: rotateY(0deg) !important;
	opacity: 1 !important;
	pointer-events: auto !important;
}

.related.products ul.products li.product .includes-content {
	border-radius: 16px 16px 0 0 !important;
}

.includes-content::before {
	content: "" !important;
	position: absolute !important;
	inset: 0 !important;
	background:
		radial-gradient(circle at top left, rgba(255, 255, 255, 0.22), transparent 36%),
		radial-gradient(circle at bottom right, rgba(255, 255, 255, 0.13), transparent 38%) !important;
	pointer-events: none !important;
	z-index: -1 !important;
}

.includes-card-heading {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;

	width: fit-content !important;
	max-width: 100% !important;

	margin: 0 auto 8px auto !important;
	padding: 5px 12px !important;

	background: rgba(255, 255, 255, 0.16) !important;
	border: 1px solid rgba(255, 255, 255, 0.22) !important;
	border-radius: 999px !important;

	color: #ffffff !important;
	font-size: 11px !important;
	font-weight: 900 !important;
	line-height: 1.2 !important;
	text-align: center !important;
}

/* ==========================================================================
   LISTA
   ========================================================================== */

.includes-list {
	width: 100% !important;
	max-height: 62% !important;

	margin: 0 !important;
	padding: 0 3px 0 0 !important;

	display: flex !important;
	flex-direction: column !important;
	gap: 7px !important;

	list-style: none !important;
	text-align: left !important;
	box-sizing: border-box !important;
	overflow-y: auto !important;
}

.includes-list li {
	position: relative !important;
	width: 100% !important;
	margin: 0 !important;
	padding: 8px 9px 8px 31px !important;

	background: rgba(255, 255, 255, 0.14) !important;
	border: 1px solid rgba(255, 255, 255, 0.18) !important;
	border-radius: 10px !important;

	color: #ffffff !important;
	font-size: 11px !important;
	font-weight: 750 !important;
	line-height: 1.32 !important;
	text-align: left !important;

	box-sizing: border-box !important;
	box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08) !important;
}

.includes-list li::before {
	content: "✓" !important;

	position: absolute !important;
	top: 8px !important;
	left: 9px !important;

	width: 16px !important;
	height: 16px !important;

	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;

	background: #ffffff !important;
	border-radius: 50% !important;

	color: #01717a !important;
	font-family: Arial, Helvetica, sans-serif !important;
	font-size: 10px !important;
	font-weight: 900 !important;
	line-height: 1 !important;
	text-align: center !important;
}

.includes-list::-webkit-scrollbar {
	width: 5px;
}

.includes-list::-webkit-scrollbar-track {
	background: rgba(255, 255, 255, 0.12);
	border-radius: 20px;
}

.includes-list::-webkit-scrollbar-thumb {
	background: rgba(255, 255, 255, 0.65);
	border-radius: 20px;
}

/* ==========================================================================
   PIE DEL DETALLE
   ========================================================================== */

.includes-card-footer {
	width: 100% !important;
	margin: 10px 0 0 0 !important;
	padding: 0 !important;

	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	gap: 7px !important;

	box-sizing: border-box !important;
}

.includes-card-note {
	display: block !important;
	width: 100% !important;
	max-width: 100% !important;

	color: rgba(255, 255, 255, 0.88) !important;
	font-size: 10px !important;
	font-weight: 700 !important;
	line-height: 1.25 !important;
	text-align: center !important;
}

.includes-card-link {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;

	width: 100% !important;
	max-width: 210px !important;
	min-height: 32px !important;

	padding: 8px 12px !important;

	background: #ffffff !important;
	border: 1px solid rgba(255, 255, 255, 0.45) !important;
	border-radius: 999px !important;

	color: #01717a !important;
	font-size: 11px !important;
	font-weight: 900 !important;
	line-height: 1.15 !important;
	text-align: center !important;
	text-decoration: none !important;

	box-sizing: border-box !important;
	box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18) !important;

	transition:
		transform 0.18s ease,
		box-shadow 0.18s ease,
		background-color 0.18s ease !important;
}

.includes-card-link:hover,
.includes-card-link:focus {
	background: #f3fbfb !important;
	color: #005f66 !important;
	transform: translateY(-1px) !important;
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.22) !important;
	outline: none !important;
}

/* ==========================================================================
   AJUSTES PRODUCTOS RELACIONADOS
   ========================================================================== */

.related.products .product-includes {
	width: 100% !important;
	max-width: 100% !important;
	margin-top: 2px !important;
	padding-left: 14px !important;
	padding-right: 14px !important;
	padding-bottom: 18px !important;
}

/* ==========================================================================
   MÓVIL
   ========================================================================== */

@media (max-width: 680px) {
	.includes-content {
		padding: 10px 9px 9px 9px !important;
		justify-content: space-between !important;
	}

	.includes-card-heading {
		display: inline-flex !important;
		visibility: visible !important;
		height: auto !important;

		width: fit-content !important;
		max-width: 100% !important;

		margin: 0 auto 5px auto !important;
		padding: 4px 10px !important;

		background: rgba(255, 255, 255, 0.16) !important;
		border: 1px solid rgba(255, 255, 255, 0.22) !important;
		border-radius: 999px !important;

		color: #ffffff !important;
		font-size: 10px !important;
		font-weight: 900 !important;
		line-height: 1.15 !important;
		text-align: center !important;
		overflow: visible !important;
	}

	.includes-list {
		max-height: calc(100% - 68px) !important;
		gap: 4px !important;
		padding-right: 3px !important;
	}

	.includes-list li {
		padding: 6px 7px 6px 25px !important;
		font-size: 9.4px !important;
		line-height: 1.16 !important;
		border-radius: 8px !important;
	}

	.includes-list li::before {
		top: 6px !important;
		left: 7px !important;
		width: 14px !important;
		height: 14px !important;
		font-size: 8.5px !important;
	}

	.includes-card-footer {
		margin-top: 6px !important;
		gap: 5px !important;
	}

	.includes-card-note {
		font-size: 8.4px !important;
		line-height: 1.15 !important;
		white-space: normal !important;
	}

	.includes-card-link {
		width: auto !important;
		max-width: 160px !important;
		min-height: 27px !important;
		padding: 6px 12px !important;
		font-size: 9.6px !important;
		line-height: 1.1 !important;
		border-radius: 999px !important;
	}

	.product-includes button.includes-toggle {
		min-width: 132px !important;
		min-height: 31px !important;
		padding: 7px 12px !important;
		font-size: 11.5px !important;
		gap: 7px !important;
	}

	/* TIENDA Y CATEGORÍAS EN MÓVIL */
	.woocommerce ul.products li.product:not(.slick-slide) .includes-content,
	.woocommerce-page ul.products li.product:not(.slick-slide) .includes-content {
		padding: 7px 6px 6px 6px !important;
	}

	.woocommerce ul.products li.product:not(.slick-slide) .includes-card-heading,
	.woocommerce-page ul.products li.product:not(.slick-slide) .includes-card-heading {
		margin-bottom: 4px !important;
		padding: 3px 8px !important;
		max-width: calc(100% - 8px) !important;
		font-size: 8.8px !important;
		line-height: 1.1 !important;
	}

	.woocommerce ul.products li.product:not(.slick-slide) .includes-list,
	.woocommerce-page ul.products li.product:not(.slick-slide) .includes-list {
		max-height: calc(100% - 56px) !important;
		gap: 3px !important;
		padding-right: 2px !important;
	}

	.woocommerce ul.products li.product:not(.slick-slide) .includes-list li,
	.woocommerce-page ul.products li.product:not(.slick-slide) .includes-list li {
		padding: 4px 5px 4px 21px !important;
		font-size: 7.8px !important;
		line-height: 1.08 !important;
		border-radius: 7px !important;
	}

	.woocommerce ul.products li.product:not(.slick-slide) .includes-list li::before,
	.woocommerce-page ul.products li.product:not(.slick-slide) .includes-list li::before {
		top: 4px !important;
		left: 5px !important;
		width: 12px !important;
		height: 12px !important;
		font-size: 7px !important;
	}

	.woocommerce ul.products li.product:not(.slick-slide) .includes-card-footer,
	.woocommerce-page ul.products li.product:not(.slick-slide) .includes-card-footer {
		margin-top: 4px !important;
		gap: 4px !important;
	}

	.woocommerce ul.products li.product:not(.slick-slide) .includes-card-note,
	.woocommerce-page ul.products li.product:not(.slick-slide) .includes-card-note {
		font-size: 7.2px !important;
		line-height: 1.08 !important;
	}

	.woocommerce ul.products li.product:not(.slick-slide) .includes-card-link,
	.woocommerce-page ul.products li.product:not(.slick-slide) .includes-card-link {
		max-width: 132px !important;
		min-height: 22px !important;
		padding: 5px 8px !important;
		font-size: 7.8px !important;
		line-height: 1.05 !important;
	}

	.woocommerce ul.products li.product:not(.slick-slide) .product-includes button.includes-toggle,
	.woocommerce-page ul.products li.product:not(.slick-slide) .product-includes button.includes-toggle {
		min-width: 128px !important;
		min-height: 30px !important;
		padding: 7px 10px !important;
		font-size: 10.5px !important;
		gap: 6px !important;
	}

	.woocommerce ul.products li.product:not(.slick-slide) .includes-toggle-symbol,
	.woocommerce ul.products li.product:not(.slick-slide) .includes-toggle-icon,
	.woocommerce-page ul.products li.product:not(.slick-slide) .includes-toggle-symbol,
	.woocommerce-page ul.products li.product:not(.slick-slide) .includes-toggle-icon {
		width: 13px !important;
		min-width: 13px !important;
		height: 13px !important;
		min-height: 13px !important;
		font-size: 14px !important;
	}

	/* PRODUCTOS RELACIONADOS EN MÓVIL */
	.related.products ul.products li.product .includes-content {
		padding: 12px 11px 10px 11px !important;
	}

	.related.products ul.products li.product .includes-card-heading {
		margin-bottom: 6px !important;
		padding: 4px 11px !important;
		font-size: 11px !important;
		line-height: 1.15 !important;
	}

	.related.products ul.products li.product .includes-list {
		max-height: calc(100% - 72px) !important;
		gap: 5px !important;
	}

	.related.products ul.products li.product .includes-list li {
		padding: 6px 7px 6px 25px !important;
		font-size: 10px !important;
		line-height: 1.18 !important;
	}

	.related.products ul.products li.product .includes-list li::before {
		top: 6px !important;
		left: 7px !important;
		width: 14px !important;
		height: 14px !important;
		font-size: 8.5px !important;
	}

	.related.products ul.products li.product .includes-card-note {
		font-size: 8.8px !important;
		line-height: 1.15 !important;
	}

	.related.products ul.products li.product .includes-card-link {
		max-width: 160px !important;
		min-height: 27px !important;
		padding: 6px 12px !important;
		font-size: 9.8px !important;
	}
}