/* =========================================================
   WIDGET — FAB, модалки (callback + quick-view)
   ========================================================= */

/* ============ 1. FAB ============ */
.fab{
  position:fixed;
  right:22px;
  bottom:22px;
  z-index:900;
  display:flex;
  flex-direction:column-reverse;
  gap:10px;
  align-items:flex-end;
  pointer-events:none;
}
.fab > *{pointer-events:auto}
.fab__list{
  display:flex;
  flex-direction:column;
  gap:10px;
  opacity:0;
  pointer-events:none;
  transform:translateY(10px);
  transition:opacity .22s var(--ease), transform .22s var(--ease);
}
.fab.is-open .fab__list{
  opacity:1;
  pointer-events:auto;
  transform:translateY(0);
}
.fab__item{
  position:relative;
  display:flex;
  align-items:center;
}
.fab__btn{
  width:52px;
  height:52px;
  border-radius:50%;
  border:none;
  background:var(--ink);
  color:var(--cream);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  box-shadow:0 10px 26px rgba(0,0,0,.22);
  padding:0;
  transition:transform .22s var(--ease), background .22s var(--ease), box-shadow .22s var(--ease);
  -webkit-tap-highlight-color:transparent;
}
.fab__btn svg{
  width:22px;
  height:22px;
  display:block;
  flex:0 0 auto;
}
.fab__btn:hover,
.fab__btn:focus-visible{
  background:var(--brass);
  transform:translateY(-2px) scale(1.04);
  box-shadow:0 14px 30px rgba(0,0,0,.28);
}
.fab__btn:focus-visible{
  outline:2px solid var(--brass-2);
  outline-offset:3px;
}
.fab__tip{
  position:absolute;
  right:64px;
  top:50%;
  transform:translateY(-50%) translateX(8px);
  background:var(--ink);
  color:var(--cream);
  padding:9px 14px;
  font-size:12px;
  font-weight:500;
  letter-spacing:.02em;
  border-radius:6px;
  white-space:nowrap;
  opacity:0;
  pointer-events:none;
  transition:opacity .2s var(--ease), transform .2s var(--ease);
}
.fab__tip::after{
  content:"";
  position:absolute;
  right:-5px;
  top:50%;
  transform:translateY(-50%);
  border:5px solid transparent;
  border-left-color:var(--ink);
}
.fab__btn:hover ~ .fab__tip,
.fab__btn:focus-visible ~ .fab__tip{
  opacity:1;
  transform:translateY(-50%) translateX(0);
}
.fab__toggle{
  width:58px;
  height:58px;
  background:var(--brass);
  color:var(--ink);
}
.fab__toggle:hover,
.fab__toggle:focus-visible{background:var(--brass-2)}
.fab__toggle-icon{transition:transform .3s var(--ease)}
.fab.is-open .fab__toggle-icon{transform:rotate(45deg)}
.fab__btn--wa{background:#25D366;color:#fff}
.fab__btn--wa:hover,
.fab__btn--wa:focus-visible{background:#1ebe5a;color:#fff}
.fab__btn--tg{background:#29A9EB;color:#fff}
.fab__btn--tg:hover,
.fab__btn--tg:focus-visible{background:#1e93d1;color:#fff}
.fab__btn--mail,
.fab__btn--top{background:var(--ink-2)}
@media (max-width:700px){
  .fab{right:14px;bottom:14px;gap:8px}
  .fab__btn{width:46px;height:46px}
  .fab__btn svg{width:19px;height:19px}
  .fab__toggle{width:52px;height:52px}
  .fab__tip{display:none}
}

/* ============ 2. CALLBACK-МОДАЛКА (.cb) ============ */
.cb{
  position:fixed;
  inset:0;
  z-index:1000;
  display:none;
  align-items:center;
  justify-content:center;
  padding:20px;
}
.cb.is-open{display:flex}
.cb__overlay{
  position:absolute;
  inset:0;
  background:rgba(14,13,11,.72);
  -webkit-backdrop-filter:blur(6px);
  backdrop-filter:blur(6px);
  border:0;
  padding:0;
  cursor:pointer;
}
.cb__panel{
  position:relative;
  z-index:1;
  width:100%;
  max-width:440px;
  background:var(--cream);
  color:var(--ink);
  padding:44px 40px 40px;
  border-radius:4px;
  box-shadow:0 30px 80px rgba(0,0,0,.35);
  animation:cbIn .28s var(--ease);
  max-height:calc(100vh - 40px);
  overflow-y:auto;
}
@keyframes cbIn{
  from{opacity:0;transform:translateY(14px) scale(.98)}
  to{opacity:1;transform:translateY(0) scale(1)}
}
.cb__close{
  position:absolute;
  right:10px;
  top:10px;
  width:44px;
  height:44px;
  border:none;
  background:transparent;
  font-size:24px;
  line-height:1;
  color:var(--muted-d);
  cursor:pointer;
  border-radius:50%;
  display:grid;
  place-items:center;
  padding:0;
  transition:background .2s var(--ease), color .2s var(--ease);
}
.cb__close:hover,
.cb__close:focus-visible{
  background:rgba(0,0,0,.06);
  color:var(--ink);
}
.cb__close:focus-visible{
  outline:2px solid var(--brass);
  outline-offset:2px;
}
.cb__title{
  font-family:'Cormorant Garamond',Georgia,serif;
  font-weight:500;
  font-size:30px;
  line-height:1.15;
  margin:0 0 8px;
  letter-spacing:-.01em;
  color:var(--ink);
}
.cb__sub{
  font-size:14px;
  color:var(--muted-d);
  margin:0 0 26px;
  font-weight:300;
  line-height:1.55;
}
.cb .field{margin-bottom:16px}
.cb .btn{
  width:100%;
  justify-content:center;
}
@media (max-width:520px){
  .cb__panel{padding:36px 22px 30px;max-width:100%;border-radius:0}
  .cb{padding:0}
}

/* ============ 3. QUICK-VIEW МОДАЛКА (.qmodal) ============ */
.qmodal{
  position:fixed;
  inset:0;
  z-index:1001;
  display:none;
  align-items:center;
  justify-content:center;
  padding:20px;
}
.qmodal.is-open{display:flex}
.qmodal__overlay{
  position:absolute;
  inset:0;
  background:rgba(14,13,11,.72);
  -webkit-backdrop-filter:blur(6px);
  backdrop-filter:blur(6px);
  border:0;
  padding:0;
  cursor:pointer;
}
.qmodal__panel{
  position:relative;
  z-index:1;
  width:100%;
  max-width:920px;
  background:var(--cream);
  color:var(--ink);
  border-radius:4px;
  box-shadow:0 30px 80px rgba(0,0,0,.35);
  animation:qmIn .3s var(--ease);
  max-height:calc(100vh - 40px);
  overflow-y:auto;
}
@keyframes qmIn{
  from{opacity:0;transform:translateY(14px) scale(.98)}
  to{opacity:1;transform:translateY(0) scale(1)}
}
.qmodal__close{
  position:absolute;
  right:12px;
  top:12px;
  z-index:5;
  width:44px;
  height:44px;
  border:none;
  background:rgba(14,13,11,.55);
  color:var(--cream);
  font-size:24px;
  line-height:1;
  cursor:pointer;
  border-radius:50%;
  display:grid;
  place-items:center;
  padding:0;
  transition:background .2s var(--ease);
}
.qmodal__close:hover,
.qmodal__close:focus-visible{background:var(--ink)}
.qmodal__close:focus-visible{
  outline:2px solid var(--brass-2);
  outline-offset:2px;
}
.qmodal__grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  align-items:stretch;
}
.qmodal__media{
  overflow:hidden;
  background:var(--ink);
  aspect-ratio:1/1;
}
.qmodal__media img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.qmodal__body{
  padding:44px 40px;
  display:flex;
  flex-direction:column;
  gap:16px;
}
.qmodal__body .eyebrow{margin-bottom:0}
.qmodal__title{
  font-family:'Cormorant Garamond',Georgia,serif;
  font-weight:500;
  font-size:32px;
  line-height:1.15;
  margin:0;
  color:var(--ink);
  letter-spacing:-.01em;
}
.qmodal__desc{
  font-size:15px;
  font-weight:300;
  line-height:1.7;
  color:var(--muted-d);
  margin:0;
}
.qmodal__price{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:16px;
  padding:20px 0;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  margin:8px 0;
}
.qmodal__price b{
  font-family:'Cormorant Garamond',Georgia,serif;
  font-size:26px;
  font-weight:500;
  color:var(--ink);
}
.qmodal__price span{
  font-size:11px;
  font-weight:500;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--muted-d);
}
.qmodal__actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:auto;
}
.qmodal__actions .btn{flex:1 1 auto}
@media (max-width:820px){
  .qmodal__grid{grid-template-columns:1fr}
  .qmodal__media{aspect-ratio:4/3}
  .qmodal__body{padding:32px 24px}
  .qmodal__title{font-size:26px}
  .qmodal{padding:0;align-items:flex-end}
  .qmodal__panel{max-height:92vh;border-radius:12px 12px 0 0}
}

/* ============ 4. LOCK SCROLL + INERT + FOCUS ============ */
body.is-locked{
  overflow:hidden;
  padding-right:var(--scrollbar-width,0);
}
[inert]{
  pointer-events:none;
  user-select:none;
}
.cb a:focus-visible,
.cb button:focus-visible,
.cb input:focus-visible,
.qmodal a:focus-visible,
.qmodal button:focus-visible,
.fab button:focus-visible,
.fab a:focus-visible{
  outline:2px solid var(--brass);
  outline-offset:2px;
}

/* ============ 5. REDUCED MOTION ============ */
@media (prefers-reduced-motion:reduce){
  .fab__list,
  .fab__toggle-icon,
  .cb__panel,
  .qmodal__panel{
    transition:none !important;
    animation:none !important;
  }
}

/* ============ 6. SOCIALS ============ */
.socials{
  display:flex;
  gap:14px;
  flex-wrap:wrap;
  list-style:none;
  margin:0;
  padding:0;
}
.socials__link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:40px;
  height:40px;
  border:1px solid var(--line-dark);
  color:var(--muted-l);
  transition:border-color .3s var(--ease), color .3s var(--ease);
}
.socials__link:hover{
  border-color:var(--brass);
  color:var(--brass-2);
}
.socials__link svg{
  width:18px;
  height:18px;
}