/* =====================================================================
   v2 · Instant add to cart: loading, added, server error
   ===================================================================== */
.yhqv-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.remodal #wcqv_contend .single_add_to_cart_button .yhqv-btn-label{display:inline-block}

/* Loading: spinner replaces the cart icon, button stays the same size */
.remodal #wcqv_contend .single_add_to_cart_button.is-loading{pointer-events:none;cursor:progress}
.remodal #wcqv_contend .single_add_to_cart_button.is-loading:before{
  -webkit-mask:none; mask:none; background:none;
  width:20px; height:20px; border-radius:50%;
  border:2.5px solid rgba(20,10,46,.25); border-top-color:#140A2E;
  animation:yhqvSpin .7s linear infinite;
}

/* Added: check icon, a soft pop */
.woocommerce .remodal #wcqv_contend .product form.cart .single_add_to_cart_button.button.is-added,
.remodal #wcqv_contend .single_add_to_cart_button.is-added{pointer-events:none;background:#2EEAD8 !important;transform:none}
.remodal #wcqv_contend .single_add_to_cart_button.is-added: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='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat;
          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='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat;
  animation:yhqvPop .45s cubic-bezier(.16,1,.3,1);
}
@keyframes yhqvPop{0%{transform:scale(.3);opacity:0}60%{transform:scale(1.2);opacity:1}100%{transform:scale(1)}}

/* Server error (WooCommerce / Product Add-Ons text, shown as-is) */
.yhqv-server-err{
  flex:1 1 100%; margin:0; padding:12px 14px; border-radius:14px;
  border:1px solid rgba(255,143,165,.5); background:rgba(255,90,120,.12); color:#FFD3DC;
  font:500 14px/1.55 Rubik,system-ui,sans-serif; text-align:right;
  animation:yhqvErrIn .3s cubic-bezier(.16,1,.3,1);
}
.yhqv-server-err p{margin:0 !important;padding:0;color:inherit}
.yhqv-server-err p + p{margin-top:4px !important}
@keyframes yhqvErrIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}

@media (prefers-reduced-motion:reduce){
  .remodal #wcqv_contend .single_add_to_cart_button.is-added:before,.yhqv-server-err{animation:none}
  .remodal #wcqv_contend .single_add_to_cart_button.is-loading:before{animation-duration:1.6s}
}

/* =====================================================================
   v3 · Instant open: skeleton while the product loads, then a short rise
   ===================================================================== */
.yhqv-skel{padding:26px var(--q-pad,28px) 22px;display:flex;flex-direction:column;gap:0}
.yhqv-skel__head{display:grid;grid-template-columns:76px minmax(0,1fr);column-gap:16px;align-items:center;padding-inline-end:52px}
.yhqv-skel__img{width:76px;height:76px;border-radius:20px;overflow:hidden;background:#fff;box-shadow:0 10px 22px -10px rgba(0,0,0,.7)}
.yhqv-skel__img img{width:100%;height:100%;object-fit:cover;display:block}
.remodal .yhqv-skel__title{margin:0 !important;padding:0;font:600 22px/1.25 Rubik,system-ui,sans-serif !important;color:#fff !important;text-align:right;outline:0}
.yhqv-skel__body{display:flex;flex-direction:column;gap:8px;margin-top:22px}
.yhqv-skel__bar{display:block;border-radius:12px;background:rgba(255,255,255,.08);position:relative;overflow:hidden}
.yhqv-skel__bar:after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.09),transparent);
  transform:translateX(100%);animation:yhqvShimmer 1.2s ease-in-out infinite;
}
@keyframes yhqvShimmer{to{transform:translateX(-100%)}}
.yhqv-skel__lbl{height:14px;width:42%;border-radius:7px;margin-top:10px}
.yhqv-skel__field{height:52px;border-radius:14px}
.yhqv-skel__title .yhqv-skel__bar{height:20px;border-radius:10px}
.yhqv-skel__barrow{display:flex;gap:12px;margin:22px calc(var(--q-pad,28px) * -1) 0;padding:16px var(--q-pad,28px) 0;border-top:1px solid rgba(255,255,255,.13)}
.yhqv-skel__btn{flex:1;height:56px;border-radius:17px;background:rgba(3,218,196,.22)}
.yhqv-skel__qty{width:146px;height:48px;align-self:center;border-radius:14px}
.yhqv-skel__status{margin:14px 0 0 !important;text-align:center;font:500 13.5px/1.4 Rubik,system-ui,sans-serif;color:#C9BFE6;
  opacity:0;animation:yhqvLate .3s ease-out 1.2s forwards} /* only says "loading" if it takes more than a moment */
