/* fylladio.ai store page (/store/<store>) — every rule scoped under .st; the only global selector is none */
.st{
  --bg:#080808;--surface:#111;--surface2:#1a1a1a;--line:#222;--line2:#2d2f2a;
  --text:#f0f0f0;--text2:#c7c9c2;--muted:#8e918a;--faint:#62655e;
  --accent:#b5f23d;--ink:#0c0f05;--accent-dim:rgba(181,242,61,.12);
  --store:#e30613;--warn:#ffb547;--fake:#ff7a5c;
  --sans:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --g:16px;--cat-w:clamp(104px,30vw,140px);
  color:var(--text);font:400 15px/1.5 var(--sans);-webkit-font-smoothing:antialiased;
}
.st [hidden]{display:none!important}
.st a{color:inherit}
.st button{font:inherit;color:inherit;background:none;border:0;padding:0;margin:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
.st :focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px}
.st .wrap{max-width:760px;margin:0 auto;padding-inline:var(--g)}
.st .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.st .crumbs{padding-top:10px;font:400 12px/1.4 var(--mono);color:var(--faint)}
.st .crumbs a{color:var(--muted);text-decoration:none}

/* ---------- hero */
.st .hero{padding-block:14px 0}
.st .kicker{display:flex;align-items:center;flex-wrap:wrap;gap:8px;font:500 11px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.st .kicker .dot{width:9px;height:9px;border-radius:3px;background:var(--store)}
.st h1{font:800 clamp(30px,8.4vw,46px)/1.05 var(--sans);letter-spacing:-.03em;margin:10px 0 4px;text-wrap:balance}
.st .lede{margin:0;font:600 clamp(17px,4.6vw,21px)/1.3 var(--sans);letter-spacing:-.012em;color:var(--text);max-width:36ch;text-wrap:balance}
.st .lede span{color:var(--accent)}
.st .answer{font-size:15px;line-height:1.62;color:var(--text2);margin:14px 0 0;max-width:64ch}
.st .answer strong{color:var(--text);font-weight:600}
.st .answer .hi{color:var(--accent);font-weight:600}
.st .facts{display:flex;flex-wrap:wrap;gap:6px 8px;margin:14px 0 0;padding:0;list-style:none}
.st .facts li{font:500 12px/1 var(--mono);color:var(--text2);padding:7px 9px;border-radius:8px;background:var(--surface);box-shadow:inset 0 0 0 1px var(--line2)}
.st .facts li b{color:var(--text);font-weight:700}
.st .facts li.r b{color:var(--accent)}
.st .facts li.w b,.st .answer .warn{color:var(--warn);font-weight:600}
.st .nw{white-space:nowrap}

/* search with the cat sitting on it */
.st .searchw{position:relative;margin-top:calc(var(--cat-w) * .8 + 10px)}
.st .search{position:relative}
.st .search svg{position:absolute;left:14px;top:50%;translate:0 -50%;color:var(--muted);pointer-events:none}
.st .search input{width:100%;box-sizing:border-box;height:52px;border-radius:14px;border:1px solid var(--line2);background:var(--surface);color:var(--text);font:16px var(--sans);padding:0 14px 0 44px;-webkit-appearance:none;appearance:none}
.st .search input::placeholder{color:var(--faint)}
.st .results{margin-top:10px}
.st .results .status{font:400 12px var(--mono);color:var(--muted);margin:0 2px 4px}

/* flyer card */
.st .flyer{display:grid;grid-template-columns:62px minmax(0,1fr) auto;gap:14px;align-items:center;margin-top:16px;padding:12px;border-radius:14px;background:var(--surface);box-shadow:inset 0 0 0 1px var(--line2);text-decoration:none}
.st .flyer img{width:62px;height:auto;aspect-ratio:.7496;object-fit:cover;border-radius:5px;display:block;box-shadow:0 0 0 1px rgba(255,255,255,.08)}
.st .flyer .t{font:650 15px/1.25 var(--sans)}
.st .flyer .s{font:400 12px/1.4 var(--mono);color:var(--muted);margin-top:4px}
.st .flyer .s b{color:var(--accent);font-weight:600}
.st .flyer .go{font:600 13px var(--sans);color:var(--accent);white-space:nowrap}
.st .flyer:hover{box-shadow:inset 0 0 0 1.5px var(--accent)}

/* ---------- sections */
.st .blk{padding-top:40px}
.st .sh{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.st h2{font:760 22px/1.15 var(--sans);letter-spacing:-.022em;margin:0;text-wrap:balance}
.st h2 .n{font:500 13px var(--mono);color:var(--muted);letter-spacing:0;margin-left:6px}
.st .why{margin:6px 0 10px;font-size:13.5px;line-height:1.5;color:var(--muted);max-width:62ch}
.st .more{margin-top:10px;font:600 13px var(--sans);color:var(--accent)}
.st .list:not(.open) .x{display:none}

/* rows */
.st .rows{list-style:none;margin:0;padding:0}
.st .row{position:relative;display:grid;grid-template-columns:48px minmax(0,1fr) auto;column-gap:12px;align-items:start;padding:12px 0;border-bottom:1px solid var(--line)}
/* product thumbnails: a white tile, as the product photos are shot on white; the eye badge marks a real deal */
.st .th{position:relative;display:block;width:48px;height:48px;border-radius:10px;background:#fff}
.st .th img{display:block;width:100%;height:100%;object-fit:contain;border-radius:inherit}
.st .th.ph{background:transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2362655e' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 8h14l-1 12H6L5 8z'/%3E%3Cpath d='M9 8V6a3 3 0 0 1 6 0v2'/%3E%3C/svg%3E") center/18px no-repeat;box-shadow:inset 0 0 0 1px var(--line2)}
.st .th fylladio-eye{position:absolute;right:-7px;bottom:-6px;padding:3px 3px 2px;border-radius:8px;background:var(--bg)}
.st .row[data-verdict=real]::before{content:"";position:absolute;left:-11px;top:14px;bottom:14px;width:3px;border-radius:2px;background:var(--accent)}
.st .br{position:relative;z-index:1;font:650 15px/1.38 var(--sans);text-decoration:none}
.st .nm{font:400 15px/1.38 var(--sans);text-decoration:none}
.st .nm::after{content:"";position:absolute;inset:0}
.st .nm:hover,.st a.br:hover{text-decoration:underline;text-decoration-color:var(--faint);text-underline-offset:3px}
.st .meta{display:flex;flex-wrap:wrap;align-items:center;gap:4px 9px;margin-top:5px;font:400 12px/1.35 var(--mono);color:var(--muted)}
.st .v90{color:var(--accent);font-weight:600}
.st .tag{padding:1px 5px;border-radius:5px;box-shadow:inset 0 0 0 1px var(--line2);color:var(--text2)}
.st .own{padding:1px 5px;border-radius:5px;background:rgba(227,6,19,.16);color:#ff8a92;font-weight:600}
.st .src{position:relative;z-index:1;text-decoration:none;white-space:nowrap}
.st a.src{color:var(--text2);box-shadow:inset 0 0 0 1px var(--line2);padding:1px 6px;border-radius:5px}
.st a.src:hover{box-shadow:inset 0 0 0 1px var(--accent);color:var(--text)}
.st .good{color:var(--accent);font-weight:600}
.st .bad{color:var(--warn)}
.st .p{display:flex;flex-direction:column;align-items:flex-end;gap:5px;text-align:right}
.st .price{font:700 17px/1.2 var(--mono);letter-spacing:-.035em;white-space:nowrap;font-variant-numeric:tabular-nums}
.st .row[data-verdict=real] .price{color:var(--accent)}
.st .gap{font:700 12.5px/1 var(--mono);color:var(--ink);background:var(--accent);padding:4px 6px;border-radius:6px;white-space:nowrap}

/* swap cards (cheaper alternatives) */
.st .swaps{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:10px}
@media (min-width:700px){.st .swaps{grid-template-columns:1fr 1fr}}
.st .swap{border-radius:14px;background:var(--surface);box-shadow:inset 0 0 0 1px var(--line2);padding:12px 14px;display:grid;gap:8px}
.st .swap .from,.st .swap .to{display:grid;grid-template-columns:40px minmax(0,1fr) auto;gap:10px;align-items:center}
.st .swap .th{width:40px;height:40px;border-radius:8px}
.st .swap .from .th{opacity:.7}
.st .swap .from a,.st .swap .to a{text-decoration:none;font-size:14px;line-height:1.35}
.st .swap .from a{color:var(--text2)}
.st .swap .to a{font-weight:600}
.st .swap .u{font:600 13px var(--mono);white-space:nowrap}
.st .swap .from .u{color:var(--muted);text-decoration:line-through;text-decoration-color:var(--faint)}
.st .swap .to .u{color:var(--accent)}
.st .swap .arrow{display:flex;align-items:center;gap:8px;font:600 11.5px var(--mono);color:var(--accent)}
.st .swap .arrow::before{content:"";flex:none;width:18px;height:1px;background:var(--accent)}
.st .swap .where{font:400 11.5px var(--mono);color:var(--muted)}
.st .swap .where b{color:var(--text2);font-weight:600}
.st .swap.x{display:none}
.st .list.open .swap.x{display:grid}

/* demand tiles */
.st .tiles{list-style:none;margin:8px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
@media (min-width:640px){.st .tiles{grid-template-columns:repeat(3,minmax(0,1fr))}}
.st .tile{display:block;height:100%;box-sizing:border-box;padding:12px;border-radius:12px;background:var(--surface);box-shadow:inset 0 0 0 1px var(--line2);text-decoration:none}
.st .tile:hover{box-shadow:inset 0 0 0 1.5px var(--accent)}
.st .tile .t{font:650 15px/1.2 var(--sans);display:flex;justify-content:space-between;gap:6px}
.st .tile .t span{font:500 12px var(--mono);color:var(--muted)}
.st .tile .b{margin-top:8px;font:700 16px/1.1 var(--mono);letter-spacing:-.02em}
.st .tile .b small{font:400 11px var(--mono);color:var(--muted);letter-spacing:0}
.st .tile .c{margin-top:6px;display:flex;flex-direction:column;gap:1px;font:400 11.5px/1.4 var(--mono);color:var(--muted)}
.st .tile .c span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.st .tile .c b{color:var(--accent);font-weight:600}

/* category directory */
.st .cat{scroll-margin-top:16px}
.st h3{display:flex;justify-content:space-between;align-items:baseline;gap:10px;font:650 16px/1.3 var(--sans);letter-spacing:-.01em;margin:26px 0 0;padding-bottom:9px;border-bottom:1px solid var(--line)}
.st h3 a{font:600 12.5px var(--sans);color:var(--accent);text-decoration:none;white-space:nowrap}
.st .chips{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding:10px 0 2px;margin:0}
.st .chips::-webkit-scrollbar{display:none}
.st .chips.wrap{flex-wrap:wrap;overflow:visible}
.st .chip{flex:none;display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 12px;border-radius:999px;background:var(--surface);box-shadow:inset 0 0 0 1px var(--line2);font:500 13px var(--sans);color:var(--text2);white-space:nowrap;text-decoration:none}
.st .chip .n{font:500 11.5px var(--mono);color:var(--muted)}
.st .all{margin-top:18px;font:600 13.5px var(--sans)}
.st .all a{color:var(--accent);text-decoration:none}

/* category pages (/store/<store>/<key>): best-value card, price ladder per unit, other chains */
.st .bestc{position:relative;display:grid;grid-template-columns:88px minmax(0,1fr);gap:16px;align-items:center;margin-top:10px;padding:16px;border-radius:16px;background:var(--surface);box-shadow:inset 0 0 0 1.5px var(--accent)}
.st .bestc .th{width:88px;height:88px;border-radius:14px}
.st .bestc .k{font:500 11px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
.st .bestc .u{margin-top:8px;font:700 clamp(26px,7vw,34px)/1 var(--mono);letter-spacing:-.04em;color:var(--accent);font-variant-numeric:tabular-nums}
.st .bestc .u small{font:500 14px var(--mono);color:var(--muted);letter-spacing:0}
.st .bestc .n{margin-top:8px;font:500 15px/1.35 var(--sans)}
.st .bestc .n a{text-decoration:none}
.st .bestc .n a::after{content:"";position:absolute;inset:0}
.st .ladder .p{gap:3px}
.st .ladder .price small{font:500 11.5px var(--mono);color:var(--muted);letter-spacing:0}
.st .ladder .pk{font:400 11.5px var(--mono);color:var(--muted);white-space:nowrap}
.st .bar{display:block;height:4px;margin-top:9px;max-width:240px;border-radius:2px;background:var(--line)}
.st .bar i{display:block;height:100%;border-radius:inherit;background:var(--faint)}
.st .row.top .bar i{background:var(--accent)}
.st .chains{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.st .chain{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 12px 0 6px;border-radius:12px;background:var(--surface);box-shadow:inset 0 0 0 1px var(--line2);font:500 13.5px var(--sans);color:var(--text2);text-decoration:none}
.st .chain img{display:block;width:28px;height:28px;border-radius:7px}
.st .chain:hover{box-shadow:inset 0 0 0 1.5px var(--accent);color:var(--text)}

/* methodology + faq + sources */
.st .method p,.st .faq details p{color:var(--text2);font-size:14.5px;line-height:1.6;max-width:64ch;margin:0 0 12px}
.st .legend{display:flex;flex-wrap:wrap;gap:8px 18px;margin:6px 0 0;font:400 12.5px var(--sans);color:var(--muted)}
.st .legend span{display:inline-flex;align-items:center;gap:8px}
.st .faq details{border-bottom:1px solid var(--line)}
.st .faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:flex-start;gap:14px;padding:15px 0;font:600 15.5px/1.4 var(--sans)}
.st .faq summary::-webkit-details-marker{display:none}
.st .faq summary::after{content:"+";font:400 20px/1.1 var(--mono);color:var(--muted);transition:transform .2s}
.st .faq details[open] summary::after{transform:rotate(45deg)}
.st .sources{margin-top:44px;padding-block:22px 44px;border-top:1px solid var(--line);font:400 12px/1.65 var(--mono);color:var(--muted)}
.st .sources b{color:var(--text2);font-weight:500}
@media (prefers-reduced-motion:reduce){.st *,.st *::before,.st *::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}
