/* ══════════════════════════════════════════════════════════════════════
   IBERLUFFA — Chat Widget (módulo independiente)
   ──────────────────────────────────────────────────────────────────────
   Todo dentro del prefijo `.cw-`. Para eliminarlo: borra este archivo y
   `chat-widget.js`, y quita las dos referencias en los .html.
   ══════════════════════════════════════════════════════════════════════ */

:root{
  --cw-v:#274001;
  --cw-vl:#A2BF6A;
  --cw-d:#CD934A;
  --cw-cr:#F4E9D3;
  --cw-save:#4F6E20;
  --cw-bg:#FFFFFF;
  --cw-bg-soft:#FAF7EE;
  --cw-text:#274001;
  --cw-text-soft:#7A8467;
  --cw-divider:#EEE6D2;
  --cw-hh-mob:58px;
}

/* ── FAB ───────────────────────────────────────────────────────────── */
.cw-fab{
  position:fixed;
  right:22px; bottom:22px;
  width:54px; height:54px;
  border-radius:50%;
  background:var(--cw-v);
  border:none;
  cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 14px 30px -8px rgba(39,64,1,.45), 0 4px 10px rgba(39,64,1,.18);
  z-index:9500;
  -webkit-tap-highlight-color:transparent;
  transition:transform .25s cubic-bezier(.34,1.56,.64,1), background .25s ease, opacity .25s ease;
}
.cw-fab:hover{ transform:scale(1.06); background:var(--cw-save); }
.cw-fab:active{ transform:scale(.96); }
.cw-fab svg{ width:34px; height:34px; fill:var(--cw-cr); }
/* Aro pulsante: usa SÓLO transform+opacity (compositor GPU) y se pausa al
   hacer scroll para no competir con el navegador por el hilo principal.
   Antes había también un `cwPulse` que animaba box-shadow → eso en iOS
   Safari causaba repaints de la sombra borrosa cada frame y empeoraba el
   rendimiento de todo el scroll. */
.cw-fab::after{
  content:''; position:absolute; inset:0; border-radius:50%;
  border:2px solid var(--cw-vl);
  opacity:0; pointer-events:none;
  animation:cwRipple 3.6s ease-out infinite;
}
@keyframes cwRipple{
  0%   { opacity:.45; transform:scale(1); }
  70%  { opacity:0;   transform:scale(1.5); }
  100% { opacity:0;   transform:scale(1.5); }
}
/* Pausar el aro durante el scroll: el navegador puede dedicar el GPU
   exclusivamente al scroll y vuelve a animarlo al soltar. */
html.is-scrolling .cw-fab::after{ animation-play-state:paused; }
.cw-fab.cw-open{ animation:none; }
.cw-fab.cw-open svg.cw-wa{ display:none; }
.cw-fab.cw-open svg.cw-close{ display:block; }
.cw-fab svg.cw-close{ display:none; width:26px; height:26px; fill:var(--cw-cr); }

/* Fallback JS para navegadores sin :has() */
.cw-fab.cw-overlay-hidden{
  opacity:0 !important;
  pointer-events:none !important;
  transform:scale(.5) !important;
  animation:none !important;
}

/* ── Ocultar FAB cuando hay otros overlays abiertos (popups, carrito,
   búsqueda, menú móvil, etc.). Usa :has() que ya soportan los browsers
   modernos (Chrome 105+, Safari 15.4+, Firefox 121+). */
body:has(.cart-drawer.open),
body:has(.user-panel.open),
body:has(.info-popup.open),
body:has(.faq-modal.faq-open),
body:has(.srch-overlay.open),
body:has(.mob-drawer.open),
body:has(.welcome-modal.open),
body:has(#fdDrawer.open) {
  /* nada aquí: usamos selector compuesto debajo */
}
body:has(.cart-drawer.open) .cw-fab,
body:has(.user-panel.open) .cw-fab,
body:has(.info-popup.open) .cw-fab,
body:has(.faq-modal.faq-open) .cw-fab,
body:has(.srch-overlay.open) .cw-fab,
body:has(.mob-drawer.open) .cw-fab,
body:has(.welcome-modal.open) .cw-fab,
body:has(#fdDrawer.open) .cw-fab {
  opacity:0 !important;
  pointer-events:none !important;
  transform:scale(.5) !important;
  animation:none !important;
}

