/* Add-to-cart confirmation — design "Add to Cart Confirmation" (1a/1b, 2a/2b) on TM AjaxPro's popup
   (#ajaxpro-notice-form). Templates mms/ajaxpro/added.phtml + mms/ajaxpro/crosssell.phtml; everything here only applies
   when the popup contains .mms-atc (other AjaxPro messages — compare, wishlist, errors — stay as they were).
   Desktop: centred dialog (720 px with suggestions, 480 px without). Phones: sheet from the bottom.
   Colours from the --mb-* tokens of css/mms-header.css (green on IT). */

#ajaxpro-notice-form:has(.mms-atc){--a-ink:var(--mb-ink,#14202b);--a-body:var(--mb-body,#35424e);--a-mute:var(--mb-mute,#55606b);--a-c:var(--mb-blue,#1c5f9e);
  --a-hover:var(--mb-hover,#174f85);--a-soft:var(--mb-t2,#e8f2fa);--a-t1:var(--mb-t1,#f3f8fc);--a-line:var(--mb-line,#dde6ee);--a-input:#6f8799;--a-ok:var(--mb-green,#2e6b12);
  position:fixed!important;left:50%!important;top:50%!important;right:auto!important;bottom:auto!important;transform:translate(-50%,-50%);
  width:min(720px,calc(100vw - 32px))!important;max-height:calc(100vh - 32px);overflow-y:auto;overscroll-behavior:contain;box-sizing:border-box;
  margin:0!important;padding:20px 24px 24px!important;background:#fff!important;border:0!important;border-radius:16px!important;box-shadow:0 30px 80px -20px rgba(16,36,26,.45)!important;
  opacity:1!important;z-index:10050!important;font:400 15px/1.5 var(--mb-font,Inter,system-ui,sans-serif);color:var(--a-ink);text-align:left;-webkit-font-smoothing:antialiased}
