/* Steps-to-snacks page: step ring, shelves, brand picker and pack graphics */
.hero{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:14px;align-items:center}
.ring{position:relative;width:128px;height:128px}
.ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.ring .rt{fill:none;stroke:var(--accent-soft);stroke-width:11}
.ring .rp{fill:none;stroke:var(--accent);stroke-width:11;stroke-linecap:round;transition:stroke-dashoffset 1s cubic-bezier(.2,.8,.2,1)}
.ring .rl{position:absolute;inset:0;display:grid;place-content:center;text-align:center}
.ring .rl b{font:900 28px var(--display);line-height:1;font-variant-numeric:tabular-nums}
.ring .rl span{font-size:11px;color:var(--muted)}
.ring.done .rp{stroke:var(--good)}
.ring.celebrate{animation:burst 1.1s cubic-bezier(.3,1.5,.5,1)}
@keyframes burst{30%{transform:scale(1.12)}60%{transform:scale(.97)}}
.badge{display:inline-block;font-size:11px;font-weight:700;color:var(--good);margin-top:3px}
.acts{display:grid;gap:10px}
.sec-h{display:flex;justify-content:space-between;align-items:end;gap:16px;flex-wrap:wrap;margin:48px 0 22px}
.mkt{font-size:13px;color:var(--muted)}
/* row 1: overview strip of every category */
.dock{display:flex;gap:8px;overflow-x:auto;padding:4px 2px 12px;margin-bottom:6px;scroll-snap-type:x proximity;scrollbar-width:none;overscroll-behavior-x:contain}
.dock::-webkit-scrollbar{display:none}
.tile{flex:0 0 auto;width:104px;display:grid;justify-items:center;gap:4px;padding:10px 6px 9px;border-radius:18px;border:1px solid var(--line);background:var(--surface);color:var(--ink);cursor:pointer;font:inherit;scroll-snap-align:start;transition:transform .25s cubic-bezier(.3,1.4,.5,1),border-color .2s,box-shadow .2s}
.tile:hover{transform:translateY(-3px)}
.tile.on{border-color:var(--c);box-shadow:0 0 0 3px color-mix(in srgb,var(--c) 18%,transparent)}
.tile .tp{height:46px;display:grid;place-items:end center}
.tile .tp svg{width:28px;height:auto;overflow:visible}
.tile .tn{display:flex;align-items:center;gap:4px;font-size:11.5px;font-weight:600;color:var(--muted);white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.tile .tn .ic{width:13px;height:13px;color:var(--c)}
.tile .tv{font:900 20px var(--display);color:var(--c);font-variant-numeric:tabular-nums;line-height:1}
/* row 2: swipeable carousel of full cards */
.carousel{position:relative}
.shelves{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 2 * 18px) / 3);gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:0;padding:6px 2px 16px;scrollbar-width:none;overscroll-behavior-x:contain}
.shelves::-webkit-scrollbar{display:none}
.shelves:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:var(--r)}
@media (max-width:1100px){.shelves{grid-auto-columns:calc((100% - 18px) / 2)}}
@media (max-width:700px){.shelves{grid-auto-columns:88%;gap:12px}}
.shelves>.shelf{scroll-snap-align:start}
.shelf.flash{animation:flash 1s ease}
@keyframes flash{30%{box-shadow:0 0 0 4px color-mix(in srgb,var(--c) 45%,transparent),0 8px 28px var(--shadow)}}
.cnav{position:absolute;top:44%;z-index:3;width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:var(--surface);color:var(--ink);display:grid;place-items:center;cursor:pointer;box-shadow:0 8px 24px var(--shadow);transition:opacity .2s,transform .2s}
.cnav:hover:not(:disabled){transform:scale(1.08)}
.cnav:disabled{opacity:0;pointer-events:none}
.cnav.prev{inset-inline-start:-14px}.cnav.next{inset-inline-end:-14px}
html[dir="rtl"] .cnav svg{transform:scaleX(-1)}
@media (max-width:700px){.cnav{display:none}}
.dots{display:flex;justify-content:center;gap:6px;margin-top:4px;flex-wrap:wrap}
.dots button{width:8px;height:8px;border-radius:99px;border:0;padding:0;background:var(--line);cursor:pointer;transition:width .3s,background .3s}
.dots button.on{width:22px;background:var(--c)}
.swipe{font-size:12.5px;color:var(--muted);margin:0 0 10px}
.shelf{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:18px;display:flex;flex-direction:column;gap:12px;min-width:0;box-shadow:0 1px 2px var(--shadow),0 8px 28px var(--shadow)}
.shelf-h .seg{padding:2px}.shelf-h .seg button{padding:5px 10px;font-size:12.5px}
.srcnote{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:12px;color:var(--muted);margin:-2px 0 0}
.srcnote .ic{width:14px;height:14px}
.srcnote .ghost{font-size:12px;margin-inline-start:auto}
.shelf-h{display:flex;justify-content:space-between;align-items:center;gap:10px}
.shelf-h h3{margin:0;min-width:0;font-family:var(--display);font-weight:900;font-size:clamp(20px,2vw,26px);text-transform:uppercase;letter-spacing:.03em;color:var(--c);line-height:1}
.shelf-h h3 .ic{width:22px;height:22px}
.shelf-h>span{font-size:12.5px;color:var(--muted)}
.combo{position:relative}
.combo-btn{width:100%;display:flex;justify-content:space-between;align-items:center;gap:10px;font:inherit;text-align:start;padding:11px 12px;border:1px solid transparent;border-radius:12px;background:var(--surface2);color:var(--ink);cursor:pointer}
.combo-btn:hover{border-color:var(--c)}
.combo-btn .cur{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.combo-btn small{color:var(--muted);font-size:12.5px;margin-inline-start:6px}
.combo-btn[aria-expanded="true"] svg{transform:rotate(180deg)}
.pop{position:absolute;z-index:30;inset-inline:0;top:calc(100% + 6px);background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:0 18px 50px var(--shadow);padding:8px;display:flex;flex-direction:column;gap:6px}
.pop input{font-size:15px;padding:9px 11px}
.pop ul{list-style:none;margin:0;padding:0;max-height:300px;overflow-y:auto}
.pop li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 10px;padding:8px 10px;border-radius:9px;cursor:pointer}
.pop li[aria-selected="true"]{box-shadow:inset 3px 0 0 var(--c)}
.pop li.act-o,.pop li:hover{background:var(--hover)}
.pop .on{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pop .om{font-size:12px;color:var(--muted)}
.pop .ox{grid-row:span 2;align-self:center;font-family:var(--display);font-weight:800;font-size:20px;color:var(--c);font-variant-numeric:tabular-nums}
.pop .none{padding:10px;color:var(--muted);font-size:13.5px;cursor:default}
.stage{border-radius:16px;padding:20px 12px 12px;min-height:240px;display:flex;flex-direction:column;gap:10px;background:var(--surface2);background:radial-gradient(ellipse 75% 70% at 50% 100%,color-mix(in srgb,var(--c) 24%,transparent),transparent 70%),var(--surface2)}
.feat{display:flex;justify-content:center;align-items:flex-end;flex-wrap:wrap;gap:6px 0;min-height:186px}
.feat svg{width:104px;height:auto;overflow:visible;flex:0 0 auto;transition:transform .35s cubic-bezier(.3,1.4,.5,1);animation:pop .55s cubic-bezier(.3,1.4,.5,1) both}
.feat svg:nth-child(2){animation-delay:.05s}.feat svg:nth-child(3){animation-delay:.1s}.feat svg:nth-child(4){animation-delay:.15s}.feat svg:nth-child(5){animation-delay:.2s}.feat svg:nth-child(6){animation-delay:.25s}
.feat.many svg{width:70px}
.feat svg:hover{transform:translateY(-6px) rotate(-3deg)}
.more{font-family:var(--display);font-weight:900;font-size:24px;color:var(--c);align-self:center;padding:0 8px}
.verdict{text-align:center}
.verdict b{display:block;font-family:var(--display);font-weight:900;font-size:40px;line-height:1;color:var(--c);font-variant-numeric:tabular-nums}
.verdict b small{font-size:.55em;margin-inline-start:4px}
.verdict span{font-size:13px;color:var(--muted)}
.rail{display:flex;gap:2px;overflow-x:auto;overscroll-behavior-x:contain;padding:4px 2px 0;border-bottom:6px solid var(--ledge);border-radius:0 0 6px 6px;scroll-snap-type:x proximity;scrollbar-width:thin}
.mini{flex:0 0 auto;width:82px;display:grid;justify-items:center;align-content:end;gap:3px;padding:8px 4px 6px;border:1px solid transparent;border-bottom:0;border-radius:12px 12px 0 0;background:transparent;color:var(--ink);cursor:pointer;font:inherit;scroll-snap-align:start}
.mini svg{width:42px;height:auto;overflow:visible;transition:transform .3s cubic-bezier(.3,1.4,.5,1)}
.mini:hover svg{transform:translateY(-5px)}
.mini[aria-pressed="true"]{background:var(--surface2);border-color:var(--line)}
.mini .mn{font-size:11px;line-height:1.25;text-align:center;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.5em}
.mini .mx{font:800 17px var(--display);color:var(--c);font-variant-numeric:tabular-nums}
.empty-shape{fill:var(--empty);stroke:var(--line);stroke-width:1.2}
.outline{fill:none;stroke:var(--c);stroke-width:1.6;opacity:.6}
.fill{fill:var(--c);transform-box:fill-box;transform-origin:50% 100%;transform:scaleY(0);transition:transform 1s cubic-bezier(.2,.8,.2,1)}
.shine{fill:#fff;opacity:.16}
.burnline{transition:transform 1s cubic-bezier(.2,.8,.2,1)}
.burnline line{stroke:var(--ink);stroke-width:1.5;stroke-dasharray:4 3}
.tick{stroke:var(--muted);stroke-width:1}
.ticktxt{fill:var(--muted);font:600 9px var(--body)}
.brand{font-family:var(--display);font-weight:900;fill:var(--ink);opacity:.85;font-variant-numeric:tabular-nums}