/* Laika Tienda — opciones de producto en botones y aviso de opciones en los listados. */
:root {
	--lt-teal: #019cbe;
	--lt-teal-dark: #016c85;
	--lt-teal-soft: #e6f6fa;
	--lt-ink: #1e2a30;
	--lt-muted: #5f6f78;
	--lt-line: #d5dde1;
}

/* El desplegable original sigue ahí para WooCommerce, pero no se ve. */
.variations_form select.laika-opciones-oculto {
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
	width: 1px !important;
	height: 1px !important;
	margin: 0 !important;
	padding: 0 !important;
	overflow: hidden !important;
	clip: rect(0 0 0 0) !important;
	clip-path: inset(50%) !important;
	opacity: 0 !important;
	pointer-events: none !important;
}
/* Referencia del desplegable oculto: sin esto se colocaba fuera de la ficha y la página se
   podía desplazar de lado. */
.variations_form table.variations td.value {
	position: relative;
}

.variations_form table.variations,
.variations_form table.variations tbody,
.variations_form table.variations tr,
.variations_form table.variations th,
.variations_form table.variations td {
	display: block;
	width: 100%;
	border: 0 !important;
	padding: 0 !important;
	background: none !important;
}
.variations_form table.variations th.label {
	margin: 4px 0 8px;
	font-weight: 600;
	color: var(--lt-ink);
}
.variations_form table.variations td.value {
	margin-bottom: 14px;
}

.laika-opciones {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
	gap: 10px;
}

.laika-opcion {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 4px;
	padding: 10px 12px;
	border: 1.5px solid var(--lt-line);
	border-radius: 12px;
	background: #fff;
	color: var(--lt-ink);
	font: inherit;
	text-align: left;
	cursor: pointer;
	transition: border-color .15s, background-color .15s, box-shadow .15s;
}
.laika-opcion:hover {
	border-color: var(--lt-teal);
}
.laika-opcion:focus-visible {
	outline: 3px solid rgba(1, 156, 190, .35);
	outline-offset: 2px;
}
.laika-opcion.is-activa {
	border-color: var(--lt-teal);
	background: var(--lt-teal-soft);
	box-shadow: inset 0 0 0 1px var(--lt-teal);
}
.laika-opcion__nombre {
	font-weight: 600;
	line-height: 1.3;
}
.laika-opcion__precio {
	color: var(--lt-teal-dark);
	font-size: .95em;
}
.laika-opcion.is-agotado {
	opacity: .55;
}

/* «Limpiar» de WooCommerce: con los botones no hace falta. */
.variations_form .reset_variations {
	display: none !important;
}

/* Listados: «4 opciones» bajo el precio. */
.laika-n-opciones {
	display: inline-block;
	margin: 6px 0 2px;
	padding: 3px 10px;
	border-radius: 999px;
	background: var(--lt-teal-soft);
	color: var(--lt-teal-dark);
	font-size: 13px;
	line-height: 1.5;
}

/* ==========================================================================
   Cabecera en móvil y tablet (hasta 980 px)
   El CSS personalizado de la cabecera (Divi → Opciones → Integración) fuerza el menú de
   categorías y la franja superior en una sola línea sin excepción para pantallas pequeñas:
   el menú de ordenador se veía a la fuerza, el botón de menú (tres rayas) quedaba fuera de la
   pantalla y toda la web se podía desplazar de lado. Estas reglas solo actúan hasta 980 px;
   en ordenador no cambia nada. Llevan «html body» delante para ganar a esas reglas !important.
   ========================================================================== */
