:root {
	--ddf-marca: #326afc;
	--ddf-marca-suave: #eef2ff;
	--ddf-texto: #494b51;
	--ddf-borde: #dfe3ea;
	--ddf-exito: #0f8a4a;
	--ddf-exito-suave: #e7f6ee;
}

.ddf-promo,
.ddf-envio {
	font-family: inherit;
	color: var(--ddf-texto);
	margin: 0 0 1.25rem;
	padding: 0.9rem 1rem;
	border: 1px solid var(--ddf-borde);
	border-radius: 10px;
	background: var(--ddf-marca-suave);
	line-height: 1.45;
}

.ddf-promo__texto {
	margin: 0 0 0.6rem;
	font-size: 0.95rem;
}

.ddf-promo__barra {
	height: 8px;
	border-radius: 999px;
	background: #fff;
	overflow: hidden;
}

.ddf-promo__barra > span {
	display: block;
	height: 100%;
	background: var(--ddf-marca);
	transition: width 0.3s ease;
}

.ddf-promo--activa {
	border-color: var(--ddf-exito);
	background: var(--ddf-exito-suave);
	color: var(--ddf-exito);
	font-weight: 700;
}

.ddf-envio__titulo {
	margin: 0 0 0.6rem;
	font-weight: 700;
}

.ddf-envio__opciones {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0.5rem;
}

.ddf-envio__opcion {
	display: flex;
	gap: 0.65rem;
	align-items: flex-start;
	padding: 0.65rem 0.75rem;
	border: 1px solid transparent;
	border-radius: 8px;
	background: #fff;
	font-size: 0.9rem;
	opacity: 0.55;
}

.ddf-envio__opcion.is-activa {
	opacity: 1;
	border-color: var(--ddf-marca);
	box-shadow: 0 1px 3px rgb(50 106 252 / 18%);
}

.ddf-envio__icono {
	flex: 0 0 auto;
	display: block;
	width: 22px;
	height: 22px;
	margin-top: 1px;
	color: #8a8d95;
}

.ddf-envio__icono svg {
	display: block;
	width: 100%;
	height: 100%;
}

.ddf-envio__opcion.is-activa .ddf-envio__icono {
	color: var(--ddf-marca);
}

.ddf-envio__detalle {
	display: block;
	margin-top: 0.2rem;
	color: #6b6e76;
	font-size: 0.82rem;
	line-height: 1.35;
}

.ddf-barra {
	position: fixed;
	inset: auto 0 0 0;
	z-index: 9999;
	display: flex;
	gap: 0.75rem;
	align-items: center;
	padding: 0.6rem 0.9rem calc(0.6rem + env(safe-area-inset-bottom));
	background: #fff;
	border-top: 1px solid var(--ddf-borde);
	box-shadow: 0 -4px 14px rgb(0 0 0 / 10%);
}

.ddf-barra[hidden] {
	display: none;
}

.ddf-barra__info {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	line-height: 1.25;
}

.ddf-barra__nombre {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: 0.85rem;
	color: var(--ddf-texto);
}

.ddf-barra__precio {
	font-weight: 700;
	font-size: 1rem;
}

.ddf-barra__precio del {
	opacity: 0.6;
	font-weight: 400;
	font-size: 0.85rem;
}

.ddf-barra__boton {
	flex: 0 0 auto;
	min-height: 48px;
	padding: 0 1.4rem;
	border: 0;
	border-radius: 8px;
	background: var(--ddf-marca);
	color: #fff;
	font: inherit;
	font-weight: 700;
	cursor: pointer;
}

@media (min-width: 921px) {
	.ddf-barra {
		display: none;
	}
}

