/* MS Fashion × Plugix demo (msfashion.plugix.ai): msfashion.com.ua's own look — white, black, a thin grotesque (Montserrat, as theirs), the
   script «Main Stream» logo in the middle of a white header, uppercase titles, red only for SALE and the hero's thin word, square buttons, photos
   on their light grey — with Plugix's stylist as a window of its own in the plugix.ai dark-glass chat style. */
:root { --ink: #111; --ink-2: #3c3c3c; --ink-3: #767676; --line: #e2e2e2; --soft: #f5f5f5; --photo: #ebebeb; --red: #e3343d;
  --ease: cubic-bezier(.22, 1, .36, 1); --spring: cubic-bezier(.2, 1.15, .32, 1);
  /* the chat (plugix.ai): dark navy glass, one lavender accent */
  --pa: #9aa6ff; --pa-2: #c3c9ff; --pa-3: #d6dbff; --pt: #eef0fb; --pt-2: rgba(222, 227, 255, .66); --pt-3: rgba(222, 227, 255, .44); }
* { box-sizing: border-box; margin: 0; }
html { scroll-behavior: smooth; scroll-padding-top: 90px; }
body { font: 15px/1.6 Montserrat, 'Helvetica Neue', Arial, sans-serif; color: var(--ink); background: #fff; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
a { color: inherit; }
img { max-width: 100%; display: block; }
button, input { font: inherit; color: inherit; }
.wrap { width: min(1380px, 100% - 60px); margin-inline: auto; }
.small { font-size: 13px; color: var(--ink-3); }
.red { color: var(--red); }
:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }

.strip { font-size: 12px; color: var(--ink-3); text-align: center; padding: 7px 16px; background: var(--soft); }
.strip b { color: var(--ink); font-weight: 600; } .strip-s { display: none; }
/* their header: the four sections on the left, the logo in the middle, a thin line under it, inset from the edges */
.top { position: sticky; top: 0; z-index: 20; background: #fff; }
.top-in { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); grid-template-areas: "nav logo r"; align-items: center; height: 80px; margin: 0 15px; padding: 0 15px; border-bottom: 1px solid #d6d6d6; }
.nav { grid-area: nav; display: flex; gap: 40px; font-size: 15px; }
.nav a { text-decoration: none; transition: color .2s; } .nav a:hover { color: var(--red); }
.logo { grid-area: logo; } .logo img { width: 175px; height: auto; filter: brightness(0); }
.top-r { grid-area: r; justify-self: end; display: flex; align-items: center; gap: 18px; }
.plx { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--ink-3); text-decoration: none; }
.plx .pmark { width: 18px; height: 18px; color: var(--ink); } .plx .x { font-weight: 300; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 10px 28px; border: 1px solid transparent; border-radius: 0; font-weight: 500; font-size: 14px; letter-spacing: .02em; line-height: 1.25; text-align: center; text-decoration: none; cursor: pointer; transition: background .25s, color .25s, border-color .25s; }
.btn.black { background: var(--ink); color: #fff; } .btn.black:hover { background: #333; }
.btn.white { background: #fff; color: var(--ink); } .btn.white:hover { background: #e9e9e9; }
.btn.line { background: none; border-color: var(--ink); } .btn.line:hover { background: var(--ink); color: #fff; }
.btn.ghost-w { background: none; color: #fff; border-color: rgba(255, 255, 255, .45); } .btn.ghost-w:hover { border-color: #fff; }
.btn.sm { min-height: 38px; padding: 6px 20px; font-size: 13px; }

h1, h2 { font-weight: 400; text-transform: uppercase; }
h2 { font-size: clamp(22px, 2.5vw, 34px); letter-spacing: .04em; line-height: 1.15; }
.sub { font-size: 15px; color: var(--ink-2); margin: 0 0 30px; max-width: 70ch; }

/* hero: their banner — her and him either side, and in the middle, on white, the stylist in thin red as their «SALE» */
.hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr) minmax(0, 1fr); min-height: min(720px, calc(100dvh - 110px)); }
.hp { position: relative; overflow: hidden; background: var(--photo); }
.hp img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.hp:hover img { transform: scale(1.03); }
.hp span { position: absolute; left: 50%; bottom: 28px; transform: translateX(-50%); background: rgba(255, 255, 255, .88); color: var(--ink); font-size: 12.5px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; padding: 10px 20px; white-space: nowrap; }
.hc { display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 48px clamp(24px, 3.4vw, 56px); }
h1 .thin { display: block; font-weight: 200; font-size: clamp(54px, 6.2vw, 96px); line-height: .95; letter-spacing: .02em; color: var(--red); }
h1 .bold { display: block; margin-top: 16px; font-weight: 600; font-size: clamp(13px, 1.15vw, 16px); letter-spacing: .28em; }
.lead { font-size: 15.5px; color: var(--ink-2); margin: 22px auto 28px; max-width: 46ch; }
.prompt { display: grid; gap: 10px; width: 100%; max-width: 520px; text-align: left; }
.prompt label { font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; }
.prompt-in { display: flex; }
.prompt-in input { flex: 1; min-width: 0; min-height: 50px; padding: 0 16px; border: 1px solid var(--ink); border-right: 0; border-radius: 0; background: #fff; font-size: 14.5px; }
.prompt-in input:focus { outline: none; box-shadow: inset 0 0 0 1px var(--ink); }
.prompt-in .btn { min-height: 50px; }
.ex { display: flex; flex-wrap: wrap; gap: 6px; }
.ex button { border: 1px solid var(--line); background: #fff; padding: 7px 12px; font-size: 12.5px; cursor: pointer; transition: border-color .2s; }
.ex button:hover { border-color: var(--ink); }
.call-l { margin-top: 20px; font-size: 13.5px; color: var(--ink-2); text-underline-offset: 4px; }
.call-l:hover { color: var(--red); }

/* brands: a line of names, each a question to the stylist */
.brands { padding: 52px 0 44px; border-bottom: 1px solid var(--line); }
.bl { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 36px; }
.bl button { border: 0; background: none; padding: 2px 0; font-weight: 300; font-size: 17px; letter-spacing: .14em; text-transform: uppercase; cursor: pointer; transition: color .2s; }
.bl button:hover { color: var(--red); }
.brands .small { text-align: center; margin-top: 24px; }

/* sections and their tiles, as the store's catalogue */
.sec { padding: 76px 0; }
.sec.alt { background: var(--soft); }
.sec.dark { background: var(--ink); color: #fff; }
.sec.dark .sub { color: rgba(255, 255, 255, .7); }
.sh { display: flex; justify-content: space-between; align-items: baseline; gap: 10px 24px; flex-wrap: wrap; margin-bottom: 28px; }
.sh a { font-size: 13.5px; color: var(--ink-2); text-underline-offset: 4px; } .sh a:hover { color: var(--red); }
.sh-l { display: flex; gap: 22px; flex-wrap: wrap; }
.sh + .sub { margin-top: -12px; }
.grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px 22px; }
.t { display: grid; align-content: start; gap: 3px; }
.ti { position: relative; display: block; aspect-ratio: 3 / 4; overflow: hidden; background: var(--photo); margin-bottom: 12px; }
.ti img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.t:hover .ti img { transform: scale(1.035); }
.off { position: absolute; top: 12px; left: 12px; background: var(--red); color: #fff; font-size: 12px; font-weight: 600; padding: 3px 9px; }
.tb { font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.tn { font-size: 14px; line-height: 1.4; color: var(--ink-2); text-decoration: none; } .tn span { color: var(--ink-3); } .tn:hover { text-decoration: underline; text-underline-offset: 3px; }
.tp { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-top: 4px; font-variant-numeric: tabular-nums; }
.tp b { font-size: 15.5px; font-weight: 600; white-space: nowrap; } .tp s { font-size: 13px; color: var(--ink-3); white-space: nowrap; }
.tz { font-size: 12.5px; color: var(--ink-3); }
.ta { justify-self: start; margin-top: 8px; border: 0; border-bottom: 1px solid var(--ink); background: none; padding: 1px 0; font-size: 12.5px; font-weight: 600; letter-spacing: .02em; cursor: pointer; transition: color .2s, border-color .2s; }
.ta:hover { color: var(--red); border-color: var(--red); }
#sale .grid { margin-bottom: 36px; }

/* Instagram and the call */
#kanaly h2 { max-width: 24ch; margin-bottom: 18px; }
.phones { display: grid; grid-template-columns: 360px minmax(0, 1fr); gap: 64px; align-items: center; }
.phone { background: #fff; color: var(--ink); border: 9px solid #2a2a2a; border-radius: 40px; overflow: hidden; display: flex; flex-direction: column; height: 640px; box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .8); }
.ph-top { display: flex; align-items: center; gap: 10px; padding: 14px; border-bottom: 1px solid var(--line); }
.ph-ava { width: 36px; height: 36px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--line); flex: none; overflow: hidden; } .ph-ava img { width: 100%; }
.grow { flex: 1; min-width: 0; }
.ph-top b { display: block; font-size: 13.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ph-top small { font-size: 11.5px; color: var(--ink-3); }
.ph-msgs { flex: 1; overflow: auto; padding: 12px; display: flex; flex-direction: column; gap: 8px; overscroll-behavior: contain; }
.ph-msgs > * { flex-shrink: 0; }
.ph-q { display: grid; gap: 6px; padding: 10px 12px 14px; border-top: 1px solid var(--line); background: #fff; }
.ph-q button { border: 1px solid var(--line); background: #fff; border-radius: 999px; padding: 8px 14px; font-size: 12.5px; text-align: left; cursor: pointer; transition: border-color .2s; }
.ph-q button:hover { border-color: var(--ink); }
.ph-q button:disabled { opacity: .5; cursor: default; }
.ph-msgs .m { max-width: 86%; padding: 9px 13px; border-radius: 20px; font-size: 13.5px; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; animation: pIn .5s var(--ease) both; }
.ig .m.u { align-self: flex-end; background: linear-gradient(135deg, #6a3df0, #3a6cf4); color: #fff; }
.ig .m.a { align-self: flex-start; background: #efefef; }
.ph-msgs .m.wait { color: var(--ink-3); }
.ph-msgs .m.err { align-self: center; font-size: 12.5px; background: #fff3f3; color: #a33; }
.ph-msgs .note { align-self: center; font-size: 11.5px; color: var(--ink-3); background: none; box-shadow: none; }
.ph-msgs .pc, .ph-msgs .set { align-self: stretch; }
.ph-msgs .p, .ph-msgs .set { background: #fff; color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); }
.ph-msgs .p small, .ph-msgs .sl small, .ph-msgs .set-t span, .ph-msgs .set-h span, .ph-msgs .p s, .ph-msgs .set-t small, .ph-msgs .sl > b s { color: var(--ink-3); }
.ph-msgs .p b, .ph-msgs .sl a, .ph-msgs .p strong, .ph-msgs .set-t strong, .ph-msgs .set-h, .ph-msgs .sl > b { color: var(--ink); }
.ph-msgs .p em { background: var(--ink); color: #fff; }
.ph-msgs .buy { background: var(--ink); color: #fff; }
.ph-msgs .p .go, .ph-msgs .set .go { color: var(--ink); }
.ph-msgs .p .pr .off { color: var(--red); }
.ph-msgs .sl, .ph-msgs .set-t { border-color: var(--line); }
.ph-msgs .done { color: var(--ink-2); }
.plain { display: grid; gap: 4px; }
.plain dt { font-weight: 600; font-size: 15px; margin-top: 14px; } .plain dt:first-child { margin-top: 0; }
.plain dd { margin: 0; color: rgba(255, 255, 255, .68); font-size: 14.5px; }
.side-b { display: flex; gap: 12px; flex-wrap: wrap; margin: 32px 0 14px; }
.dark .small { color: rgba(255, 255, 255, .5); max-width: 62ch; }

/* boutiques by city */
.cities { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.city h3 { font-size: 13px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; padding-bottom: 10px; border-bottom: 1px solid var(--ink); }
.city ul { list-style: none; padding: 0; }
.city li { display: grid; gap: 1px; padding: 14px 0; border-bottom: 1px solid #dedede; font-size: 13.5px; color: var(--ink-2); }
.city li b { font-size: 15px; font-weight: 600; color: var(--ink); }
.city li a { color: var(--ink); text-decoration: none; font-variant-numeric: tabular-nums; margin-top: 3px; } .city li a:hover { color: var(--red); }
.city li em { font-style: normal; font-size: 12.5px; font-weight: 600; color: var(--red); margin-top: 3px; }
.city li.shut b, .city li.shut span { color: var(--ink-3); }
.online { display: flex; justify-content: space-between; align-items: center; gap: 20px 32px; flex-wrap: wrap; margin-top: 40px; padding: 24px 28px; background: #fff; }
.online b { display: block; font-size: 13px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 4px; }
.online span { display: block; font-size: 14px; color: var(--ink-2); max-width: 82ch; }

.foot { background: var(--ink); color: rgba(255, 255, 255, .62); padding: 52px 0 112px; font-size: 13px; }
.foot-in { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, .6fr) minmax(0, 1fr); gap: 40px; }
.flogo { width: 150px; height: auto; margin-bottom: 18px; }
.foot-l { display: grid; gap: 8px; align-content: start; } .foot-l a { color: #fff; text-decoration: none; } .foot-l a:hover { text-decoration: underline; }
.foot-p { display: grid; gap: 8px; align-content: start; } .foot-p b { color: #fff; font-size: 15px; font-weight: 600; }
.foot-p a { color: #fff; text-underline-offset: 4px; }

/* ================================================================ the stylist: a window of its own, plugix.ai dark glass */
.ava { position: relative; width: 40px; height: 40px; border-radius: 50%; background: #fff; display: grid; place-items: center; flex: none; }
.ava img { width: 100%; height: 100%; }
.ava > i { position: absolute; right: 0; bottom: 0; width: 10px; height: 10px; border-radius: 50%; background: #3fbf7a; box-shadow: 0 0 0 2.5px #121736; }
.launch { position: fixed; right: max(20px, env(safe-area-inset-right)); bottom: max(20px, env(safe-area-inset-bottom)); z-index: 59; display: inline-flex; align-items: center; gap: 12px; height: 62px; padding: 0 24px 0 10px; border: 0; border-radius: 999px; color: #fff; text-align: left; cursor: pointer;
  background: radial-gradient(120% 140% at 0% 0%, rgba(154, 166, 255, .26), transparent 55%), linear-gradient(180deg, rgba(31, 38, 86, .92), rgba(9, 12, 30, .95));
  backdrop-filter: blur(18px) saturate(160%); -webkit-backdrop-filter: blur(18px) saturate(160%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 20px 50px rgba(4, 6, 18, .45), 0 0 0 1px rgba(195, 201, 255, .22), 0 0 46px rgba(154, 166, 255, .22);
  transition: opacity .3s, transform .5s var(--spring), visibility 0s; }
.launch .ava { width: 42px; height: 42px; }
.launch .ava::after { content: ''; position: absolute; inset: -5px; border-radius: 50%; box-shadow: 0 0 0 1.5px rgba(170, 180, 255, .6); animation: breath 3.6s ease-in-out infinite; }
@keyframes breath { 0% { transform: scale(.94); opacity: 0; } 30% { opacity: .9; } 100% { transform: scale(1.4); opacity: 0; } }
.lt { display: grid; gap: 1px; line-height: 1.2; white-space: nowrap; }
.lt b { font-size: 15px; font-weight: 700; } .lt small { font-size: 12px; color: var(--pt-2); }
.launch:hover { transform: translateY(-2px); }
.launch[aria-expanded="true"] { opacity: 0; visibility: hidden; transform: scale(.86); transition: opacity .2s, transform .3s var(--ease), visibility 0s .3s; }

.chat { position: fixed; right: max(20px, env(safe-area-inset-right)); bottom: max(20px, env(safe-area-inset-bottom)); z-index: 60; width: min(440px, calc(100vw - 32px)); height: min(700px, calc(100dvh - 40px));
  display: flex; flex-direction: column; border-radius: 30px; color: var(--pt); overflow: hidden; isolation: isolate; font-family: Montserrat, system-ui, sans-serif;
  background: radial-gradient(110% 55% at 100% 0%, rgba(154, 166, 255, .2), transparent 60%), radial-gradient(90% 50% at 0% 105%, rgba(71, 123, 255, .16), transparent 60%), linear-gradient(180deg, rgba(18, 23, 54, .94), rgba(7, 9, 23, .97));
  backdrop-filter: blur(30px) saturate(150%); -webkit-backdrop-filter: blur(30px) saturate(150%);
  box-shadow: 0 60px 140px rgba(0, 0, 0, .55), 0 18px 44px rgba(0, 0, 0, .35), 0 0 0 1px rgba(3, 4, 12, .7), 0 0 100px rgba(154, 166, 255, .12);
  /* closed: folded into the launcher's corner; open: grows out of it with a spring */
  transform-origin: calc(100% - 31px) calc(100% - 31px); transform: scale(.96) translateY(10px); opacity: 0; visibility: hidden; clip-path: inset(84% 0 0 46% round 31px);
  transition: clip-path .4s cubic-bezier(.6, 0, .25, 1), transform .4s cubic-bezier(.6, 0, .25, 1), opacity .16s ease .26s, visibility 0s .42s; }
.chat.on { transform: none; opacity: 1; visibility: visible; clip-path: inset(0 0 0 0 round 30px); transition: clip-path .6s cubic-bezier(.16, 1, .3, 1), transform .7s var(--spring), opacity .12s, visibility 0s; }
.chat::before { content: ''; position: absolute; inset: 0; z-index: 5; border-radius: inherit; padding: 1px; pointer-events: none; background: linear-gradient(160deg, rgba(226, 230, 255, .62), rgba(154, 166, 255, .16) 26%, rgba(154, 166, 255, .04) 60%, rgba(195, 201, 255, .3)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
.chat::after { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .07; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.chat > * { position: relative; z-index: 1; opacity: 0; transform: translateY(8px); transition: opacity .4s var(--ease), transform .5s var(--ease); }
.chat.on > * { opacity: 1; transform: none; transition-delay: .12s; }
.chat.on > .msgs { transition-delay: .18s; } .chat.on > .chips, .chat.on > .ask, .chat.on > .chat-f { transition-delay: .24s; }
.chat :focus-visible { outline: 2px solid var(--pa-2); outline-offset: 2px; }
.chat-h { display: flex; align-items: center; gap: 11px; padding: 16px 14px 14px 16px; border-bottom: 1px solid rgba(195, 201, 255, .08); }
.chat-h .ava { box-shadow: inset 0 0 0 1px rgba(190, 198, 255, .45), 0 0 22px rgba(154, 166, 255, .3); }
.chat-h b { display: block; font-size: 16px; font-weight: 700; letter-spacing: -.02em; color: #fff; }
.chat-h small { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--pt-2); white-space: nowrap; overflow: hidden; }
.dot { width: 6px; height: 6px; border-radius: 50%; background: #3fbf7a; box-shadow: 0 0 8px rgba(63, 191, 122, .8); flex: none; animation: live 2.2s ease-in-out infinite; }
@keyframes live { 50% { opacity: .45; } }
.ghost { border: 0; background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(195, 201, 255, .14); color: var(--pt-2); border-radius: 999px; padding: 7px 12px; font-size: 12.5px; font-weight: 600; cursor: pointer; white-space: nowrap; transition: background .2s, color .2s; }
.ghost:hover { background: rgba(255, 255, 255, .12); color: #fff; }
.ghost { display: inline-flex; align-items: center; gap: 6px; } .ghost svg { width: 14px; height: 14px; }
.chat-h .grow b, .chat-h small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* the corner window is narrow for Montserrat: «Нова розмова» keeps only its icon there, as on a phone */
.chat:not(.wide) .ghost { width: 36px; height: 36px; padding: 0; justify-content: center; } .chat:not(.wide) .ghost span { display: none; }
.ask input:focus-visible { outline: none; }
.x-btn { width: 36px; height: 36px; flex: none; border: 0; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .06); color: var(--pt); box-shadow: inset 0 0 0 1px rgba(195, 201, 255, .12); cursor: pointer; transition: background .2s, transform .3s var(--ease); }
.x-btn:hover { background: rgba(255, 255, 255, .12); transform: rotate(90deg); }
.x-btn svg { width: 17px; height: 17px; }

.msgs { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: 14px; padding: 18px 16px 12px; scrollbar-width: thin; scrollbar-color: rgba(195, 201, 255, .22) transparent;
  -webkit-mask: linear-gradient(transparent, #000 14px, #000 calc(100% - 8px), transparent); mask: linear-gradient(transparent, #000 14px, #000 calc(100% - 8px), transparent); }
.msgs > * { flex-shrink: 0; }
/* the greeting with a slow aura behind it */
.hello { position: relative; display: grid; gap: 6px; padding: 4px 0 2px; }
.hello::before { content: ''; position: absolute; inset: -40px -60px -30px; z-index: -1; pointer-events: none; filter: blur(14px);
  background: radial-gradient(38% 42% at 28% 46%, rgba(154, 166, 255, .22), transparent 70%), radial-gradient(34% 36% at 76% 28%, rgba(71, 123, 255, .2), transparent 70%); animation: aura 16s ease-in-out infinite alternate; }
@keyframes aura { 0% { transform: translate3d(-4%, -2%, 0) rotate(-6deg); } 100% { transform: translate3d(6%, 7%, 0) rotate(10deg) scale(1.12); } }
.hello h3 { font-size: 24px; font-weight: 600; letter-spacing: -.035em; line-height: 1.12; color: #fff; }
.hello p { font-size: 14.5px; color: var(--pt-2); }
.hello .q { font-size: 13px; color: var(--pt-3); }
.voice { display: flex; align-items: center; gap: 12px; width: 100%; border: 0; padding: 10px 14px 10px 10px; border-radius: 18px; text-align: left; color: var(--pt); cursor: pointer; text-decoration: none;
  background: linear-gradient(100deg, rgba(154, 166, 255, .16), rgba(154, 166, 255, .04)); box-shadow: inset 0 0 0 1px rgba(195, 201, 255, .2); transition: box-shadow .25s, transform .25s var(--ease); }
.voice:hover { box-shadow: inset 0 0 0 1px rgba(195, 201, 255, .5); transform: translateY(-1px); }
.voice > i { position: relative; width: 38px; height: 38px; flex: none; border-radius: 50%; display: grid; place-items: center; color: #0b0f26; background: linear-gradient(180deg, var(--pa-3), var(--pa)); }
.voice > i::after { content: ''; position: absolute; inset: -4px; border-radius: 50%; box-shadow: 0 0 0 1.5px rgba(170, 180, 255, .6); animation: breath 3.2s ease-in-out infinite; }
.voice svg { width: 18px; height: 18px; }
.voice span { display: grid; line-height: 1.3; } .voice b { font-size: 14.5px; } .voice small { font-size: 12.5px; color: var(--pt-2); }
.note { align-self: center; font-size: 12px; color: var(--pt-3); padding: 4px 12px; border-radius: 999px; background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px rgba(195, 201, 255, .12); }
@keyframes pIn { from { opacity: 0; transform: translateY(10px); filter: blur(4px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes pInU { from { opacity: 0; transform: translate(14px, 8px) scale(.96); } to { opacity: 1; transform: none; } }
.m { font-size: 14.5px; line-height: 1.55; overflow-wrap: anywhere; white-space: pre-wrap; animation: pIn .55s var(--ease) both; }
.m.u { align-self: flex-end; max-width: 84%; padding: 10px 15px; border-radius: 20px 20px 6px 20px; background: linear-gradient(140deg, #dfe3ff, #aab4ff); color: #0b0f26; font-weight: 550; box-shadow: 0 10px 28px rgba(154, 166, 255, .22), inset 0 1px 0 rgba(255, 255, 255, .7); animation-name: pInU; }
.msgs .m.a { align-self: stretch; color: #e6e9ff; padding-left: 38px; position: relative; }
.msgs .m.a::before { content: ''; position: absolute; left: 0; top: 0; width: 28px; height: 28px; border-radius: 50%; background: url(../img/ms.svg) center / cover no-repeat; }
.m.a b { color: #fff; }
.msgs .m.wait { color: transparent; background: linear-gradient(90deg, rgba(195, 201, 255, .45) 0%, #fff 45%, rgba(195, 201, 255, .45) 70%) 0 0 / 220% 100%; -webkit-background-clip: text; background-clip: text; animation: shim 1.6s linear infinite; font-weight: 600; font-size: 13.5px; }
@keyframes shim { from { background-position: 120% 0; } to { background-position: -100% 0; } }
.msgs .m.err { align-self: center; font-size: 13px; color: #ffb1b9; padding: 6px 14px; border-radius: 999px; background: rgba(255, 120, 130, .08); }
.chips { display: flex; gap: 8px; overflow-x: auto; padding: 6px 14px 2px; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chips button { flex: none; border: 0; padding: 8px 14px; border-radius: 999px; background: rgba(255, 255, 255, .055); box-shadow: inset 0 0 0 1px rgba(195, 201, 255, .18); color: var(--pt); font-size: 13px; font-weight: 600; cursor: pointer; animation: pIn .6s var(--ease) both; animation-delay: calc(var(--i, 0) * 70ms + .25s); transition: background .25s, box-shadow .25s; }
.chips button:hover { background: rgba(154, 166, 255, .16); box-shadow: inset 0 0 0 1px rgba(195, 201, 255, .5); }
.ask { display: flex; align-items: center; gap: 6px; margin: 10px 14px 0; padding: 6px 6px 6px 18px; border-radius: 26px; background: rgba(4, 6, 18, .55); box-shadow: inset 0 0 0 1px rgba(195, 201, 255, .17); transition: box-shadow .25s; }
.ask:focus-within { box-shadow: inset 0 0 0 1px rgba(205, 210, 255, .5), 0 0 0 4px rgba(154, 166, 255, .12); }
.ask input { flex: 1; min-width: 0; border: 0; outline: none; background: none; padding: 10px 0; font-size: 15px; color: #fff; }
.ask input::placeholder { color: var(--pt-3); }
.send { width: 42px; height: 42px; flex: none; border: 0; border-radius: 50%; display: grid; place-items: center; cursor: pointer; background: linear-gradient(180deg, var(--pa-3), var(--pa)); color: #0b0f26; box-shadow: 0 6px 18px rgba(154, 166, 255, .35); transition: transform .25s var(--ease), opacity .25s; }
.send:hover { transform: translateY(-1px); } .send:disabled { opacity: .45; cursor: default; transform: none; }
.send svg { width: 19px; height: 19px; }
.chat-f { padding: 10px 16px 14px; font-size: 11.5px; font-weight: 600; color: var(--pt-3); text-align: center; }
.chat-f a { color: var(--pa-2); }

/* cards in the chat: the goods on their light grey, a white «Купити» */
.pc { align-self: stretch; display: grid; gap: 10px; }
.pc > *, .set { animation: card .7s var(--spring) both; }
.pc > *:nth-child(2) { animation-delay: .08s; } .pc > *:nth-child(3) { animation-delay: .16s; }
@keyframes card { from { opacity: 0; transform: translateY(14px) scale(.97); filter: blur(4px); } to { opacity: 1; transform: none; filter: none; } }
.p { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 12px; padding: 12px; border-radius: 20px; background: linear-gradient(180deg, rgba(255, 255, 255, .075), rgba(255, 255, 255, .03)); box-shadow: inset 0 0 0 1px rgba(195, 201, 255, .15), 0 14px 34px rgba(0, 0, 0, .24); }
.p .ph { display: block; width: 84px; height: 112px; border-radius: 14px; background: var(--photo); overflow: hidden; }
.p .ph img { width: 100%; height: 100%; object-fit: cover; }
.p em { font-style: normal; font-size: 11px; font-weight: 700; letter-spacing: .02em; color: #000; background: #fff; border-radius: 999px; padding: 2px 9px; display: inline-block; margin-bottom: 5px; }
.p b { display: block; font-size: 14.5px; line-height: 1.3; color: #fff; }
.p small { display: block; font-size: 12.5px; color: var(--pt-2); margin-top: 3px; line-height: 1.4; }
.p .pr { display: flex; align-items: baseline; gap: 10px; margin-top: 7px; flex-wrap: wrap; }
.p .pr strong { font-size: 16.5px; color: #fff; font-variant-numeric: tabular-nums; }
.p .pr .no { font-size: 12px; font-weight: 700; color: #ffb1b9; }
.pa { display: flex; align-items: center; gap: 12px; margin-top: 9px; flex-wrap: wrap; }
.buy { border: 0; border-radius: 999px; padding: 8px 18px; font-size: 13.5px; font-weight: 700; background: #fff; color: #000; cursor: pointer; transition: background .25s, transform .25s var(--ease); }
.buy:hover { background: #e9e9e9; transform: translateY(-1px); }
.buy:disabled { opacity: .6; cursor: default; transform: none; }
.go { font-size: 12.5px; font-weight: 700; color: var(--pa-2); text-decoration: none; white-space: nowrap; }
.go:hover { text-decoration: underline; text-underline-offset: 3px; }
.done { font-size: 12.5px; line-height: 1.45; color: var(--pt-2); margin-top: 8px; grid-column: 1 / -1; }
.set { align-self: stretch; border-radius: 20px; overflow: hidden; background: linear-gradient(180deg, rgba(255, 255, 255, .075), rgba(255, 255, 255, .03)); box-shadow: inset 0 0 0 1px rgba(195, 201, 255, .15), 0 14px 34px rgba(0, 0, 0, .24); }
.set-h { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; padding: 12px 14px 8px; font-size: 14.5px; font-weight: 700; color: #fff; }
.set-h span { font-size: 12px; font-weight: 600; color: var(--pt-3); white-space: nowrap; }
.sl { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 14px; border-top: 1px solid rgba(195, 201, 255, .1); }
.sl .ph { width: 52px; height: 68px; border-radius: 10px; background: var(--photo); overflow: hidden; display: block; }
.sl .ph img { width: 100%; height: 100%; object-fit: cover; }
.sl a { font-size: 13.5px; font-weight: 650; text-decoration: none; line-height: 1.3; display: block; color: #fff; }
.sl a:hover { text-decoration: underline; text-underline-offset: 3px; }
.sl small { display: block; font-size: 12px; color: var(--pt-2); margin-top: 1px; }
.sl > b { font-size: 13.5px; white-space: nowrap; font-variant-numeric: tabular-nums; color: #fff; text-align: right; }
.sl > b s { display: block; font-size: 11.5px; font-weight: 500; color: var(--pt-3); }
.set-t { display: grid; gap: 4px; padding: 12px 14px; border-top: 1px solid rgba(195, 201, 255, .1); }
.set-t div { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.set-t div span { font-size: 13px; color: var(--pt-2); } .set-t strong { font-size: 21px; color: #fff; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.set-t small { font-size: 12.5px; color: var(--pt-2); }
.set-t small.free { color: #8ff0b6; }
.set .pa { padding: 0 14px 14px; margin-top: 0; }
.set .done { padding: 0 14px 14px; margin-top: -6px; }
.p .pr s { font-size: 13px; color: var(--pt-3); }
.p .pr .off { font-size: 11.5px; font-weight: 700; color: #ffb59a; }


.lt-s { display: none; }
@media (max-width: 1100px) {
  .nav { gap: 24px; font-size: 14px; } .plx span:last-child { display: none; }
  .hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: 0; }
  .hp { aspect-ratio: 4 / 5; max-height: 560px; width: 100%; }
  .hc { grid-column: 1 / -1; grid-row: 2; padding: 44px 24px 52px; }
  .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid .t:nth-child(n+7) { display: none; }
  .phones { grid-template-columns: 340px minmax(0, 1fr); gap: 40px; }
  .cities { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .foot-in { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .foot-in > div:first-child { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  .wrap { width: calc(100% - 32px); }
  .top-in { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "logo r" "nav nav"; height: auto; margin: 0; padding: 10px 16px 8px; row-gap: 6px; }
  .logo img { width: 128px; }
  .nav { justify-content: space-between; gap: 8px; font-size: 13.5px; }
  .top-r { gap: 12px; }
  .strip { font-size: 11.5px; } .strip-l { display: none; } .strip-s { display: inline; }
  .hp span { bottom: 14px; font-size: 11px; padding: 7px 12px; letter-spacing: .12em; }
  .hc { padding: 32px 16px 40px; }
  .prompt-in { flex-direction: column; } .prompt-in input { border-right: 1px solid var(--ink); }
  .bl { gap: 8px 20px; } .bl button { font-size: 13px; letter-spacing: .1em; }
  .sec { padding: 56px 0; }
  .grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 30px 12px; }
  .grid .t:nth-child(n+5) { display: none; }
  .tn { font-size: 13px; } .tp b { font-size: 14.5px; }
  .phones { grid-template-columns: minmax(0, 1fr); }
  .phone { width: 100%; max-width: 360px; margin-inline: auto; height: 600px; }
  .side-b .btn { width: 100%; }
  .cities { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .online { padding: 20px; } .online .btn { width: 100%; }
  .foot-in { grid-template-columns: minmax(0, 1fr); gap: 28px; }
}
@media (max-width: 640px) {
  .chat { inset: 0; width: auto; height: 100dvh; border-radius: 0; clip-path: none; transform-origin: 100% 100%; }
  .chat.on { clip-path: none; }
  .ghost { width: 36px; height: 36px; padding: 0; justify-content: center; } .ghost span { display: none; } .ghost svg { width: 16px; height: 16px; }
  .launch { right: 12px; bottom: 12px; height: 56px; padding-right: 18px; } .launch .ava { width: 38px; height: 38px; } .lt small { display: none; }
}
/* on a phone the call widget's «Подзвонити» sits bottom-left: the launcher keeps to one word beside it */
@media (max-width: 480px) { .lt-l { display: none; } .lt-s { display: inline; } }
/* the wide window (owner, 27.10, as on goodwine.plugix.ai): 80% of the screen over a dimmed page, one reading column, the goods as tiles */
.chat-dim { position: fixed; inset: 0; z-index: 59; background: rgba(6, 8, 20, .5); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); opacity: 0; visibility: hidden; transition: opacity .35s var(--ease), visibility 0s .35s; }
.chat-dim.on { opacity: 1; visibility: visible; transition: opacity .35s var(--ease), visibility 0s; }
.wide-btn .i-in, .chat.wide .wide-btn .i-out { display: none; } .chat.wide .wide-btn .i-in { display: block; }
.wide-btn:hover { transform: none; }
@media (min-width: 761px) {
  .chat.on { transition: clip-path .6s cubic-bezier(.16, 1, .3, 1), transform .7s var(--spring), opacity .12s, visibility 0s,
    width .55s cubic-bezier(.16, 1, .3, 1), height .55s cubic-bezier(.16, 1, .3, 1), right .55s cubic-bezier(.16, 1, .3, 1), bottom .55s cubic-bezier(.16, 1, .3, 1); }
  .chat.wide { right: 10vw; bottom: 10dvh; width: 80vw; height: 80dvh; border-radius: 34px; }
  .chat.wide .chat-h { padding: 18px 22px 16px 24px; }
  .chat.wide .chat-h b { font-size: 18px; }
  .chat.wide .msgs { gap: 18px; padding: 28px max(24px, calc((100% - 940px) / 2)) 16px; }
  .chat.wide .chips { justify-content: center; padding: 8px max(16px, calc((100% - 940px) / 2)) 2px; }
  .chat.wide .ask { width: min(940px, calc(100% - 48px)); margin: 12px auto 0; }
  .chat.wide .ask input { font-size: 16px; }
  .chat.wide .m { font-size: 16px; }
  .chat.wide .m.u { max-width: 70%; }
  .chat.wide .hello h3 { font-size: 32px; }
  .chat.wide .hello p { font-size: 16px; max-width: 60ch; }
  .chat.wide .voice { max-width: 420px; }
  .chat.wide .pc { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; }
  .chat.wide .p { grid-template-columns: minmax(0, 1fr); align-content: start; padding: 14px; }
  .chat.wide .p .ph { width: 100%; height: 280px; }
  .chat.wide .p b { font-size: 15.5px; }
  .chat.wide .sl { grid-template-columns: 72px minmax(0, 1fr) auto; gap: 14px; padding: 10px 18px; }
  .chat.wide .sl .ph { width: 72px; height: 96px; }
  .chat.wide .sl a { font-size: 15px; }
  .chat.wide .set-h { padding: 16px 18px 10px; font-size: 16px; }
  .chat.wide .set-t { padding: 14px 18px; }
  .chat.wide .set-t strong { font-size: 26px; }
  .chat.wide .set .pa { padding: 0 18px 18px; }
}
@media (max-width: 760px) { .wide-btn { display: none; } }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; transition-delay: 0s !important; }
}