/* Витрина Листары (25.10.2026, сессия S084): плитки ниш, лента листов примера и просмотр готового прайса на весь экран.
   Подключают главная и страницы ниш (например konditer.html) вместе с lib/vitrina.js. Цвета страницы (--ink, --paper, --sb) - из её стилей. */

/* плитки ниш - как экран выбора ниши в конструкторе; цвета каждой плитки ставит конструктор (их переносит primery-publish.js) */
.niches{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:30px}
.niches button{position:relative;border:0;cursor:pointer;font:inherit;font-size:14.5px;font-weight:600;line-height:1.22;background:var(--tbg);color:var(--ttx);border-radius:22px;padding:13px 14px 12px;min-height:94px;display:flex;flex-direction:column;justify-content:space-between;align-items:flex-start;gap:10px;text-align:left;box-shadow:0 0 0 1px rgba(31,28,26,.06) inset;transition:transform .14s ease,box-shadow .16s}
.niches button:active{transform:scale(.96)}
.niches button[data-niche="other"]{background:var(--paper);color:var(--ink);box-shadow:0 0 0 1.5px #cdc3b6 inset}
.niches button.picked{transform:scale(.96);box-shadow:0 0 0 3px var(--tac) inset}
.niches button.wide{grid-column:1/-1}
.niches .ic{display:grid;place-items:center;flex:none;color:var(--tac);--tone:var(--ttn)}
.niches .ic svg{display:block;width:34px;height:34px}
.niches .ic .f{fill:var(--tone);stroke:none}
@media (hover:hover){.niches button:hover{box-shadow:0 0 0 2px var(--tac) inset}.niches button[data-niche="other"]:hover{box-shadow:0 0 0 2px var(--ink) inset}}
@media (max-width:350px){.niches button{font-size:13.5px;padding:12px 12px 11px}}
@media (min-width:600px){.niches{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.niches button{min-height:112px;padding:16px 16px 14px}}
@media (min-width:960px){.niches{grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}.niches button{min-height:132px;font-size:15.5px;padding:18px 18px 16px}.niches .ic svg{width:42px;height:42px}}

/* лента листов примера на странице ниши: нажатие открывает лист на весь экран */
.vw-rail figure{cursor:pointer}
.vw-rail figure:active img{transform:scale(.98)}
.vw-rail img{transition:transform .15s ease}

/* просмотр готового прайса: на весь экран, листы листаются пальцем, на компьютере ещё стрелками и клавишами */
.vw{position:fixed;inset:0;z-index:60;background:#1a1816;color:#fff;display:flex;flex-direction:column;visibility:hidden;opacity:0;transition:opacity .22s ease,visibility 0s linear .22s}
.vw.on{visibility:visible;opacity:1;transition:opacity .22s ease}
html.vw-on,html.vw-on body{overflow:hidden}
.vw-top{display:flex;align-items:center;gap:12px;padding:calc(10px + env(safe-area-inset-top,0px)) 12px 8px 20px}
.vw-ttl{flex:1;min-width:0}
.vw-ttl b{display:block;font-family:"Cormorant Garamond",Georgia,serif;font-size:26px;font-weight:600;line-height:1.05;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vw-ttl small{display:block;font-size:12.5px;color:#b9b0a6;margin-top:3px;font-variant-numeric:tabular-nums}
.vw-x{flex:none;width:44px;height:44px;border-radius:50%;border:0;background:rgba(255,255,255,.1);color:#fff;display:grid;place-items:center;cursor:pointer}
.vw-x svg,.vw-arr svg{width:20px;height:20px}
.vw-tabs{display:flex;gap:8px;padding:2px 20px 10px;overflow-x:auto;scrollbar-width:none}
.vw-tabs::-webkit-scrollbar{display:none}
.vw-tabs[hidden]{display:none}
.vw-tabs button{flex:none;border:0;border-radius:999px;padding:9px 15px;background:rgba(255,255,255,.09);color:#d9d1c7;font:600 13.5px/1 Manrope,Arial,sans-serif;cursor:pointer}
.vw-tabs button[aria-pressed="true"]{background:#fff;color:var(--ink)}
.vw-stage{position:relative;flex:1;min-height:0}
.vw-track{position:absolute;inset:0;display:flex;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-width:none;outline:0}
.vw-track::-webkit-scrollbar{display:none}
.vw-sl{flex:none;width:100%;height:100%;display:grid;place-items:center;scroll-snap-align:center;scroll-snap-stop:always}
.vw-sh{border-radius:14px;overflow:hidden;background:rgba(255,255,255,.07);box-shadow:0 0 0 1px rgba(255,255,255,.16)}
.vw-sh img{width:100%;height:100%;max-width:none}
.vw-none{margin:auto;max-width:300px;text-align:center;color:#d9d1c7;font-size:15px;padding:0 20px}
.vw-arr{display:none}
.vw-bot{padding:10px 20px calc(14px + var(--sb,0px));display:flex;justify-content:center}
.vw-bot .btn{width:100%;max-width:420px}
@media (min-width:900px){
  .vw-top,.vw-tabs{padding-left:40px;padding-right:32px}
  .vw-arr{display:grid;place-items:center;position:absolute;top:50%;z-index:2;width:52px;height:52px;margin-top:-26px;border-radius:50%;border:0;background:rgba(255,255,255,.12);color:#fff;cursor:pointer}
  .vw-arr[disabled]{opacity:.25;cursor:default}
  .vw-prev{left:32px}.vw-next{right:32px}
}