/* Objetivos táctiles: WCAG 2.2 pide 24px mínimos; 44px es el umbral cómodo real. */
@media (max-width: 920px) {
	.woocommerce .quantity .qty,
	.woocommerce-cart .actions .button,
	.woocommerce .single_add_to_cart_button,
	.woocommerce .checkout-button {
		min-height: 48px;
	}

	.woocommerce .single_add_to_cart_button,
	.woocommerce .checkout-button {
		width: 100%;
		text-align: center;
	}

	.woocommerce .quantity .qty {
		width: 5rem;
		font-size: 1rem;
	}

	/* Evita el zoom automático de iOS al enfocar un campo. */
	.woocommerce form .form-row input.input-text,
	.woocommerce form .form-row select,
	.woocommerce form .form-row textarea {
		min-height: 48px;
		font-size: 16px;
	}

	body.single-product.ddf-con-barra {
		padding-bottom: 4.5rem;
	}
}

/* ---------- Navegación inferior ---------- */

.ddf-nav {
	position: fixed;
	inset: auto 0 0 0;
	z-index: 9998;
	display: none;
	background: #fff;
	border-top: 1px solid var(--ddf-borde);
	box-shadow: 0 -2px 12px rgb(0 0 0 / 8%);
	padding-bottom: env(safe-area-inset-bottom);
}

.ddf-nav__boton {
	flex: 1 1 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.15rem;
	min-height: 56px;
	padding: 0.35rem 0.25rem;
	border: 0;
	background: none;
	font: inherit;
	font-size: 0.68rem;
	color: var(--ddf-texto);
	text-decoration: none;
	cursor: pointer;
}

.ddf-nav__icono {
	position: relative;
	display: block;
	width: 24px;
	height: 24px;
	color: #6b6e76;
}

.ddf-nav__svg {
	display: block;
	width: 100%;
	height: 100%;
}

/* Los iconos de Elementor entran como <i> y hay que emparejarlos con los SVG. */
.ddf-nav__fa {
	display: grid;
	place-items: center;
	width: 100%;
	height: 100%;
	font-size: 20px;
	line-height: 1;
}

.ddf-nav__boton:hover .ddf-nav__icono,
.ddf-nav__boton:focus-visible .ddf-nav__icono {
	color: var(--ddf-marca);
}

.ddf-nav__globo {
	position: absolute;
	top: -5px;
	inset-inline-start: 55%;
	min-width: 1.05rem;
	padding: 0 0.2rem;
	border-radius: 999px;
	background: var(--ddf-marca);
	color: #fff;
	font-size: 0.6rem;
	font-weight: 700;
	line-height: 1.05rem;
	text-align: center;
}

.ddf-cajon {
	width: min(24rem, 92vw);
	max-height: 78vh;
	margin: auto auto 0;
	padding: 0;
	border: 0;
	border-radius: 14px 14px 0 0;
	color: var(--ddf-texto);
	background: #fff;
}

.ddf-cajon::backdrop {
	background: rgb(23 26 33 / 45%);
}

.ddf-cajon__cabecera {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 1rem 1.1rem;
	border-bottom: 1px solid var(--ddf-borde);
	font-size: 1.02rem;
}

.ddf-cajon__cerrar {
	display: grid;
	place-items: center;
	min-width: 44px;
	min-height: 44px;
	border: 0;
	background: none;
	color: #6b6e76;
	cursor: pointer;
}

.ddf-cajon__cerrar svg {
	width: 20px;
	height: 20px;
}

.ddf-cajon__lista {
	list-style: none;
	margin: 0;
	padding: 0.35rem 0 calc(0.6rem + env(safe-area-inset-bottom));
	overflow-y: auto;
	max-height: calc(78vh - 4rem);
}

.ddf-cajon__lista a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	min-height: 48px;
	padding: 0.55rem 1.1rem;
	color: inherit;
	text-decoration: none;
}

.ddf-cajon__lista a:hover,
.ddf-cajon__lista a:focus-visible {
	background: var(--ddf-marca-suave);
}

.ddf-nav__cuenta {
	color: #8a8d95;
	font-size: 0.82rem;
	font-variant-numeric: tabular-nums;
}

.ddf-cajon__lista .ddf-nav__todo a {
	color: var(--ddf-marca);
	font-weight: 700;
	border-top: 1px solid var(--ddf-borde);
	margin-top: 0.35rem;
}