@media (max-width: 980px) {
	html body {
		overflow-x: hidden;
	}

	/* Franja superior: logo y Tienda · Mi cuenta · Carrito en una fila; el buscador debajo,
	   a todo el ancho. */
	html body #top-header .container {
		width: 100% !important;
		max-width: 100% !important;
		padding-left: 14px !important;
		padding-right: 14px !important;
		flex-wrap: wrap !important;
		gap: 6px 12px;
	}
	html body #top-header #et-secondary-menu {
		display: flex !important;
		flex-wrap: wrap !important;
		justify-content: flex-end;
		align-items: center;
		flex: 1 1 auto;
		min-width: 0;
		max-width: 100%;
		gap: 4px 12px;
		margin-left: auto;
	}
	html body #top-header #et-secondary-nav {
		display: flex !important;
		flex-wrap: wrap !important;
		justify-content: flex-end;
		align-items: center;
		width: auto !important;
		max-width: 100%;
		gap: 4px 12px;
		margin: 0;
	}
	html body #top-header #et-secondary-nav > li {
		margin: 0 !important;
		padding: 0 !important;
	}
	html body #top-header #et-secondary-nav > li > a {
		font-size: 13px;
		padding: 6px 0;
	}
	html body #top-header #et-secondary-nav li:has(> .dgwt-wcas-search-wrapp) {
		order: 10;
		flex: 1 1 100% !important;
		width: 100%;
		margin: 4px 0 2px !important;
	}
	html body #top-header .dgwt-wcas-search-wrapp {
		width: 100% !important;
		max-width: 100% !important;
		min-width: 0 !important;
	}

	/* Barra del menú: se oculta el menú de ordenador y se muestra el botón de tres rayas. */
	html body #main-header .container.et_menu_container {
		width: 100% !important;
		max-width: 100% !important;
		padding-left: 14px !important;
		padding-right: 14px !important;
	}
	html body #main-header #top-menu-nav {
		display: none !important;
	}
	html body #main-header #et-top-navigation {
		display: flex !important;
		justify-content: flex-end;
		align-items: center;
		width: 100% !important;
		float: none !important;
		padding: 4px 0 !important;
	}
	html body #main-header #et_mobile_nav_menu {
		display: block !important;
		float: none !important;
		margin: 0;
	}
	html body #main-header .mobile_menu_bar {
		padding: 2px 0 !important;
	}
	html body #main-header .container.et_menu_container {
		padding-top: 0 !important;
		padding-bottom: 0 !important;
	}
	/* El enlace «Carrito» ya está en la fila de arriba: el contador de Divi en una fila
	   aparte solo hacía la cabecera más alta. */
	html body #top-header #et-secondary-menu > .et-cart-info {
		display: none !important;
	}
	html body #main-header .et_mobile_menu {
		max-height: calc(100vh - 140px);
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
	}
}

@media (max-width: 400px) {
	html body #top-header .container::before {
		width: 104px !important;
		height: 20px !important;
	}
	html body #top-header #et-secondary-nav > li > a {
		font-size: 12px;
	}
}

/* Fotos del producto: la lupa de zoom no debe salirse de su recuadro (en móviles estrechos
   hacía que la ficha se pudiera desplazar de lado). */
.woocommerce-product-gallery__image {
	overflow: hidden;
}

/* Fichas de producto: en pantallas muy estrechas, botones de opciones en una columna y con
   el texto un poco más pequeño para que quepan nombres largos («2,5-5,5 kg (112 mg)»). */
@media (max-width: 360px) {
	.laika-opciones {
		grid-template-columns: 1fr;
	}
}
@media (max-width: 600px) {
	.laika-opcion {
		padding: 9px 10px;
	}
	.laika-opcion__nombre {
		font-size: .95em;
	}
}

/* Miga de pan («Inicio › Antiparasitarios › …»): puede partirse en varias líneas; en móviles
   estrechos, en una sola línea se salía de la pantalla. */
.woocommerce-breadcrumb {
	white-space: normal !important;
	overflow-wrap: anywhere;
}

/* ==========================================================================
   Menú lateral del móvil por pantallas (ver laika-menu-movil.js)
   ========================================================================== */