/* ── BACKDROP ──────────────────────────────────────────────────────── */
.cw-backdrop{
  position:fixed; inset:0;
  background:transparent;
  backdrop-filter:blur(2px);
  -webkit-backdrop-filter:blur(2px);
  opacity:0; pointer-events:none;
  transition:opacity .22s ease-out;
  z-index:9490;
}
.cw-backdrop.cw-vis{ opacity:1; pointer-events:all; }

/* ── PANEL ─────────────────────────────────────────────────────────── */
.cw-panel{
  position:fixed;
  right:24px; bottom:96px;
  width:330px; height:min(560px, calc(100vh - 130px));
  background:var(--cw-bg);
  border-radius:22px;
  overflow:hidden;
  box-shadow:0 28px 56px -16px rgba(39,64,1,.35), 0 8px 20px rgba(39,64,1,.14);
  z-index:9495;
  opacity:0; pointer-events:none;
  /* Estado inicial: "comprimido" en el FAB → animación de fly desde abajo derecha */
  transform-origin:bottom right;
  transform:translate(40px, 80px) scale(.05);
  transition:opacity .35s ease-out, transform .55s cubic-bezier(.22,1.36,.36,1);
  display:flex; flex-direction:column;
  font-family:'Karla', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  color:var(--cw-text);
}
.cw-panel.cw-open{ opacity:1; pointer-events:all; transform:translate(0,0) scale(1); }

.cw-panel::after{
  content:''; position:absolute;
  right:30px; bottom:-7px;
  width:14px; height:14px;
  background:var(--cw-bg);
  transform:rotate(45deg);
  z-index:-1;
  box-shadow:6px 6px 14px -4px rgba(39,64,1,.22);
}

