/* zorabet-sk · site.css: секции контента Z1-Z17 и store-набор A1-A7 (design.md §3-4). Mobile-first. */

/* ---------- общая типографика секций ---------- */
.zb-h2{font:600 22px/28px var(--zb-ui);color:var(--zb-t1);text-wrap:balance}
.zb-h2--shelf{display:flex;align-items:center;gap:8px;font-size:18px;line-height:24px}
.zb-h2--shelf .zb-i{color:var(--zb-red-text)}
.zb-h3{font:600 18px/24px var(--zb-ui);color:var(--zb-t1)}
@media (min-width:1024px){
  .zb-h2{font-size:28px;line-height:36px}
  .zb-h2--shelf{font-size:20px;line-height:26px}
  .zb-h3{font-size:20px;line-height:28px}
}
.zb-flow > * + *{margin-top:16px}
.zb-flow p,.zb-flow li{max-width:68ch}
.zb-flow h3{margin-top:28px}
.zb-list{list-style:none;display:grid;gap:10px}
.zb-list li{position:relative;padding-left:20px}
.zb-list li::before{content:"";position:absolute;left:2px;top:10px;width:6px;height:6px;border-radius:1px;background:var(--zb-red)}
.zb-ol{padding-left:24px;display:grid;gap:10px}
.zb-ol li::marker{color:var(--zb-red-text);font-weight:600}
.zb-disp{font:700 20px/24px var(--zb-display);text-transform:uppercase;letter-spacing:.02em;color:var(--zb-t1)}
@media (min-width:1024px){.zb-disp{font-size:26px;line-height:28px}}