@media (max-width: 920px) {
	.ddf-nav {
		display: flex;
	}

	body.ddf-con-nav {
		padding-bottom: calc(56px + env(safe-area-inset-bottom));
	}

	/* La barra de compra se apoya arriba de la navegación, nunca encima. */
	.ddf-barra {
		bottom: calc(56px + env(safe-area-inset-bottom));
		padding-bottom: 0.6rem;
	}

	body.single-product.ddf-con-barra {
		padding-bottom: calc(56px + 4.5rem + env(safe-area-inset-bottom));
	}
}

/* ---------- Aviso de reposición ---------- */

.ddf-aviso {
	margin: 1.1rem 0;
	padding: 1rem 1.1rem;
	border: 1px solid var(--ddf-borde);
	border-radius: 10px;
	background: var(--ddf-marca-suave);
	display: grid;
	gap: 0.6rem;
}

.ddf-aviso__label {
	font-weight: 700;
	font-size: 0.95rem;
	line-height: 1.4;
}

.ddf-aviso__fila {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.ddf-aviso__email {
	flex: 1 1 12rem;
	min-height: 48px;
	padding: 0 0.8rem;
	border: 1px solid var(--ddf-borde);
	border-radius: 8px;
	background: #fff;
	font: inherit;
	font-size: 16px;
}

.ddf-aviso__boton {
	flex: 0 0 auto;
	min-height: 48px;
	padding: 0 1.35rem;
	border: 0;
	border-radius: 8px;
	background: var(--ddf-marca);
	color: #fff;
	font: inherit;
	font-weight: 700;
	cursor: pointer;
}

.ddf-aviso__ok {
	margin: 1.1rem 0;
	padding: 0.85rem 1.1rem;
	border-radius: 10px;
	background: var(--ddf-exito-suave);
	color: var(--ddf-exito);
	font-weight: 700;
}

.ddf-aviso__error {
	margin: 0;
	color: #b3261e;
	font-size: 0.88rem;
}

/* ---------- Carrusel de novedades ---------- */

.ddf-novedades {
	margin: 2rem 0;
}

.ddf-novedades__titulo {
	margin: 0 0 0.9rem;
	font-size: clamp(1.35rem, 4vw, 1.9rem);
	line-height: 1.2;
}

.ddf-novedades__pista {
	list-style: none;
	margin: 0;
	padding: 0 0 0.6rem;
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(9.5rem, 11rem);
	gap: 0.9rem;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	overscroll-behavior-x: contain;
	scrollbar-width: thin;
}

.ddf-novedad {
	scroll-snap-align: start;
}

.ddf-novedad__link {
	display: grid;
	gap: 0.3rem;
	height: 100%;
	align-content: start;
	color: var(--ddf-texto);
	text-decoration: none;
}

.ddf-novedad__img {
	width: 100%;
	height: auto;
	aspect-ratio: 1;
	object-fit: cover;
	border-radius: 10px;
	background: #f2f4f8;
}

.ddf-novedad__nombre {
	font-size: 0.88rem;
	line-height: 1.3;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.ddf-novedad__precio {
	font-weight: 700;
	font-size: 0.95rem;
}

.ddf-novedad__link:hover .ddf-novedad__nombre,
.ddf-novedad__link:focus-visible .ddf-novedad__nombre {
	color: var(--ddf-marca);
}

.ddf-novedades__pie {
	margin: 0.5rem 0 0;
	font-size: 0.9rem;
}

@media (min-width: 921px) {
	.ddf-novedades__pista {
		grid-auto-columns: minmax(11rem, 13rem);
	}
}

@media (prefers-reduced-motion: reduce) {
	.ddf-promo__barra > span {
		transition: none;
	}
}

/* El tema pinta todos los <button>; estos controles necesitan ganar esa cascada. */
.ddf-cajon .ddf-cajon__cerrar,
.ddf-nav .ddf-nav__boton {
	appearance: none;
	-webkit-appearance: none;
	background: transparent;
	background-image: none;
	color: var(--ddf-texto);
	border: 0;
	border-radius: 0;
	box-shadow: none;
	text-transform: none;
	letter-spacing: normal;
	font-weight: 400;
}

.ddf-cajon .ddf-cajon__cerrar {
	padding: 0;
	line-height: 1;
}

.ddf-cajon .ddf-cajon__cerrar:hover,
.ddf-cajon .ddf-cajon__cerrar:focus-visible {
	background: var(--ddf-marca-suave);
	color: var(--ddf-texto);
	border-radius: 8px;
}

.ddf-nav .ddf-nav__boton:hover {
	background: var(--ddf-marca-suave);
}

/* El desplegable nativo de Elementor abre pegado al contenido de abajo y no se
   lee como un panel. Una sombra y un borde alcanzan; el resto de la navegación
   la resuelve la barra inferior, que llega a las categorías en un solo toque. */
.elementor-nav-menu--dropdown[aria-hidden="false"] {
	box-shadow: 0 8px 20px rgb(22 23 26 / 13%);
	border-bottom: 1px solid var(--ddf-borde);
}

/* ---------- Ficha de producto en la grilla ---------- */

.ddf-etiquetas {
	position: absolute;
	top: 10px;
	inset-inline-start: 10px;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 5px;
	pointer-events: none;
}

.ddf-etiqueta {
	padding: 4px 9px;
	border-radius: 4px;
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	line-height: 1.3;
	color: #fff;
}

.ddf-etiqueta--nuevo  { background: #16171a; }
.ddf-etiqueta--escaso { background: #c2410c; }

/* Las tarjetas del tema no son contenedor de posicionamiento por sí solas. */
.woocommerce ul.products li.product,
.woocommerce div.product .images {
	position: relative;
}

.ddf-precio__detalle {
	display: flex;
	flex-direction: column;
	gap: 2px;
	margin: 4px 0 2px;
	line-height: 1.4;
}

.ddf-precio__transferencia {
	color: var(--ddf-exito);
	font-weight: 700;
	font-size: 0.82em;
}

.ddf-precio__cuotas {
	color: #6b6e76;
	font-size: 0.8em;
}

/* ---------- Barra de anuncios ---------- */

.ddf-promo-barra {
	background: #16171a;
	color: #edebe6;
	font-size: 12.5px;
	letter-spacing: 0.02em;
	line-height: 1.4;
	overflow: hidden;
}

.ddf-promo-barra__pista {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 0 10px;
	max-width: 1200px;
	margin: 0 auto;
	padding: 9px 16px;
	text-align: center;
}

.ddf-promo-barra__sep {
	opacity: 0.38;
}

@media (max-width: 600px) {
	.ddf-promo-barra {
		font-size: 11.5px;
	}

	.ddf-promo-barra__pista {
		padding: 7px 12px;
		gap: 0 7px;
	}
}

/* ---------- Buscador de la barra inferior ---------- */

.ddf-buscador {
	width: min(30rem, 94vw);
	margin: auto auto 0;
	padding: 0;
	border: 0;
	border-radius: 14px 14px 0 0;
	background: #fff;
	color: var(--ddf-texto);
}

.ddf-buscador::backdrop {
	background: rgb(23 26 33 / 45%);
}

.ddf-buscador__form {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 14px 14px calc(14px + env(safe-area-inset-bottom));
}

.ddf-buscador__campo {
	flex: 1 1 auto;
	min-width: 0;
	min-height: 48px;
	padding: 0 14px;
	border: 1px solid var(--ddf-borde);
	border-radius: 8px;
	background: #fff;
	font: inherit;
	font-size: 16px;
}

.ddf-buscador .ddf-buscador__enviar {
	flex: 0 0 auto;
	min-height: 48px;
	padding: 0 18px;
	border: 0;
	border-radius: 8px;
	background: var(--ddf-marca);
	color: #fff;
	font: inherit;
	font-weight: 700;
	cursor: pointer;
}

.ddf-buscador .ddf-buscador__cerrar {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: 44px;
	min-height: 48px;
	padding: 0;
	border: 0;
	background: none;
	color: #6b6e76;
	cursor: pointer;
}

.ddf-buscador__cerrar svg {
	width: 20px;
	height: 20px;
}