/* «Знижки сьогодні» (templates/znyzhky.html; owner 2026-10-07: the goods first, prices checked daily; the hub is a
   digest of sections, a topic page a grid): the heading
   with the day of the check, topic chips and the sort, a grid of product cards (picture from the shop's server, the
   discount badge, name, new and old price, the saving, the shop's sign, the check mark), the strip of shops, the bot
   panel and the «how we check» note. Tokens only (static/tokens.css). Loaded by the page itself. */
.zn{max-width:1180px;margin:0 auto;padding:22px 16px 60px;box-sizing:border-box}  /* the page does not load the deals feed's stylesheet, so the shell needs its own width (owner 07.10.2026: «занадто широко») */
.zn-head{margin:22px 0 18px}
.zn-head h1{font-size:clamp(26px,3vw,40px);line-height:1.12;letter-spacing:-.8px;margin:0 0 8px}
.zn-lead{margin:0;color:var(--c-muted);font-size:var(--fs-base)}.zn-lead b{color:var(--c-ink);font-weight:600}
.zn-bar{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:0 0 18px}
.zn-chips{display:flex;flex-wrap:wrap;gap:8px;flex:1 1 auto;min-width:0}
.zn-chips a{display:inline-flex;align-items:center;gap:7px;min-height:40px;padding:0 14px;border:1px solid var(--c-line);border-radius:var(--r-pill);background:var(--c-surface);color:var(--c-text);font-size:var(--fs-sm);text-decoration:none;white-space:nowrap}
.zn-chips a small{color:var(--c-muted);font-size:var(--fs-xs)}
.zn-chips a:hover{border-color:var(--c-primary-line);text-decoration:none}
.zn-chips a[aria-current]{border-color:var(--c-primary);background:var(--c-primary-soft);color:var(--c-primary);font-weight:600}
.zn-sort{flex:0 0 auto;margin:0}
.zn-sort select{height:44px;max-width:260px;padding:0 34px 0 14px;border:1px solid var(--c-line-strong);border-radius:var(--r-md);background-color:var(--c-surface);color:var(--c-text);font:inherit;font-size:var(--fs-ui)}
.zn-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.zn-card{display:flex;flex-direction:column;gap:6px;padding:12px;border:1px solid var(--c-line);border-radius:var(--r-lg);background:var(--c-surface);color:var(--c-ink);transition:box-shadow .15s ease,border-color .15s ease}
.zn-card:hover{border-color:var(--c-primary-line);box-shadow:var(--shadow-md)}
.zn-main{display:flex;flex-direction:column;gap:6px;color:var(--c-ink);text-decoration:none}.zn-main:hover{text-decoration:none}
.zn-meta{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:0;font-size:var(--fs-sm);color:var(--c-muted);min-width:0}
.zn-meta a{color:var(--c-muted);text-decoration:none}.zn-meta a:hover{color:var(--c-primary);text-decoration:underline}
.zn-out{flex:0 0 auto;font-weight:600;white-space:nowrap}
.zn-section{margin:0 0 26px}
.zn-section-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:0 0 12px}
.zn-section-head h2{margin:0;font-size:var(--fs-h3);letter-spacing:-.3px}.zn-section-head h2 a{color:var(--c-ink);text-decoration:none}.zn-section-head h2 a:hover{color:var(--c-primary)}
.zn-section-all{flex:0 0 auto;color:var(--c-primary);font-weight:600;font-size:var(--fs-ui);text-decoration:none;white-space:nowrap}.zn-section-all:hover{text-decoration:underline}
.zn-pic{position:relative;display:block;aspect-ratio:1;border-radius:var(--r-md);background:var(--c-surface-muted);overflow:hidden}
.zn-pic img{display:block;width:100%;height:100%;object-fit:contain;background:#fff}
.zn-pic.is-empty,.zn-pic.is-broken{background:var(--c-surface-muted) linear-gradient(135deg,transparent 46%,var(--c-line) 46%,var(--c-line) 54%,transparent 54%)}
.zn-pic.is-broken img{display:none}
.zn-badge{position:absolute;left:8px;top:8px;background:#eaf4ff;color:#0b5cad;font-size:var(--fs-sm);font-weight:700;padding:3px 9px;border-radius:var(--r-pill)}
.zn-draft{position:absolute;right:8px;top:8px;background:var(--c-ink);color:#fff;font-size:var(--fs-xs);padding:3px 8px;border-radius:var(--r-pill)}
.zn-name{font-size:var(--fs-ui);line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.6em}
.zn-price{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.zn-price strong{font-size:var(--fs-xl);color:var(--c-primary);letter-spacing:-.3px}
.zn-price del{font-size:var(--fs-sm);color:var(--c-muted)}
.zn-save{font-size:var(--fs-sm);font-weight:600;color:var(--c-success)}
.zn-shop{display:inline-flex;align-items:center;gap:6px;min-width:0}
.zn-shop img{width:20px;height:20px;border-radius:6px;flex:0 0 auto}
.zn-shop span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.zn-mark{margin:auto 0 0;font-size:var(--fs-xs);color:var(--c-muted);border-top:1px dashed var(--c-line);padding-top:6px}
.zn-mark.is-good{color:var(--c-success)}.zn-mark.is-doubt{color:var(--c-warning)}
.zn-pages{display:flex;align-items:center;justify-content:center;gap:16px;margin:22px 0 10px;font-size:var(--fs-ui);color:var(--c-muted)}
.zn-pages a{color:var(--c-primary);font-weight:600;text-decoration:none}
.zn-shops-title{font-size:var(--fs-h3);margin:30px 0 12px;letter-spacing:-.3px}
.zn-shops{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 26px}
.zn-shopchip{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--c-line);border-radius:var(--r-pill);padding:6px 14px 6px 6px;color:var(--c-ink);text-decoration:none;font-size:var(--fs-ui);background:var(--c-surface)}
a.zn-shopchip:hover{border-color:var(--c-primary-line);text-decoration:none}
.zn-shopchip img{width:28px;height:28px;border-radius:50%}
.zn-shopchip.is-plain{padding-left:14px}
.zn-shopchip small{color:var(--c-muted)}
.zn-two{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:0 0 30px}
.zn-box{border:1px solid var(--c-line);border-radius:var(--r-lg);padding:18px 20px;background:var(--c-surface)}
.zn-box h3{margin:0 0 6px;font-size:var(--fs-lg)}
.zn-box p{margin:0 0 12px;color:var(--c-muted);font-size:var(--fs-ui);line-height:1.5}
.zn-box ul{margin:0;padding-left:18px;font-size:var(--fs-ui);color:var(--c-text);line-height:1.5}
.zn-box .btn{display:inline-flex;align-items:center;min-height:42px;padding:0 18px;border-radius:var(--r-pill);background:var(--c-primary);color:var(--c-on-primary);font-weight:600;font-size:var(--fs-ui);text-decoration:none}
.zn-box .btn:hover{background:var(--c-primary-strong);text-decoration:none}
.zn-empty{padding:28px;border:1px dashed var(--c-line-strong);border-radius:var(--r-lg);color:var(--c-muted);text-align:center}
.zn-foot{margin:0 0 30px;font-size:var(--fs-xs);color:var(--c-muted)}
@media(max-width:1100px){.zn-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:900px){.zn-two{grid-template-columns:1fr}}
@media(max-width:640px){
 .zn-head{margin:14px 0 12px}
 .zn-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
 .zn-card{padding:9px;border-radius:var(--r-md)}
 .zn-price strong{font-size:var(--fs-lg)}
 .zn-sort{flex:1 1 100%}.zn-sort select{width:100%;max-width:none}
 .zn-chips{flex-wrap:nowrap;overflow-x:auto;padding-bottom:4px;-webkit-overflow-scrolling:touch}
}

/* the product's page (templates/znyzhky_product.html; owner 07.10.2026: «історія цін повинна бути вище і основним
   акцентом», then «не на стільки багато акценту на графік»): the heading and the shop line, two cards side by side —
   the price history (the period pills, the verdict, the chart, three facts) and the picture with the price and the
   buttons; on a phone: heading → picture → price and buttons → history (owner 07.10.2026: «На мобільному фото зверху»; the aside dissolves, its parts get an order) */
.znp-head{display:block;margin:14px 0 14px}
.znp-head h1{font-size:clamp(21px,2.3vw,28px);line-height:1.2;letter-spacing:-.4px;margin:0}
.znp-deal-line{margin:8px 0 0}  /* owner 08.10.2026: «прибрати назву магазину під назвою» — only a deal product has a line under the H1: its deal pill */
.znp-deal{display:inline-flex;align-items:center;min-height:30px;padding:0 12px;border-radius:var(--r-pill);background:#eaf4ff;color:#0b5cad;font-weight:600;font-size:var(--fs-sm);text-decoration:none}
.znp-deal:hover{background:#d9ebfc;text-decoration:none}
.znp-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:14px;align-items:start;margin:0 0 30px}
.znp-history,.znp-side{border:1px solid var(--c-line);border-radius:var(--r-md);background:var(--c-surface);padding:16px}
.znp-history{position:relative}
.znp-history>input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.znp-history-head{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin:0 0 8px}
.znp-history-head h2{margin:0;font-size:var(--fs-base);font-weight:600;letter-spacing:-.2px}
.znp-periods{display:flex;gap:6px}
.znp-periods label{display:inline-flex;align-items:center;min-height:30px;padding:0 12px;border:1px solid var(--c-line);border-radius:var(--r-pill);font-size:var(--fs-xs);color:var(--c-text);cursor:pointer;background:var(--c-surface)}
#znp-p30:checked~.znp-history-head [for=znp-p30],#znp-p90:checked~.znp-history-head [for=znp-p90],#znp-pall:checked~.znp-history-head [for=znp-pall]{border-color:#eaf4ff;background:#eaf4ff;color:#0b5cad;font-weight:600}
#znp-p30:focus-visible~.znp-history-head [for=znp-p30],#znp-p90:focus-visible~.znp-history-head [for=znp-p90],#znp-pall:focus-visible~.znp-history-head [for=znp-pall]{outline:2px solid var(--c-primary);outline-offset:2px}
.znp-verdict{margin:0 0 10px;font-size:var(--fs-ui);color:var(--c-text)}
.znp-verdict.is-low{color:#16955b;font-weight:600}.znp-verdict.is-low::before{content:"↓ "}
.znp-chart svg{display:block;width:100%;height:auto;font-family:inherit}
.znp-chart .znp-svg-narrow{display:none}  /* the phone's variant of the chart (owner 07.10.2026: no horizontal scroll); the selectors outrank «.znp-chart svg» */
.znp-chart-30,.znp-chart-90{display:none}
#znp-p30:checked~.znp-chart-30,#znp-p90:checked~.znp-chart-90{display:block}
#znp-p30:checked~.znp-chart-all,#znp-p90:checked~.znp-chart-all{display:none}
.znp-fill{margin:6px 0 0;font-size:var(--fs-xs);color:var(--c-muted)}
.znp-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:14px 0 0}  /* the four facts of the owner's mockup (07.10.2026) */
.znp-stats div{background:#f6f8fb;border-radius:10px;padding:12px 14px;min-width:0}
.znp-stats dt{font-size:var(--fs-sm);color:var(--c-text);margin:0 0 6px;line-height:1.25}
.znp-stats dd{margin:0;font-size:var(--fs-lg);font-weight:700;color:var(--c-ink);letter-spacing:-.2px}.znp-stats dd small{display:block;font-size:var(--fs-xs);font-weight:400;color:var(--c-muted);margin-top:2px}
.znp-oldnote{margin:10px 0 0;font-size:var(--fs-xs);color:var(--c-muted)}
.znp-pic{position:relative;height:240px;border-radius:8px;background:var(--c-surface-muted);overflow:hidden;margin:0 0 14px;cursor:zoom-in}
.znp-pic img{display:block;width:100%;height:100%;object-fit:contain;background:#fff}
.znp-pic.is-empty{background:var(--c-surface-muted) linear-gradient(135deg,transparent 46%,var(--c-line) 46%,var(--c-line) 54%,transparent 54%)}
.znp-pic .zn-badge{font-size:var(--fs-sm);padding:4px 11px;left:10px;top:10px}
.znp-gallery{position:relative;margin:0 0 14px}
.znp-gallery>input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.znp-gallery .znp-pic{margin:0 0 8px}
.znp-pic .znp-slide{display:none}  /* stronger than «.znp-pic img{display:block}», or every slide stays visible and the first one covers the rest (owner 07.10.2026: «натиснув на 3 мініатюру і фото велике не змінилось») */
#znp-g1:checked~.znp-pic .znp-slide-1,#znp-g2:checked~.znp-pic .znp-slide-2,#znp-g3:checked~.znp-pic .znp-slide-3,#znp-g4:checked~.znp-pic .znp-slide-4,#znp-g5:checked~.znp-pic .znp-slide-5{display:block}
.znp-thumbs{display:flex;gap:6px;overflow-x:auto;padding:2px;-webkit-overflow-scrolling:touch}
.znp-thumbs label{flex:0 0 auto;width:56px;height:56px;border:1px solid var(--c-line);border-radius:6px;overflow:hidden;cursor:pointer;background:#fff}
.znp-thumbs img{display:block;width:100%;height:100%;object-fit:contain}
#znp-g1:checked~.znp-thumbs [for=znp-g1],#znp-g2:checked~.znp-thumbs [for=znp-g2],#znp-g3:checked~.znp-thumbs [for=znp-g3],#znp-g4:checked~.znp-thumbs [for=znp-g4],#znp-g5:checked~.znp-thumbs [for=znp-g5]{border-color:var(--c-primary);box-shadow:0 0 0 1px var(--c-primary)}
#znp-g1:focus-visible~.znp-thumbs [for=znp-g1],#znp-g2:focus-visible~.znp-thumbs [for=znp-g2],#znp-g3:focus-visible~.znp-thumbs [for=znp-g3],#znp-g4:focus-visible~.znp-thumbs [for=znp-g4],#znp-g5:focus-visible~.znp-thumbs [for=znp-g5]{outline:2px solid var(--c-primary);outline-offset:2px}
/* the lightbox (znyzhky.js builds it; owner 07.10.2026: «Нема лайтбокса для збільшення») */
.znp-lightbox{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;background:rgba(10,16,24,.92)}
.znp-lightbox[hidden]{display:none}
.znp-lightbox img{max-width:min(96vw,1400px);max-height:92vh;object-fit:contain;background:#fff;border-radius:8px}
.znp-lightbox button{position:absolute;border:0;background:rgba(255,255,255,.14);color:#fff;font:inherit;font-size:34px;line-height:1;width:48px;height:48px;border-radius:50%;cursor:pointer}
.znp-lightbox button:hover{background:rgba(255,255,255,.28)}.znp-lightbox button:focus-visible{outline:2px solid #fff;outline-offset:2px}
.znp-lb-close{top:16px;right:16px}.znp-lb-prev{left:12px;top:50%;transform:translateY(-50%)}.znp-lb-next{right:12px;top:50%;transform:translateY(-50%)}
.znp-lightbox.is-single .znp-lb-prev,.znp-lightbox.is-single .znp-lb-next{display:none}
body.znp-lb-open{overflow:hidden}
.znp-price{margin:0 0 4px}.znp-price strong{font-size:26px;font-weight:600;color:var(--c-primary);letter-spacing:-.5px}
.znp-was{margin:0 0 8px;font-size:var(--fs-sm);color:var(--c-muted)}.znp-was del{color:var(--c-muted)}.znp-was .zn-save{font-size:var(--fs-sm)}
.znp-mark{border-top:0;padding-top:0;margin:0 0 6px;font-size:var(--fs-sm)}
.znp-checked{margin:0 0 12px;font-size:var(--fs-xs);color:var(--c-muted)}
.znp-actions{display:flex;flex-direction:column;gap:8px;margin:0}
.znp-buy,.znp-watch{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 18px;border-radius:var(--r-pill);font-weight:600;font-size:var(--fs-base);text-decoration:none}
.znp-buy{background:var(--c-primary);color:var(--c-on-primary)}.znp-buy:hover{background:var(--c-primary-strong);text-decoration:none}
.znp-watch{border:1px solid var(--c-line-strong);background:var(--c-surface);color:var(--c-primary)}.znp-watch:hover{border-color:var(--c-primary);background:var(--c-surface-muted);text-decoration:none}
.znp-similar{margin:0 0 30px}
@media(max-width:900px){
 .znp-grid{display:flex;flex-direction:column;gap:12px;align-items:stretch}
 .znp-side{display:contents}
 .znp-pic,.znp-gallery{order:1;margin:0}
 .znp-buybox{order:2;border:1px solid var(--c-line);border-radius:var(--r-md);background:var(--c-surface);padding:14px}
 .znp-history{order:3}
 .znp-pic{height:220px;border:1px solid var(--c-line)}
 .znp-gallery .znp-pic{margin:0 0 8px}
}
@media(max-width:1100px){.znp-stats{grid-template-columns:1fr 1fr}}
@media(max-width:640px){
 .znp-chart .znp-svg-wide{display:none}.znp-chart .znp-svg-narrow{display:block}
 .znp-stats{grid-template-columns:1fr 1fr;gap:8px}
 .znp-stats div{padding:10px 12px}
}

/* Чорна п'ятниця (templates/znyzhky_event.html, 07.10.2026): the date and the days left under the H1, four facts, the
   reminder box, the teaser grid, the two text sections */
.zne-date{margin:0 0 10px;font-size:var(--fs-lg);color:var(--c-ink)}
.zne-facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:0 0 22px}
.zne-facts div{background:#f6f8fb;border-radius:10px;padding:12px 14px;min-width:0}
.zne-facts dt{font-size:var(--fs-sm);color:var(--c-text);margin:0 0 6px}
.zne-facts dd{margin:0;font-size:var(--fs-lg);font-weight:700;color:var(--c-ink)}.zne-facts dd small{display:block;font-size:var(--fs-xs);font-weight:400;color:var(--c-muted);margin-top:2px}
.zne-remind{margin:0 0 26px}
.zne-text{margin:0 0 26px;max-width:860px}
.zne-text h2{font-size:var(--fs-h3);margin:0 0 10px;letter-spacing:-.3px}
.zne-text ol{margin:0;padding-left:20px;font-size:var(--fs-base);line-height:1.55;color:var(--c-text)}.zne-text li{margin:0 0 8px}
.zne-text p{margin:0 0 10px;font-size:var(--fs-base);line-height:1.55;color:var(--c-text)}
@media(max-width:900px){.zne-facts{grid-template-columns:1fr 1fr}}

/* the deal's goods page (08.10.2026): the way back to the deal, the way to the rest in the shop */
.zn-deal-back{margin:0;font-size:var(--fs-ui)}
.zn-deal-more{margin:18px 0 0;font-size:var(--fs-ui)}

/* the discount's end (owner 08.10.2026: «більш помітний таймер закінчення»): a pill on the card, a line on the product page; red within three days */
.zn-timer{position:absolute;left:8px;bottom:8px;background:#fff4e5;color:#b45309;font-size:var(--fs-xs);font-weight:700;padding:3px 9px;border-radius:var(--r-pill)}
.zn-timer.is-soon{background:#fde8e8;color:#b91c1c}
.znp-timer{margin:0 0 10px;padding:9px 12px;border-radius:var(--r-md);background:#fff4e5;color:#b45309;font-size:var(--fs-ui)}
.znp-timer b{font-weight:700}
.znp-timer.is-soon{background:#fde8e8;color:#b91c1c}

/* the tools row and the «Фільтри» panel (owner 08.10.2026: «повноцінний фільтр по параметрах, що б було зручно шукати»; «більш якісний дизайн») */
.zn-bar{margin-bottom:10px}
.zn-tools{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin:0 0 16px;flex-wrap:wrap}
.zn-filters{flex:1 1 auto;min-width:0}
.zn-filters summary{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border:1px solid var(--c-line-strong);border-radius:var(--r-md);background:var(--c-surface);color:var(--c-ink);font-size:var(--fs-ui);font-weight:600;cursor:pointer;list-style:none;user-select:none}
.zn-filters summary::-webkit-details-marker{display:none}
.zn-filters summary::before{content:"";flex:0 0 auto;width:16px;height:12px;background:linear-gradient(currentColor,currentColor) 0 0/100% 2px no-repeat,linear-gradient(currentColor,currentColor) 0 5px/68% 2px no-repeat,linear-gradient(currentColor,currentColor) 0 10px/36% 2px no-repeat}
.zn-filters summary b{display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:22px;padding:0 6px;border-radius:var(--r-pill);background:var(--c-primary);color:var(--c-on-primary);font-size:var(--fs-xs)}
.zn-filters[open] summary{border-color:var(--c-primary);color:var(--c-primary)}
.zn-filter-form{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px 24px;margin:12px 0 0;padding:16px 18px;border:1px solid var(--c-line);border-radius:var(--r-lg);background:var(--c-surface)}
.zn-filter-form fieldset{margin:0;padding:0;border:0;min-width:0}
.zn-filter-form legend{margin:0 0 8px;padding:0;font-weight:600;font-size:var(--fs-ui)}
.zn-f-range{display:flex;align-items:center;gap:8px;color:var(--c-muted)}
.zn-f-range input{width:100%;min-width:0;height:40px;padding:0 10px;border:1px solid var(--c-line-strong);border-radius:var(--r-md);background:var(--c-surface);color:var(--c-text);font:inherit;font-size:var(--fs-ui)}
.zn-f-chips{display:flex;flex-wrap:wrap;gap:6px}
.zn-f-chips label{position:relative}
.zn-f-chips input{position:absolute;inset:0;opacity:0;margin:0}
.zn-f-chips span{display:inline-flex;align-items:center;min-height:34px;padding:0 12px;border:1px solid var(--c-line);border-radius:var(--r-pill);font-size:var(--fs-sm);cursor:pointer}
.zn-f-chips input:checked+span{border-color:var(--c-primary);background:var(--c-primary-soft);color:var(--c-primary);font-weight:600}
.zn-f-chips input:focus-visible+span{outline:2px solid var(--c-primary);outline-offset:2px}
.zn-f-list{display:flex;flex-direction:column;gap:5px;max-height:196px;overflow:auto;padding-right:4px}
.zn-f-list label{display:flex;align-items:center;gap:8px;font-size:var(--fs-sm);line-height:1.3;cursor:pointer}
.zn-f-list label span{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.zn-f-list small{color:var(--c-muted)}
.zn-f-actions{grid-column:1/-1;display:flex;align-items:center;gap:16px}
.zn-f-actions .btn{display:inline-flex;align-items:center;min-height:42px;padding:0 22px;border:0;border-radius:var(--r-pill);background:var(--c-primary);color:var(--c-on-primary);font:inherit;font-weight:600;font-size:var(--fs-ui);cursor:pointer}
.zn-f-actions .btn:hover{background:var(--c-primary-strong)}
.zn-f-reset{color:var(--c-muted);font-size:var(--fs-ui)}
@media(max-width:640px){.zn-tools{flex-direction:column;align-items:stretch}.zn-filters summary{width:100%;justify-content:center}.zn-filter-form{grid-template-columns:1fr;padding:14px}.zn-f-list{max-height:160px}}

/* the second cut of the lists (owner 08.10.2026: «Дизайн поганий»): a calmer page — a smaller heading and lead, chip rows
   without visible scrollbars, the filter button and the sort side by side on a phone, cards with one accent (the price
   in ink, the badge light blue), the saving muted, the shop's full name with a round arrow to the shop, the check mark
   only when it says something, the timer in the picture's top right. The rules below outrank the first cut by order. */
.zn-head{margin:14px 0 12px}
.zn-head h1{font-size:clamp(22px,2.6vw,32px);letter-spacing:-.5px;margin:0 0 6px}
.zn-lead{font-size:var(--fs-sm)}
.zn-bar{margin:0 0 8px}
.zn-chips{gap:6px;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;padding-bottom:0}
.zn-chips::-webkit-scrollbar{display:none}
.zn-chips a{min-height:36px;padding:0 12px;font-size:var(--fs-sm);gap:6px}
.zn-chips a small{font-size:11px}
.zn-genders{margin:0 0 10px}
.zn-tools{margin:0 0 14px}
.zn-filters summary{min-height:42px}
.zn-sort select{height:42px}
.zn-grid{gap:12px}
.zn-card{gap:5px;padding:10px;border-radius:14px}
.zn-pic{border-radius:10px;background:#fff;border:1px solid var(--c-line)}
.zn-pic img{padding:6%;box-sizing:border-box}
.zn-badge{left:6px;top:6px;padding:2px 7px;font-size:12px}
.zn-timer{left:auto;right:6px;top:6px;bottom:auto;padding:2px 7px;font-size:11px}
.zn-name{font-size:14px;line-height:1.3;min-height:2.6em;color:var(--c-ink)}
.zn-price{gap:6px}
.zn-price strong{font-size:18px;color:var(--c-ink);letter-spacing:-.2px}
.zn-price del{font-size:12px}
.zn-save{font-size:12px;font-weight:500;color:var(--c-muted)}
.zn-meta{margin-top:2px;padding-top:7px;border-top:1px solid var(--c-line);font-size:12px}
.zn-shop{flex:1 1 auto}
.zn-shop img{width:18px;height:18px;border-radius:5px}
.zn-out{display:inline-flex;align-items:center;gap:4px;font-weight:600;color:var(--c-primary)}
.zn-mark{border-top:0;padding-top:0;margin:0;font-size:12px}
@media(max-width:640px){
 .zn-head{margin:10px 0 8px}
 .zn-head h1{font-size:22px}
 .zn-grid{gap:8px}
 .zn-card{padding:8px;border-radius:12px}
 .zn-price strong{font-size:16px}
 .zn-out-text{display:none}
 .zn-out{flex:0 0 auto;width:28px;height:28px;justify-content:center;border:1px solid var(--c-line);border-radius:50%}
 .zn-tools{flex-direction:row;flex-wrap:wrap;align-items:stretch;gap:8px}
 .zn-filters{flex:1 1 calc(50% - 4px)}
 .zn-filters[open]{flex:1 1 100%}
 .zn-filters summary{width:100%;justify-content:center;min-height:42px}
 .zn-sort{flex:1 1 calc(50% - 4px)}
 .zn-sort select{width:100%;max-width:none;height:42px}
}

/* the site's base rule input{width:100%;padding:3px 0} (style.css) reached the checkboxes of the filter lists and left the names 18 px (owner's screenshot 08.10.2026, found by the blog session) */
.zn-f-list label input{flex:0 0 auto;width:18px;height:18px;margin:0;padding:0;accent-color:var(--c-primary)}

/* the applied filters above the goods and the loading state (owner 08.10.2026: «фільтр не закривається і я не розумію чи він примінився») */
.zn-active{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:-6px 0 14px;font-size:var(--fs-sm)}
.zn-active-lead{color:var(--c-muted)}
.zn-active-chip{display:inline-flex;align-items:center;gap:6px;min-height:32px;padding:0 10px;border-radius:var(--r-pill);background:var(--c-primary-soft);color:var(--c-primary);font-weight:600;text-decoration:none}
.zn-active-chip b{font-weight:400;font-size:15px;opacity:.75}
.zn-active-chip:hover{text-decoration:none;background:var(--c-primary);color:var(--c-on-primary)}
.zn-active-reset{margin-left:4px;color:var(--c-muted)}
.zn-filter-form[aria-busy="true"] .btn,.zn-sort.is-loading select{opacity:.6;pointer-events:none}

/* the open panel on a phone (owner 08.10.2026: «Коли жму кнопочку він має прилипнути до верхнього краю»): the button sticks to the top edge while the panel scrolls, the action row to the bottom edge */
.zn-filters summary{scroll-margin-top:8px}
.zn-filters[open] summary{position:sticky;top:8px;z-index:4;background:var(--c-surface);box-shadow:0 2px 10px rgba(16,24,40,.08)}
.zn-filters[open] .zn-f-actions{position:sticky;bottom:0;z-index:3;margin:0 -18px -16px;padding:12px 18px 14px;background:var(--c-surface);border-top:1px solid var(--c-line);border-radius:0 0 var(--r-lg) var(--r-lg)}
@media(max-width:640px){.zn-filters[open] .zn-f-actions{margin:0 -14px -14px;padding:10px 14px 12px}}

/* the filter panel as a pop-up (owner 08.10.2026: «Давай красивив Попапом відкривати краше»): the backdrop is the open details' ::before,
   the form a fixed box — centred on a desktop, a full-screen sheet on a phone; the summary stays an ordinary button (the sticky top of 1330Z goes) */
.zn-filters[open] summary{position:static;box-shadow:none;background:var(--c-surface)}
.zn-filters[open]::before{content:"";position:fixed;inset:0;z-index:998;background:rgba(16,24,40,.45)}
.zn-filters[open] .zn-filter-form{position:fixed;z-index:999;top:50%;left:50%;transform:translate(-50%,-50%);width:min(920px,calc(100% - 32px));max-height:90vh;overflow:auto;margin:0;padding:0 22px 0;box-shadow:0 24px 60px rgba(16,24,40,.25);border-radius:var(--r-lg)}
.zn-f-head{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:2;margin:0 -22px;padding:14px 22px;background:var(--c-surface);border-bottom:1px solid var(--c-line)}
.zn-f-head b{font-size:var(--fs-lg)}
.zn-f-close{width:36px;height:36px;border:0;border-radius:50%;background:var(--c-surface-muted);color:var(--c-ink);font-size:22px;line-height:1;cursor:pointer}
.zn-f-close:hover{background:var(--c-line)}
.zn-filters[open] .zn-f-actions{position:sticky;bottom:0;z-index:2;margin:0 -22px;padding:12px 22px 14px;background:var(--c-surface);border-top:1px solid var(--c-line);border-radius:0}
body.zn-modal-open{overflow:hidden}
@media(max-width:640px){
 .zn-filters[open] .zn-filter-form{top:0;left:0;transform:none;width:100%;max-height:100vh;max-height:100dvh;height:100dvh;border-radius:0;padding:0 14px}
 .zn-f-head{margin:0 -14px;padding:12px 14px}
 .zn-filters[open] .zn-f-actions{margin:0 -14px;padding:10px 14px 12px}
}
/* the shop on a card, bigger (owner 08.10.2026: «На кортках не зрозуміло ща за магазин. Треба більш крупно») */
.zn-meta{font-size:13px;padding-top:8px}
.zn-shop{gap:8px}
.zn-shop img{width:24px;height:24px;border-radius:6px}
.zn-shop span{font-weight:600;color:var(--c-ink)}
a.zn-shop:hover span{color:var(--c-primary)}

/* «Хто продавець» (owner 08.10.2026): the seller's card under the price with the rating and the reviews from the catalogue card;
   on a phone it stands between the buttons and the price history */
/* «Хто продавець» (owner 08.10.2026, the evening: «Покращити дизайн»): the logo in a white tile, the name as the link to the
   card, the kind under it; the stars (filled by the rating), the rating and the reviews as one warm chip; the links to
   the card and to the shop's other discounts of the topic. On a phone the section is its own card under the buttons. */
.znp-seller{margin:16px 0 0;padding:16px 0 0;border-top:1px solid var(--c-line)}
.znp-seller h2{margin:0 0 12px;font-size:12px;font-weight:600;color:var(--c-muted);letter-spacing:.4px;text-transform:uppercase}
.znp-seller-row{display:flex;align-items:center;gap:14px;min-width:0}
.znp-seller-logo{display:flex;align-items:center;justify-content:center;flex:0 0 auto;width:60px;height:60px;padding:5px;border:1px solid var(--c-line);border-radius:14px;background:#fff;box-sizing:border-box;text-decoration:none}
.znp-seller-logo img{display:block;width:100%;height:100%;object-fit:contain;border-radius:8px}
.znp-seller-letter{display:flex;align-items:center;justify-content:center;width:100%;height:100%;border-radius:8px;font-weight:700;font-size:22px;color:var(--c-primary);background:var(--c-primary-soft)}
.znp-seller-text{display:flex;flex-direction:column;gap:3px;min-width:0}
.znp-seller-name{font-size:var(--fs-lg);font-weight:700;line-height:1.2;color:var(--c-ink);letter-spacing:-.2px;text-decoration:none;overflow:hidden;text-overflow:ellipsis}
a.znp-seller-name:hover{color:var(--c-primary);text-decoration:none}
.znp-seller-kind{font-size:var(--fs-sm);color:var(--c-muted);line-height:1.3}
.znp-seller-rating{display:inline-flex;align-items:center;gap:8px;max-width:100%;margin:12px 0 0;padding:7px 12px;border-radius:var(--r-pill);background:#fff7e6;color:var(--c-ink);font-size:var(--fs-ui);line-height:1.2;text-decoration:none}
.znp-seller-rating:hover{background:#ffefcc;text-decoration:none}
.znp-seller-rating strong{font-weight:700}
.znp-seller-rating span:last-child{color:var(--c-muted)}
.znp-stars{position:relative;display:inline-block;font-size:15px;line-height:1;letter-spacing:1px;color:#e4dccb;white-space:nowrap}
.znp-stars::before{content:"★★★★★";position:absolute;left:0;top:0;width:var(--fill,0%);overflow:hidden;color:#f59e0b;white-space:nowrap}
.znp-seller-rating.is-empty{background:var(--c-surface-muted)}
.znp-seller-rating.is-empty span:last-child{color:var(--c-primary);font-weight:600}
.znp-seller-links{display:flex;flex-wrap:wrap;gap:6px 18px;margin:12px 0 0;font-size:var(--fs-sm)}
.znp-seller-links a{color:var(--c-primary);font-weight:600;text-decoration:none}.znp-seller-links a:hover{text-decoration:underline}
@media(max-width:900px){.znp-seller{order:3;margin:0;padding:14px;border:1px solid var(--c-line);border-radius:var(--r-md);background:var(--c-surface)}.znp-history{order:4}}