/* WineHub chat bubble: bottom right, above the phone tab bar and the wine page's buy bar. A 48 px round icon at every
   width (its name is in aria-label); it steps aside while the page scrolls down and comes back on scroll up or at rest */
.whch-btn { position: fixed; z-index: 60; right: 16px; bottom: 20px; display: inline-grid; place-items: center; width: 48px; height: 48px; padding: 0; border: 0; border-radius: 50%; background: #18181B; color: #fff; box-shadow: 0 10px 28px -10px rgb(0 0 0 / .45); cursor: pointer; transition: opacity 180ms ease, transform 220ms cubic-bezier(.2, .8, .2, 1); }
.whch-btn svg { width: 22px; height: 22px; }
.whch-btn:focus-visible { outline: 2px solid #18181B; outline-offset: 2px; box-shadow: 0 0 0 2px #fff; }
.whch-btn.is-away { opacity: 0; transform: translateY(16px) scale(.8); pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .whch-btn { transition: opacity 120ms linear; } .whch-btn.is-away { transform: none; } }
/* the buy bar is up (theme winehub.js sets has-buybar and its height): the bubble and the panel go above it */
body.has-buybar .whch-btn { bottom: calc(var(--wh-buybar-h, 72px) + 12px); }
body.has-buybar .whch-panel { bottom: calc(var(--wh-buybar-h, 72px) + 72px); }
.whch-badge { position: absolute; top: -4px; right: -4px; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: #BE2130; color: #fff; font: 700 11px/20px system-ui, sans-serif; text-align: center; }
.whch-badge[hidden], .whch-panel[hidden] { display: none; }
.whch-panel { position: fixed; z-index: 61; right: 16px; bottom: 80px; display: flex; flex-direction: column; width: min(360px, calc(100vw - 32px)); height: min(520px, calc(100dvh - 120px)); overflow: hidden; background: #fff; border-radius: 16px; box-shadow: 0 24px 60px -16px rgb(0 0 0 / .4); font-family: "Onest", system-ui, sans-serif; }
.whch-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 14px 16px; background: #18181B; color: #fff; }
.whch-head div { display: grid; gap: 2px; }
.whch-head small { color: rgb(255 255 255 / .75); font-size: .75rem; }
.whch-x { flex: none; width: 44px; height: 44px; margin: -6px -6px -6px 0; border: 0; border-radius: 50%; background: rgb(255 255 255 / .12); color: #fff; font-size: 1.25rem; cursor: pointer; }
.whch-list { flex: 1; overflow: auto; list-style: none; margin: 0; padding: 14px; display: flex; flex-direction: column; gap: 8px; background: #F4F4F5; }
.whch-msg { max-width: 82%; padding: 9px 12px; border-radius: 14px; font-size: .875rem; line-height: 1.4; white-space: pre-wrap; overflow-wrap: anywhere; }
.whch-msg--out { align-self: flex-start; background: #fff; color: #18181B; border-bottom-left-radius: 4px; }
.whch-msg--in { align-self: flex-end; background: #BE2130; color: #fff; border-bottom-right-radius: 4px; }
.whch-form { display: grid; grid-template-columns: 1fr auto; gap: 8px; padding: 10px; border-top: 1px solid #E4E4E7; }
/* step 1: the ways to reach us (as on Doina Vin) */
.whch-home { flex: 1; overflow: auto; display: grid; align-content: start; gap: 10px; padding: 16px; background: #F4F4F5; }
.whch-home[hidden], .whch-list[hidden], .whch-form[hidden], .whch-back[hidden] { display: none; }
.whch-row { display: flex; align-items: center; gap: 12px; width: 100%; padding: 14px 16px; border: 1px solid #E4E4E7; border-radius: 12px; background: #fff; color: #18181B; text-align: left; text-decoration: none; font: inherit; cursor: pointer; }
.whch-row:hover { border-color: #18181B; }
.whch-row:focus-visible, .whch-chip:focus-visible { outline: 2px solid #18181B; outline-offset: 2px; }
.whch-row svg { flex: none; width: 24px; height: 24px; }
.whch-row span { display: grid; gap: 2px; }
.whch-row b { font-size: .9375rem; }
.whch-row small { color: #71717A; font-size: .8125rem; }
.whch-row--chat { border-color: #18181B; box-shadow: inset 0 0 0 1px #18181B; }
.whch-or { margin: 6px 0 0; color: #71717A; font-size: .8125rem; }
.whch-chips { display: grid; grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); gap: 8px; }
.whch-chip { display: grid; place-items: center; min-height: 44px; border: 1px solid #E4E4E7; border-radius: 12px; background: #fff; color: #18181B; font-size: .875rem; font-weight: 600; text-decoration: none; }
.whch-chip--whatsapp { color: #128C4A; }
.whch-chip--telegram { color: #1D7FB8; }
.whch-chip--viber { color: #6F4BC4; }
.whch-chip:hover { border-color: currentColor; }
.whch-back { flex: none; width: 44px; height: 44px; margin: -6px -4px -6px -6px; border: 0; border-radius: 50%; background: rgb(255 255 255 / .12); color: #fff; font-size: 1.375rem; line-height: 1; cursor: pointer; }
.whch-who { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.whch-who[hidden] { display: none; }
.whch-name, .whch-text { width: 100%; min-height: 44px; padding: 10px 12px; border: 1px solid #D4D4D8; border-radius: 10px; font: 400 16px/1.35 "Onest", system-ui, sans-serif; resize: none; }
.whch-name:focus, .whch-text:focus { outline: none; border-color: #BE2130; box-shadow: 0 0 0 2px rgb(190 33 48 / .15); }
.whch-send { align-self: end; min-height: 44px; padding: 0 16px; border: 0; border-radius: 10px; background: #BE2130; color: #fff; font: 600 .875rem "Onest", system-ui, sans-serif; cursor: pointer; }
.whch-send:disabled { opacity: .6; }
.whch-err { grid-column: 1 / -1; margin: 0; color: #8A1C26; font-size: .8125rem; }
.whch-hp { position: absolute; left: -9999px; width: 1px; height: 1px; }
@media (max-width: 699.98px) {
  .whch-btn { bottom: calc(72px + env(safe-area-inset-bottom)); }
  .single-product .whch-btn { bottom: calc(20px + env(safe-area-inset-bottom)); } /* no tab bar on the wine page */
  .whch-panel { right: 8px; left: 8px; width: auto; bottom: calc(132px + env(safe-area-inset-bottom)); height: min(480px, calc(100dvh - 180px)); }
  .single-product .whch-panel { bottom: calc(80px + env(safe-area-inset-bottom)); }
}