/* FDE — sombras del sitio (29/09/2026)

   Se relevaron las sombras de todas las paginas: habia mas de 40 valores
   distintos para cosas que cumplen la misma funcion. Se agruparon por uso y
   se tomo como estandar la mas repetida de cada grupo, siempre en el tono
   de tinta del sitio (26, 26, 46):

     --fde-sh-1        superficies en reposo (cajas, tarjetas, pestañas)
     --fde-sh-2        tarjeta levantada al pasar el mouse
     --fde-sh-3        paneles que flotan: menus, avisos, ventanas
     --fde-sh-side     cajones laterales (menu, carrito, filtros)
     --fde-sh-btn      botones redondos que flotan (favorito, flechas)
     --fde-sh-btn-h    los mismos al pasar el mouse
     --fde-sh-cta      botones verdes
     --fde-sh-cta-h    botones verdes al pasar el mouse

   No se tocaron: anillos de foco (accesibilidad), la ilustracion del
   telefono de "Envianos tu receta" y los estilos por defecto de WooCommerce.

   Cada regla repite el selector original con "html body" delante: asi gana
   por especificidad sin !important, cargue antes o despues el CSS original. */

:root {
  --fde-sh-1: 0 2px 8px rgba(26, 26, 46, .08);
  --fde-sh-2: 0 14px 32px rgba(26, 26, 46, .09);
  --fde-sh-3: 0 16px 40px rgba(26, 26, 46, .14);
  --fde-sh-side: -8px 0 32px rgba(26, 26, 46, .12);
  --fde-sh-btn: 0 2px 8px rgba(26, 26, 46, .16);
  --fde-sh-btn-h: 0 4px 14px rgba(26, 26, 46, .22);
  --fde-sh-cta: 0 8px 20px rgba(76, 175, 80, .28);
  --fde-sh-cta-h: 0 12px 24px rgba(76, 175, 80, .34);
}


/* ---------- Superficies en reposo ---------- */

html body .promo-card,
html body .fde-daytabs,
html body .fde-step,
html body .fde-badge,
html body .fde-slide-card,
html body #fde-hero-pagination,
html body .fde-faq-item.on,
html body .fde-wl-head__btn,
html body .step-card,
html body #deals .e-loop-item .product-card,
html body .s02-main,
html body .s02-price-card,
html body .s02-pill,
html body .s06-mark,
html body .elementor-10 .elementor-element.elementor-element-a35d880,
html body .elementor-10 .elementor-element.elementor-element-cf46318,
html body .elementor-10 .elementor-element.elementor-element-0ea2ccb,
html body .elementor-10 .elementor-element.elementor-element-9233bd9,
html body .elementor-10 .elementor-element.elementor-element-8956650,
html body .elementor-10 .elementor-element.elementor-element-2733cb8,
html body .elementor-10 .elementor-element.elementor-element-2935898a {
  box-shadow: var(--fde-sh-1);
}


/* ---------- Tarjeta levantada (hover) ---------- */

html body .fde-pc:hover,
html body .fde-rv:hover,
html body .promo-card:hover,
html body .fde-brandcard:hover,
html body .fde-trustcard:hover,
html body .fde-needtile:hover,
html body .fde-slide.active .fde-slide-card:hover,
html body .fde-card:hover,
html body .step-card:hover,
html body #deals .e-loop-item .product-card:hover,
html body .s03-card:hover,
html body .s04-row:hover,
html body .s06-card:hover {
  box-shadow: var(--fde-sh-2);
}


/* ---------- Paneles flotantes ---------- */

html body #fdehcToast,
html body .fde-fav-toast,
html body .fcat__panel,
html body #fde-quickview-v2 .fde-modal__dialog {
  box-shadow: var(--fde-sh-3);
}

html body .fde-h-drawer,
html body #fdehcDrawer {
  box-shadow: var(--fde-sh-side);
}

@media (min-width: 701px) {
  html body #fde-fpanel { box-shadow: var(--fde-sh-side); }
}

@media (max-width: 700px) {
  html body #fde-fpanel { box-shadow: 0 -8px 32px rgba(26, 26, 46, .12); }
}


/* ---------- Botones redondos ---------- */

html body .fde-fav,
html body .fde-pc .fde-fav,
html body .fde-pc__remove,
html body .fde-arrow,
html body .fde-cc-nav,
html body .fde-prev,
html body .fde-next,
html body .promo-arrow,
html body .s06-arrow,
html body .s02-zoom,
html body .s02-fav,
html body .fde-qv-btn,
html body .fde-needtile-iconchip,
html body .fde-needtile-count {
  box-shadow: var(--fde-sh-btn);
}

html body .fde-fav:hover,
html body .fde-pc .fde-fav:hover,
html body .promo-arrow:hover,
html body .fde-qv-btn:hover,
html body .fde-wl-head__btn:hover {
  box-shadow: var(--fde-sh-btn-h);
}


/* ---------- Botones verdes ---------- */

html body .elementor-10 .elementor-element.elementor-element-36ee0bcf .elementor-button,
html body .elementor-10 .elementor-element.elementor-element-63ff8b0d .elementor-button,
html body #fde-receta-sec .rc-cta,
html body .fde-slide-btn,
html body .fde-daytab.on,
html body .s02-thumb.is-on,
html body .s02-price-off,
html body .s02-cta-cart {
  box-shadow: var(--fde-sh-cta);
}

html body .elementor-10 .elementor-element.elementor-element-36ee0bcf .elementor-button:hover,
html body .elementor-10 .elementor-element.elementor-element-63ff8b0d .elementor-button:hover,
html body #fde-receta-sec .rc-cta:hover,
html body .fde-slide-btn:hover,
html body .s02-cta-cart:hover {
  box-shadow: var(--fde-sh-cta-h);
}

/* El boton de agregar al carrito de la ficha de producto tambien es un
   button.button de WooCommerce, cuya regla trae un selector de ID y le
   ponia box-shadow: none. :is() con un ID inexistente sube la especificidad
   al nivel de ID sin usar !important. */
html body :is(.s02-cta-cart, #fde-no-existe) { box-shadow: var(--fde-sh-cta); }
html body :is(.s02-cta-cart, #fde-no-existe):hover { box-shadow: var(--fde-sh-cta-h); }