@keyframes yhqvLate{to{opacity:1}}
.remodal:has(#wcqv_contend)[aria-busy="true"]{cursor:progress}

/* the real content replaces the skeleton with a short fade + rise */
#wcqv_contend.is-swap .type-product > *,
#wcqv_contend.is-swap .summary-content > *{animation:yhqvRise .42s cubic-bezier(.16,1,.3,1) both}
#wcqv_contend.is-swap .summary-content > form{animation-delay:50ms}

/* failure / slow */
.yhqv-fail{margin-top:22px;padding:16px;border-radius:16px;border:1px solid rgba(255,143,165,.5);background:rgba(255,90,120,.12);color:#FFD3DC;
  font:500 14.5px/1.6 Rubik,system-ui,sans-serif;text-align:right}
.yhqv-fail p{margin:0 0 12px !important;color:inherit}
.yhqv-fail__acts{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.remodal button.yhqv-retry,.remodal button.yhqv-retry:focus{
  height:44px;padding:0 20px;border-radius:14px;border:0 !important;background:#03DAC4 !important;color:#140A2E !important;
  font:600 15px Rubik,system-ui,sans-serif;cursor:pointer}
.remodal button.yhqv-retry:hover{background:#2EEAD8 !important}
.remodal button.yhqv-retry:focus-visible{outline:2px solid #fff;outline-offset:3px}
.yhqv-fail .yhqv-more{margin:0}

@media (max-width:640px){
  .yhqv-skel{padding-top:14px}
  .yhqv-skel__head{grid-template-columns:60px minmax(0,1fr);column-gap:14px}
  .yhqv-skel__img{width:60px;height:60px;border-radius:17px}
  .remodal .yhqv-skel__title{font-size:19px !important}
  .yhqv-skel__barrow{flex-wrap:wrap-reverse;padding-bottom:calc(6px + env(safe-area-inset-bottom))}
  .yhqv-skel__btn{flex:1 1 100%}
}
@media (prefers-reduced-motion:reduce){
  .yhqv-skel__bar:after{animation:none;display:none}
  .yhqv-skel__status{animation:none;opacity:1}
  #wcqv_contend.is-swap .type-product > *,#wcqv_contend.is-swap .summary-content > *{animation:yhqvFade .15s linear both}
}
/* =====================================================================
   Added-to-cart confirmation: a small toast, bottom centre, gone by itself
   ===================================================================== */
.yhqv-toast{
  position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom));z-index:100001;
  display:flex;align-items:center;gap:12px;max-width:min(440px,calc(100vw - 24px));
  padding:10px 10px 10px 16px;border-radius:18px;direction:rtl;text-align:right;
  background:#140A2E;color:#F4F1FB;border:1px solid rgba(255,255,255,.12);
  box-shadow:0 22px 44px -18px rgba(10,6,40,.75),0 0 0 1px rgba(3,218,196,.18);
  font-family:Rubik,system-ui,sans-serif;
  opacity:0;transform:translate(-50%,16px) scale(.98);
  transition:opacity .3s cubic-bezier(.16,1,.3,1),transform .45s cubic-bezier(.16,1,.3,1);
}
.yhqv-toast.is-in{opacity:1;transform:translate(-50%,0) scale(1)}
.yhqv-toast.is-out{opacity:0;transform:translate(-50%,10px) scale(.98);transition-duration:.25s}
.yhqv-toast__ic{flex:none;width:32px;height:32px;border-radius:50%;background:#03DAC4;position:relative}
.yhqv-toast__ic:after{content:"";position:absolute;inset:0;background:#140A2E;
  -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='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/16px no-repeat;
          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='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/16px no-repeat}
.yhqv-toast__tx{display:flex;flex-direction:column;gap:1px;min-width:0;flex:1}
.yhqv-toast__tx b{font:600 15px/1.25 Rubik,system-ui,sans-serif;color:#fff}
.yhqv-toast__name{font:400 13px/1.3 Rubik,system-ui,sans-serif;color:#C9BFE6;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
button.yhqv-toast__go,button.yhqv-toast__go:focus{flex:none;height:40px;min-width:64px;padding:0 16px;margin:0;border:0 !important;border-radius:12px;
  background:rgba(255,255,255,.1) !important;color:#fff !important;font:600 14px Rubik,system-ui,sans-serif;cursor:pointer;transition:background .2s}
button.yhqv-toast__go:hover{background:rgba(255,255,255,.18) !important}
button.yhqv-toast__go:focus-visible{outline:2px solid #03DAC4;outline-offset:2px}
@media (prefers-reduced-motion:reduce){.yhqv-toast{transition:opacity .15s linear;transform:translate(-50%,0)}}

/* no card image available (e.g. a trigger outside a product card) */
.yhqv-skel__img:empty{display:none}
.yhqv-skel__head:has(.yhqv-skel__img:empty){grid-template-columns:minmax(0,1fr)}

/* =====================================================================
   v4 · Mobile bottom sheet: first frame already at the bottom, slide up, no jump
   (.yhqv-wrap / .yhqv-modal / .yhqv-ov are added by the script at load,
    so the sheet position does not depend on :has() being re-evaluated in time)
   ===================================================================== */
.remodal.yhqv-morph{transition:height .26s cubic-bezier(.32,.72,0,1) !important;overflow:hidden !important}
@media (max-width:640px){
  .remodal-wrapper.yhqv-wrap{padding:0 !important;overflow:hidden !important}
  .remodal-wrapper.yhqv-wrap.remodal-is-opening,
  .remodal-wrapper.yhqv-wrap.remodal-is-opened,
  .remodal-wrapper.yhqv-wrap.remodal-is-closing{display:grid !important;place-items:end stretch !important;align-content:end}
  .remodal-wrapper.yhqv-wrap:after{display:none !important}
  .remodal.yhqv-modal{
    position:relative !important;inset:auto !important;margin:0 !important;align-self:end !important;
    width:100% !important;max-height:92dvh !important;border-radius:28px 28px 0 0 !important;border-bottom:0 !important;
    transform:translate3d(0,0,0);
  }
  .remodal.yhqv-modal.remodal-is-opening{animation:yhqvSheetUp .42s cubic-bezier(.32,.72,0,1) both !important;will-change:transform}
  .remodal.yhqv-modal.remodal-is-closing{animation:yhqvSheetDown .24s cubic-bezier(.4,0,1,1) both !important;will-change:transform}
  .remodal-overlay.yhqv-ov,body:has(#wcqv_contend) .remodal-overlay{-webkit-backdrop-filter:none !important;backdrop-filter:none !important;background:rgba(14,6,34,.62) !important}
  .remodal.yhqv-modal .yhqv-bar{-webkit-backdrop-filter:none !important;backdrop-filter:none !important;background:#0b1757 !important}
  #wcqv_contend.is-swap .type-product > *,
  #wcqv_contend.is-swap .summary-content > *{animation-duration:.3s !important}
}
@keyframes yhqvSheetUp{from{transform:translate3d(0,100%,0)}to{transform:translate3d(0,0,0)}}
@keyframes yhqvSheetDown{from{transform:translate3d(0,0,0)}to{transform:translate3d(0,100%,0)}}
@media (max-width:640px) and (prefers-reduced-motion:reduce){
  .remodal.yhqv-modal.remodal-is-opening{animation:yhqvFade .15s linear both !important}
  .remodal.yhqv-modal.remodal-is-closing{animation:yhqvFade .12s linear reverse both !important}
}
.remodal.yhqv-shift{transition:transform .3s cubic-bezier(.32,.72,0,1) !important;will-change:transform}
/* v4.1 first frame: remodal shows the wrapper one frame BEFORE it adds .remodal-is-opening, so the dialog flashed at the top. Now it stays hidden (on phones parked below the screen, pinned to the bottom) until the opening animation brings it in. */
.remodal.yhqv-modal:not(.remodal-is-opening):not(.remodal-is-opened):not(.remodal-is-closing){opacity:0 !important}
@media (max-width:640px){
  .remodal-wrapper.yhqv-wrap{position:fixed !important;inset:0 !important}
  .remodal-wrapper.yhqv-wrap > .remodal.yhqv-modal{position:absolute !important;left:0 !important;right:0 !important;bottom:0 !important;top:auto !important}
  .remodal.yhqv-modal:not(.remodal-is-opening):not(.remodal-is-opened):not(.remodal-is-closing){transform:translate3d(0,100%,0) !important}
}

/* v4.2 mini skeleton on phones: the loading sheet is only image + title + status, so the real content is always taller and the sheet only keeps growing upward (never shrinks back down) */
@media (max-width:640px){
  .yhqv-skel .yhqv-skel__body,.yhqv-skel .yhqv-skel__barrow{display:none !important}
  .yhqv-skel{padding-bottom:calc(18px + env(safe-area-inset-bottom)) !important}
  .yhqv-skel__status{opacity:1 !important;animation:none !important;display:flex;align-items:center;justify-content:center;gap:10px;margin-top:16px !important}
  .yhqv-skel__status:before{content:'';width:16px;height:16px;border-radius:50%;border:2px solid rgba(201,191,230,.3);border-top-color:#03DAC4;animation:yhqvSpin .7s linear infinite}
}
@media (max-width:640px) and (prefers-reduced-motion:reduce){.yhqv-skel__status:before{animation-duration:1.6s}}