.treesal-variation-modal{position:fixed;inset:0;z-index:9999;display:none}
.treesal-variation-modal__backdrop{position:absolute;inset:0;background:rgba(0,0,0,.5)}
.treesal-variation-modal__dialog{position:absolute;left:0;right:0;bottom:0;background:#fff;border-radius:16px 16px 0 0;max-height:85vh;overflow:auto;box-shadow:0 -8px 24px rgba(0,0,0,.15)}
.treesal-variation-modal__close{position:absolute;left:16px;top:8px;background:transparent;border:0;font-size:24px;line-height:1;cursor:pointer; padding: 0; color: black;}
.treesal-variation-modal__dialog .treesal-variation-modal__close{z-index:3}
.treesal-variation-modal__close svg{display:block}
.treesal-variation-modal__body{padding:16px}
.treesal-variation-preview{position:sticky;top:0;z-index:2;display:flex;gap:14px;align-items:center;padding:14px 16px;background:#fff;border-bottom:1px solid rgba(0,0,0,.06)}
.treesal-variation-preview__media{flex:0 0 auto}
.treesal-variation-preview__img{width:96px;height:96px;object-fit:cover;border-radius:10px;background:#f6f6f6}
.treesal-variation-preview__info{display:flex;flex-direction:column;gap:4px;min-width:0}
.treesal-variation-preview__title{font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.treesal-variation-preview__meta{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.treesal-variation-preview__attrs{font-size:12px;color:#666}
.treesal-variation-preview__price{font-weight:700;font-size:16px}
.treesal-variation-form__title{margin:0 32px 12px 0;font-size:16px;font-weight:600}
.treesal-variation-modal__loading{padding:24px;text-align:center}
.treesal-variation-modal__error{padding:24px;text-align:center;color:#c0392b}

/* Desktop center modal */
@media (min-width:768px){
	.treesal-variation-modal__dialog{width:560px;margin:10vh auto;border-radius:12px}
	.treesal-variation-preview__img{width:112px;height:112px;border-radius:12px}
}

/* Prevent background scroll when modal open */
body.treesal-variation-modal-open{overflow:hidden}

/* WooCommerce form spacing */
/* keep default WooCommerce form appearance as-is; only ensure full-width selects */
.treesal-variation-modal .variations select{width:100%}

/* Subtle cart feedback animation */
@keyframes treesal-cart-bump{0%{transform:translateY(0)}50%{transform:translateY(-2px)}100%{transform:translateY(0)}}
@keyframes treesal-cart-ping{0%{box-shadow:0 0 0 0 rgba(39,174,96,.6)}70%{box-shadow:0 0 0 8px rgba(39,174,96,0)}100%{box-shadow:0 0 0 0 rgba(39,174,96,0)}}
.mini-cart__button.treesal-cart-animate{position:relative;animation:treesal-cart-bump .3s ease}
.mini-cart__button.treesal-cart-animate::after{content:"";position:absolute;top:-2px;right:-2px;width:10px;height:10px;background:#27ae60;border-radius:999px;animation:treesal-cart-ping 1s ease-out}

/* Toast notification (Shopify-like) */
.treesal-cart-toast{position:fixed;left:50%;bottom:16px;transform:translateX(-50%) translateY(10px);opacity:0;pointer-events:none;background:#111;color:#fff;padding:10px 14px;border-radius:999px;font-size:13px;line-height:1;box-shadow:0 8px 20px rgba(0,0,0,.2);transition:transform .25s ease, opacity .25s ease;z-index:10000;display:flex;align-items:center;gap:8px}
.treesal-cart-toast.is-visible{opacity:1;transform:translateX(-50%) translateY(0)}
.treesal-cart-toast .toast-dot{width:10px;height:10px;background:#27ae60;border-radius:999px;flex:0 0 10px}