/* ============================================================
   HAUTE OPTIQUE — Notification toasts (pop-in)
   Self-contained. Enqueued site-wide by inc/notify.php.
   Replaces the default WooCommerce/XStore notices.
   ============================================================ */

/* Hide the native notice UIs (we re-present them as toasts).
   WC notices are only visually hidden (kept in DOM) so notify.js can read
   their text before removing them — this avoids any flash of the old banner. */
.et-notify{display:none!important}
.woocommerce-message,
.woocommerce-error,
.woocommerce-info,
ul.woocommerce-error,
.wc-block-components-notice-banner{
  position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;
  overflow:hidden!important;clip:rect(0 0 0 0)!important;white-space:nowrap!important;border:0!important}

.ho-toast-stack{
  --ink:#141519;--soft:#71757e;--faint:#9aa0a8;--line:#ECECEC;--card:#fff;--tint:#F4F4F3;
  --ok:#2E7D5B;--ok-soft:#E7F3ED;--err:#DB4437;--err-soft:#FCECEA;--warn:#C7891B;--warn-soft:#FBF1DE;
  --r:18px;--pill:999px;
  --shadow:0 0 0 1px rgba(20,21,25,.05),0 1px 2px rgba(20,21,25,.04),0 14px 32px -10px rgba(20,21,30,.22),0 6px 14px -8px rgba(20,21,30,.14);
  --font:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
  position:fixed;top:22px;right:22px;z-index:100000;display:flex;flex-direction:column;align-items:flex-end;gap:13px;pointer-events:none;max-width:calc(100vw - 24px)}

.ho-toast{
  --ink:#141519;--soft:#71757e;--faint:#9aa0a8;--line:#ECECEC;--card:#fff;--tint:#F4F4F3;
  --ok:#2E7D5B;--ok-soft:#E7F3ED;--err:#DB4437;--err-soft:#FCECEA;--warn:#C7891B;--warn-soft:#FBF1DE;
  --font:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
  pointer-events:auto;position:relative;display:flex;gap:14px;align-items:flex-start;box-sizing:border-box;
  width:max-content;min-width:250px;max-width:min(360px,calc(100vw - 32px));
  background:rgba(255,255,255,.9);backdrop-filter:blur(16px) saturate(1.3);-webkit-backdrop-filter:blur(16px) saturate(1.3);
  border-radius:var(--r);box-shadow:var(--shadow);padding:16px 42px 20px 18px;font-family:var(--font);color:var(--ink)}
.ho-toast *{box-sizing:border-box}

.ho-toast-ic{flex:none;width:42px;height:42px;border-radius:13px;display:grid;place-items:center;position:relative;color:var(--ink);background:var(--tint)}
.ho-toast-ic::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(20,21,25,.05)}
.ho-toast-ic svg{display:block}
.ho-toast--success .ho-toast-ic{background:var(--ok-soft);color:var(--ok)}
.ho-toast--error .ho-toast-ic{background:var(--err-soft);color:var(--err)}
.ho-toast--info .ho-toast-ic{background:var(--tint);color:var(--ink)}
.ho-toast--warn .ho-toast-ic{background:var(--warn-soft);color:var(--warn)}

.ho-toast-body{flex:1;min-width:0;padding-top:2px}
.ho-toast-eyebrow{font-size:10.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;margin-bottom:3px;line-height:1.2}
.ho-toast--success .ho-toast-eyebrow{color:var(--ok)}
.ho-toast--error .ho-toast-eyebrow{color:var(--err)}
.ho-toast--info .ho-toast-eyebrow{color:var(--faint)}
.ho-toast--warn .ho-toast-eyebrow{color:var(--warn)}
.ho-toast-title{font-size:13.5px;font-weight:700;letter-spacing:-.005em;color:var(--ink);line-height:1.3}
.ho-toast-text{font-size:12.5px;color:var(--soft);line-height:1.55;margin-top:3px}
.ho-toast-text b,.ho-toast-text strong{color:var(--ink);font-weight:600}

.ho-toast-close{position:absolute;top:12px;right:12px;width:24px;height:24px;border:none;background:none;color:var(--faint);cursor:pointer;border-radius:50%;display:grid;place-items:center;transition:background .15s,color .15s;padding:0}
.ho-toast-close:hover{background:var(--tint);color:var(--ink)}
.ho-toast-close svg{width:13px;height:13px;display:block}

.ho-toast-bar{position:absolute;left:18px;right:18px;bottom:10px;height:2.5px;border-radius:99px;background:rgba(20,21,25,.07);overflow:hidden}
.ho-toast-bar::after{content:"";position:absolute;inset:0;border-radius:inherit;transform-origin:left;transform:scaleX(1)}
.ho-toast--success .ho-toast-bar::after{background:linear-gradient(90deg,var(--ok),#4aa87e)}
.ho-toast--error .ho-toast-bar::after{background:linear-gradient(90deg,var(--err),#f06a5f)}
.ho-toast--info .ho-toast-bar::after{background:linear-gradient(90deg,#c3c6cc,#9aa0a8)}
.ho-toast--warn .ho-toast-bar::after{background:linear-gradient(90deg,var(--warn),#e0a94a)}
.ho-toast-bar.run::after{animation:hoToastBar 4.2s linear forwards}
@keyframes hoToastBar{from{transform:scaleX(1)}to{transform:scaleX(0)}}

/* motion — slide in from the right */
.ho-toast.pop-in{animation:hoToastIn .5s cubic-bezier(.16,1,.3,1) both}
.ho-toast.pop-out{animation:hoToastOut .3s cubic-bezier(.4,0,1,1) forwards}
.ho-toast.pop-in .ho-toast-ic{animation:hoIcPop .55s .06s cubic-bezier(.16,1.3,.4,1) both}
@keyframes hoToastIn{from{opacity:0;transform:translateX(46px) scale(.94)}to{opacity:1;transform:none}}
@keyframes hoToastOut{to{opacity:0;transform:translateX(46px) scale(.94)}}
@keyframes hoIcPop{from{transform:scale(.4);opacity:0}to{transform:scale(1);opacity:1}}

@media (prefers-reduced-motion:reduce){
  .ho-toast.pop-in,.ho-toast.pop-out,.ho-toast.pop-in .ho-toast-ic{animation:none}
  .ho-toast-bar.run::after{animation:none}
}
@media(max-width:600px){
  .ho-toast-stack{left:12px;right:12px;top:12px;align-items:stretch}
  .ho-toast{width:auto;max-width:none}
}