/* Бокові сцени каталогу (30.09 s1): кожен блок — своя «сцена» зі своєю мовою.
   Місяць — постер церемонії · Популярні — чарт з великими цифрами · Відповіді — стрічка чату
   Акції — квитки з перфорацією і штампом · Нові — кіноплівка «прем'єра». Тексти й фото — їхні. */
.sd{position:relative;border-radius:22px;overflow:hidden;isolation:isolate}
.sd .im{display:block;overflow:hidden;background:#fff}
.sd img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.sd .im.lg img{object-fit:contain;padding:6%;background:#fff}
.sd .cnt{margin-left:auto;font:800 12px/1 var(--ff);font-style:normal;padding:6px 9px;border-radius:999px}

/* ── 1. Стоматологія місяця: постер ── */
.sd-mo{background:#07182B;box-shadow:0 30px 60px -30px rgba(7,24,43,.75),0 0 0 1px rgba(147,186,33,.35)}
.mo{display:block;position:relative;aspect-ratio:4/5.4;color:#fff}
.mo-ph{position:absolute;inset:0}
.mo-ph img{animation:moZoom 16s ease-in-out infinite alternate;transform-origin:60% 40%}
.mo-ph.lg{background:#fff}
.mo::after{content:"";position:absolute;inset:0;z-index:1;background:
  linear-gradient(180deg,rgba(7,24,43,.78) 0%,rgba(7,24,43,.05) 34%,rgba(7,24,43,0) 48%,rgba(7,24,43,.72) 70%,#07182B 100%)}
.mo-beam{position:absolute;inset:-40% -60% auto;height:120%;z-index:1;pointer-events:none;mix-blend-mode:screen;opacity:.55;
  background:conic-gradient(from 180deg at 50% 0%,transparent 0 158deg,rgba(214,240,140,.55) 170deg,transparent 178deg,transparent 182deg,rgba(160,220,255,.5) 190deg,transparent 202deg);
  animation:moBeam 7s ease-in-out infinite alternate;transform-origin:50% 0}
.mo-top{position:absolute;z-index:2;left:0;right:0;top:12px;display:flex;flex-direction:column;align-items:center;gap:2px}
.mo-lau{width:78px;height:78px;filter:drop-shadow(0 6px 14px rgba(0,0,0,.45))}
.mo-lau .lv{fill:#B9D94A}
.mo-lau .md{fill:#93BA21;stroke:#E4F3A8;stroke-width:2.5}
.mo-lau .st{fill:#fff;transform-origin:60px 58px;animation:moStar 3.2s var(--ease) infinite}
.mo-h{margin:0;font:800 12px/1 var(--ff);letter-spacing:.2em;text-transform:uppercase;color:#E4F3A8;text-shadow:0 2px 10px rgba(0,0,0,.6)}
.mo-bt{position:absolute;z-index:2;left:0;right:0;bottom:0;padding:0 16px 16px}
.mo-bt b{display:block;font:800 17px/1.22 var(--ff);letter-spacing:-.01em;text-wrap:balance;text-shadow:0 2px 12px rgba(0,0,0,.5)}
.mo-bt small{display:block;margin-top:6px;font-size:12px;color:#B9CBDD}
.mo-go{position:absolute;right:14px;bottom:14px;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;
  background:#93BA21;color:#07182B;box-shadow:0 0 0 0 rgba(147,186,33,.6);animation:moPulse 2.4s infinite;transition:transform .3s var(--ease)}
.mo-go .i{width:18px;height:18px}
.mo-bt small{display:flex;align-items:center;min-height:34px;margin-top:4px;padding-right:46px}
.mo:hover .mo-go{transform:translateX(4px) scale(1.08)}
.mo:hover .mo-ph img{animation-play-state:paused;transform:scale(1.1)}
@keyframes moZoom{from{transform:scale(1.02)}to{transform:scale(1.14) translate(-2%,-2%)}}
@keyframes moBeam{from{transform:rotate(-9deg)}to{transform:rotate(9deg)}}
@keyframes moStar{0%,70%,100%{transform:scale(1) rotate(0)}80%{transform:scale(1.18) rotate(-12deg)}90%{transform:scale(.96) rotate(6deg)}}
@keyframes moPulse{0%{box-shadow:0 0 0 0 rgba(147,186,33,.6)}80%,100%{box-shadow:0 0 0 14px rgba(147,186,33,0)}}

/* ── 2. Популярні клініки: чарт ── */
.sd-top{background:#fff;box-shadow:0 24px 50px -34px rgba(11,42,74,.45),0 0 0 1px var(--line)}
.tp-h{display:flex;align-items:center;gap:10px;margin:0;padding:16px 16px 6px;font:800 16px/1.15 var(--ff);color:var(--ink)}
.tp-h .cnt{background:var(--ink);color:#fff}
.eq{display:inline-flex;align-items:flex-end;gap:2px;width:20px;height:18px}
.eq i{flex:1;border-radius:2px;background:linear-gradient(var(--blue),var(--green));animation:eq 1.2s ease-in-out infinite}
.eq i:nth-child(1){height:40%;animation-delay:-.2s}.eq i:nth-child(2){height:90%;animation-delay:-.5s}
.eq i:nth-child(3){height:60%;animation-delay:-.8s}.eq i:nth-child(4){height:75%;animation-delay:-.35s}
@keyframes eq{0%,100%{transform:scaleY(.45)}50%{transform:scaleY(1)}}
.eq i{transform-origin:bottom}
.tp{list-style:none;margin:0;padding:4px 8px 10px}
.tp li a{position:relative;display:grid;grid-template-columns:30px 46px minmax(0,1fr);align-items:center;gap:0;padding:8px 6px 8px 0;border-radius:14px;transition:background .25s}
.tp .n{position:relative;z-index:2;justify-self:center;margin-right:-6px;font:900 40px/.85 var(--ff);letter-spacing:-.06em;color:#fff;
  -webkit-text-stroke:2px var(--line2);transition:-webkit-text-stroke-color .3s,transform .4s var(--ease)}
.tp li:nth-child(1) .n{color:transparent;-webkit-text-stroke:0;background:linear-gradient(170deg,#C9E26A,#789C10 70%);-webkit-background-clip:text;background-clip:text}
.tp li:nth-child(2) .n,.tp li:nth-child(3) .n{color:transparent;-webkit-text-stroke:0;background:linear-gradient(170deg,#7CCBF1,#0B86C4 75%);-webkit-background-clip:text;background-clip:text}
.tp .im{position:relative;z-index:1;width:46px;height:46px;border-radius:14px;box-shadow:0 10px 18px -10px rgba(11,42,74,.55),0 0 0 3px #fff}
.tp .tx{padding-left:9px;min-width:0}
.tp b{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;font:700 13px/1.22 var(--ff);color:var(--ink)}
.tp small{display:block;margin-top:3px;font-size:11px;line-height:1.25;color:var(--mut)}
.tp li a:hover{background:var(--bb)}
.tp li a:hover .n{-webkit-text-stroke-color:var(--blue);transform:translateX(-3px) scale(1.06)}
.tp li a:hover b{color:var(--blue2)}
.tp li a:hover img{transform:scale(1.1)}
.tp li+li{border-top:1px dashed var(--line)}

/* ── 3. Відповіді стоматолога: стрічка чату ── */
.sd-chat{background:linear-gradient(165deg,#EAF6FE 0%,#F4FAFF 55%,#EEF7E2 100%);box-shadow:0 0 0 1px #D6EAF8}
.sd-chat::before{content:"";position:absolute;inset:0;z-index:-1;opacity:.5;
  background-image:radial-gradient(circle at 1px 1px,rgba(30,165,230,.25) 1px,transparent 1.5px);background-size:14px 14px}
.ch-h{display:flex;align-items:center;gap:10px;margin:0;padding:14px 14px 8px;font:800 15.5px/1.2 var(--ff);color:var(--ink)}
.ch-h .av{position:relative;flex:none;width:38px;height:38px;border-radius:13px;display:grid;place-items:center;color:#fff;
  background:linear-gradient(135deg,#1EA5E6,#0B86C4);box-shadow:0 10px 18px -10px #0B86C4}
.ch-h .av .i{width:20px;height:20px}
.ch-h .av::after{content:"";position:absolute;right:-3px;bottom:-3px;width:11px;height:11px;border-radius:50%;background:#93BA21;box-shadow:0 0 0 2.5px #EAF6FE}
.ch{display:flex;flex-direction:column;gap:7px;padding:4px 12px 14px}
.ch-m{position:relative;display:flex;align-items:center;gap:9px;max-width:92%;padding:8px 12px 8px 9px;border-radius:16px 16px 16px 5px;
  background:#fff;color:var(--ink);font:600 13px/1.25 var(--ff);box-shadow:0 6px 14px -10px rgba(11,42,74,.5);transition:transform .25s var(--ease),background .25s,color .25s}
.ch-m:nth-child(even){align-self:flex-end;border-radius:16px 16px 5px 16px;background:linear-gradient(135deg,#1EA5E6,#0B86C4);color:#fff;flex-direction:row-reverse;text-align:right;padding:8px 9px 8px 12px}
.ch-m .qi{flex:none;width:26px;height:26px;padding:4px;border-radius:9px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;
  background:var(--bb);color:var(--blue2)}
.ch-m:nth-child(even) .qi{background:rgba(255,255,255,.2);color:#fff}
.ch-m:hover{transform:translateY(-2px) scale(1.02)}
.ch-m:nth-child(odd):hover{background:#F2F8E3}
.ch-dots{display:inline-flex;gap:4px;align-self:flex-start;padding:10px 12px;border-radius:14px 14px 14px 5px;background:#fff;box-shadow:0 6px 14px -10px rgba(11,42,74,.5)}
.ch-dots i{width:6px;height:6px;border-radius:50%;background:var(--blue3);animation:dot 1.3s infinite}
.ch-dots i:nth-child(2){animation-delay:.18s}.ch-dots i:nth-child(3){animation-delay:.36s}
@keyframes dot{0%,60%,100%{transform:translateY(0);opacity:.45}30%{transform:translateY(-4px);opacity:1}}

/* ── 4. Акції: квитки ── */
.sd-tk{--tb:#FFF1E6;background:var(--tb);box-shadow:0 0 0 1px #FAD7BF,0 26px 50px -34px rgba(217,83,10,.6)}
.tk-h{display:flex;align-items:center;gap:10px;margin:0;padding:15px 16px;color:#fff;font:800 16px/1.15 var(--ff);
  background:radial-gradient(120% 140% at 0% 0%,#FF9A4D 0%,#EE6A1F 45%,#C9460A 100%)}
.tk-h .fl{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:rgba(255,255,255,.18)}
.tk-h .fl .i{width:19px;height:19px;color:#FFE3C9;animation:flick 1.6s ease-in-out infinite;transform-origin:50% 90%}
.tk-h .cnt{background:#fff;color:#C9460A}
@keyframes flick{0%,100%{transform:scale(1) rotate(-2deg)}30%{transform:scale(1.12,1.18) rotate(3deg)}60%{transform:scale(.95,1.05) rotate(-4deg)}}
.tk-l{display:flex;flex-direction:column;gap:12px;padding:14px 12px 16px}
.tk{position:relative;display:block;background:#fff;border-radius:16px;filter:drop-shadow(0 10px 14px rgba(201,70,10,.13));transition:transform .3s var(--ease)}
.tk-a{position:relative;display:grid;grid-template-columns:42px minmax(0,1fr);gap:10px;align-items:center;padding:11px 12px 12px;border-bottom:2px dashed #F6C9A8}
.tk-a::before,.tk-a::after{content:"";position:absolute;bottom:-10px;width:18px;height:18px;border-radius:50%;background:var(--tb)}
.tk-a::before{left:-9px}.tk-a::after{right:-9px}
.tk-a .im{width:42px;height:42px;border-radius:12px;box-shadow:0 0 0 2px #FFE0C9}
.tk-a b{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;font:700 12.5px/1.25 var(--ff);color:var(--ink)}
.tk-b{display:block;padding:12px 14px 14px;font:500 13px/1.42 var(--ff);color:#6B3A1C}
.tk-b mark{display:inline-block;background:linear-gradient(transparent 55%,#FFD2AE 55%);color:#C9460A;font:900 18px/1.1 var(--ff);letter-spacing:-.01em;padding:0 2px}
.tk-b s{white-space:nowrap;color:#B39A8A;text-decoration-thickness:2px;text-decoration-color:#E36A2A}
.tk .stamp{float:right;shape-outside:circle(50%);position:relative;z-index:2;display:grid;place-items:center;width:56px;height:56px;margin:-34px -4px 4px 8px;border-radius:50%;
  font:900 14px/1 var(--ff);font-style:normal;color:#fff;background:radial-gradient(circle at 35% 30%,#FF8A3D,#D9530A);
  box-shadow:0 0 0 3px #fff,0 0 0 5px #EE6A1F,0 10px 18px -6px rgba(201,70,10,.6);transform:rotate(-14deg)}
.tk:hover{transform:translateY(-3px) rotate(-.4deg)}
.tk:hover .stamp{animation:stamp .5s var(--ease)}
@keyframes stamp{0%{transform:rotate(-14deg) scale(1)}40%{transform:rotate(-4deg) scale(1.2)}100%{transform:rotate(-14deg) scale(1)}}

/* ── 5. Нові стоматології: кіноплівка ── */
.sd-film{background:#0B1622;color:#fff;box-shadow:0 30px 60px -34px rgba(7,24,43,.8)}
.kside.kr .sd-film{position:sticky;top:12px}
.fl-h{display:flex;align-items:center;gap:10px;margin:0;padding:15px 16px 12px;font:800 16px/1.15 var(--ff);color:#fff;border-bottom:1px solid rgba(255,255,255,.08)}
.fl-h em{font:900 10.5px/1 var(--ff);font-style:normal;letter-spacing:.12em;padding:5px 7px;border-radius:6px;color:#0B1622;background:linear-gradient(90deg,#C9E26A,#93BA21);box-shadow:0 0 18px rgba(147,186,33,.55)}
.fl-h .cnt{background:rgba(255,255,255,.12);color:#fff}
.fl-w{position:relative;height:560px;overflow:hidden;padding:0 22px;
  -webkit-mask:linear-gradient(transparent,#000 7%,#000 93%,transparent);mask:linear-gradient(transparent,#000 7%,#000 93%,transparent)}
.fl-w::before,.fl-w::after{content:"";position:absolute;top:0;bottom:0;width:14px;z-index:2;
  background:repeating-linear-gradient(180deg,transparent 0 7px,rgba(255,255,255,.85) 7px 16px,transparent 16px 22px);
  -webkit-mask:linear-gradient(90deg,transparent 3px,#000 3px 11px,transparent 11px);mask:linear-gradient(90deg,transparent 3px,#000 3px 11px,transparent 11px);opacity:.18}
.fl-w::before{left:4px}.fl-w::after{right:4px}
.fl-t{animation:film 38s linear infinite}
.fl-w:hover .fl-t,.fl-w:focus-within .fl-t{animation-play-state:paused}
.fl-s{display:flex;flex-direction:column;gap:14px;padding-bottom:14px}
@keyframes film{from{transform:translateY(0)}to{transform:translateY(-50%)}}
.fr{display:block;padding:8px;border-radius:12px;background:#132233;box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);transition:background .3s}
.fr .im{position:relative;aspect-ratio:16/10;border-radius:8px}
.fr .im em{position:absolute;left:8px;top:8px;font:900 9.5px/1 var(--ff);font-style:normal;letter-spacing:.12em;padding:4px 6px;border-radius:5px;color:#0B1622;background:#B9D94A}
.fr b{display:block;margin-top:9px;font:700 14px/1.25 var(--ff);color:#fff}
.fr small{display:block;margin-top:3px;font-size:11.5px;color:#8FA6BD}
.fr:hover{background:#1A2E44}.fr:hover img{transform:scale(1.07)}.fr:hover b{color:#C9E26A}

/* ── адаптив ── */
@media (max-width:980px){
  .kside{align-items:flex-start}.kside .sd{width:300px}
  .fl-w{height:auto;-webkit-mask:none;mask:none}
  .fl-t{animation:none}.fl-s.dup{display:none}
}
@media (prefers-reduced-motion:reduce){
  .fl-w{height:auto;-webkit-mask:none;mask:none}.fl-s.dup{display:none}
  .mo-ph img,.mo-beam,.mo-lau .st,.mo-go,.eq i,.ch-dots i,.tk-h .fl .i,.fl-t{animation:none}
}

/* CCS GO 51c0542e6dc1 D3: wrap narrow catalog filters and sort */
@media (max-width:700px){.kf-row,.kq,.ksort{flex-wrap:wrap;overflow-x:visible}.kseg{display:flex;flex-wrap:wrap;max-width:100%;flex:1 1 100%}.kseg-l{flex:1 1 100%;padding:4px 6px 2px}.kseg button{flex:1 1 auto;justify-content:center}}
/* ups 13.10: RU 320 — кнопка карты (.kq-b nowrap) выходила за край на 8px после wrap .kq; перенос текста внутри кнопки */
@media (max-width:700px){.kq-b{max-width:100%;white-space:normal;height:auto;min-height:32px;line-height:1.2;text-align:left;padding-top:5px;padding-bottom:5px}}
