/* Сторінка акційного набору (/nabir-4-sorty/): тимчасовий лендинг для реклами. Шапка й футер — звичайні, решта — цей файл. */
.nb-hero{position:relative;background:var(--cream);padding:40px 0 56px;overflow:hidden}
.nb-hero:before,.nb-hero:after{content:"";position:absolute;border-radius:50%;background:var(--decor);opacity:.22;pointer-events:none}
.nb-hero:before{width:420px;height:420px;left:-140px;top:-120px}
.nb-hero:after{width:300px;height:300px;right:-90px;bottom:-110px}
/* перший екран: ліворуч — коротко (що це, ціна, кнопка), праворуч — фото чотирьох сортів; на вужчих екранах — одна колонка: назва → фото → ціна й кнопка */
.nb-hero-in{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,1fr);grid-template-areas:"head mos" "buy mos";grid-template-rows:auto auto;align-content:center;column-gap:56px;row-gap:0}
.nb-head{grid-area:head;align-self:end}
.nb-buy{grid-area:buy;align-self:start;width:100%;max-width:580px}
.nb-kick{display:inline-block;padding:7px 18px;border-radius:999px;background:#fff;color:var(--berry-ink);font-weight:700;font-size:14px;letter-spacing:.02em}
.nb-hero h1{margin-top:18px;font-size:clamp(30px,3vw,42px);line-height:1.12;font-weight:700;color:var(--head);text-wrap:balance}
.nb-lead{margin-top:14px;max-width:560px;text-wrap:balance;font-size:clamp(16px,1.5vw,19px);color:var(--muted)}
.nb-price{display:flex;flex-wrap:wrap;align-items:center;gap:8px 20px;width:100%;margin-top:26px}
.nb-old{font-weight:700;font-size:18px;color:var(--muted);text-decoration:line-through;text-decoration-color:var(--berry);text-decoration-thickness:2px}
.nb-price b{font-size:clamp(44px,5.6vw,68px);line-height:1;color:var(--burg)}
.nb-save{display:block;flex:1 0 100%;padding:10px 18px;border-radius:999px;background:var(--berry);color:#fff;font-weight:700;font-size:17px;line-height:1.3;text-align:center;text-wrap:balance}
.nb-mos{grid-area:mos;align-self:center;align-content:start;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:0;padding:0;list-style:none}
.nb-mos li{position:relative;aspect-ratio:1/1;overflow:hidden;background:var(--mist);border-radius:90px 28px 90px 28px;box-shadow:0 18px 38px rgba(36,59,45,.16)}
.nb-mos li:nth-child(2),.nb-mos li:nth-child(3){border-radius:28px 90px 28px 90px}
.nb-mos img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.nb-mos .ph-photo{position:absolute;inset:0}
.nb-mos li:nth-child(2)>span:last-child,.nb-mos li:nth-child(3)>span:last-child{left:auto;right:14px}   /* підпис — на кутку з малим заокругленням */
.nb-mos li>span:last-child{position:absolute;left:14px;bottom:14px;max-width:calc(100% - 28px);padding:6px 14px;border-radius:999px;background:#fff;color:var(--burg);font-weight:700;font-size:14px;line-height:1.2;box-shadow:0 6px 14px rgba(36,59,45,.18)}
.gift-tag{position:absolute;top:12px;right:12px;z-index:1;display:inline-flex;align-items:center;gap:6px;padding:6px 13px 6px 10px;border-radius:999px;background:var(--berry);color:#fff;font-weight:700;font-size:13.5px;line-height:1.1;box-shadow:0 6px 14px rgba(36,59,45,.28)}
.gift-tag svg{flex:none}
.nb-mos .gift-tag{top:14px;right:14px;font-size:14px;padding:7px 15px 7px 11px}
.nb-ph .gift-tag{top:14px;right:14px}
.nb-c.nb-gift{box-shadow:0 0 0 2px var(--berry)}
.nb-c.nb-gift .nb-sp{color:var(--berry-ink)}
.nb-over{margin-top:22px;padding:18px 24px;border-radius:20px;background:#fff;color:var(--burg);box-shadow:0 0 0 2px var(--berry);max-width:520px}
.nb-over[hidden]{display:none}
.nb-over b{display:block;font-size:20px;margin-bottom:6px}
.nb-over a{color:var(--deep);text-decoration:underline}

/* форма «Передзвоніть мені»: лише номер; +380 уже в полі. Відправка — js/forms.js (data-uag-form="callback"), поведінка — js/nabir.js */
.nb-call{margin-top:22px;width:100%;max-width:580px;padding:22px 24px 18px;border-radius:28px;background:#fff;box-shadow:0 18px 40px rgba(36,59,45,.14),0 0 0 1px var(--line);text-align:left}
.nb-call-t{margin:0 0 16px;font-size:clamp(19px,1.8vw,22px);line-height:1.2;color:var(--burg);font-weight:700;text-align:center}
.nb-call-f{display:flex;align-items:stretch;overflow:hidden;border:2px solid var(--line);border-radius:999px;background:#fff}
.nb-call-f:focus-within{border-color:var(--head);box-shadow:0 0 0 4px var(--soft)}
.nb-call-pre{display:flex;align-items:center;padding:0 12px 0 20px;font-weight:700;font-size:19px;color:var(--burg);background:var(--mist);border-right:2px solid var(--line)}
.nb-call-f input{flex:1;min-width:0;border:0;background:transparent;font:inherit;font-size:19px;font-weight:700;color:var(--ink);padding:0 14px;height:56px;line-height:1.5;outline:none;box-shadow:none}
.nb-call-f input::placeholder{color:#a9b3a3;font-weight:400}
.nb-call-fw .err{display:none;margin:8px 0 0 6px;font-size:13px;font-weight:700;line-height:1.4;color:var(--berry-ink)}
.nb-call-fw.bad .err{display:block}
.nb-call-fw.bad .nb-call-f{border-color:#C4405F;background:#FFF6F8}
.nb-call-fw.bad .nb-call-pre{background:#FBEEF1;border-right-color:#E8B7C3}
.nb-call:has(.nb-call-fw.bad) .uag-alert{display:none}                      /* помилку номера видно під полем: верхню плашку не дублюємо */
.nb-call .uag-alert{margin:14px 0 0;border-radius:18px;font-size:14px}
.nb-call .nb-call-row{display:flex;gap:10px;align-items:flex-start}
.nb-call .nb-call-row .nb-call-fw{flex:1;min-width:0}
.nb-call button.nb-call-b{display:inline-flex;align-items:center;justify-content:center;gap:10px;flex:none;margin:0;min-height:60px;padding:0 24px;font-size:17px;box-shadow:0 6px 14px rgba(63,122,84,.26);border:0;cursor:pointer;white-space:nowrap}
.nb-call-n{position:relative;z-index:1;margin:20px 0 0;text-align:center;font-size:14px;line-height:1.4;color:var(--muted)}
.nb-call-c{position:relative;z-index:1;margin:6px 0 0;text-align:center;font-size:12px;line-height:1.4;color:var(--muted)}
.nb-call-c a{color:var(--deep);text-decoration:underline}
.nb-self{width:100%;margin-top:14px;font-size:14.5px;color:var(--muted)}
.nb-self a{color:var(--deep);font-weight:700;text-decoration:underline}
.nb-ok{display:block;text-align:center;padding:6px 0 4px}
.nb-ok[hidden]{display:none}
.nb-ok:focus{outline:none}
.nb-ok-i{display:grid;place-items:center;width:68px;height:68px;margin:0 auto 14px;border-radius:50%;background:var(--green);color:#fff;box-shadow:0 12px 26px rgba(63,122,84,.3)}
.nb-ok .nb-ok-h{margin:0;font-size:24px;line-height:1.2;color:var(--burg);font-weight:700}
.nb-ok .nb-ok-p{margin:10px 0 0;font-size:15.5px;line-height:1.5;color:var(--muted)}
.nb-ok .nb-ok-p b{color:var(--burg);white-space:nowrap}
.nb-ok-ch{display:inline-block;margin-top:12px;padding:0;border:0;background:none;font:inherit;font-size:14.5px;font-weight:700;color:var(--deep);text-decoration:underline;cursor:pointer}
.nb-call.is-done>*:not(.nb-ok){display:none}
@media (hover:hover){.nb-ok-ch:hover,.nb-self a:hover,.nb-call-c a:hover{color:var(--head)}}
.nb-call2{max-width:620px;margin:30px auto 0}
.nb-sorts h2.nb-call-t{margin:0 0 16px;font-size:clamp(19px,1.8vw,22px);line-height:1.2;color:var(--burg);text-align:center}

.nb-sorts{background:#fff;padding:64px 0 56px}
.nb-sorts h2,.nb-how h2{font-size:clamp(26px,3vw,36px);line-height:1.2;text-align:center;color:var(--head);font-weight:700}
.nb-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;margin:36px 0 0;padding:0;list-style:none}
.nb-c{display:flex;flex-direction:column;border-radius:26px;background:var(--cream);overflow:hidden;box-shadow:0 0 0 1px var(--line)}
.nb-ph{position:relative;aspect-ratio:4/5;background:var(--mist);overflow:hidden}
.nb-ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.nb-ph .ph-photo{position:absolute;inset:0}
.nb-n{position:absolute;left:14px;top:14px;width:36px;height:36px;border-radius:50%;background:#fff;color:var(--burg);font-weight:700;display:grid;place-items:center;box-shadow:0 6px 14px rgba(36,59,45,.2)}
.nb-b{display:flex;flex-direction:column;flex:1;padding:18px 18px 20px}
.nb-b h3{font-size:22px;line-height:1.2;color:var(--burg);font-weight:700}
.nb-b>p:first-of-type{margin-top:8px;font-size:14px;color:var(--muted)}
.nb-spec{display:grid;gap:6px;margin:14px 0 0;padding:0}
.nb-spec div{display:flex;justify-content:space-between;gap:12px;font-size:13px;border-top:1px solid var(--line);padding-top:6px}
.nb-spec dt{color:var(--muted)}
.nb-spec dd{margin:0;text-align:right;font-weight:700;color:var(--ink)}
.nb-sp{margin-top:auto!important;padding-top:14px;font-size:13.5px;font-weight:700;color:var(--tx)}
.nb-sum{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;max-width:760px;margin:30px auto 0}
.nb-sum div{display:flex;flex-direction:column;align-items:center;gap:4px;padding:16px 10px;border-radius:20px;background:var(--cream);font-size:14px;color:var(--muted)}
.nb-sum b{font-size:clamp(22px,3vw,30px);color:var(--burg)}
.nb-sum .nb-sum-p{background:var(--green);color:#fff}
.nb-sum .nb-sum-p b{color:#fff}
.nb-sum .nb-sum-g{background:var(--berry);color:#fff}
.nb-sum .nb-sum-g b{color:#fff;font-size:clamp(19px,2.6vw,26px)}

.nb-how{background:#fff;padding:8px 0 84px}
.nb-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin:34px 0 0;padding:0;list-style:none;counter-reset:nb}
.nb-steps li{position:relative;display:flex;flex-direction:column;gap:6px;padding:62px 22px 22px;border-radius:24px;background:var(--mist);counter-increment:nb}
.nb-steps li:before{content:counter(nb);position:absolute;left:22px;top:18px;width:34px;height:34px;border-radius:50%;background:var(--green);color:#fff;font-weight:700;display:grid;place-items:center}
.nb-steps b{font-size:18px;color:var(--burg)}
.nb-steps span{font-size:14.5px;color:var(--muted)}
.nb-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:22px 0 0;padding:0;list-style:none}
.nb-chips li{display:flex;align-items:center;gap:8px;padding:8px 16px;border-radius:999px;background:#fff;color:var(--tx);font-weight:700;font-size:13.5px;box-shadow:0 0 0 1px var(--line)}
.nb-chips li:before{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:var(--green)}
.nb-help{margin-top:26px;text-align:center;font-size:15px;color:var(--muted)}
.nb-help a{color:var(--deep);font-weight:700;text-decoration:underline}

.nb-bar{display:none}
@media (max-width:1000px){
  .nb-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.nb-steps{grid-template-columns:1fr}
  .nb-hero{padding:34px 0 48px;text-align:center}
  .nb-hero-in{grid-template-columns:minmax(0,1fr);grid-template-areas:"head" "mos" "buy";row-gap:26px;justify-items:center}
  .nb-head,.nb-buy{align-self:auto;display:flex;flex-direction:column;align-items:center}
  .nb-mos{width:100%;max-width:560px;align-self:auto}
  .nb-price{justify-content:center;margin-top:0}
  .nb-call{margin-left:auto;margin-right:auto}
  .nb-self{text-align:center}
}
@media (max-width:640px){
  .nb-hero{padding:20px 0 36px}
  .nb-hero-in{row-gap:16px}
  .nb-hero h1{margin-top:12px}
  .nb-lead{margin-top:10px;font-size:15px;line-height:1.4}
  .nb-price{gap:6px 16px}
  .nb-save{font-size:15px;padding:8px 14px}
  .nb-mos{gap:10px}
  .nb-mos li{aspect-ratio:5/4;border-radius:56px 20px 56px 20px}
  .nb-mos li:nth-child(2),.nb-mos li:nth-child(3){border-radius:20px 56px 20px 56px}
  .nb-mos .gift-tag{top:8px;right:8px;font-size:11.5px;padding:4px 10px 4px 8px}
  .nb-ph .gift-tag{top:10px;right:10px}
  .nb-mos li>span:last-child{left:8px;bottom:8px;max-width:calc(100% - 16px);padding:4px 10px;font-size:12.5px}
  .nb-mos li:nth-child(2)>span:last-child,.nb-mos li:nth-child(3)>span:last-child{left:auto;right:8px}
  .nb-call{padding:20px 16px 14px;border-radius:24px;margin-top:18px}
  .nb-call-t{font-size:20px}
  .nb-call-pre{padding:0 12px 0 18px}
  .nb-call-n{margin-top:16px}
  .nb-call .nb-call-row{flex-direction:column;align-items:stretch;gap:12px}.nb-call button.nb-call-b{width:100%}
  .nb-call2{margin-top:24px}
  .nb-grid{grid-template-columns:1fr;gap:16px}
  .nb-ph{aspect-ratio:4/3}
  .nb-sorts{padding:44px 0 40px}
  .nb-sum{gap:8px}
  .nb-sum div{padding:12px 6px;font-size:12.5px}
  .nb-how{padding-bottom:64px}
  .nb-bar{position:fixed;left:0;right:0;bottom:0;z-index:44;display:flex;align-items:center;gap:14px;padding:10px 14px calc(10px + env(safe-area-inset-bottom));
    background:#fff;box-shadow:0 -10px 28px rgba(36,59,45,.16);transform:translateY(110%);visibility:hidden;transition:transform .3s ease,visibility 0s linear .3s}
  .nb-bar[hidden]{display:flex}
  .nb-bar.show{transform:none;visibility:visible;transition-delay:0s}
  .nb-bar-p{display:flex;flex-direction:column;line-height:1.1;font-size:12px;color:var(--muted)}
  .nb-bar-p b{font-size:22px;color:var(--burg)}
  .nb-bar-t{flex:none;display:grid;place-items:center;width:52px;height:52px;border-radius:50%;border:2px solid var(--green);color:var(--deep);background:#fff}
  .nb-bar .nb-cta{margin:0;flex:1;min-height:52px;padding:12px 10px;font-size:16px;box-shadow:none;white-space:nowrap;text-align:center}
  .uag:has(.nb-bar.show) .totop{bottom:88px}
}
@media (prefers-reduced-motion:reduce){.nb-bar{transition:none}}