/* Header */
.cw-header{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 14px;
  background:var(--cw-bg);
  border-bottom:1px solid var(--cw-divider);
  flex-shrink:0;
  z-index:9;
}
.cw-header-l, .cw-header-r{ display:flex; align-items:center; gap:6px; min-width:36px; }
.cw-header-c{ flex:1; text-align:center; }
.cw-header-c h2{
  font-size:16px; font-weight:700; color:var(--cw-text);
  margin:0; letter-spacing:.01em;
}
.cw-icon-btn{
  width:34px; height:34px; border-radius:50%;
  background:var(--cw-bg-soft); border:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  -webkit-tap-highlight-color:transparent;
  transition:background .18s ease, transform .2s ease;
}
.cw-icon-btn:hover{ background:rgba(39,64,1,.08); }
.cw-icon-btn:active{ transform:scale(.92); }
.cw-icon-btn svg{ width:16px; height:16px; fill:none; stroke:var(--cw-v); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.cw-icon-btn.cw-close-btn svg{ stroke-width:2.4; }

/* Body */
.cw-body{
  flex:1; overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  background:var(--cw-bg);
}
.cw-body::-webkit-scrollbar{ width:0; }

.cw-tab-panel{ display:none; padding:6px 0 10px; }
.cw-tab-panel.cw-active{ display:block; animation:cwFadeIn .25s ease-out; }
@keyframes cwFadeIn{
  from{ opacity:0; transform:translateY(6px); }
  to  { opacity:1; transform:translateY(0); }
}

.cw-section-lbl{
  font-size:11.5px; font-weight:700;
  color:var(--cw-text-soft);
  text-transform:uppercase;
  letter-spacing:.08em;
  padding:14px 18px 6px;
}

/* NOVEDADES */
.cw-status-row{
  display:flex; align-items:center; gap:14px;
  padding:9px 18px;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transition:background .15s ease;
}
.cw-status-row:active{ background:var(--cw-bg-soft); }
.cw-status-avatar{
  position:relative;
  width:50px; height:50px; flex-shrink:0;
  border-radius:50%;
  background:#fff;
  overflow:hidden;
}
.cw-status-avatar img{ width:100%; height:100%; object-fit:cover; }
.cw-status-info{ flex:1; min-width:0; }
.cw-status-name{ font-size:14.5px; font-weight:600; color:var(--cw-text); margin:0 0 2px; }
.cw-status-sub{
  font-size:12.5px; color:var(--cw-text-soft);
  margin:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.cw-status-avatar.cw-ring{
  padding:2.5px;
  background:linear-gradient(45deg, var(--cw-vl), var(--cw-save));
}
.cw-status-avatar.cw-ring img{
  border-radius:50%; border:2px solid var(--cw-bg);
  width:calc(100% - 4px); height:calc(100% - 4px);
}

/* LLAMADAS */
.cw-call-row{
  display:flex; align-items:center; gap:12px;
  padding:10px 18px;
  cursor:pointer; text-decoration:none; color:inherit;
  -webkit-tap-highlight-color:transparent;
  transition:background .15s ease;
}
.cw-call-row:active{ background:var(--cw-bg-soft); }
.cw-call-avatar{
  width:46px; height:46px; flex-shrink:0;
  border-radius:50%;
  background:#fff;
  overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  border:1px solid var(--cw-divider);
}
.cw-call-avatar img{ width:100%; height:100%; object-fit:contain; padding:5px; }
.cw-call-info{ flex:1; min-width:0; }
.cw-call-name{ font-size:14.5px; font-weight:600; color:var(--cw-text); margin:0 0 2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cw-call-meta{ display:flex; align-items:center; gap:6px; font-size:12px; color:var(--cw-text-soft); }
.cw-call-status{ display:inline-flex; align-items:center; gap:5px; font-weight:500; }
.cw-call-status.cw-online{ color:var(--cw-save); }
.cw-call-status.cw-offline{ color:#A1A294; }
.cw-call-status::before{
  content:''; width:7px; height:7px; border-radius:50%; background:currentColor;
}
.cw-call-status.cw-online::before{ animation:cwBlink 1.6s ease-in-out infinite; }
@keyframes cwBlink{
  0%,100%{ opacity:1; transform:scale(1); }
  50%    { opacity:.5; transform:scale(.85); }
}
.cw-call-btn{
  width:34px; height:34px; border-radius:50%;
  background:transparent; border:none;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; flex-shrink:0;
  text-decoration:none;
  transition:background .15s ease, transform .2s ease;
  -webkit-tap-highlight-color:transparent;
}
.cw-call-btn:hover{ background:var(--cw-bg-soft); }
.cw-call-btn:active{ transform:scale(.9); }
.cw-call-btn svg{ width:20px; height:20px; fill:none; stroke:var(--cw-v); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }

/* CHATS */
.cw-chat-row{
  display:flex; align-items:center; gap:12px;
  padding:11px 18px;
  cursor:pointer; text-decoration:none; color:inherit;
  -webkit-tap-highlight-color:transparent;
  transition:background .15s ease;
}
.cw-chat-row:active{ background:var(--cw-bg-soft); }
.cw-chat-row + .cw-chat-row{ border-top:1px solid var(--cw-divider); }
.cw-chat-avatar{
  width:46px; height:46px; flex-shrink:0;
  border-radius:50%;
  background:#fff;
  overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  border:1px solid var(--cw-divider);
}
.cw-chat-avatar img{ width:70%; height:70%; object-fit:contain; }
.cw-chat-info{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.cw-chat-top{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
.cw-chat-name{ font-size:14.5px; font-weight:600; color:var(--cw-text); margin:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cw-chat-time{ font-size:11.5px; color:var(--cw-text-soft); flex-shrink:0; }
.cw-chat-time.cw-unread{ color:var(--cw-save); font-weight:600; }
.cw-chat-bottom{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
.cw-chat-preview{ font-size:12.5px; color:var(--cw-text-soft); margin:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cw-chat-badge{
  min-width:19px; height:19px; padding:0 6px;
  border-radius:10px;
  background:var(--cw-save);
  color:#fff; font-size:11px; font-weight:600;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}

/* PERFIL */
.cw-profile-head{
  display:flex; flex-direction:column; align-items:center;
  padding:20px 20px 16px;
  background:var(--cw-bg);
}
.cw-profile-avatar{
  width:96px; height:96px;
  border-radius:50%;
  overflow:hidden;
  background:#fff;
  cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:transform .25s ease;
  -webkit-tap-highlight-color:transparent;
  border:1px solid var(--cw-divider);
  box-shadow:0 4px 14px -4px rgba(39,64,1,.18);
}
.cw-profile-avatar:hover{ transform:scale(1.03); }
.cw-profile-avatar img{ width:70%; height:70%; object-fit:contain; }
.cw-profile-name{
  font-size:19px; font-weight:700; color:var(--cw-text);
  margin:12px 0 3px; letter-spacing:.01em;
  font-family:var(--ff-display, 'CooperBlack'), Georgia, serif;
  text-transform:uppercase;
}
.cw-profile-tag{ font-size:12px; color:var(--cw-text-soft); margin:0; text-align:center; }

.cw-info-block-title{
  font-size:10.5px; font-weight:700;
  color:var(--cw-text-soft);
  text-transform:uppercase;
  letter-spacing:.1em;
  padding:14px 18px 6px;
  margin:0;
}
.cw-info-block{
  margin:0 14px 8px;
  background:var(--cw-bg-soft);
  border-radius:14px;
  overflow:hidden;
  border:1px solid var(--cw-divider);
}
.cw-info-item{
  display:flex; align-items:center; gap:12px;
  padding:11px 14px;
  text-decoration:none; color:var(--cw-text);
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transition:background .15s ease;
}
.cw-info-item + .cw-info-item{ border-top:1px solid var(--cw-divider); }
.cw-info-item:active{ background:rgba(39,64,1,.06); }
.cw-info-item .cw-info-ico{
  width:30px; height:30px; flex-shrink:0; border-radius:8px;
  background:var(--cw-cr);
  display:flex; align-items:center; justify-content:center;
}
.cw-info-item .cw-info-ico svg{ width:16px; height:16px; fill:none; stroke:var(--cw-v); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.cw-info-item .cw-info-txt{ flex:1; min-width:0; }
.cw-info-item .cw-info-h{ font-size:13.5px; color:var(--cw-text); margin:0 0 2px; font-weight:600; }
.cw-info-item .cw-info-p{ font-size:11.5px; color:var(--cw-text-soft); margin:0; line-height:1.4; }
.cw-info-item .cw-info-chevron{
  width:12px; height:12px; flex-shrink:0;
  fill:none; stroke:var(--cw-text-soft); stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round;
  opacity:.6;
}

/* BOTTOM NAV */
.cw-bottomnav{
  display:flex; align-items:stretch;
  background:var(--cw-bg);
  border-top:1px solid var(--cw-divider);
  padding:5px 6px 8px;
  flex-shrink:0;
  z-index:5;
}
.cw-tab-btn{
  flex:1;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
  padding:5px 4px;
  background:none; border:none; cursor:pointer;
  color:var(--cw-text-soft);
  -webkit-tap-highlight-color:transparent;
  transition:color .18s ease, transform .15s ease;
  position:relative;
  font-family:inherit;
}
.cw-tab-btn:active{ transform:scale(.93); }
.cw-tab-btn svg{ width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.cw-tab-btn span{ font-size:10.5px; font-weight:500; letter-spacing:.01em; }
.cw-tab-btn.cw-active{ color:var(--cw-v); font-weight:700; }
.cw-tab-btn.cw-active svg{ stroke-width:2.2; }
.cw-tab-badge{
  position:absolute;
  top:0; left:50%; margin-left:6px;
  min-width:17px; height:17px; padding:0 5px;
  border-radius:9px;
  background:var(--cw-d);
  color:#fff; font-size:10.5px; font-weight:600;
  display:flex; align-items:center; justify-content:center;
  border:2px solid var(--cw-bg);
}

/* LIGHTBOX */
.cw-lightbox{
  position:fixed; inset:0;
  background:rgba(39,64,1,.92);
  opacity:0; pointer-events:none;
  transition:opacity .2s ease-out;
  z-index:9999;
  display:flex; align-items:center; justify-content:center;
  padding:24px;
}
.cw-lightbox.cw-vis{ opacity:1; pointer-events:all; }
.cw-lightbox img{
  max-width:100%; max-height:100%;
  border-radius:12px; object-fit:contain;
  background:#fff; padding:12px;
  transform:scale(.9);
  transition:transform .25s cubic-bezier(.22,1.36,.36,1);
}
.cw-lightbox.cw-vis img{ transform:scale(1); }
.cw-lightbox-close{
  position:absolute; top:20px; right:20px;
  width:38px; height:38px; border-radius:50%;
  background:rgba(255,255,255,.16);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  border:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  -webkit-tap-highlight-color:transparent;
}
.cw-lightbox-close svg{ width:16px; height:16px; stroke:#fff; stroke-width:2.4; fill:none; }

/* ══════ EXPERIMENTAL OVERLAY (sobre el panel al abrir) ══════════════ */
.cw-experimental{
  position:absolute; inset:0;
  /* Verde sólido arriba que se va volviendo transparente hacia abajo,
     para que se intuya el chat detrás de la zona inferior. */
  background:linear-gradient(180deg,
    rgba(39,64,1,.94) 0%,
    rgba(39,64,1,.92) 45%,
    rgba(39,64,1,.78) 70%,
    rgba(39,64,1,.55) 88%,
    rgba(39,64,1,.32) 100%);
  backdrop-filter:blur(3px);
  -webkit-backdrop-filter:blur(3px);
  opacity:0; pointer-events:none;
  transition:opacity .3s ease-out;
  z-index:50;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  padding:24px 22px;
  text-align:center;
  color:#fff;
}
.cw-experimental.cw-vis{ opacity:1; pointer-events:all; }
.cw-experimental.cw-hide{ opacity:0; pointer-events:none; transform:scale(.96); }

/* Botón cerrar del overlay (esquina sup. derecha) — SOLO MÓVIL.
   En desktop el FAB se convierte en X y permite cerrar el panel, pero en
   móvil el FAB se oculta cuando el panel está abierto, así que sin esta
   X dentro del overlay no había forma de salir sin pulsar "Ver widget". */
.cw-exp-close{
  display:none;
  position:absolute;
  top:14px; right:14px;
  width:38px; height:38px;
  border-radius:50%;
  background:rgba(255,255,255,.18);
  border:1px solid rgba(255,255,255,.28);
  cursor:pointer;
  align-items:center; justify-content:center;
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  transition:background .2s ease, transform .3s cubic-bezier(.22,1.2,.36,1);
  -webkit-tap-highlight-color:transparent;
  z-index:2;
}
.cw-exp-close:hover{ background:rgba(255,255,255,.3); transform:rotate(90deg); }
.cw-exp-close:active{ transform:scale(.9); }
.cw-exp-close svg{
  width:16px; height:16px;
  fill:none; stroke:#fff;
  stroke-width:2.2; stroke-linecap:round;
}
@media (max-width:768px){
  .cw-exp-close{ display:flex; }
}
.cw-exp-badge{
  display:inline-flex; align-items:center; gap:7px;
  padding:5px 12px 5px 10px;
  background:rgba(255,255,255,.15);
  border:1px solid rgba(255,255,255,.3);
  border-radius:999px;
  font-size:10px; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:#fff;
  margin-bottom:18px;
}
.cw-exp-badge::before{
  content:''; width:7px; height:7px; border-radius:50%;
  background:var(--cw-d);
  box-shadow:0 0 0 0 rgba(205,147,74,.7);
  animation:cwExpDot 1.5s ease-in-out infinite;
}
@keyframes cwExpDot{
  0%,100%{ box-shadow:0 0 0 0 rgba(205,147,74,.7); }
  50%    { box-shadow:0 0 0 7px rgba(205,147,74,0); }
}
.cw-exp-title{
  font-family:var(--ff-display, 'CooperBlack'), Georgia, serif;
  font-size:22px; font-weight:400;
  text-transform:uppercase;
  letter-spacing:.02em; line-height:1.1;
  margin:0 0 12px;
}
.cw-exp-title strong{ color:var(--cw-vl); font-weight:400; }
.cw-exp-text{
  font-size:13px; line-height:1.6;
  color:rgba(255,255,255,.92);
  margin:0 0 22px; max-width:280px;
}
.cw-exp-text strong{ color:var(--cw-vl); font-weight:600; }
.cw-exp-btn{
  appearance:none; cursor:pointer;
  display:inline-flex; align-items:center; gap:8px;
  height:42px; padding:0 22px;
  border-radius:999px;
  background:var(--cw-cr); color:var(--cw-v);
  border:none;
  font-size:12.5px; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase;
  font-family:inherit;
  box-shadow:0 10px 24px -6px rgba(0,0,0,.3);
  transition:transform .2s ease, background .2s ease, box-shadow .2s ease;
  -webkit-tap-highlight-color:transparent;
}
.cw-exp-btn svg{ width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.cw-exp-btn:hover{ transform:translateY(-2px); background:#fff; box-shadow:0 14px 28px -6px rgba(0,0,0,.35); }
.cw-exp-btn:active{ transform:translateY(0); }
.cw-exp-author{
  margin-top:18px;
  font-size:10.5px; letter-spacing:.06em;
  color:rgba(255,255,255,.62);
}
.cw-exp-author strong{ color:#fff; font-weight:600; }

/* ══════ MOBILE: panel debajo del header, esquinas redondeadas arriba ══════ */
@media (max-width:768px){
  .cw-fab{ width:46px; height:46px; right:14px; bottom:14px; }
  .cw-fab svg{ width:26px; height:26px; }
  .cw-fab.cw-open{ opacity:0; pointer-events:none; transform:scale(.6); }

  /* En páginas con el tab-switcher (tienda), subimos el FAB para que no se
     superponga visualmente con los tabs flotantes. */
  body:has(.tab-switcher) .cw-fab{ bottom:84px; }

  .cw-panel{
    right:0; left:0; bottom:0;
    top:var(--cw-hh-mob);
    width:100%; height:auto;
    border-radius:20px 20px 0 0;
    box-shadow:0 -16px 40px -8px rgba(39,64,1,.25);
    transform-origin:bottom right;
    transform:translate(40vw, 60vh) scale(.1);
  }
  .cw-panel.cw-open{ transform:translate(0,0) scale(1); }
  .cw-panel::after{ display:none; }

  .cw-header{ padding:14px 14px 12px; }
  .cw-backdrop{ top:var(--cw-hh-mob); }

  .cw-exp-title{ font-size:20px; }
  .cw-exp-text{ font-size:12.5px; }
}

@media (max-height:640px) and (min-width:769px){
  .cw-panel{ height:calc(100vh - 140px); }
}