.lkm-backdrop,
.lkm-drawer {
	display: none;
}
@media (max-width: 980px) {
	/* El menú desplegable de Divi deja de usarse: lo sustituye el panel lateral. */
	html body #main-header .et_mobile_menu {
		display: none !important;
	}

	.lkm-backdrop {
		display: block;
		position: fixed;
		inset: 0;
		z-index: 100000;
		background: rgba(30, 42, 48, .45);
		opacity: 0;
		pointer-events: none;
		transition: opacity .25s ease;
	}
	.lkm-drawer {
		display: flex;
		flex-direction: column;
		position: fixed;
		top: 0;
		left: 0;
		bottom: 0;
		z-index: 100001;
		width: min(88vw, 380px);
		height: 100vh;
		height: 100dvh;
		background: #fff;
		box-shadow: 4px 0 24px rgba(30, 42, 48, .18);
		transform: translateX(-105%);
		transition: transform .28s ease;
		font-size: 16px;
		color: var(--lt-ink);
	}
	html.lkm-abierto .lkm-drawer {
		transform: translateX(0);
	}
	html.lkm-abierto .lkm-backdrop {
		opacity: 1;
		pointer-events: auto;
	}
	html.lkm-abierto,
	html.lkm-abierto body {
		overflow: hidden !important;
	}

	/* Cabecera del panel: logo y cerrar. */
	.lkm-top {
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex: 0 0 auto;
		height: 60px;
		padding: 0 8px 0 18px;
		border-bottom: 1px solid var(--lt-line);
	}
	.lkm-logo {
		display: block;
		width: 140px;
		height: 30px;
		background: url('/wp-content/uploads/laikanimal-logo-1.png') left center / contain no-repeat;
	}
	.lkm-close {
		width: 44px;
		height: 44px;
		border: 0;
		border-radius: 50%;
		background: none;
		color: var(--lt-ink);
		font-size: 30px;
		line-height: 1;
		cursor: pointer;
	}
	.lkm-close:focus-visible,
	.lkm-back:focus-visible,
	.lkm-link:focus-visible {
		outline: 3px solid rgba(1, 156, 190, .35);
		outline-offset: -3px;
	}

	/* Pantallas: se colocan una al lado de otra y se desliza entre ellas. */
	.lkm-track {
		position: relative;
		flex: 1 1 auto;
		overflow: hidden;
	}
	.lkm-panel {
		position: absolute;
		inset: 0;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		background: #fff;
		transition: transform .26s ease;
	}
	.lkm-panel__head {
		display: flex;
		flex-direction: column;
		gap: 2px;
		padding: 10px 18px 12px;
		background: var(--lt-teal-soft);
	}
	.lkm-back {
		align-self: flex-start;
		padding: 6px 0;
		border: 0;
		background: none;
		color: var(--lt-teal-dark);
		font: inherit;
		font-size: 15px;
		font-weight: 600;
		cursor: pointer;
	}
	.lkm-back span {
		font-size: 22px;
		line-height: 0;
		vertical-align: -2px;
		margin-right: 2px;
	}
	.lkm-panel__title {
		font-size: 20px;
		font-weight: 700;
		color: var(--lt-ink);
	}

	.lkm-list {
		list-style: none;
		margin: 0;
		padding: 0;
	}
	.lkm-item {
		margin: 0;
		padding: 0;
		border-bottom: 1px solid #eef2f4;
	}
	.lkm-link {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		min-height: 52px;
		padding: 12px 18px;
		border: 0;
		background: none;
		color: var(--lt-ink) !important;
		font: inherit;
		font-size: 16px;
		text-align: left;
		text-decoration: none !important;
		cursor: pointer;
		box-sizing: border-box;
	}
	.lkm-link:active {
		background: var(--lt-teal-soft);
	}
	.lkm-link__text {
		flex: 1 1 auto;
		padding-right: 12px;
	}
	.lkm-chevron {
		flex: 0 0 auto;
		width: 9px;
		height: 9px;
		border-right: 2px solid var(--lt-teal-dark);
		border-top: 2px solid var(--lt-teal-dark);
		transform: rotate(45deg);
	}
	.lkm-item--all .lkm-link {
		color: var(--lt-teal-dark) !important;
		font-weight: 600;
	}
	.lkm-item--vip .lkm-link {
		color: #fc5252 !important;
		font-weight: 800;
	}
	.lkm-item--vip .lkm-link::before {
		content: "🐾 ";
	}

	/* Pie de la primera pantalla: cuenta y carrito. */
	.lkm-footer {
		display: flex;
		flex-wrap: wrap;
		gap: 10px;
		padding: 18px;
	}
	.lkm-footer__link {
		flex: 1 1 120px;
		padding: 12px;
		border: 1.5px solid var(--lt-teal);
		border-radius: 999px;
		color: var(--lt-teal-dark) !important;
		font-weight: 600;
		text-align: center;
		text-decoration: none !important;
	}
}
@media (prefers-reduced-motion: reduce) {
	.lkm-drawer,
	.lkm-panel,
	.lkm-backdrop {
		transition: none !important;
	}
}