/* Lad hjertet svinge – AJAX add-to-cart toast */
.lhs-toast,
.lhs-toast * {
  font-family: cambria, sans-serif;
}

/* Hard reset against Elementor's global link/button theme styles (color, underline,
   box-shadow, outline) leaking into our own toast – we set every interactive state
   explicitly below instead of relying on the site-wide defaults. */
.lhs-toast a,
.lhs-toast button {
  text-decoration: none;
  box-shadow: none;
  outline: none;
}

/* We show our own toast (below) instead of WooCommerce's native "added" checkmark
   and auto-inserted ".added_to_cart.wc-forward" "Se kurv" link next to the button. */
.single_add_to_cart_button.added::after {
  display: none !important;
}

a.added_to_cart.wc-forward {
  display: none !important;
}

.lhs-toast {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 100000;
  display: flex;
  align-items: flex-start;
  gap: 16px;
  width: 100%;
  max-width: 420px;
  padding: 22px 24px;
  background: #FFFFFF;
  border: 1px solid #E5E2DE;
  border-left: 6px solid #F9B738;
  border-radius: 16px;
  box-shadow: 0 24px 60px rgba(96,51,20,.28), 0 4px 14px rgba(96,51,20,.14);
  opacity: 0;
  transform: translateY(18px) scale(.97);
  transition: opacity .28s cubic-bezier(.2,.9,.3,1.2), transform .28s cubic-bezier(.2,.9,.3,1.2);
  pointer-events: none;
}

.lhs-toast.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.lhs-toast__icon {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #F9B738;
  color: #603314;
  box-shadow: 0 0 0 6px rgba(249,183,56,.22);
}

.lhs-toast__icon svg { width: 24px; height: 24px; }

.lhs-toast__body { flex: 1 1 auto; min-width: 0; padding-top: 2px; }

.lhs-toast__title {
  margin: 0 0 4px;
  font-size: 18px;
  font-weight: 800;
  color: #603314;
  line-height: 1.25;
}

.lhs-toast__msg {
  margin: 0 0 12px;
  font-size: 14.5px;
  font-weight: 500;
  color: #7a6a5c;
  line-height: 1.4;
}

.lhs-toast__actions { display: flex; gap: 12px; flex-wrap: wrap; }

.lhs-toast__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 700;
  color: #FFFFFF;
  background: #603314;
  padding: 9px 18px;
  border-radius: 999px;
  text-decoration: none;
  transition: background-color .15s ease, transform .15s ease;
}

.lhs-toast__link:hover {
  background: #47240e;
  color: #FFFFFF; /* Hello Elementor's reset.css sets a global a:hover color (dark navy) that
                     otherwise wins here – keep the link white on hover. */
  transform: translateY(-1px);
}

.lhs-toast__close {
  flex: 0 0 auto;
  background: none;
  border: 0;
  cursor: pointer;
  font-size: 24px;
  line-height: 1;
  color: #c9bcae;
  padding: 0;
  margin-left: 2px;
}

.lhs-toast__close:hover { color: #603314; }

.single_add_to_cart_button.lhs-loading {
  opacity: .7;
  cursor: progress;
}

/* WooCommerce core styles ".button.alt" hover/focus/active as its default purple
   (and Hello Elementor's reset.css adds a pink hover/focus on top of that) – both
   can win the cascade over Elementor's own per-widget hover style depending on the
   button's state (e.g. while "loading" or right after "added"). Force our own
   brand colors in every state so the button never flashes purple/pink. */
.single_add_to_cart_button.button.alt,
.single_add_to_cart_button.button.alt.added,
.single_add_to_cart_button.button.alt.lhs-loading {
  background-color: #F9B738 !important;
  border-color: #F9B738 !important;
  color: #603314 !important;
}

.single_add_to_cart_button.button.alt:hover,
.single_add_to_cart_button.button.alt:focus,
.single_add_to_cart_button.button.alt:active,
.single_add_to_cart_button.button.alt.added:hover,
.single_add_to_cart_button.button.alt.added:focus,
.single_add_to_cart_button.button.alt.lhs-loading:hover,
.single_add_to_cart_button.button.alt.lhs-loading:focus {
  background-color: #f7ab19 !important;
  border-color: #f7ab19 !important;
  color: #603314 !important;
}

@media (max-width: 480px) {
  .lhs-toast {
    left: 16px;
    right: 16px;
    bottom: 16px;
    max-width: none;
    padding: 18px 18px;
  }

  .lhs-toast__icon { width: 38px; height: 38px; }
  .lhs-toast__title { font-size: 16.5px; }
}