/* ---------- трек (общий для Z3, Z5, Z7a, Z17, A2) ---------- */
.zb-track{overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;scroll-padding-inline:var(--zb-gut);
  margin-inline:calc(-1*var(--zb-gut));padding:4px var(--zb-gut) 12px;scrollbar-width:thin;scrollbar-color:#404040 transparent}
.zb-track > ul,.zb-track > ol{list-style:none;display:flex;gap:12px;width:max-content}
.zb-track > ul > li,.zb-track > ol > li{scroll-snap-align:start}
.zb-track:focus-visible{outline-offset:-2px}
.zb-track__nav{display:none;gap:8px}
@media (min-width:1024px){.zb-track__nav:not([hidden]){display:flex}}
.zb-sec-head{display:flex;align-items:center;justify-content:space-between;gap:16px}
.zb-sec-head--end{justify-content:flex-end}
.zb-sec-head + *{margin-top:12px}

/* ---------- Z1 hero ---------- */
.zb-hero{position:relative;overflow:hidden;background:var(--zb-panel);border-radius:var(--zb-r-hero);padding:20px;isolation:isolate}
.zb-hero::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(60% 90% at 85% 40%,rgba(240,0,0,.28),transparent 70%)}
.zb-hero__txt{position:relative;z-index:1;display:flex;flex-direction:column;gap:14px}
.zb-hero__disp{max-width:60%;min-height:96px;display:flex;align-items:flex-end}
.zb-hero h1{font:700 28px/34px var(--zb-ui);color:var(--zb-t1);text-wrap:balance}
.zb-hero__lead{color:var(--zb-t2)}
.zb-hero__ctas{display:grid;gap:12px}
.zb-hero__ctas .zb-btn{width:100%}
.zb-hero__after{font-size:14px;line-height:22px;color:var(--zb-t2)}
.zb-hero__art{position:absolute;z-index:0;top:8px;right:0;height:140px;width:auto}
.zb-hero__art img{height:140px;width:auto;-webkit-mask-image:radial-gradient(closest-side,#000 62%,transparent 100%);mask-image:radial-gradient(closest-side,#000 62%,transparent 100%)}
@media (min-width:768px){
  .zb-hero{padding:32px}
  .zb-hero__ctas{grid-template-columns:repeat(2,minmax(0,max-content));align-items:start}
  .zb-hero__ctas .zb-btn{width:auto}
  .zb-hero__ctas .zb-cta{flex-direction:column;align-items:flex-start}
  .zb-hero__art,.zb-hero__art img{height:200px}
  .zb-hero__disp{max-width:66%;min-height:0}
}
@media (min-width:1024px){
  .zb-hero{display:grid;grid-template-columns:7fr 5fr;align-items:center;gap:24px;min-height:320px;padding:40px 48px}
  .zb-hero h1{font-size:40px;line-height:48px}
  .zb-hero__disp{max-width:none}
  .zb-hero__art{position:static;height:auto;display:flex;justify-content:center}
  .zb-hero__art img{height:320px}
}
.zb-hero--compact{display:block;min-height:0}
.zb-hero--compact::before{display:none}

/* ---------- Z2 текстовая секция ---------- */
.zb-read::before{content:"";display:block;height:1px;background:var(--zb-line);margin-bottom:24px}
.zb-read__body{margin-top:16px}
@media (min-width:1200px){
  .zb-read,.zb-faq{display:grid;grid-template-columns:minmax(280px,360px) 1fr;gap:0 48px;align-items:start}
  .zb-read::before{grid-column:1/-1}
  .zb-read > .zb-h2,.zb-faq > .zb-h2{position:sticky;top:72px}
  .zb-read__body,.zb-faq__list{margin-top:0;max-width:720px}
}

/* ---------- Z3 полки игр ---------- */
.zb-shelf__count{font-size:13px;line-height:18px;color:var(--zb-t3);white-space:nowrap}
.zb-shelf__desc{font-size:15px;line-height:24px;color:var(--zb-t2);max-width:80ch}
.zb-tile{width:128px;position:relative}
@media (min-width:768px){.zb-tile{width:144px}}
@media (min-width:1024px){.zb-tile{width:150px}}
@media (min-width:1440px){.zb-tile{width:152px}}
.zb-tile__img{position:relative;aspect-ratio:1;border-radius:10px 10px 0 0;overflow:hidden;background:var(--zb-raise)}
.zb-tile__img img{width:100%;height:100%;object-fit:cover}
.zb-tile__img::after{content:"";position:absolute;inset:0;background:rgba(0,0,0,.35) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M8 5.5v13l10.5-6.5z'/%3E%3C/svg%3E") center/24px no-repeat;opacity:0;transition:opacity .15s}
.zb-tile:hover .zb-tile__img::after{opacity:1}
.zb-tile:hover{transform:translateY(-2px)}
.zb-tile figcaption{background:var(--zb-panel);border-radius:0 0 10px 10px;padding:8px 10px;display:grid}
.zb-tile figcaption strong{font-size:13px;line-height:16px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.zb-tile figcaption span{font-size:12px;line-height:16px;color:var(--zb-t3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.zb-tile__ph{position:absolute;inset:0;display:grid;place-items:center;padding:10px;text-align:center;font:700 15px/18px var(--zb-display);
  text-transform:uppercase;color:var(--zb-t1);background:linear-gradient(225deg,rgba(240,0,0,.55) 0,rgba(240,0,0,0) 32%),var(--zb-raise)}
/* Z3b top 1-10 */
.zb-shelf--top ol{counter-reset:zbtop}
.zb-shelf--top .zb-tile{width:140px;counter-increment:zbtop}
@media (min-width:768px){.zb-shelf--top .zb-tile{width:168px}}
.zb-shelf--top .zb-tile__img::before{content:counter(zbtop);position:absolute;z-index:1;top:4px;right:8px;font:700 44px/44px var(--zb-display);color:#fff;
  -webkit-text-stroke:1px #0f0f0f;text-shadow:0 2px 8px rgba(0,0,0,.6)}
@media (min-width:1024px){.zb-shelf--top .zb-tile__img::before{font-size:56px;line-height:56px}}
/* Z3c postery */
.zb-shelf--poster .zb-tile{width:128px}
@media (min-width:1440px){.zb-shelf--poster .zb-tile{width:168px}}
.zb-shelf--poster .zb-tile__img{aspect-ratio:2/3;border-radius:10px}
.zb-shelf--poster figcaption{position:absolute;left:0;right:0;bottom:0;background:linear-gradient(transparent,rgba(0,0,0,.85));border-radius:0 0 10px 10px;padding:24px 10px 10px}
/* Z3d mriežka */
.zb-shelf--grid ul{list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:12px}
.zb-shelf--grid .zb-tile{width:auto}
@media (min-width:1440px){.zb-shelf--grid ul{grid-template-columns:repeat(8,1fr)}}
/* Z3e textová polica */
.zb-ttile{width:220px;height:88px;display:flex;align-items:center;gap:12px;padding:12px;background:var(--zb-panel);border-radius:10px}
.zb-ttile__ico{flex:none;width:56px;height:56px;border-radius:10px;background:var(--zb-raise);display:grid;place-items:center;color:var(--zb-red-text)}
.zb-ttile__ico .zb-i{width:26px;height:26px}
.zb-ttile p{display:grid;min-width:0}
.zb-ttile strong{font-size:14px;line-height:18px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.zb-ttile span{font-size:12px;line-height:16px;color:var(--zb-t3)}

/* ---------- Z4 плитки акций ---------- */
.zb-promo__grid{list-style:none;display:grid;gap:16px;margin-top:20px}
@media (min-width:768px){.zb-promo__grid{grid-template-columns:1fr 1fr}}
.zb-ptile{height:100%;display:flex;flex-direction:column;gap:14px;background:var(--zb-panel);border-radius:var(--zb-r-card);padding:20px}
.zb-ptile__top{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:start}
.zb-tag{display:inline-block;justify-self:start;background:var(--zb-tag);color:#0f0f0f;font:700 11px/16px var(--zb-ui);text-transform:uppercase;padding:2px 8px;border-radius:4px;letter-spacing:.02em}
.zb-ptile h3{margin-top:10px;font:600 20px/26px var(--zb-ui);color:var(--zb-t1)}
.zb-ptile__art{width:96px;height:96px;object-fit:contain}
@media (min-width:1440px){.zb-ptile__art{width:140px;height:140px}}
.zb-ptile__ico{width:48px;height:48px;border-radius:50%;background:var(--zb-raise);display:grid;place-items:center;color:var(--zb-red-text)}
.zb-ptile__ico .zb-i{width:24px;height:24px}
.zb-ptile__body{font-size:15px;line-height:24px;color:var(--zb-t2);padding-top:14px;border-top:1px solid var(--zb-line-2);display:grid;gap:10px}
.zb-ptile__foot{margin-top:auto}
.zb-ptile__foot .zb-btn{width:100%}
.zb-ptile__foot .zb-cta{flex-direction:column;align-items:stretch}

/* ---------- Z5 спорт ---------- */
.zb-sport__list{counter-reset:zbsp}
.zb-scard{counter-increment:zbsp;position:relative;overflow:hidden;width:148px;height:188px;border-radius:12px;padding:12px;display:flex;flex-direction:column;justify-content:flex-end;
  background:linear-gradient(160deg,var(--c1),var(--c2))}
.zb-scard::before{content:counter(zbsp);position:absolute;top:6px;right:10px;font:700 48px/48px var(--zb-display);color:#fff}
.zb-scard > .zb-i{position:absolute;left:10px;top:14px;width:56px;height:56px;color:rgba(255,255,255,.25)}
.zb-scard::after{content:"";position:absolute;inset:40% 0 0;background:linear-gradient(transparent,rgba(0,0,0,.55))}
.zb-scard p{position:relative;z-index:1;display:grid;gap:4px}
.zb-scard strong{font:700 18px/20px var(--zb-display);text-transform:uppercase;color:#fff}
.zb-scard span{font-size:12px;line-height:16px;color:#fff}
.zb-scard--futbal{--c1:#e02020;--c2:#7a0b0b}.zb-scard--tenis{--c1:#1f9d55;--c2:#0b4f29}.zb-scard--basketbal{--c1:#f26b1d;--c2:#8f3204}
.zb-scard--esport{--c1:#2563eb;--c2:#1e3a8a}.zb-scard--hokej{--c1:#0891b2;--c2:#0c4a6e}.zb-scard--stolny-tenis{--c1:#7c3aed;--c2:#3b0f7a}
.zb-scard--other{--c1:#444;--c2:#1c1c1c}
@media (min-width:1440px){
  .zb-sport .zb-track{overflow:visible;margin:0;padding:0}
  .zb-sport .zb-track > ol{display:grid;grid-template-columns:repeat(6,1fr);width:auto}
  .zb-scard{width:auto;height:220px}
}

/* ---------- Z6 платёжные методы ---------- */
.zb-pay__grid{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:20px}
@media (min-width:1024px){.zb-pay__grid{grid-template-columns:repeat(3,1fr)}}
@media (min-width:1440px){.zb-pay__grid--6{grid-template-columns:repeat(6,1fr)}}
.zb-pcard{height:100%;background:var(--zb-panel);border-radius:var(--zb-r-card);padding:16px;display:flex;flex-direction:column;gap:10px}
.zb-pcard__mark{height:40px;border-radius:8px;background:var(--zb-raise);display:grid;place-items:center;padding:0 8px;font:700 16px/18px var(--zb-display);
  text-transform:uppercase;color:var(--zb-t1);text-align:center}
.zb-pcard h3{font-size:18px;line-height:24px}
.zb-pcard dl{display:grid;gap:6px}
.zb-pcard dt{font-size:12px;line-height:16px;color:var(--zb-t3)}
.zb-pcard dd{font-size:13px;line-height:20px;color:var(--zb-t3)}
.zb-pcard dd.zb-pcard__sum{font-weight:700;font-size:20px;line-height:26px;color:var(--zb-t1)}
.zb-chip{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 10px;border-radius:var(--zb-r-pill);background:var(--zb-raise);color:var(--zb-t1);font-size:12px;font-weight:600}

/* ---------- Z7a шаги-трек ---------- */
.zb-steps__intro{margin-top:12px;max-width:68ch}
.zb-step{width:300px;background:var(--zb-panel);border-radius:var(--zb-r-card);overflow:hidden;display:flex;flex-direction:column}
@media (min-width:1440px){.zb-step{width:400px}}
.zb-step figure{margin:0}
.zb-step__img,.zb-shot-ph{display:block;width:100%;aspect-ratio:608/300;object-fit:contain;background:#121212}
.zb-shot-ph{display:grid;place-items:center;color:var(--zb-t4)}
.zb-shot-ph .zb-i{width:48px;height:48px}
.zb-step--phone .zb-step__img{aspect-ratio:9/19.5}
.zb-kt{padding:14px 16px 18px;display:grid;gap:6px;font-size:15px;line-height:24px}
.zb-step__num{font:700 28px/30px var(--zb-display);color:var(--zb-red)}
.zb-kt strong{display:block;font-size:16px;line-height:22px}
.zb-after{margin-top:16px}
.zb-steps .zb-track{margin-top:20px}

/* ---------- Z7b шаги вертикальные ---------- */
.zb-vsteps{list-style:none;display:grid;gap:0;max-width:720px;counter-reset:zbv}
.zb-vsteps li{counter-increment:zbv;position:relative;display:grid;grid-template-columns:32px 1fr;gap:14px;padding-bottom:18px}
.zb-vsteps li::before{content:counter(zbv);width:32px;height:32px;border-radius:8px;background:var(--zb-raise);display:grid;place-items:center;
  font:700 16px/1 var(--zb-display);color:var(--zb-t1)}
.zb-vsteps li:not(:last-child)::after{content:"";position:absolute;left:16px;top:36px;bottom:2px;width:1px;background:var(--zb-line-2)}
.zb-vsteps li > div{padding-top:4px}

/* ---------- Z8 split ---------- */
.zb-split__grid{display:grid;gap:20px;margin-top:16px}
.zb-split__fig img{border-radius:var(--zb-r-card);border:1px solid var(--zb-line-2);width:100%}
.zb-split__fig figcaption{margin-top:8px;font-size:13px;line-height:20px;color:var(--zb-t3)}
.zb-split--phone .zb-split__fig{justify-self:center;width:min(280px,100%)}
.zb-split--phone .zb-split__fig img{aspect-ratio:9/19.5;object-fit:cover;object-position:top;border:6px solid #262626;border-radius:20px}
@media (min-width:1024px){
  .zb-split__grid{grid-template-columns:6fr 6fr;gap:40px;align-items:center}
  .zb-split--phone .zb-split__grid{grid-template-columns:7fr 4fr}
  .zb-split--rev .zb-split__fig{order:-1}
  .zb-split--rev.zb-split--phone .zb-split__grid{grid-template-columns:4fr 7fr}
}

/* ---------- Z9 таблица ---------- */
.zb-tsec > p{max-width:68ch}
.zb-tsec > * + *{margin-top:16px}
.zb-table{overflow-x:auto;border-radius:var(--zb-r-card);
  background:linear-gradient(to right,var(--zb-bg) 30%,transparent) left/40px 100% no-repeat local,
    linear-gradient(to left,var(--zb-bg) 30%,transparent) right/40px 100% no-repeat local,
    radial-gradient(farthest-side at 100% 50%,rgba(0,0,0,.6),transparent) right/14px 100% no-repeat scroll}
.zb-table table{width:100%;min-width:560px;font-size:14px;line-height:22px;font-variant-numeric:tabular-nums}
.zb-table caption{caption-side:top;text-align:left;padding:0 0 10px;font-size:14px;font-weight:600;color:var(--zb-t2)}
.zb-table th,.zb-table td{padding:12px 16px;text-align:left;vertical-align:top;border-bottom:1px solid var(--zb-line)}
.zb-table thead th{background:var(--zb-raise);color:var(--zb-t1);font-size:13px;font-weight:600}
.zb-table thead th:first-child{border-top-left-radius:12px}
.zb-table thead th:last-child{border-top-right-radius:12px}
.zb-table tbody th,.zb-table tbody td{background:var(--zb-panel)}
.zb-table tbody th{color:var(--zb-t1);font-weight:600;position:sticky;left:0;z-index:1}
.zb-table tbody tr:last-child > *{border-bottom:0}
.zb-table tbody tr:last-child th{border-bottom-left-radius:12px}
.zb-table tbody tr:last-child td:last-child{border-bottom-right-radius:12px}
.zb-table--2 table{min-width:0}
@media (max-width:599px){.zb-table tbody th{box-shadow:1px 0 0 var(--zb-line-2)}}

/* ---------- Z10 факты ---------- */
.zb-facts{position:relative;background:var(--zb-panel);border-radius:var(--zb-r-hero);padding:8px 24px;overflow:hidden}
.zb-facts::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--zb-grad)}
.zb-facts table{width:100%}
.zb-facts caption{text-align:left;padding:12px 0 6px;font-size:14px;font-weight:600;color:var(--zb-t2)}
.zb-facts tr,.zb-facts th,.zb-facts td{display:block}
.zb-facts tbody tr{padding:12px 0;border-top:1px solid var(--zb-line-2)}
.zb-facts tbody th{font-size:13px;line-height:18px;font-weight:600;text-transform:uppercase;color:var(--zb-t3);text-align:left}
.zb-facts tbody td{font-size:15px;line-height:24px;color:var(--zb-t1)}
@media (min-width:768px){
  .zb-facts tbody tr{display:grid;grid-template-columns:40% 1fr;gap:16px}
}
@media (min-width:1440px){.zb-facts tbody{display:grid;grid-template-columns:1fr 1fr;column-gap:40px}}

/* ---------- Z11 FAQ ---------- */
.zb-faq__list{display:grid;gap:8px;margin-top:16px}
.zb-faq details{background:var(--zb-panel);border-radius:var(--zb-r-card);overflow:hidden}
.zb-faq summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 20px;cursor:pointer}
.zb-faq summary::-webkit-details-marker{display:none}
.zb-faq summary h3{font:600 16px/24px var(--zb-ui);color:var(--zb-t1)}
.zb-faq summary .zb-i{width:20px;height:20px;color:var(--zb-icon);transition:transform .2s}
.zb-faq details[open] summary{background:var(--zb-raise)}
.zb-faq details[open] summary .zb-i{transform:rotate(180deg)}
.zb-faq__a{padding:14px 20px 18px;font-size:15px;line-height:24px;color:var(--zb-t2);display:grid;gap:10px}
@media (min-width:1024px) and (max-width:1199px){.zb-faq__list{max-width:860px}}

/* ---------- Z12 RG ---------- */
.zb-rg{position:relative;background:var(--zb-panel);border:1px solid rgba(255,87,87,.35);border-radius:var(--zb-r-hero);padding:24px;display:grid;gap:20px}
.zb-rg__ico{width:32px;height:32px;color:var(--zb-red-text)}
.zb-rg__age{position:absolute;top:16px;right:16px;font:700 12px/16px var(--zb-ui);color:var(--zb-t2);border:1px solid var(--zb-t4);border-radius:4px;padding:2px 6px}
.zb-rg__main > * + *{margin-top:14px}
.zb-rg__main p{max-width:68ch}
.zb-rg__call{display:flex;align-items:center;gap:12px;background:var(--zb-raise);border-radius:var(--zb-r-card);padding:16px 18px;align-self:start}
.zb-rg__call .zb-i{width:24px;height:24px;color:var(--zb-red-text)}
.zb-rg__call a{display:block;font:700 22px/28px var(--zb-ui);color:var(--zb-t1);text-decoration:none;font-variant-numeric:tabular-nums}
.zb-rg__call a:hover{text-decoration:underline}
.zb-rg__call span{display:block;font-size:13px;line-height:18px;color:var(--zb-t3)}
@media (min-width:1024px){.zb-rg{grid-template-columns:1fr 300px;padding:32px;gap:40px}.zb-rg__call{margin-top:52px}}

/* ---------- Z13 CTA-полоса ---------- */
.zb-band{position:relative;overflow:hidden;background:var(--zb-panel);border-radius:var(--zb-r-hero);padding:20px 24px;display:grid;gap:16px;isolation:isolate}
.zb-band::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(50% 120% at 0% 50%,rgba(240,0,0,.25),transparent 70%)}
.zb-band__txt{font:700 18px/22px var(--zb-display);text-transform:uppercase;letter-spacing:.02em;color:var(--zb-t1)}
.zb-band .zb-btn{width:100%}
@media (min-width:768px){.zb-band{grid-template-columns:1fr auto;align-items:center}.zb-band .zb-btn{width:auto}}

/* ---------- Z14 предупреждение ---------- */
.zb-note{position:relative;background:var(--zb-panel);border-radius:var(--zb-r-card);padding:20px 20px 20px 24px;max-width:960px}
.zb-note::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--zb-tag);border-radius:12px 0 0 12px}
.zb-note .zb-tag{display:inline-flex;align-items:center;gap:6px;margin-bottom:10px}
.zb-note .zb-tag .zb-i{width:14px;height:14px}
.zb-note .zb-h2{font-size:20px;line-height:26px}
.zb-note > * + *{margin-top:12px}

/* ---------- Z15 список с иконками ---------- */
.zb-feat{list-style:none;display:grid;gap:16px 24px}
@media (min-width:1024px){.zb-feat{grid-template-columns:1fr 1fr}}
.zb-feat li{display:grid;grid-template-columns:44px 1fr;gap:14px;align-items:start}
.zb-feat__ico{width:44px;height:44px;border-radius:10px;background:var(--zb-raise);display:grid;place-items:center;color:var(--zb-red-text)}
.zb-feat__ico .zb-i{width:24px;height:24px}
.zb-feat p{font-size:15px;line-height:24px}
.zb-feat strong{display:block;font-size:16px;line-height:22px}

/* ---------- Z16 чипы ---------- */
.zb-chips{list-style:none;display:flex;flex-wrap:wrap;gap:8px}
.zb-chips li{display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 14px;border-radius:var(--zb-r-pill);background:var(--zb-raise);color:var(--zb-t1);font-size:14px;font-weight:600}
.zb-chips .zb-i{color:var(--zb-red-text)}

/* ---------- Z17 категории ---------- */
.zb-cat{width:168px;height:100%;background:var(--zb-panel);border-radius:var(--zb-r-card);padding:12px 14px;display:grid;gap:8px;align-content:start}
.zb-cat__ico{width:52px;height:52px;border-radius:50%;background:var(--zb-raise);display:grid;place-items:center;color:var(--zb-t1);border:1px solid transparent}
.zb-cat:hover .zb-cat__ico{border-color:var(--zb-red)}
.zb-cat__ico .zb-i{width:28px;height:28px}
.zb-cat strong{font-size:14px;line-height:20px}
.zb-cat span{font-size:12px;line-height:16px;color:var(--zb-t3)}
@media (min-width:1024px){
  .zb-cats .zb-track{overflow:visible;margin:0;padding:0}
  .zb-cats .zb-track > ul{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));width:auto}
  .zb-cat{width:auto}
}

/* ---------- A1-A7 /aplikacia/ ---------- */
.zb-app-head{background:var(--zb-panel);border-radius:var(--zb-r-hero);padding:20px;display:grid;gap:16px}
.zb-app-head__top{display:grid;grid-template-columns:88px 1fr;gap:16px;align-items:center}
.zb-app-head__icon{width:88px;height:88px;border-radius:20px;border:1px solid var(--zb-line-2)}
.zb-app-head h1{font:700 24px/30px var(--zb-ui);color:var(--zb-t1)}
.zb-app-head__by{margin-top:4px;font-size:14px;font-weight:600;color:var(--zb-red-text)}
.zb-app-facts{display:grid;grid-template-columns:repeat(4,1fr);text-align:center}
.zb-app-facts div + div{border-left:1px solid var(--zb-line-2)}
.zb-app-facts dd{font-size:15px;line-height:20px;font-weight:600;color:var(--zb-t1)}
.zb-app-facts dt{font-size:11px;line-height:16px;color:var(--zb-t3)}
.zb-app-facts div{display:flex;flex-direction:column-reverse;padding:0 6px}
.zb-app-head__ctas{display:grid;gap:10px}
.zb-app-head__ctas .zb-btn{width:100%}
@media (min-width:1024px){
  .zb-app-head{padding:32px}
  .zb-app-head__top{grid-template-columns:120px 1fr;gap:24px}
  .zb-app-head__icon{width:120px;height:120px;border-radius:28px}
  .zb-app-head h1{font-size:32px;line-height:40px}
  .zb-app-head__ctas{grid-template-columns:repeat(2,max-content)}
  .zb-app-head__ctas .zb-btn{min-width:220px}
  .zb-app-facts{max-width:560px}
}
.zb-app-shots{width:200px}
.zb-app-shots img{width:200px;aspect-ratio:9/19.5;object-fit:cover;object-position:top;border-radius:16px;border:1px solid var(--zb-line-2)}
.zb-app-shots figcaption{margin-top:8px;font-size:12px;line-height:16px;color:var(--zb-t3)}
@media (min-width:1024px){.zb-app-shots,.zb-app-shots img{width:240px}}
.zb-app-info dl{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:16px}
@media (min-width:1024px){.zb-app-info dl{grid-template-columns:repeat(4,1fr)}}
.zb-app-info dl div{background:var(--zb-panel);border-radius:10px;padding:12px;display:flex;flex-direction:column-reverse;gap:2px}
.zb-app-info dt{font-size:12px;line-height:16px;color:var(--zb-t3)}
.zb-app-info dd{font-size:15px;line-height:22px;font-weight:600;color:var(--zb-t1)}
.zb-app-install{display:grid;gap:16px}
@media (min-width:1024px){.zb-app-install{grid-template-columns:1fr 1fr;align-items:stretch}}
.zb-app-card{background:var(--zb-panel);border-radius:var(--zb-r-hero);padding:20px}
.zb-app-card__head{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.zb-app-card__head .zb-i{width:28px;height:28px;color:var(--zb-red-text)}
.zb-app-card .zb-h2{font-size:20px;line-height:26px}
.zb-app-card > * + *{margin-top:14px}
.zb-app-req{background:var(--zb-panel);border-radius:var(--zb-r-hero);padding:20px;max-width:960px}
.zb-app-req > * + *{margin-top:14px}
.zb-checks{list-style:none;display:grid;gap:10px}
@media (min-width:1024px){.zb-checks{grid-template-columns:1fr 1fr;gap:10px 24px}}
.zb-checks li{display:grid;grid-template-columns:20px 1fr;gap:10px}
.zb-checks .zb-i{width:20px;height:20px;color:var(--zb-red-text);margin-top:3px}
.zb-app-tabbar__mock{list-style:none;display:grid;grid-template-columns:repeat(5,1fr);max-width:480px;background:var(--zb-bg);border:1px solid var(--zb-line-2);border-radius:12px;padding:10px 4px}
.zb-app-tabbar__mock li{display:grid;justify-items:center;gap:4px;font-size:11px;line-height:14px;color:var(--zb-t3)}
.zb-app-tabbar__mock .zb-i{width:22px;height:22px}
.zb-app-tabbar__grid{display:grid;gap:20px;margin-top:16px}
@media (min-width:1024px){.zb-app-tabbar__grid{grid-template-columns:480px 1fr;gap:40px;align-items:start}}

/* ---------- 404 ---------- */
.zb-404 .zb-hero__txt{max-width:640px}
@media (min-width:1440px){.zb-shelf--grid.zb-shelf--c5 ul{grid-template-columns:repeat(5,1fr)}}
/* отступы внутри витринных секций (проверено на /, 22.10) */
:where(.zb-shelf,.zb-cats,.zb-sport,.zb-promo,.zb-pay,.zb-app-info,.zb-app-tabbar) > * + *{margin-top:12px}
.zb-ptile__art{-webkit-mask-image:radial-gradient(closest-side,#000 60%,transparent 100%);mask-image:radial-gradient(closest-side,#000 60%,transparent 100%)}
/* Z1 на <768: display-строка не заходит под арт (проверено на /, 22.10) */
@media (max-width:767px){.zb-hero__disp{max-width:calc(100% - 132px)}.zb-hero__art,.zb-hero__art img{height:120px}}
/* A1/A2 (проверено на /aplikacia/, 22.10) */
.zb-app-head__ctas .zb-cta{flex-direction:column;align-items:stretch}
.zb-app-strip .zb-sec-head:has(.zb-track__nav[hidden]){display:none}
@media (min-width:1024px){.zb-app-head__ctas .zb-cta{align-items:flex-start}.zb-app-head__ctas .zb-btn{width:auto}}
.zb-split__grid > *,.zb-read__body,.zb-faq__list,.zb-rg__main{min-width:0}
/* Z9 + кадр (/stavky/) */
.zb-tsec__fig img{border-radius:var(--zb-r-card);border:1px solid var(--zb-line-2);width:100%;max-width:960px}
.zb-tsec__fig figcaption{margin-top:8px;font-size:13px;line-height:20px;color:var(--zb-t3)}
/* Z4 шапка-split (opt.headArt, /bonus/ vernosť) */
.zb-promo__head{display:grid;gap:20px}
.zb-promo__head > *{min-width:0}
@media (min-width:1024px){.zb-promo__head{grid-template-columns:6fr 6fr;gap:40px;align-items:center}}