#ajaxpro-notice-form:has(.mms-atc):not(:has(.mms-atc-x)){width:min(480px,calc(100vw - 32px))!important}
body.mms-theme-green #ajaxpro-notice-form:has(.mms-atc){--a-input:#7d9686}
#ajaxpro-notice-form:has(.mms-atc) *{box-sizing:border-box}
/* confirmation first, suggestions below (AjaxPro renders the cross-sell block first) */
#ajaxpro-notice-form:has(.mms-atc){display:flex!important;flex-direction:column}
#ajaxpro-notice-form:has(.mms-atc)>.mms-atc{order:1}
#ajaxpro-notice-form:has(.mms-atc)>.mms-atc-x{order:2}
/* AjaxPro's own success line and buttons are replaced by .mms-atc */
#ajaxpro-notice-form:has(.mms-atc)>div:not(.mms-atc):not(.mms-atc-x){display:none!important}
#ajaxpro-overlay{z-index:10040!important}
body:has(#ajaxpro-notice-form .mms-atc) #fc_frame{display:none!important}   /* chat bubble would cover the buttons; AjaxPro removes the popup on close */
body:has(#ajaxpro-notice-form .mms-atc) #ajaxpro-overlay{background:rgba(16,36,26,.55)!important}
/* close: 44 px, inside the dialog */
#ajaxpro-notice-form:has(.mms-atc)>.btn-close{position:absolute!important;top:12px!important;right:12px!important;left:auto!important;width:44px!important;height:44px!important;margin:0!important;padding:0!important;
  background:none!important;border:0!important;border-radius:10px;font-size:0!important;line-height:0;color:var(--a-body);text-indent:0!important;overflow:hidden;display:flex!important;align-items:center;justify-content:center;z-index:2}
#ajaxpro-notice-form:has(.mms-atc)>.btn-close:before{content:"\00d7";font:400 28px/1 var(--mb-font,Inter,sans-serif);color:var(--a-body)}
#ajaxpro-notice-form:has(.mms-atc)>.btn-close:hover{background:var(--a-t1)!important}
#ajaxpro-notice-form:has(.mms-atc)>.btn-close:focus-visible{outline:2px solid var(--a-c);outline-offset:2px}

/* header */
.mms-atc__head{display:flex;align-items:center;gap:10px;min-height:44px;padding-right:48px;margin:0}
.mms-atc__ok{flex:none;width:30px;height:30px;border-radius:50%;background:var(--a-ok);color:#fff;display:flex;align-items:center;justify-content:center;font-size:17px;font-weight:700}
.mms-atc__title{font:700 20px/1.25 var(--mb-head,var(--mb-font,Inter,sans-serif));letter-spacing:-.015em;color:var(--a-ink)}
/* product + summary/buttons */
.mms-atc__body{margin-top:12px;display:grid;grid-template-columns:minmax(0,1fr);gap:14px;align-items:center}
#ajaxpro-notice-form:has(.mms-atc-x) .mms-atc__body{grid-template-columns:minmax(0,1fr) 290px;gap:22px}
.mms-atc__item{border:1px solid var(--a-line);border-radius:12px;padding:12px;display:grid;grid-template-columns:80px minmax(0,1fr) auto;gap:14px;align-items:center}
.mms-atc__item img{width:80px;height:80px;object-fit:contain;border-radius:8px;background:var(--a-t1);display:block}
.mms-atc__name{min-width:0}
.mms-atc__name b{display:block;font-weight:600;font-size:16px;line-height:1.3;color:var(--a-ink)}
.mms-atc__name span{display:block;font-size:14px;color:var(--a-mute)}
.mms-atc__price{font-weight:700;font-size:17px;white-space:nowrap;color:var(--a-ink)}
.mms-atc__side{display:flex;flex-direction:column;gap:8px}
.mms-atc__sum{display:flex;justify-content:space-between;align-items:baseline;gap:12px;color:var(--a-body)}
.mms-atc__sum b{font-size:19px;color:var(--a-ink);white-space:nowrap}
#ajaxpro-notice-form .mms-atc__checkout{display:flex;align-items:center;justify-content:center;min-height:48px;padding:0 16px;border-radius:10px;background:var(--a-c);color:#fff!important;font-weight:700;font-size:16px;text-decoration:none!important;text-align:center}
#ajaxpro-notice-form .mms-atc__checkout:hover{background:var(--a-hover)}
#ajaxpro-notice-form .mms-atc__continue{all:unset;box-sizing:border-box;cursor:pointer;display:flex;align-items:center;justify-content:center;min-height:44px;padding:0 16px;border-radius:10px;
  border:1.5px solid var(--a-input);background:#fff;color:var(--a-ink);font:600 15px/1.2 var(--mb-font,Inter,sans-serif);text-align:center}
#ajaxpro-notice-form .mms-atc__continue:hover{border-color:var(--a-c);color:var(--a-c)}
#ajaxpro-notice-form .mms-atc__checkout:focus-visible,#ajaxpro-notice-form .mms-atc__continue:focus-visible{outline:2px solid var(--a-ink);outline-offset:2px}
/* without suggestions (1b): checkout + continue side by side under the subtotal */
#ajaxpro-notice-form:not(:has(.mms-atc-x)) .mms-atc__side{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:10px}
#ajaxpro-notice-form:not(:has(.mms-atc-x)) .mms-atc__sum{grid-column:1 / -1}
#ajaxpro-notice-form:not(:has(.mms-atc-x)) .mms-atc__continue{grid-row:2;grid-column:1}
#ajaxpro-notice-form:not(:has(.mms-atc-x)) .mms-atc__checkout{grid-row:2;grid-column:2}
.mms-atc__note{margin:14px 0 0!important;font-size:14px;color:var(--a-body);text-align:center}
.mms-atc__note span{color:var(--a-ok);font-weight:700}

/* suggestions: quieter tinted panel below */
#ajaxpro-notice-form .mms-atc-x{margin-top:18px;background:var(--a-t1);border-radius:12px;padding:14px 16px 16px}
.mms-atc-x__head{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 10px;margin-bottom:10px}
.mms-atc-x__head b{font-size:17px;color:var(--a-ink)}
.mms-atc-x__head span{font-size:14px;color:var(--a-body)}
#ajaxpro-notice-form .mms-atc-x__list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:0;padding:0;list-style:none}
#ajaxpro-notice-form .mms-atc-x__item{background:#fff;border-radius:10px;padding:10px;margin:0;display:grid;grid-template-columns:56px minmax(0,1fr) auto;gap:12px;align-items:center;list-style:none;border:0}
.mms-atc-x__img img{width:56px;height:56px;object-fit:contain;border-radius:8px;background:var(--a-t1);display:block}
.mms-atc-x__txt{min-width:0;line-height:1.25}
#ajaxpro-notice-form .mms-atc-x__txt a{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-weight:600;font-size:15px;color:var(--a-ink)!important;text-decoration:none}
#ajaxpro-notice-form .mms-atc-x__txt a:hover{color:var(--a-c)!important}
.mms-atc-x__txt span{display:block;font-size:14px;margin-top:2px}
.mms-atc-x__txt small{font-size:13px;color:var(--a-mute)}
#ajaxpro-notice-form .mms-atc-x__btn{all:unset;box-sizing:border-box;cursor:pointer;min-width:84px;min-height:44px;padding:0 12px;border-radius:10px;border:1.5px solid var(--a-input);background:#fff;
  color:var(--a-ink)!important;font:600 15px/1.2 var(--mb-font,Inter,sans-serif);display:flex;align-items:center;justify-content:center;text-decoration:none!important;white-space:nowrap}
#ajaxpro-notice-form .mms-atc-x__btn:hover{border-color:var(--a-c);color:var(--a-c)!important}
#ajaxpro-notice-form .mms-atc-x__btn:focus-visible{outline:2px solid var(--a-c);outline-offset:2px}
#ajaxpro-notice-form .mms-atc-x__btn.is-added{cursor:default;background:var(--a-soft);border-color:var(--a-c);color:var(--a-c)!important}

/* phones: sheet from the bottom (1a/2a) */
@media (max-width:767px){
  #ajaxpro-notice-form:has(.mms-atc),#ajaxpro-notice-form:has(.mms-atc):not(:has(.mms-atc-x)){left:0!important;right:0!important;top:auto!important;bottom:0!important;transform:none;width:100%!important;
    max-height:92vh;border-radius:16px 16px 0 0!important;padding:16px 16px 20px!important;padding-bottom:max(20px,env(safe-area-inset-bottom))!important}
  #ajaxpro-notice-form:has(.mms-atc)>.btn-close{top:8px!important;right:6px!important}
  .mms-atc__title{font-size:18px}
  .mms-atc__ok{width:28px;height:28px;font-size:16px}
  #ajaxpro-notice-form .mms-atc__body,#ajaxpro-notice-form:has(.mms-atc-x) .mms-atc__body{grid-template-columns:1fr;gap:12px;margin-top:8px}
  .mms-atc__item{grid-template-columns:64px minmax(0,1fr) auto;gap:12px}
  .mms-atc__item img{width:64px;height:64px}
  #ajaxpro-notice-form .mms-atc__side,#ajaxpro-notice-form:not(:has(.mms-atc-x)) .mms-atc__side{display:flex;flex-direction:column;gap:8px}
  #ajaxpro-notice-form .mms-atc__checkout{min-height:50px}
  #ajaxpro-notice-form .mms-atc-x{margin-top:16px;padding:12px}
  #ajaxpro-notice-form .mms-atc-x__list{grid-template-columns:1fr;gap:8px}
  #ajaxpro-notice-form .mms-atc-x__item{grid-template-columns:48px minmax(0,1fr) auto;gap:10px;padding:8px}
  .mms-atc-x__img img{width:48px;height:48px}
  #ajaxpro-notice-form .mms-atc-x__btn{min-width:80px}
}