/* ==========================================================================
   La Canasta Imports — estilos del tema

   Las secciones 1 (encabezado) y 2 (pie) son el CSS del maquetado original,
   portado tal cual: mismos selectores, mismo acomodo, mismo breakpoint.
   Único cambio de fondo: los colores pasan por las variables de theme.json
   con el hex original como fallback, para que la paleta siga siendo editable
   desde el Editor del sitio sin tocar este archivo.
   ========================================================================== */

:root {
	/* Ancho del contenedor del navbar y del pie.
	   El maquetado original usaba 768px; el diseño de Figma mide ~1120px de
	   contenido sobre un lienzo de 1280. Si prefieres tu valor, cambia esta línea. */
	--lc-contenedor: 1120px;

	--lc-rosa: var(--wp--preset--color--rosa, #cd3c87);
	--lc-azul: var(--wp--preset--color--azul, #0075b9);
	--lc-turquesa: var(--wp--preset--color--turquesa, #54d3da);
	--lc-turquesa-oscuro: var(--wp--preset--color--turquesa-oscuro, #4dc1ca);
	--lc-amarillo: var(--wp--preset--color--amarillo, #f4cc25);
	--lc-naranja: var(--wp--preset--color--naranja, #f28600);
	--lc-gris: var(--wp--preset--color--gris, #363636);
	--lc-onda: url("../images/onda.svg");
	--lc-onda-inv: url("../images/onda-invertida.svg");
	--lc-flor: url("../images/flor.svg");
	--lc-textura: url("../images/textura-flores.svg");
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { overflow-x: hidden; }
body.menu-abierto { overflow: hidden; }

/* --------------------------------------------------------------------------
   1. ENCABEZADO  (maquetado original)
   -------------------------------------------------------------------------- */

.header-container {
	background-color: #fff;
	display: flex;
	text-transform: uppercase;
	position: sticky;
	top: 0;
	left: 0;
	z-index: 1000;
}

.header-container .header-navbar {
	flex: 1;
	display: flex;
	align-items: center;
}

.header-container .header-navbar .menu-toggle {
	background-color: #fff;
	cursor: pointer;
	border: none;
	font-size: 1.5rem;
	margin: 0;
	padding: 10px;
	color: var(--lc-azul);
}
.header-container .header-navbar .menu-toggle svg { width: 1em; height: 1em; display: block; }

.header-container .header-navbar .header-logo img {
	margin: 15px 0;
	height: 60px;
	width: auto;
}

.header-container .header-navbar .main-menu {
	display: flex;
	position: absolute;
	top: -100vh;
	left: 0;
	width: 100%;
	height: 100vh;
	background-color: #fff;
	transition: top .25s ease;
}
.header-container .header-navbar .main-menu.active { top: 0; }

.header-container .header-navbar .main-menu .menu-close {
	background-color: #fff;
	cursor: pointer;
	border: none;
	font-size: 1.5rem;
	margin: 0;
	padding: 10px;
	color: var(--lc-azul);
	position: absolute;
	top: 10px;
	left: 10px;
}
.header-container .header-navbar .main-menu .menu-close svg { width: 1em; height: 1em; display: block; }

.header-container .header-navbar .main-menu ul {
	list-style-type: none;
	padding: 0;
	margin: auto 0 auto 50px;
}

.header-container .header-navbar .main-menu ul li a {
	display: block;
	padding: 20px;
	color: var(--lc-rosa);
	text-decoration: none;
	font-weight: bold;
	font-size: 1.2rem;
}

.header-container .shopping {
	display: flex;
	align-items: center;
	padding: 10px;
}

.header-container .shopping .delivery-info { display: none; }

.header-container .shopping .shopping-cart ul {
	margin: 0;
	padding: 0;
	list-style-type: none;
}
.header-container .shopping .shopping-cart ul li {
	display: inline-block;
	margin: 0 0 0 5px;
}
.header-container .shopping .shopping-cart ul li a {
	text-decoration: none;
	color: var(--lc-rosa);
	font-weight: bold;
	font-size: 1.2rem;
}
.header-container .shopping .shopping-cart ul li a.icon {
	color: var(--lc-azul);
	font-size: 1.2rem;
	display: inline-flex;
	align-items: center;
}
.header-container .shopping .shopping-cart ul li a.icon svg {
	width: 1.35em;
	height: 1.35em;
	display: block;
}

/* Contador del carrito (se actualiza vía fragmentos AJAX de WooCommerce) */
.lc-cart-count {
	display: inline-grid;
	place-items: center;
	min-width: 1.35em;
	height: 1.35em;
	padding-inline: .3em;
	margin-inline-start: -.5em;
	margin-block-start: -1em;
	border-radius: 999px;
	background-color: var(--lc-rosa);
	color: #fff;
	font-size: .65rem;
	line-height: 1;
}
.lc-cart-count:empty,
.lc-cart-count:has(+ *):not(:has(*)) { display: none; }

/* 1.b Neutralizar los envoltorios del bloque Navegación del core
   para que quede el <ul><li><a> que espera el CSS de arriba. */
.main-menu .wp-block-navigation,
.footer-menu .wp-block-navigation { width: 100%; }
.main-menu .wp-block-navigation__responsive-container,
.footer-menu .wp-block-navigation__responsive-container {
	position: static;
	display: block;
	background: transparent;
	padding: 0;
}
.main-menu .wp-block-navigation__responsive-container-open,
.main-menu .wp-block-navigation__responsive-container-close,
.footer-menu .wp-block-navigation__responsive-container-open,
.footer-menu .wp-block-navigation__responsive-container-close { display: none !important; }
.main-menu .wp-block-navigation__container,
.footer-menu .wp-block-navigation__container {
	display: block;
	gap: 0;
}
.main-menu .wp-block-navigation-item,
.footer-menu .wp-block-navigation-item { display: block; }

/* 1.c Franja de búsqueda (viene de Figma, no del maquetado original).
   Si no la quieres, borra el bloque `search-bar` de parts/header.html. */
.search-bar {
	background-color: var(--lc-rosa);
	padding: 18px 10px;
}
.search-bar .wp-block-search__inside-wrapper {
	max-width: var(--lc-contenedor);
	margin: 0 auto;
	border: 0;
	border-radius: 999px;
	background: #fff;
	overflow: hidden;
}
.search-bar .wp-block-search__input {
	border: 0;
	padding: .85em 1.4em;
	font-size: 1rem;
}
.search-bar .wp-block-search__button {
	border: 0;
	border-radius: 999px;
	background-color: var(--lc-amarillo);
	color: #333;
	padding-inline: 1.2em;
	margin: 4px;
}

@media (min-width: 1024px) {
	.header-container { display: block; }

	.header-container .header-navbar {
		margin: 0 auto;
		max-width: var(--lc-contenedor);
	}
	.header-container .header-navbar .menu-toggle { display: none; }
	.header-container .header-navbar .header-logo img { height: 50px; }

	.header-container .header-navbar .main-menu {
		position: relative;
		top: 0;
		left: 0;
		width: auto;
		height: auto;
		margin-left: auto;
	}
	.header-container .header-navbar .main-menu .menu-close { display: none; }

	.main-menu .wp-block-navigation__container { display: flex; }
	.header-container .header-navbar .main-menu ul li {
		display: inline-block;
		margin: 0 10px;
	}
	.header-container .header-navbar .main-menu ul li a { padding: 0; }

	.header-container .shopping {
		background-color: var(--lc-naranja);
		padding: 10px;
		display: block;
	}
	.header-container .shopping .shopping-container {
		max-width: var(--lc-contenedor);
		margin: 0 auto;
		display: flex;
		align-items: center;
	}
	.header-container .shopping .delivery-info {
		display: block;
		color: #fff;
		font-size: .8rem;
		font-weight: bold;
		flex: 1;
	}
	.header-container .shopping .delivery-info p { margin: 0; display: flex; align-items: center; gap: .3em; }
	.header-container .shopping .delivery-info p strong { color: #333333; font-weight: bold; font-size: 1.15rem; }
	.header-container .shopping .delivery-info .icon { width: 1em; height: 1.15em; }

	.header-container .shopping .shopping-cart ul li a { font-size: 1rem; color: #fff; }
	.header-container .shopping .shopping-cart ul li a.icon { font-size: 1.2rem; color: #fff; }
}

/* --------------------------------------------------------------------------
   2. PIE DE PÁGINA  (maquetado original)
   -------------------------------------------------------------------------- */

.footer-container .footer-menu {
	background-color: var(--lc-turquesa);
	padding: 0;
	margin: 0;
}
.footer-container .footer-menu ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
}
.footer-container .footer-menu ul li {
	margin: 0;
	padding: 0;
}
.footer-container .footer-menu ul li:nth-child(even) {
	background-color: var(--lc-turquesa-oscuro);
}
.footer-container .footer-menu ul li a {
	display: block;
	padding: 20px;
	color: #fff;
	text-decoration: none;
	font-size: 1.2rem;
}

.footer-container .footer-copyright {
	background-color: var(--lc-gris);
	padding: 20px;
	color: #fff;
}
.footer-container .footer-copyright p a { color: #fff; }

@media (min-width: 1024px) {
	.footer-container .footer-menu { padding: 30px; }
	.footer-container .footer-menu ul {
		margin: 0 auto;
		max-width: var(--lc-contenedor);
		display: flex;
		flex-wrap: wrap;
		gap: 30px;
		justify-content: space-between;
	}
	.footer-container .footer-menu ul li {
		display: flex;
		background-color: var(--lc-turquesa-oscuro);
		width: 150px;
		height: 150px;
		align-items: center;
		justify-content: center;
	}
	.footer-container .footer-menu ul li a {
		display: inline;
		font-size: 1.4rem;
		flex: 1;
	}

	.footer-container .footer-copyright p {
		max-width: var(--lc-contenedor);
		margin: 20px auto;
	}
}

/* --------------------------------------------------------------------------
   3. ONDAS Y TEXTURAS (estilos de bloque registrados en inc/setup.php)
   -------------------------------------------------------------------------- */

.wp-block-group.is-style-onda-superior,
.wp-block-group.is-style-onda-inferior { position: relative; }

.wp-block-group.is-style-onda-superior::before,
.wp-block-group.is-style-onda-inferior::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	height: clamp(38px, 6vw, 90px);
	background: inherit;
	pointer-events: none;
}
.wp-block-group.is-style-onda-superior::before {
	bottom: 100%;
	-webkit-mask: var(--lc-onda-inv) no-repeat center / 100% 100%;
	mask: var(--lc-onda-inv) no-repeat center / 100% 100%;
}
.wp-block-group.is-style-onda-inferior::after {
	top: 100%;
	-webkit-mask: var(--lc-onda) no-repeat center / 100% 100%;
	mask: var(--lc-onda) no-repeat center / 100% 100%;
}

.wp-block-group.is-style-textura-flores { position: relative; isolation: isolate; }
.wp-block-group.is-style-textura-flores::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: currentColor;
	opacity: .12;
	-webkit-mask: var(--lc-textura) repeat center / 260px 260px;
	mask: var(--lc-textura) repeat center / 260px 260px;
	pointer-events: none;
}

.lc-flor {
	display: block;
	width: var(--lc-flor-size, 120px);
	aspect-ratio: 1;
	background: currentColor;
	-webkit-mask: var(--lc-flor) no-repeat center / contain;
	mask: var(--lc-flor) no-repeat center / contain;
}

.lc-cinta {
	background-color: var(--lc-amarillo);
	color: #fff;
	font-weight: 700;
	text-align: center;
	padding-block: 1.6rem;
	transform: rotate(-2.5deg) scale(1.05);
	transform-origin: center;
	margin-block: 2rem;
	letter-spacing: .04em;
}

/* --------------------------------------------------------------------------
   4. SECCIONES DE CONTENIDO
   -------------------------------------------------------------------------- */

.is-style-titulo-seccion {
	text-align: center;
	font-weight: 900;
	text-transform: uppercase;
	letter-spacing: .01em;
}

.is-style-foto-inclinada img {
	border-radius: 6px;
	box-shadow: 3px 3px 5px rgba(0, 0, 0, .3);
	rotate: -4deg;
}
.is-style-foto-inclinada:nth-of-type(even) img { rotate: 4deg; }

.wp-block-button.is-style-boton-amarillo .wp-block-button__link {
	background-color: var(--lc-amarillo);
	color: #333;
}
.wp-block-button.is-style-boton-amarillo .wp-block-button__link:hover { background-color: #e2ba14; }

.lc-categoria { text-align: center; }
.lc-categoria img {
	border-radius: 50%;
	aspect-ratio: 1;
	object-fit: cover;
	background-color: var(--lc-turquesa);
}
.lc-categoria .wp-block-heading {
	font-size: 1.35rem;
	color: var(--lc-azul);
	margin-block-start: .75rem;
}

.lc-whatsapp {
	display: inline-flex;
	align-items: center;
	gap: .75rem;
	background-color: #25d366;
	color: #fff !important;
	text-decoration: none !important;
	font-weight: 700;
	padding: .9em 1.6em;
	border-radius: 999px;
}
.lc-whatsapp::before {
	content: "";
	width: 1.75em;
	height: 1.75em;
	background-color: currentColor;
	-webkit-mask: url("../images/icono-whatsapp.svg") no-repeat center / contain;
	mask: url("../images/icono-whatsapp.svg") no-repeat center / contain;
}

/* --------------------------------------------------------------------------
   5. ACCESIBILIDAD
   -------------------------------------------------------------------------- */

.skip-link:focus {
	position: fixed;
	inset-block-start: 1rem;
	inset-inline-start: 1rem;
	z-index: 9999;
	background: #fff;
	color: var(--lc-rosa);
	padding: .75rem 1.25rem;
	border-radius: 6px;
}

:where(a, button, input, select, textarea):focus-visible {
	outline: 3px solid var(--lc-azul);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.lc-cinta { transform: none; }
	.is-style-foto-inclinada img { rotate: none; }
	.header-container .header-navbar .main-menu { transition: none; }
}