/* EM Coatings redesign (nov 2026): beweging en details die Elementor zelf niet kan. Kleuren en fonts komen uit de Elementor-kit. */
.emr-vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Inlaadanimaties zoals de opzet: Elementor "Fade In Up" en "Zoom In" schuiven 16px en schalen van .96 */
@keyframes fadeInUp { from { opacity: 0; transform: translate3d(0, 16px, 0); } to { opacity: 1; transform: none; } }
@keyframes zoomIn { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: none; } }
.elementor-element.animated.fadeInUp,
.elementor-element.animated.zoomIn { animation-duration: .7s; animation-timing-function: cubic-bezier(.2, 0, 0, 1); }

/* Tekstlinks (knop-stijl "link"): pijl schuift mee bij hover */
.em-link .elementor-button-icon { transition: transform .2s cubic-bezier(.2, 0, 0, 1); }
.em-link .elementor-button:hover .elementor-button-icon,
.em-link .elementor-button:focus-visible .elementor-button-icon { transform: translateX(6px); }

/* Productkaart: optillen, schaduw en foto iets groter bij hover */
.em-card { transition: transform .3s cubic-bezier(.65, 0, .35, 1), box-shadow .3s cubic-bezier(.65, 0, .35, 1); }
.em-card:hover { transform: translateY(-4px); box-shadow: 0 16px 32px rgba(26, 26, 24, .08); }
.em-card img { transition: transform .6s cubic-bezier(.65, 0, .35, 1); }
.em-card:hover img { transform: scale(1.03); }

/* Zwevende WhatsApp-knop (alleen vanaf 960px, zoals de opzet) */
.emr-wa { position: fixed; right: 24px; bottom: 24px; z-index: 9100; display: none; align-items: center; gap: 4px;
  opacity: 0; transform: translateY(16px); pointer-events: none; transition: opacity .3s cubic-bezier(.2, 0, 0, 1), transform .3s cubic-bezier(.2, 0, 0, 1); }
@media (min-width: 960px) { .emr-wa { display: flex; } }
.emr-wa.is-visible { opacity: 1; transform: none; pointer-events: auto; }
.emr-wa a { display: inline-flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 20px; border-radius: 4px;
  background: var(--e-global-color-primary, #1A1A18); color: #fff; font-family: var(--e-global-typography-text-font-family, sans-serif); font-weight: 800; font-size: 16px;
  text-decoration: none; box-shadow: 0 12px 32px rgba(26, 26, 24, .25); transition: background-color .2s; }
.emr-wa a:hover { background: var(--e-global-color-secondary, #006C99); color: #fff; }
.emr-wa a svg { width: 22px; height: 22px; color: var(--e-global-color-accent, #F98E02); }
body .emr-wa button { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 4px;
  background: #fff; color: var(--e-global-color-primary, #1A1A18); box-shadow: 0 8px 20px rgba(26, 26, 24, .15); cursor: pointer; }
body .emr-wa button svg { width: 16px; height: 16px; }

@media (prefers-reduced-motion: reduce) {
  .elementor-element.animated { animation: none !important; }
  .em-card, .em-card img, .emr-wa { transition: none; }
  .em-card:hover, .em-card:hover img { transform: none; }
}

/* Header: zoek- en winkelwagenicoon als lijnicoon uit de opzet (22px), tekst "Winkelwagen" naast het icoon vanaf 1300px */
.em-search .elementor-search-form__toggle .e-font-icon-svg-container svg,
.em-cart .elementor-menu-cart__toggle_button .elementor-button-icon svg { display: none !important; }
.em-search .elementor-search-form__toggle .e-font-icon-svg-container::before,
.em-cart .elementor-menu-cart__toggle_button .elementor-button-icon::before {
  content: ""; display: block; width: 22px; height: 22px; background: var(--e-global-color-primary, #1A1A18); transition: background-color .2s; }
.em-search .elementor-search-form__toggle .e-font-icon-svg-container::before { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M21 21l-4.3-4.3'/%3E%3C/svg%3E") no-repeat center / contain; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M21 21l-4.3-4.3'/%3E%3C/svg%3E") no-repeat center / contain; }
.em-cart .elementor-menu-cart__toggle_button .elementor-button-icon::before { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 4h2.2l1.7 11.2a2 2 0 0 0 2 1.7h7.6a2 2 0 0 0 2-1.6L20 8H6.2'/%3E%3Ccircle cx='9.5' cy='20.5' r='1.2'/%3E%3Ccircle cx='17' cy='20.5' r='1.2'/%3E%3C/svg%3E") no-repeat center / contain; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 4h2.2l1.7 11.2a2 2 0 0 0 2 1.7h7.6a2 2 0 0 0 2-1.6L20 8H6.2'/%3E%3Ccircle cx='9.5' cy='20.5' r='1.2'/%3E%3Ccircle cx='17' cy='20.5' r='1.2'/%3E%3C/svg%3E") no-repeat center / contain; }
.em-search .elementor-search-form__toggle { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; background: transparent !important; }
.em-search .elementor-search-form__toggle .e-font-icon-svg-container { display: flex; align-items: center; justify-content: center; }
.em-search .elementor-search-form__toggle:hover .e-font-icon-svg-container::before,
.em-cart .elementor-menu-cart__toggle_button:hover .elementor-button-icon::before { background: var(--e-global-color-secondary, #006C99); }
.em-cart .elementor-menu-cart__toggle_button { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; }
.em-cart .elementor-button-icon { position: relative; }
@media (min-width: 1300px) {
  .em-cart .elementor-menu-cart__toggle_button::after { content: "Winkelwagen"; order: 3; font-family: var(--e-global-typography-text-font-family, sans-serif);
    font-size: 15px; font-weight: 600; line-height: 1; color: var(--e-global-color-primary, #1A1A18); transition: color .2s; }
  .em-cart .elementor-menu-cart__toggle_button:hover::after { color: var(--e-global-color-secondary, #006C99); }
}
